From 8c94287abef08bfbe5bc572e86c1d3b048f594d7 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 16 Dec 2024 14:18:48 +1100 Subject: [PATCH] Try toggle instead of dropdown to show stylebook. (#67810) * Try toggle instead of dropdown to show stylebook. * Use button instead of actual toggle * Make button icon except if text labels are enabled --- .../edit-site/src/components/editor/index.js | 8 +--- .../edit-site/src/components/layout/index.js | 13 ++++- .../sidebar-global-styles-wrapper/index.js | 47 +++++-------------- .../sidebar-global-styles-wrapper/style.scss | 22 +++++++++ 4 files changed, 46 insertions(+), 44 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c045bafd8a683..ad88ee07e2150 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -20,7 +20,6 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library import { useCallback, useMemo } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { store as preferencesStore } from '@wordpress/preferences'; import { decodeEntities } from '@wordpress/html-entities'; import { Icon, arrowUpLeft } from '@wordpress/icons'; import { store as blockEditorStore } from '@wordpress/block-editor'; @@ -130,7 +129,6 @@ export default function EditSiteEditor( { isPostsList = false } ) { const { postType, postId, context } = entity; const { supportsGlobalStyles, - showIconLabels, editorCanvasView, currentPostIsTrashed, hasSiteIcon, @@ -138,13 +136,11 @@ export default function EditSiteEditor( { isPostsList = false } ) { const { getEditorCanvasContainerView } = unlock( select( editSiteStore ) ); - const { get } = select( preferencesStore ); const { getCurrentTheme, getEntityRecord } = select( coreDataStore ); const siteData = getEntityRecord( 'root', '__unstableBase', undefined ); return { supportsGlobalStyles: getCurrentTheme()?.is_block_theme, - showIconLabels: get( 'core', 'showIconLabels' ), editorCanvasView: getEditorCanvasContainerView(), currentPostIsTrashed: select( editorStore ).getCurrentPostAttribute( 'status' ) === @@ -267,9 +263,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { postId={ postWithTemplate ? context.postId : postId } templateId={ postWithTemplate ? postId : undefined } settings={ settings } - className={ clsx( 'edit-site-editor__editor-interface', { - 'show-icon-labels': showIconLabels, - } ) } + className="edit-site-editor__editor-interface" styles={ styles } customSaveButton={ _isPreviewingTheme && diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 20162c5272f2e..a5e14f0be8281 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -32,7 +32,8 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands import { privateApis as routerPrivateApis } from '@wordpress/router'; import { PluginArea } from '@wordpress/plugins'; import { store as noticesStore } from '@wordpress/notices'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -70,6 +71,15 @@ function Layout() { triggerAnimationOnChange: routeKey + '-' + canvas, } ); + const { showIconLabels } = useSelect( ( select ) => { + return { + showIconLabels: select( preferencesStore ).get( + 'core', + 'showIconLabels' + ), + }; + } ); + const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); const previousCanvaMode = usePrevious( canvas ); @@ -93,6 +103,7 @@ function Layout() { navigateRegionsProps.className, { 'is-full-canvas': canvas === 'edit', + 'show-icon-labels': showIconLabels, } ) } > diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js index 980f20c49821b..030512a38fab3 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js @@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n'; import { useMemo, useState } from '@wordpress/element'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { useViewportMatch } from '@wordpress/compose'; -import { - Button, - privateApis as componentsPrivateApis, -} from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { addQueryArgs } from '@wordpress/url'; +import { seen } from '@wordpress/icons'; /** * Internal dependencies @@ -21,44 +19,21 @@ import StyleBook from '../style-book'; import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; const { useLocation, useHistory } = unlock( routerPrivateApis ); -const { Menu } = unlock( componentsPrivateApis ); const GlobalStylesPageActions = ( { isStyleBookOpened, setIsStyleBookOpened, } ) => { return ( - - { __( 'Preview' ) } - - } - > - setIsStyleBookOpened( true ) } - defaultChecked - > - { __( 'Style book' ) } - - { __( 'Preview blocks and styles.' ) } - - - setIsStyleBookOpened( false ) } - > - { __( 'Site' ) } - - { __( 'Preview your site.' ) } - - - +