From 289fe7163e7c74be42e201e1a70483c3751c6f5a Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 18 Aug 2022 15:17:41 +1000 Subject: [PATCH 1/3] Show Letter Spacing in Global Styles -> Typography -> Headings --- .../components/global-styles/typography-panel.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) 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 c6fe46b3160d3..22ae62e962748 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -53,12 +53,16 @@ function useHasAppearanceControl( name ) { return hasFontStyles || hasFontWeights; } -function useHasLetterSpacingControl( name ) { +function useHasLetterSpacingControl( name, element ) { + const setting = useSetting( 'typography.letterSpacing', name )[ 0 ]; + if ( ! setting ) { + return false; + } + if ( ! name && element === 'heading' ) { + return true; + } const supports = getSupportedGlobalStylesPanels( name ); - return ( - useSetting( 'typography.letterSpacing', name )[ 0 ] && - supports.includes( 'letterSpacing' ) - ); + return supports.includes( 'letterSpacing' ); } export default function TypographyPanel( { name, element } ) { @@ -84,7 +88,7 @@ export default function TypographyPanel( { name, element } ) { supports.includes( 'fontWeight' ); const hasLineHeightEnabled = useHasLineHeightControl( name ); const hasAppearanceControl = useHasAppearanceControl( name ); - const hasLetterSpacingControl = useHasLetterSpacingControl( name ); + const hasLetterSpacingControl = useHasLetterSpacingControl( name, element ); /* Disable font size controls when the option to style all headings is selected. */ let hasFontSizeEnabled = supports.includes( 'fontSize' ); From b06d515b7ff01e3699472c4d7ee7795de75cb2ee Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 18 Aug 2022 15:31:38 +1000 Subject: [PATCH 2/3] Add Letter Case to Global Styles --- .../src/components/global-styles/hooks.js | 1 - .../global-styles/typography-panel.js | 26 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) 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..fc17569464291 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,14 @@ export default function TypographyPanel( { name, element } ) { __unstableInputWidth="auto" /> ) } + { hasTextTransformControl && ( + + ) } ); From bb7341b482c04c62e77a26d6633fddf92c729d50 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 9 Sep 2022 16:45:03 +1000 Subject: [PATCH 3/3] Show 'None' Letter Case option when in Global Styles --- .../text-transform-control/index.js | 72 ++++++++++--------- .../global-styles/typography-panel.js | 9 ++- 2 files changed, 45 insertions(+), 36 deletions(-) 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..623a09680dfd4 100644 --- a/packages/block-editor/src/components/text-transform-control/index.js +++ b/packages/block-editor/src/components/text-transform-control/index.js @@ -10,58 +10,60 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { + reset, formatCapitalize, formatLowercase, formatUppercase, } from '@wordpress/icons'; -const TEXT_TRANSFORMS = [ - { - name: __( 'Uppercase' ), - value: 'uppercase', - icon: formatUppercase, - }, - { - name: __( 'Lowercase' ), - value: 'lowercase', - icon: formatLowercase, - }, - { - name: __( 'Capitalize' ), - value: 'capitalize', - icon: formatCapitalize, - }, -]; - /** * 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.value Currently selected text transform. + * @param {Function} props.onChange Handles change in text transform selection. + * @param {boolean} [props.showNone] Whether to display the 'None' option. * * @return {WPElement} Text transform control. */ -export default function TextTransformControl( { value, onChange, ...props } ) { +export default function TextTransformControl( { + value, + onChange, + showNone, + ...props +} ) { return ( { + onChange( nextValue === 'none' ? undefined : nextValue ); + } } > - { TEXT_TRANSFORMS.map( ( textTransform ) => { - return ( - - ); - } ) } + { showNone && ( + + ) } + + + ); } 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 fc17569464291..e3c6801bce2b2 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -166,7 +166,12 @@ export default function TypographyPanel( { name, element } ) { > Aa - + { element === 'heading' && (