Block Support: Add font style and weight options with combined UI #26444
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { CustomSelectControl } from '@wordpress/components'; | ||
| import { useMemo } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Control to display unified font style and weight options. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {Object} props.value Currently selected combination of font style and weight. | ||
| * @param {Object} props.options Object containing weight and style options. | ||
| * @param {Function} props.onChange Handles selection change. | ||
| * @return {WPElement} Font appearance control. | ||
| */ | ||
| export default function FontAppearanceControl( { value, options, onChange } ) { | ||
| const { fontStyle, fontWeight } = value; | ||
| const { fontStyles = [], fontWeights = [] } = options; | ||
| const hasStylesOrWeights = fontStyles.length > 0 || fontWeights.length > 0; | ||
|
|
||
| // Map font styles and weights to select options. | ||
| const selectOptions = useMemo( () => { | ||
| const defaultCombo = { fontStyle: undefined, fontWeight: undefined }; | ||
| const combinedOptions = [ | ||
| { | ||
| key: 'default', | ||
| name: __( 'Default' ), | ||
| style: defaultCombo, | ||
| presetStyle: defaultCombo, | ||
| }, | ||
| ]; | ||
|
|
||
| fontStyles.forEach( ( { name: styleName, slug: styleSlug } ) => { | ||
| fontWeights.forEach( ( { name: weightName, slug: weightSlug } ) => { | ||
| combinedOptions.push( { | ||
| key: `${ weightSlug }-${ styleSlug }`, | ||
| name: | ||
| styleSlug === 'normal' | ||
| ? weightName | ||
| : `${ weightName } ${ styleName }`, | ||
|
There was a problem hiding this comment. I guess it may make sense to use sprintf and our translated function __ for i18n, depending on the locale it may make sense to change the order of weightName and styleName. |
||
| // style applies font appearance to the individual select option. | ||
| style: { fontStyle: styleSlug, fontWeight: weightSlug }, | ||
| // presetStyle are the actual typography styles that should be given to onChange. | ||
| presetStyle: { | ||
| fontStyle: `var:preset|font-style|${ styleSlug }`, | ||
| fontWeight: `var:preset|font-weight|${ weightSlug }`, | ||
|
There was a problem hiding this comment. The other control components with presets that we have: Don't handle the different ways a value should be stored, if a preset is used or not. They just receive a value, and a set of possible values (for UI purposes) and allow them to change the value. They are not aware of CSS vars etc.. |
||
| }, | ||
| } ); | ||
| } ); | ||
| } ); | ||
|
|
||
| return combinedOptions; | ||
| }, [ options ] ); | ||
|
|
||
| const currentSelection = selectOptions.find( | ||
| ( option ) => | ||
| option.presetStyle.fontStyle === fontStyle && | ||
| option.presetStyle.fontWeight === fontWeight | ||
| ); | ||
|
|
||
| return ( | ||
| <fieldset className="components-font-appearance-control"> | ||
| { hasStylesOrWeights && ( | ||
| <CustomSelectControl | ||
| className="components-font-appearance-control__select" | ||
| label={ __( 'Appearance' ) } | ||
| options={ selectOptions } | ||
| value={ currentSelection } | ||
| onChange={ ( { selectedItem } ) => | ||
| onChange( selectedItem.presetStyle ) | ||
| } | ||
| /> | ||
| ) } | ||
| </fieldset> | ||
| ); | ||
| } | ||
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,10 @@ | ||
| .components-font-appearance-control__select { | ||
| margin-bottom: 24px; | ||
|
|
||
| ul { | ||
| li { | ||
| color: $gray-900; | ||
| text-transform: capitalize; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
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.
Previously @mtias referred to the intention of not having more presets for now, besides the one for the font family. Would you be able to confirm if that's still the case @mtias?
In the fontStyles and fontWeights I'm not sure if presets bring much value. I guess it may make sense that the themes define for a given font family the weights and styles that are available because depending on the font family one font-weight may be loaded or not, but that may be discussed as part of font loading API.
I guess for font-weight and style we can use normal inline styles without presets e.g: "font-weight: 900;".