Editor: Unify show icon labels preference (#57480)

WordPress · Jan 3, 2024 · 05b78e0 · 05b78e0
1 parent 31ad09c
commit 05b78e0
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 120 deletions.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -83,8 +83,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 
@@ -113,10 +112,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="edit-post-header__toolbar"
 			>
-				<DocumentTools
-					disableBlockTools={ isTextEditor }
-					showIconLabels={ showIconLabels }
-				/>
+				<DocumentTools disableBlockTools={ isTextEditor } />
 				{ hasFixedToolbar && isLargeViewport && (
 					<>
 						<div
@@ -177,35 +173,24 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
 					// We track that DOM node to return focus to the PostPublishButtonOrToggle
 					// when the publish sidebar has been closed.
-					<PostSavedState
-						forceIsDirty={ hasActiveMetaboxes }
-						showIconLabels={ showIconLabels }
-					/>
+					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
 				) }
-				<PreviewDropdown
-					showIconLabels={ showIconLabels }
-					forceIsAutosaveable={ hasActiveMetaboxes }
-				/>
+				<PreviewDropdown forceIsAutosaveable={ hasActiveMetaboxes } />
 				<PostPreviewButton
 					className="edit-post-header__post-preview-button"
 					forceIsAutosaveable={ hasActiveMetaboxes }
 				/>
-				<PostViewLink showIconLabels={ showIconLabels } />
+				<PostViewLink />
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
 					setEntitiesSavedStatesCallback={
 						setEntitiesSavedStatesCallback
 					}
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
-					<>
-						<PinnedItems.Slot scope="core/edit-post" />
-						<MoreMenu showIconLabels={ showIconLabels } />
-					</>
-				) }
-				{ showIconLabels && ! isWideViewport && (
-					<MoreMenu showIconLabels={ showIconLabels } />
+					<PinnedItems.Slot scope="core/edit-post" />
 				) }
