-
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 text decoration block support using CSS variables (#…
…26059) * Add text decoration block support * Add config for block preset classes * Update text decoration controls * Allow for text decoration controls alongside transform The direction the design is headed it to display text decoration and text transform controls side-by-side. This commit provides a new component to handle grouping these together and arranging them within a flex container. It also makes minor tweaks like labelling the controls "Decoration" instead of "Text Decoration". * Add new underline icon * Add back inline style generation for dynamic blocks * This updates the typography block support to check for text decoration support and generate an appropriate inline-style adding it to the attributes. * Removes opt-in for text decoration support from heading block * Opts-in for text decoration for navigation block and updates its CSS to leverage it * Tweak ordering of text decoration and transform
- Loading branch information
1 parent
a2c8480
commit 24dc3a9
Showing
15 changed files
with
310 additions
and
27 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
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
78 changes: 78 additions & 0 deletions
78
packages/block-editor/src/components/text-decoration-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,78 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Button } from '@wordpress/components'; | ||
| import { formatStrikethrough, formatUnderline } from '@wordpress/icons'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Control to facilitate text decoration selections. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {string} props.value Currently selected text decoration. | ||
| * @param {Array} props.textDecorations Text decorations available for selection. | ||
| * @param {Function} props.onChange Handles change in text decoration selection. | ||
| * @return {WPElement} Text decoration control. | ||
| */ | ||
| export default function TextDecorationControl( { | ||
| value: textDecoration, | ||
| textDecorations, | ||
| onChange, | ||
| } ) { | ||
| /** | ||
| * Determines the what the new text decoration is as a result of a user | ||
| * interaction with the control. Then passes this on to the supplied | ||
| * onChange handler. | ||
| * | ||
| * @param {string} newDecoration Slug for selected decoration. | ||
| */ | ||
| const handleOnChange = ( newDecoration ) => { | ||
| // Check if we are toggling a decoration off. | ||
| const decoration = | ||
| textDecoration === newDecoration ? undefined : newDecoration; | ||
|
|
||
| // Ensure only defined text decorations are allowed. | ||
| const presetDecoration = textDecorations.find( | ||
| ( { slug } ) => slug === decoration | ||
| ); | ||
|
|
||
| // Create string that will be turned into CSS custom property | ||
| const newTextDecoration = presetDecoration | ||
| ? `var:preset|text-decoration|${ presetDecoration.slug }` | ||
| : undefined; | ||
|
|
||
| onChange( newTextDecoration ); | ||
| }; | ||
|
|
||
| // Text Decoration icons to use. | ||
| const icons = { | ||
| strikethrough: formatStrikethrough, | ||
| underline: formatUnderline, | ||
| }; | ||
|
|
||
| return ( | ||
| <fieldset className="block-editor-text-decoration-control"> | ||
| <legend>{ __( 'Decoration' ) }</legend> | ||
| <div className="block-editor-text-decoration-control__buttons"> | ||
| { textDecorations.map( ( presetDecoration ) => { | ||
| return ( | ||
| <Button | ||
| key={ presetDecoration.slug } | ||
| icon={ icons[ presetDecoration.slug ] } | ||
| isSmall | ||
| isPressed={ | ||
| textDecoration === presetDecoration.slug | ||
| } | ||
| onClick={ () => | ||
| handleOnChange( presetDecoration.slug ) | ||
| } | ||
| > | ||
| { ! icons[ presetDecoration.slug ] && | ||
| presetDecoration.name } | ||
| </Button> | ||
| ); | ||
| } ) } | ||
| </div> | ||
| </fieldset> | ||
| ); | ||
| } |
18 changes: 18 additions & 0 deletions
18
packages/block-editor/src/components/text-decoration-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,18 @@ | ||
| .block-editor-text-decoration-control { | ||
| flex: 0 0 50%; | ||
|
|
||
| legend { | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .block-editor-text-decoration-control__buttons { | ||
| display: inline-flex; | ||
| margin-bottom: 24px; | ||
|
|
||
| .components-button.has-icon { | ||
| min-width: 24px; | ||
| padding: 0; | ||
| margin-right: 4px; | ||
| } | ||
| } | ||
| } |
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,98 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { hasBlockSupport } from '@wordpress/blocks'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TextDecorationControl from '../components/text-decoration-control'; | ||
| import useEditorFeature from '../components/use-editor-feature'; | ||
| import { cleanEmptyObject } from './utils'; | ||
|
|
||
| /** | ||
| * Key within block settings' supports array indicating support for text | ||
| * decorations e.g. settings found in `block.json`. | ||
| */ | ||
| export const TEXT_DECORATION_SUPPORT_KEY = '__experimentalTextDecoration'; | ||
|
|
||
| /** | ||
| * Inspector control panel containing the text decoration options. | ||
| * | ||
| * @param {Object} props Block properties. | ||
| * @return {WPElement} Text decoration edit element. | ||
| */ | ||
| export function TextDecorationEdit( props ) { | ||
| const { | ||
| attributes: { style }, | ||
| setAttributes, | ||
| } = props; | ||
| const textDecorations = useEditorFeature( 'typography.textDecorations' ); | ||
| const isDisabled = useIsTextDecorationDisabled( props ); | ||
|
|
||
| if ( isDisabled ) { | ||
| return null; | ||
| } | ||
|
|
||
| const textDecoration = getTextDecorationFromAttributeValue( | ||
| textDecorations, | ||
| style?.typography?.textDecoration | ||
| ); | ||
|
|
||
| function onChange( newDecoration ) { | ||
| setAttributes( { | ||
| style: cleanEmptyObject( { | ||
| ...style, | ||
| typography: { | ||
| ...style?.typography, | ||
| textDecoration: newDecoration, | ||
| }, | ||
| } ), | ||
| } ); | ||
| } | ||
|
|
||
| return ( | ||
| <TextDecorationControl | ||
| value={ textDecoration } | ||
| textDecorations={ textDecorations } | ||
| onChange={ onChange } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Checks if text-decoration settings have been disabled. | ||
| * | ||
| * @param {string} name Name of the block. | ||
| * @return {boolean} Whether or not the setting is disabled. | ||
| */ | ||
| export function useIsTextDecorationDisabled( { name: blockName } = {} ) { | ||
| const notSupported = ! hasBlockSupport( | ||
| blockName, | ||
| TEXT_DECORATION_SUPPORT_KEY | ||
| ); | ||
| const textDecorations = useEditorFeature( 'typography.textDecorations' ); | ||
| const hasTextDecorations = !! textDecorations?.length; | ||
|
|
||
| return notSupported || ! hasTextDecorations; | ||
| } | ||
|
|
||
| /** | ||
| * Extracts the current text decoration selection, if available, from the CSS | ||
| * variable set as the `styles.typography.textDecoration` attribute. | ||
| * | ||
| * @param {Array} textDecorations Available text decorations as defined in theme.json. | ||
| * @param {string} value Attribute value in `styles.typography.textDecoration` | ||
| * @return {string} Actual text decoration value | ||
| */ | ||
| const getTextDecorationFromAttributeValue = ( textDecorations, value ) => { | ||
| const attributeParsed = /var:preset\|text-decoration\|(.+)/.exec( value ); | ||
|
|
||
| if ( attributeParsed && attributeParsed[ 1 ] ) { | ||
| return textDecorations.find( | ||
| ( { slug } ) => slug === attributeParsed[ 1 ] | ||
| )?.slug; | ||
| } | ||
|
|
||
| return value; | ||
| }; |
Oops, something went wrong.