diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index a092754465fbd7..73bc535184f9db 100644
--- 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 } ) {
}
notices={ }
diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js
index f46be89a073c32..0c3e465aba410f 100644
--- 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' ) }
+
) }
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
index 0247f13c11fbca..6257fa70a33bea 100644
--- 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' ) ) }
+
{ isLargeViewport && (
<>
{ ( { onClose } ) => (
+
),
},
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index c3d6c01c9fb51c..3aeda35a2ff819 100644
--- 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
index 5e1c390e8a7c99..907c2dc52eae46 100644
--- 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 ),