From 1d3f3c42bbbc5214877328637cdaa976b72652b3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 28 Jan 2022 16:50:02 +1100 Subject: [PATCH 1/5] Add button text labels to site editor. --- .../edit-site/src/components/editor/index.js | 10 ++++++ .../edit-site/src/components/header/index.js | 6 +++- .../src/components/header/more-menu/index.js | 13 +++++++ .../src/components/header/style.scss | 34 +++++++++++++++++++ packages/edit-site/src/store/selectors.js | 5 +++ 5 files changed, 67 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index a092754465fbd7..e85c85164fbfd3 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -61,6 +61,7 @@ function Editor( { onError } ) { previousShortcut, nextShortcut, editorMode, + showIconLabels, } = useSelect( ( select ) => { const { isInserterOpened, @@ -71,6 +72,7 @@ function Editor( { onError } ) { getPage, isNavigationOpened, getEditorMode, + isFeatureActive, } = select( editSiteStore ); const { hasFinishedResolution, getEntityRecord } = select( coreStore ); const postType = getEditedPostType(); @@ -105,6 +107,7 @@ function Editor( { onError } ) { keyboardShortcutsStore ).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), editorMode: getEditorMode(), + showIconLabels: isFeatureActive( 'showIconLabels' ), }; }, [] ); const { setPage, setIsInserterOpened } = useDispatch( editSiteStore ); @@ -203,6 +206,10 @@ function Editor( { onError } ) { } notices={ } diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 0247f13c11fbca..f15366a442697d 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 && ( <> + Date: Fri, 18 Mar 2022 15:37:28 +1100 Subject: [PATCH 2/5] Move preference into modal. --- .../src/components/header/more-menu/index.js | 13 ------------- .../src/components/preferences-modal/index.js | 5 +++++ 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js index d006c003a638af..10e3746588d3f7 100644 --- a/packages/edit-site/src/components/header/more-menu/index.js +++ b/packages/edit-site/src/components/header/more-menu/index.js @@ -66,19 +66,6 @@ export default function MoreMenu() { 'Spotlight mode deactivated' ) } /> - + ), }, From a2227513df7e9df3a08f80d80733ce63c23a7969 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 18 Mar 2022 15:46:42 +1100 Subject: [PATCH 3/5] Update tests. --- packages/edit-site/src/store/test/selectors.js | 2 ++ 1 file changed, 2 insertions(+) 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 ), From d7ba2aec2e34031804f980e516db881cb3fc75b3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 18 Mar 2022 16:44:39 +1100 Subject: [PATCH 4/5] Update feature selector. --- packages/edit-site/src/components/editor/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index e85c85164fbfd3..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 @@ -72,7 +73,6 @@ function Editor( { onError } ) { getPage, isNavigationOpened, getEditorMode, - isFeatureActive, } = select( editSiteStore ); const { hasFinishedResolution, getEntityRecord } = select( coreStore ); const postType = getEditedPostType(); @@ -107,7 +107,10 @@ function Editor( { onError } ) { keyboardShortcutsStore ).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), editorMode: getEditorMode(), - showIconLabels: isFeatureActive( 'showIconLabels' ), + showIconLabels: select( preferencesStore ).get( + 'core/edit-site', + 'showIconLabels' + ), }; }, [] ); const { setPage, setIsInserterOpened } = useDispatch( editSiteStore ); From 485674a7fd9156478b17fbfe88fa9ef1b880ac90 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 21 Mar 2022 11:32:19 +1100 Subject: [PATCH 5/5] Adjust margins and paddings on header buttons. --- .../header/document-actions/index.js | 24 +++++++++++-------- .../edit-site/src/components/header/index.js | 1 + .../src/components/header/style.scss | 15 ++++++++++-- 3 files changed, 28 insertions(+), 12 deletions(-) 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 f15366a442697d..6257fa70a33bea 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -159,6 +159,7 @@ export default function Header( { : 'template' } isLoaded={ isLoaded } + showIconLabels={ showIconLabels } > { ( { onClose } ) => (