-
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.
Block Support: Add text transform block support using CSS variables (#…
…26060) * Add text transform block support * Add config for block preset classes * Update text transform controls * Fix PHPCS errors * Allow for text transform controls alongside decoration 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 "Letter case" instead of "Text Transform" and using plain text to provide something like the icons will be. * Add new icons for text transforms * Switch to only opting in for navigation block * Fix return value regression after resolving merge conflict
- Loading branch information
1 parent
fb1cc0e
commit 4474833
Showing
17 changed files
with
375 additions
and
16 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
35 changes: 35 additions & 0 deletions
35
packages/block-editor/src/components/text-decoration-and-transform/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,35 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| TextTransformEdit, | ||
| useIsTextTransformDisabled, | ||
| } from '../../hooks/text-transform'; | ||
|
|
||
| /** | ||
| * Handles grouping related text decoration and text transform edit components | ||
| * so they can be laid out in a more flexible manner within the Typography | ||
| * InspectorControls panel. | ||
| * | ||
| * @param {Object} props Block props to be passed on to individual controls. | ||
| * @return {WPElement} Component containing text decoration or transform controls. | ||
| */ | ||
| export default function TextDecorationAndTransformEdit( props ) { | ||
| // Once text decorations block support is added additional checks will | ||
| // need to be added below and it's edit component included. | ||
| const transformAvailable = ! useIsTextTransformDisabled( props ); | ||
|
|
||
| if ( ! transformAvailable ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| { transformAvailable && ( | ||
| <div className="block-editor-text-decoration-and-transform"> | ||
| { transformAvailable && <TextTransformEdit { ...props } /> } | ||
| </div> | ||
| ) } | ||
| </> | ||
| ); | ||
| } |
3 changes: 3 additions & 0 deletions
3
packages/block-editor/src/components/text-decoration-and-transform/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,3 @@ | ||
| .block-editor-text-decoration-and-transform { | ||
| display: flex; | ||
| } |
82 changes: 82 additions & 0 deletions
82
packages/block-editor/src/components/text-transform-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,82 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Button } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { | ||
| formatCapitalize, | ||
| formatLowercase, | ||
| formatUppercase, | ||
| } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Control to facilitate text transform selections. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {string} props.value Currently selected text transform. | ||
| * @param {Array} props.textTransforms Text transforms available for selection. | ||
| * @param {Function} props.onChange Handles change in text transform selection. | ||
| * @return {WPElement} Text transform control. | ||
| */ | ||
| export default function TextTransformControl( { | ||
| value: textTransform, | ||
| textTransforms, | ||
| onChange, | ||
| } ) { | ||
| /** | ||
| * Determines what the new text transform is as a result of a user | ||
| * interaction with the control. Then passes this on to the supplied | ||
| * onChange handler. | ||
| * | ||
| * @param {string} newTransform Slug for selected text transform. | ||
| */ | ||
| const handleOnChange = ( newTransform ) => { | ||
| // Check if we are toggling a transform off. | ||
| const transform = | ||
| textTransform === newTransform ? undefined : newTransform; | ||
|
|
||
| // Ensure only defined text transforms are allowed. | ||
| const presetTransform = textTransforms.find( | ||
| ( { slug } ) => slug === transform | ||
| ); | ||
|
|
||
| // Create string that will be turned into CSS custom property | ||
| const newTextTransform = presetTransform | ||
| ? `var:preset|text-transform|${ presetTransform.slug }` | ||
| : undefined; | ||
|
|
||
| onChange( newTextTransform ); | ||
| }; | ||
|
|
||
| // Text transform icons to use. | ||
| // Icons still to be created/designed. | ||
| const icons = { | ||
| capitalize: formatCapitalize, | ||
| lowercase: formatLowercase, | ||
| uppercase: formatUppercase, | ||
| }; | ||
|
|
||
| return ( | ||
| <fieldset className="block-editor-text-transform-control"> | ||
| <legend>{ __( 'Letter case' ) }</legend> | ||
| <div className="block-editor-text-transform-control__buttons"> | ||
| { textTransforms.map( ( presetTransform ) => { | ||
| return ( | ||
| <Button | ||
| key={ presetTransform.slug } | ||
| icon={ icons[ presetTransform.slug ] } | ||
| isSmall | ||
| isPressed={ textTransform === presetTransform.slug } | ||
| onClick={ () => | ||
| handleOnChange( presetTransform.slug ) | ||
| } | ||
| > | ||
| { ! icons[ presetTransform.slug ] && | ||
| presetTransform.name } | ||
| </Button> | ||
| ); | ||
| } ) } | ||
| </div> | ||
| </fieldset> | ||
| ); | ||
| } |
18 changes: 18 additions & 0 deletions
18
packages/block-editor/src/components/text-transform-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-transform-control { | ||
| flex: 0 0 50%; | ||
|
|
||
| legend { | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .block-editor-text-transform-control__buttons { | ||
| display: inline-flex; | ||
| margin-bottom: 24px; | ||
|
|
||
| .components-button.has-icon { | ||
| min-width: 24px; | ||
| padding: 0; | ||
| margin-right: 4px; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.