-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add FontSizePicker component and refactor paragraph block to use it. (#…
…6618) This change makes font size UI generic and allows other blocks to take advantage of the same UI used in the paragraph. Other changes will follow that will abstract other font size logic from paragraph (not just the UI). Themes will also be able to configure the font sizes. The future changes will use this work.
- Loading branch information
1 parent
13d2cb8
commit f961832
Showing
5 changed files
with
158 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
FontSizePicker | ||
======== | ||
|
||
FontSizePicker is a React component that renders a UI that allows users to select a font size. | ||
The component renders a series of buttons that allow the user to select predefined (common) font sizes and contains a range slider that enables the user to select custom font sizes (by choosing the value. | ||
|
||
## Usage | ||
|
||
|
||
```jsx | ||
import { Dropdown } from '@wordpress/components'; | ||
|
||
function MyFontSizePicker() { | ||
return ( | ||
<FontSizePicker | ||
fontSizes={ [ | ||
{ shortName: 'S', size: 12 } | ||
{ shortName: 'M', size: 16 } | ||
] } | ||
fallbackFontSize={ fallbackFontSize } | ||
value={ fontSize } | ||
onChange={ this.setFontSize } | ||
/> | ||
); | ||
} | ||
``` | ||
|
||
## Props | ||
|
||
The component accepts the following props: | ||
|
||
### fontSizes | ||
|
||
An array of font size objects. The object should contain properties size, name, shortName. | ||
The property "size" contains a number with the font size value. The "shortName" property includes a small label used in the buttons. Property "name" is used as the label when shortName is not provided. | ||
|
||
- Type: `Array` | ||
- Required: No | ||
|
||
### fallbackFontSize | ||
|
||
In no value exists this prop contains the font size picker slider starting position. | ||
|
||
- Type: `Number` | ||
- Required: No | ||
|
||
### value | ||
|
||
The current font size value. If a button value matches the font size value that button is pressed. RangeControl is rendered with this value. | ||
|
||
- Type: `Number` | ||
- Required: No | ||
|
||
## onChange | ||
|
||
A function that receives the new font size value. | ||
If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font size to undefined or set the font size a starting value. | ||
|
||
- Type: `function` | ||
- Required: Yes | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { map } from 'lodash'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Fragment } from '@wordpress/element'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import './style.scss'; | ||
import Button from '../button'; | ||
import ButtonGroup from '../button-group'; | ||
import RangeControl from '../range-control'; | ||
|
||
export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange } ) { | ||
return ( | ||
<Fragment> | ||
<div className="components-font-size-picker__buttons"> | ||
<ButtonGroup aria-label={ __( 'Font Size' ) }> | ||
{ map( fontSizes, ( { name, size, shortName } ) => ( | ||
<Button | ||
key={ size } | ||
isLarge | ||
isPrimary={ value === size } | ||
aria-pressed={ value === size } | ||
onClick={ () => onChange( size ) } | ||
> | ||
{ shortName || name } | ||
</Button> | ||
) ) } | ||
</ButtonGroup> | ||
<Button | ||
isLarge | ||
onClick={ () => onChange( undefined ) } | ||
> | ||
{ __( 'Reset' ) } | ||
</Button> | ||
</div> | ||
<RangeControl | ||
className="components-font-size-picker__custom-input" | ||
label={ __( 'Custom Size' ) } | ||
value={ value || '' } | ||
initialPosition={ fallbackFontSize } | ||
onChange={ onChange } | ||
min={ 12 } | ||
max={ 100 } | ||
beforeIcon="editor-textcolor" | ||
afterIcon="editor-textcolor" | ||
/> | ||
</Fragment> | ||
); | ||
} |
4 changes: 2 additions & 2 deletions
4
core-blocks/paragraph/editor.scss → components/font-size-picker/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters