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 ),