Format toolbar: visual clue for hidden active items

WordPress · Sep 10, 2021 · 82cb606 · 82cb606
1 parent 435119c
commit 82cb606
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap
@@ -56,6 +56,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
   }
   toggleProps={
     Object {
+      "className": "is-pressed",
       "describedBy": "Change text alignment",
     }
   }
@@ -133,6 +134,7 @@ exports[`AlignmentUI should match snapshot 1`] = `
   }
   toggleProps={
     Object {
+      "className": "is-pressed",
       "describedBy": "Change text alignment",
     }
   }

diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
@@ -63,7 +63,10 @@ function AlignmentUI( {
 		<UIComponent
 			icon={ setIcon() }
 			label={ label }
-			toggleProps={ { describedBy } }
+			toggleProps={ {
+				describedBy,
+				className: activeAlignment ? 'is-pressed' : undefined,
+			} }
 			popoverProps={ POPOVER_PROPS }
 			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;

diff --git a/...ages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap b/...ages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
@@ -67,6 +67,7 @@ exports[`BlockAlignmentUI should match snapshot 1`] = `
   }
   toggleProps={
     Object {
+      "className": "is-pressed",
       "describedBy": "Change alignment",
     }
   }

diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -67,6 +67,7 @@ function BlockAlignmentUI( {
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
 	const extraProps = isToolbar ? { isCollapsed } : {};
+	const hasActive = enabledControls.some( ( control ) => control === value );
 
 	return (
 		<UIComponent
@@ -77,7 +78,10 @@ function BlockAlignmentUI( {
 					: defaultAlignmentControl.icon
 			}
 			label={ __( 'Align' ) }
-			toggleProps={ { describedBy: __( 'Change alignment' ) } }
+			toggleProps={ {
+				describedBy: __( 'Change alignment' ),
+				className: hasActive ? 'is-pressed' : undefined,
+			} }
 			controls={ enabledControls.map( ( control ) => {
 				return {
 					...BLOCK_ALIGNMENTS_CONTROLS[ control ],

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -3,6 +3,7 @@
  */
 
 import { orderBy } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -20,22 +21,37 @@ const POPOVER_PROPS = {
 const FormatToolbar = () => {
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link', 'text-color' ].map( ( format ) => (
+			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
 					key={ format }
 				/>
 			) ) }
 			<Slot name="RichText.ToolbarControls">
-				{ ( fills ) =>
-					fills.length !== 0 && (
+				{ ( fills ) => {
+					if ( ! fills.length ) {
+						return null;
+					}
+
+					const allProps = fills.map( ( [ { props } ] ) => props );
+					const hasActive = allProps.some(
+						( { isActive } ) => isActive
+					);
+
+					return (
 						<ToolbarItem>
 							{ ( toggleProps ) => (
 								<DropdownMenu
 									icon={ chevronDown }
 									/* translators: button label text should, if possible, be under 16 characters. */
 									label={ __( 'More' ) }
-									toggleProps={ toggleProps }
+									toggleProps={ {
+										...toggleProps,
+										className: classnames(
+											toggleProps.className,
+											{ 'is-pressed': hasActive }
+										),
+									} }
 									controls={ orderBy(
 										fills.map( ( [ { props } ] ) => props ),
 										'title'
@@ -44,8 +60,8 @@ const FormatToolbar = () => {
 								/>
 							) }
 						</ToolbarItem>
-					)
-				}
+					);
+				} }
 			</Slot>
 		</>
 	);

diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js
@@ -56,9 +56,8 @@ function TextColorEdit( {
 	return (
 		<>
 			<RichTextToolbarButton
-				key={ isActive ? 'text-color' : 'text-color-not-active' }
 				className="format-library-text-color-button"
-				name={ isActive ? 'text-color' : undefined }
+				isActive={ isActive }
 				icon={
 					<>
 						<Icon icon={ textColorIcon } />

diff --git a/packages/format-library/src/text-color/style.scss b/packages/format-library/src/text-color/style.scss
@@ -40,6 +40,6 @@
 	height: 4px;
 	width: 20px;
 	position: absolute;
-	bottom: 10px;
-	left: 8px;
+	bottom: 13px;
+	left: 16px;
 }