-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add FontSizePicker component and refactor paragraph block to use it. #6618
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it safe to remove this check?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it is safe to remove this check. And I think, we should remove it. If we have set of font sizes now, and later we change the set we should probably keep using the same classes as before we should not remove the class just because we changed the set of FONT_SIZES. This will be changed again in #6628 when this logic is abstracted and removed from the paragraph.