Allow setting Letter case and Decoration to 'None' and add Letter cas…

…e 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
WordPress · Sep 19, 2022 · 853051b · 853051b
1 parent 83937b3
commit 853051b
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 64 deletions.
diff --git 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 (
-		<ToggleGroupControl
-			{ ...props }
+		<fieldset
 			className={ classnames(
 				'block-editor-text-decoration-control',
 				className
 			) }
-			__experimentalIsBorderless
-			label={ __( 'Decoration' ) }
-			value={ value }
-			onChange={ onChange }
 		>
-			{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-				return (
-					<ToggleGroupControlOptionIcon
-						key={ textDecoration.value }
-						value={ textDecoration.value }
-						icon={ textDecoration.icon }
-						label={ textDecoration.name }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Decoration' ) }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-text-decoration-control__buttons">
+				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
+					return (
+						<Button
+							key={ textDecoration.value }
+							icon={ textDecoration.icon }
+							label={ textDecoration.name }
+							isPressed={ textDecoration.value === value }
+							onClick={ () => {
+								onChange(
+									textDecoration.value === value
+										? undefined
+										: textDecoration.value
+								);
+							} }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/style.scss 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
@@ -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 (
-		<ToggleGroupControl
-			{ ...props }
-			className="block-editor-text-transform-control"
-			__experimentalIsBorderless
-			label={ __( 'Letter case' ) }
-			value={ value }
-			onChange={ onChange }
+		<fieldset
+			className={ classnames(
+				'block-editor-text-transform-control',
+				className
+			) }
 		>
-			{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-				return (
-					<ToggleGroupControlOptionIcon
-						key={ textTransform.value }
-						value={ textTransform.value }
-						icon={ textTransform.icon }
-						label={ textTransform.name }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Letter case' ) }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-text-transform-control__buttons">
+				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
+					return (
+						<Button
+							key={ textTransform.value }
+							icon={ textTransform.icon }
+							label={ textTransform.name }
+							isPressed={ textTransform.value === value }
+							onClick={ () => {
+								onChange(
+									textTransform.value === value
+										? undefined
+										: textTransform.value
+								);
+							} }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
 	);
 }
diff --git a/packages/block-editor/src/components/text-transform-control/style.scss 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
@@ -189,6 +189,19 @@ export function TypographyPanel( props ) {
 					<LineHeightEdit { ...props } />
 				</ToolsPanelItem>
 			) }
+			{ ! isLetterSpacingDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasLetterSpacingValue( props ) }
+					label={ __( 'Letter spacing' ) }
+					onDeselect={ () => resetLetterSpacing( props ) }
+					isShownByDefault={ defaultControls?.letterSpacing }
+					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
+					panelId={ clientId }
+				>
+					<LetterSpacingEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 			{ ! isTextDecorationDisabled && (
 				<ToolsPanelItem
 					className="single-column"
@@ -204,7 +217,6 @@ export function TypographyPanel( props ) {
 			) }
 			{ ! isTextTransformDisabled && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ () => hasTextTransformValue( props ) }
 					/* translators: Ensure translation is distinct from "Font size" */
 					label={ __( 'Letter case' ) }
@@ -216,19 +228,6 @@ export function TypographyPanel( props ) {
 					<TextTransformEdit { ...props } />
 				</ToolsPanelItem>
 			) }
-			{ ! isLetterSpacingDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLetterSpacingValue( props ) }
-					label={ __( 'Letter spacing' ) }
-					onDeselect={ () => resetLetterSpacing( props ) }
-					isShownByDefault={ defaultControls?.letterSpacing }
-					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
-					panelId={ clientId }
-				>
-					<LetterSpacingEdit { ...props } />
-				</ToolsPanelItem>
-			) }
 		</InspectorControls>
 	);
 }

diff --git 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
@@ -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
@@ -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 && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<TextTransformControl
+							value={ textTransform }
+							onChange={ setTextTransform }
+							showNone
+							isBlock
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				) }
 			</Grid>
 		</PanelBody>
 	);