+				<MoreMenu showIconLabels={ showIconLabels } />
 			</motion.div>
 		</div>
 	);

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -39,6 +39,8 @@ import {
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
@@ -163,6 +165,7 @@ function Layout() {
 		documentLabel,
 		hasHistory,
 	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
@@ -188,8 +191,7 @@ function Layout() {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree:
 				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -240,6 +240,7 @@ export default function EditPostPreferencesModal() {
 						</PreferencesModalSection>
 						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<EnableFeature
+								scope="core"
 								featureName="showIconLabels"
 								label={ __( 'Show button text labels' ) }
 								help={ __(

diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
@@ -7,11 +7,6 @@ import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
 
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
  * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
@@ -78,14 +73,12 @@ import { store as editPostStore } from '../../../store';
  * ```
  */
 export default function PluginSidebarEditPost( { className, ...props } ) {
-	const { postTitle, shortcut, showIconLabels } = useSelect( ( select ) => {
+	const { postTitle, shortcut } = useSelect( ( select ) => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 		};
 	}, [] );
 	return (
@@ -95,7 +88,6 @@ export default function PluginSidebarEditPost( { className, ...props } ) {
 			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core/edit-post"
 			toggleShortcut={ shortcut }
-			showIconLabels={ showIconLabels }
 			{ ...props }
 		/>
 	);

diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -63,7 +63,6 @@ export function initializeEditor(
 		openPanels: [ 'post-status' ],
 		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
-		showIconLabels: false,
 		showListViewByDefault: false,
 		themeStyles: true,
 		welcomeGuide: true,
@@ -72,6 +71,7 @@ export function initializeEditor(
 
 	dispatch( preferencesStore ).setDefaults( 'core', {
 		allowRightClickOverrides: true,
+		showIconLabels: false,
 	} );
 
 	dispatch( blocksStore ).reapplyBlockTypeFilters();

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -118,6 +118,7 @@ export default function Editor( { isLoading } ) {
 		const { getEntityRecord } = select( coreDataStore );
 		const { getRenderingMode, isInserterOpened, isListViewOpened } =
 			select( editorStore );
+		const { get } = select( preferencesStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -140,11 +141,8 @@ export default function Editor( { isLoading } ) {
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
-			showIconLabels: select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-			showBlockBreadcrumbs: select( preferencesStore ).get(
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			showBlockBreadcrumbs: get(
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),

diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -24,7 +24,6 @@ export default function DocumentTools( {
 	blockEditorMode,
 	hasFixedToolbar,
 	isDistractionFree,
-	showIconLabels,
 } ) {
 	const { isVisualMode } = useSelect( ( select ) => {
 		const { getEditorMode } = select( editSiteStore );
@@ -42,7 +41,6 @@ export default function DocumentTools( {
 
 	return (
 		<EditorDocumentTools
-			showIconLabels={ showIconLabels }
 			disableBlockTools={ ! isVisualMode }
 			listViewLabel={ __( 'List View' ) }
 		>

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -66,10 +66,7 @@ export default function HeaderEditMode() {
 			templateType: getEditedPostType(),
 			blockEditorMode: __unstableGetEditorMode(),
 			blockSelectionStart: getBlockSelectionStart(),
-			showIconLabels: getPreference(
-				editSiteStore.name,
-				'showIconLabels'
-			),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
@@ -136,7 +133,6 @@ export default function HeaderEditMode() {
 					<DocumentTools
 						blockEditorMode={ blockEditorMode }
 						isDistractionFree={ isDistractionFree }
-						showIconLabels={ showIconLabels }
 					/>
 					{ isTopToolbar && (
 						<>
@@ -209,14 +205,13 @@ export default function HeaderEditMode() {
 							) }
 						>
 							<PreviewDropdown
-								showIconLabels={ showIconLabels }
 								disabled={
 									isFocusMode || ! hasDefaultEditorCanvasView
 								}
 							/>
 						</div>
 					) }
-					<PostViewLink showIconLabels={ showIconLabels } />
+					<PostViewLink />
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
@@ -136,6 +136,7 @@ export default function EditSitePreferencesModal() {
 					</PreferencesModalSection>
 					<PreferencesModalSection title={ __( 'Interface' ) }>
 						<EnableFeature
+							namespace="core"
 							featureName="showIconLabels"
 							label={ __( 'Show button text labels' ) }
 							help={ __(

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
@@ -5,8 +5,6 @@ import {
 	ComplementaryArea,
 	ComplementaryAreaMoreMenuItem,
 } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function DefaultSidebar( {
 	className,
@@ -19,15 +17,6 @@ export default function DefaultSidebar( {
 	headerClassName,
 	panelClassName,
 } ) {
-	const showIconLabels = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		[]
-	);
-
 	return (
 		<>
 			<ComplementaryArea
@@ -41,7 +30,6 @@ export default function DefaultSidebar( {
 				header={ header }
 				headerClassName={ headerClassName }
 				panelClassName={ panelClassName }
-				showIconLabels={ showIconLabels }
 			>
 				{ children }
 			</ComplementaryArea>

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { ComplementaryArea } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
@@ -71,21 +69,11 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * ```
  */
 export default function PluginSidebarEditSite( { className, ...props } ) {
-	const showIconLabels = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		[]
-	);
-
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="edit-site-sidebar-edit-mode"
 			scope="core/edit-site"
-			showIconLabels={ showIconLabels }
 			{ ...props }
 		/>
 	);

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
@@ -19,6 +19,7 @@ import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -36,7 +37,6 @@ const preventDefault = ( event ) => {
 
 function DocumentTools( {
 	className,
-	showIconLabels,
 	disableBlockTools = false,
 	children,
 	// This is a temporary prop until the list view is fully unified between post and site editors.
@@ -51,8 +51,10 @@ function DocumentTools( {
 		listViewShortcut,
 		listViewToggleRef,
 		hasFixedToolbar,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
+		const { get } = select( preferencesStore );
 		const { isListViewOpened, getListViewToggleRef } = unlock(
 			select( editorStore )
 		);
@@ -66,6 +68,7 @@ function DocumentTools( {
 			),
 			listViewToggleRef: getListViewToggleRef(),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
+			showIconLabels: get( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 

diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
@@ -17,6 +17,7 @@ import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, cloud, cloudUpload } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -27,16 +28,12 @@ import { store as editorStore } from '../../store';
  * Component showing whether the post is saved or not and providing save
  * buttons.
  *
- * @param {Object}   props                Component props.
- * @param {?boolean} props.forceIsDirty   Whether to force the post to be marked
- *                                        as dirty.
- * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
+ * @param {Object}   props              Component props.
+ * @param {?boolean} props.forceIsDirty Whether to force the post to be marked
+ *                                      as dirty.
  * @return {import('react').ComponentType} The component.
  */
-export default function PostSavedState( {
-	forceIsDirty,
-	showIconLabels = false,
-} ) {
+export default function PostSavedState( { forceIsDirty } ) {
 	const [ forceSavedMessage, setForceSavedMessage ] = useState( false );
 	const isLargeViewport = useViewportMatch( 'small' );
 
@@ -50,6 +47,7 @@ export default function PostSavedState( {
 		isSaving,
 		isScheduled,
 		hasPublishAction,
+		showIconLabels,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -63,6 +61,7 @@ export default function PostSavedState( {
 				isAutosavingPost,
 				getEditedPostAttribute,
 			} = select( editorStore );
+			const { get } = select( preferencesStore );
 
 			return {
 				isAutosaving: isAutosavingPost(),
@@ -75,6 +74,7 @@ export default function PostSavedState( {
 				isScheduled: isCurrentPostScheduled(),
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
+				showIconLabels: get( 'core', 'showIconLabels' ),
 			};
 		},
 		[ forceIsDirty ]