-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Support: Add font style and weight options with combined UI (#2…
…6444) * Add combined font style and weight block support Adds both font style and font weight block support options. The UI for both are combined into a single dropdown. The inline styles generated via this feature leverage CSS variables. * Update styling of font appearance list items
- Loading branch information
1 parent
120fc88
commit 1d9c07a
Showing
12 changed files
with
329 additions
and
28 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
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
77 changes: 77 additions & 0 deletions
77
packages/block-editor/src/components/font-appearance-control/index.js
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 }`, | ||
| // 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 }`, | ||
| }, | ||
| } ); | ||
| } ); | ||
| } ); | ||
|
|
||
| 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> | ||
| ); | ||
| } |
10 changes: 10 additions & 0 deletions
10
packages/block-editor/src/components/font-appearance-control/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
| 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.