Add button text labels to site editor. (#38317)

* Add button text labels to site editor. * Move preference into modal. * Update tests. * Update feature selector. * Adjust margins and paddings on header buttons.
WordPress · Mar 21, 2022 · b6fea11 · b6fea11
1 parent dcad2b4
commit b6fea11
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 11 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -21,6 +21,7 @@ import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -61,6 +62,7 @@ function Editor( { onError } ) {
 		previousShortcut,
 		nextShortcut,
 		editorMode,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -105,6 +107,10 @@ function Editor( { onError } ) {
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 			editorMode: getEditorMode(),
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
@@ -203,6 +209,10 @@ function Editor( { onError } ) {
 										<SidebarComplementaryAreaFills />
 										<InterfaceSkeleton
 											labels={ interfaceLabels }
+											className={
+												showIconLabels &&
+												'show-icon-labels'
+											}
 											secondarySidebar={ secondarySidebar() }
 											sidebar={
 												sidebarIsOpened && (
@@ -217,6 +227,9 @@ function Editor( { onError } ) {
 													openEntitiesSavedStates={
 														openEntitiesSavedStates
 													}
+													showIconLabels={
+														showIconLabels
+													}
 												/>
 											}
 											notices={ <EditorSnackbars /> }

diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js
@@ -53,21 +53,23 @@ function useSecondaryText() {
 }
 
 /**
- * @param {Object}   props             Props for the DocumentActions component.
- * @param {string}   props.entityTitle The title to display.
- * @param {string}   props.entityLabel A label to use for entity-related options.
- *                                     E.g. "template" would be used for "edit
- *                                     template" and "show template details".
- * @param {boolean}  props.isLoaded    Whether the data is available.
- * @param {Function} props.children    React component to use for the
- *                                     information dropdown area. Should be a
- *                                     function which accepts dropdown props.
+ * @param {Object}   props                Props for the DocumentActions component.
+ * @param {string}   props.entityTitle    The title to display.
+ * @param {string}   props.entityLabel    A label to use for entity-related options.
+ *                                        E.g. "template" would be used for "edit
+ *                                        template" and "show template details".
+ * @param {boolean}  props.isLoaded       Whether the data is available.
+ * @param {Function} props.children       React component to use for the
+ *                                        information dropdown area. Should be a
+ *                                        function which accepts dropdown props.
+ * @param {boolean}  props.showIconLabels Whether buttons display icons or text labels.
  */
 export default function DocumentActions( {
 	entityTitle,
 	entityLabel,
 	isLoaded,
 	children: dropdownContent,
+	showIconLabels,
 } ) {
 	const { label } = useSecondaryText();
 
@@ -144,7 +146,9 @@ export default function DocumentActions( {
 									__( 'Show %s details' ),
 									entityLabel
 								) }
-							/>
+							>
+								{ showIconLabels && __( 'Details' ) }
+							</Button>
 						) }
 						contentClassName="edit-site-document-actions__info-dropdown"
 						renderContent={ dropdownContent }

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -34,6 +34,7 @@ const preventDefault = ( event ) => {
 export default function Header( {
 	openEntitiesSavedStates,
 	isEntitiesSavedStatesOpen,
+	showIconLabels,
 } ) {
 	const inserterButton = useRef();
 	const {
@@ -122,7 +123,10 @@ export default function Header( {
 							'Toggle block inserter',
 							'Generic label for block inserter button'
 						) }
-					/>
+					>
+						{ showIconLabels &&
+							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
+					</Button>
 					{ isLargeViewport && (
 						<>
 							<ToolbarItem
@@ -155,6 +159,7 @@ export default function Header( {
 							: 'template'
 					}
 					isLoaded={ isLoaded }
+					showIconLabels={ showIconLabels }
 				>
 					{ ( { onClose } ) => (
 						<TemplateDetails

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -163,3 +163,48 @@ body.is-navigation-sidebar-open {
 		}
 	}
 }
+
+// Button text label styles
+
+.show-icon-labels .edit-site-header {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
+	.edit-site-save-button__button {
+		padding-left: 6px;
+		padding-right: 6px;
+		margin-right: $grid-unit-05;
+	}
+	.block-editor-post-preview__button-toggle {
+		margin-right: $grid-unit-05;
+	}
+	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
+	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+		&::after {
+			content: none;
+		}
+
+		height: 36px;
+		padding: 0 6px;
+	}
+}
diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
@@ -36,6 +36,11 @@ export default function EditSitePreferencesModal( {
 						) }
 						label={ __( 'Spotlight mode' ) }
 					/>
+					<EnableFeature
+						featureName="showIconLabels"
+						label={ __( 'Show button text labels' ) }
+						help={ __( 'Show text instead of icons on buttons' ) }
+					/>
 				</PreferencesModalSection>
 			),
 		},

diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
@@ -124,6 +124,10 @@ export const getSettings = createSelector(
 				state,
 				'keepCaretInsideBlock'
 			),
+			showIconLabels: !! __unstableGetPreference(
+				state,
+				'showIconLabels'
+			),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
 			__experimentalPreferPatternsOnRoot:
@@ -150,6 +154,7 @@ export const getSettings = createSelector(
 		__unstableGetPreference( state, 'focusMode' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
 		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
+		__unstableGetPreference( state, 'showIconLabels' ),
 		getReusableBlocks( state ),
 		getEditedPostType( state ),
 	]

diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
@@ -80,6 +80,7 @@ describe( 'selectors', () => {
 				focusMode: false,
 				hasFixedToolbar: false,
 				keepCaretInsideBlock: false,
+				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				__experimentalPreferPatternsOnRoot: true,
@@ -104,6 +105,7 @@ describe( 'selectors', () => {
 				focusMode: true,
 				hasFixedToolbar: true,
 				keepCaretInsideBlock: false,
+				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),