From f20301e260f5d17c3d87dd935c179fc45de3ea54 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 16 Sep 2022 14:12:46 +1000 Subject: [PATCH] Allow setting Letter case and Decoration to 'None' and add Letter case to Global Styles (#44067) * Make TextDecorationControl and TextTransformControl use buttons with aria-pressed again * Add option for 'none' text-transform and text-decoration * Add Letter Case to Global Styles * Make buttons 32px * Make TextTransformControl take up full row * Add back className --- .../text-decoration-control/index.js | 54 ++++++++------- .../text-decoration-control/style.scss | 18 +++++ .../text-transform-control/index.js | 68 ++++++++++++------- .../text-transform-control/style.scss | 18 +++++ packages/block-editor/src/hooks/typography.js | 27 ++++---- packages/block-editor/src/style.scss | 2 + .../src/components/global-styles/hooks.js | 1 - .../global-styles/typography-panel.js | 30 ++++++++ 8 files changed, 154 insertions(+), 64 deletions(-) create mode 100644 packages/block-editor/src/components/text-decoration-control/style.scss create mode 100644 packages/block-editor/src/components/text-transform-control/style.scss diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js index 05f92a8b8e0f6..36211185acb77 100644 --- a/packages/block-editor/src/components/text-decoration-control/index.js +++ b/packages/block-editor/src/components/text-decoration-control/index.js @@ -6,14 +6,16 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, -} from '@wordpress/components'; -import { formatStrikethrough, formatUnderline } from '@wordpress/icons'; +import { BaseControl, Button } from '@wordpress/components'; +import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; const TEXT_DECORATIONS = [ + { + name: __( 'None' ), + value: 'none', + icon: reset, + }, { name: __( 'Underline' ), value: 'underline', @@ -40,30 +42,36 @@ export default function TextDecorationControl( { value, onChange, className, - ...props } ) { return ( - - { TEXT_DECORATIONS.map( ( textDecoration ) => { - return ( - - ); - } ) } - + + { __( 'Decoration' ) } + +
+ { TEXT_DECORATIONS.map( ( textDecoration ) => { + return ( +
+ ); } diff --git a/packages/block-editor/src/components/text-decoration-control/style.scss b/packages/block-editor/src/components/text-decoration-control/style.scss new file mode 100644 index 0000000000000..689707a66b7ca --- /dev/null +++ b/packages/block-editor/src/components/text-decoration-control/style.scss @@ -0,0 +1,18 @@ +.block-editor-text-decoration-control { + border: 0; + margin: 0; + padding: 0; + + .block-editor-text-decoration-control__buttons { + // 4px of padding makes the row 40px high, same as an input. + padding: $grid-unit-05 0; + display: flex; + } + + .components-button.has-icon { + height: $grid-unit-40; + margin-right: $grid-unit-05; + min-width: $grid-unit-40; + padding: 0; + } +} diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js index f9411f4717d46..9674b49d5ed5a 100644 --- a/packages/block-editor/src/components/text-transform-control/index.js +++ b/packages/block-editor/src/components/text-transform-control/index.js @@ -1,21 +1,26 @@ /** * External dependencies */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, -} from '@wordpress/components'; +import { BaseControl, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { + reset, formatCapitalize, formatLowercase, formatUppercase, } from '@wordpress/icons'; const TEXT_TRANSFORMS = [ + { + name: __( 'None' ), + value: 'none', + icon: reset, + }, { name: __( 'Uppercase' ), value: 'uppercase', @@ -36,32 +41,43 @@ const TEXT_TRANSFORMS = [ /** * Control to facilitate text transform selections. * - * @param {Object} props Component props. - * @param {string} props.value Currently selected text transform. - * @param {Function} props.onChange Handles change in text transform selection. + * @param {Object} props Component props. + * @param {string} props.className Class name to add to the control. + * @param {string} props.value Currently selected text transform. + * @param {Function} props.onChange Handles change in text transform selection. * * @return {WPElement} Text transform control. */ -export default function TextTransformControl( { value, onChange, ...props } ) { +export default function TextTransformControl( { className, value, onChange } ) { return ( - - { TEXT_TRANSFORMS.map( ( textTransform ) => { - return ( - - ); - } ) } - + + { __( 'Letter case' ) } + +
+ { TEXT_TRANSFORMS.map( ( textTransform ) => { + return ( +
+ ); } diff --git a/packages/block-editor/src/components/text-transform-control/style.scss b/packages/block-editor/src/components/text-transform-control/style.scss new file mode 100644 index 0000000000000..0e097405e332b --- /dev/null +++ b/packages/block-editor/src/components/text-transform-control/style.scss @@ -0,0 +1,18 @@ +.block-editor-text-transform-control { + border: 0; + margin: 0; + padding: 0; + + .block-editor-text-transform-control__buttons { + // 4px of padding makes the row 40px high, same as an input. + padding: $grid-unit-05 0; + display: flex; + } + + .components-button.has-icon { + height: $grid-unit-40; + margin-right: $grid-unit-05; + min-width: $grid-unit-40; + padding: 0; + } +} diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 1ad8b7a792983..bbdadaed3ba52 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -189,6 +189,19 @@ export function TypographyPanel( props ) { ) } + { ! isLetterSpacingDisabled && ( + hasLetterSpacingValue( props ) } + label={ __( 'Letter spacing' ) } + onDeselect={ () => resetLetterSpacing( props ) } + isShownByDefault={ defaultControls?.letterSpacing } + resetAllFilter={ createResetAllFilter( 'letterSpacing' ) } + panelId={ clientId } + > + + + ) } { ! isTextDecorationDisabled && ( hasTextTransformValue( props ) } /* translators: Ensure translation is distinct from "Font size" */ label={ __( 'Letter case' ) } @@ -216,19 +228,6 @@ export function TypographyPanel( props ) { ) } - { ! isLetterSpacingDisabled && ( - hasLetterSpacingValue( props ) } - label={ __( 'Letter spacing' ) } - onDeselect={ () => resetLetterSpacing( props ) } - isShownByDefault={ defaultControls?.letterSpacing } - resetAllFilter={ createResetAllFilter( 'letterSpacing' ) } - panelId={ clientId } - > - - - ) } ); } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index b2c08654ebea6..853a030f04594 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -46,6 +46,8 @@ @import "./components/responsive-block-control/style.scss"; @import "./components/rich-text/style.scss"; @import "./components/skip-to-selected-block/style.scss"; +@import "./components/text-decoration-control/style.scss"; +@import "./components/text-transform-control/style.scss"; @import "./components/tool-selector/style.scss"; @import "./components/url-input/style.scss"; @import "./components/url-popover/style.scss"; diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 9f9a7c789d6ae..f6df419a46d00 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -168,7 +168,6 @@ const ROOT_BLOCK_SUPPORTS = [ 'fontWeight', 'lineHeight', 'textDecoration', - 'textTransform', 'padding', 'contentSize', 'wideSize', diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index 22ae62e962748..f4c77abf0fd71 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -6,6 +6,7 @@ import { __experimentalFontFamilyControl as FontFamilyControl, __experimentalFontAppearanceControl as FontAppearanceControl, __experimentalLetterSpacingControl as LetterSpacingControl, + __experimentalTextTransformControl as TextTransformControl, } from '@wordpress/block-editor'; import { PanelBody, @@ -65,6 +66,18 @@ function useHasLetterSpacingControl( name, element ) { return supports.includes( 'letterSpacing' ); } +function useHasTextTransformControl( name, element ) { + const setting = useSetting( 'typography.textTransform', name )[ 0 ]; + if ( ! setting ) { + return false; + } + if ( ! name && element === 'heading' ) { + return true; + } + const supports = getSupportedGlobalStylesPanels( name ); + return supports.includes( 'textTransform' ); +} + export default function TypographyPanel( { name, element } ) { const [ selectedLevel, setCurrentTab ] = useState( 'heading' ); const supports = getSupportedGlobalStylesPanels( name ); @@ -89,6 +102,7 @@ export default function TypographyPanel( { name, element } ) { const hasLineHeightEnabled = useHasLineHeightControl( name ); const hasAppearanceControl = useHasAppearanceControl( name ); const hasLetterSpacingControl = useHasLetterSpacingControl( name, element ); + const hasTextTransformControl = useHasTextTransformControl( name, element ); /* Disable font size controls when the option to style all headings is selected. */ let hasFontSizeEnabled = supports.includes( 'fontSize' ); @@ -121,6 +135,10 @@ export default function TypographyPanel( { name, element } ) { prefix + 'typography.letterSpacing', name ); + const [ textTransform, setTextTransform ] = useStyle( + prefix + 'typography.textTransform', + name + ); const [ backgroundColor ] = useStyle( prefix + 'color.background', name ); const [ gradientValue ] = useStyle( prefix + 'color.gradient', name ); const [ color ] = useStyle( prefix + 'color.text', name ); @@ -252,6 +270,18 @@ export default function TypographyPanel( { name, element } ) { __unstableInputWidth="auto" /> ) } + { hasTextTransformControl && ( +
+ +
+ ) } );