diff --git a/packages/block-editor/src/components/date-format-picker/README.md b/packages/block-editor/src/components/date-format-picker/README.md index e057bdc31a1680..f6160cb90955b5 100644 --- a/packages/block-editor/src/components/date-format-picker/README.md +++ b/packages/block-editor/src/components/date-format-picker/README.md @@ -1,17 +1,12 @@ # DateFormatPicker -The `DateFormatPicker` component renders controls that let the user choose a -_date format_. That is, how they want their dates to be formatted. +The `DateFormatPicker` component renders controls that let the user choose a _date format_. That is, how they want their dates to be formatted. -A user can pick _Default_ to use the default date format (usually set at the -site level). +A user can pick _Default_ to use the default date format (usually set at the site level). -Otherwise, a user may choose a suggested date format or type in their own date -format by selecting _Custom_. +Otherwise, a user may choose a suggested date format or type in their own date format by selecting _Custom_. -All date format strings should be in the format accepted by by the [`dateI18n` -function in -`@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n). +All date format strings should be in the format accepted by by the [`dateI18n` function in `@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n). ## Usage @@ -43,16 +38,14 @@ The current date format selected by the user. If `null`, _Default_ is selected. ### `defaultFormat` -The default format string. Used to show to the user what the date will look like -if _Default_ is selected. +The default format string. Used to show to the user what the date will look like if _Default_ is selected. - Type: `string` - Required: Yes ### `onChange` -Called when the user makes a selection, or when the user types in a date format. -`null` indicates that _Default_ is selected. +Called when the user makes a selection, or when the user types in a date format. `null` indicates that _Default_ is selected. - Type: `( format: string|null ) => void` - Required: Yes diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index eb269e03ca5abc..719390a1d6f903 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -29,21 +29,10 @@ if ( exampleDate.getMonth() === 4 ) { * * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md * - * @param {Object} props - * @param {string|null} props.format The selected date - * format. If - * `null`, - * _Default_ is - * selected. - * @param {string} props.defaultFormat The date format that - * will be used if the - * user selects - * 'Default'. - * @param {( format: string|null ) => void} props.onChange Called when a - * selection is - * made. If `null`, - * _Default_ is - * selected. + * @param {Object} props + * @param {string|null} props.format The selected date format. If `null`, _Default_ is selected. + * @param {string} props.defaultFormat The date format that will be used if the user selects 'Default'. + * @param {Function} props.onChange Called when a selection is made. If `null`, _Default_ is selected. */ export default function DateFormatPicker( { format, diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js index b51bd9a4fe1e6b..d4f25da8507f3e 100644 --- a/packages/block-library/src/archives/edit.js +++ b/packages/block-library/src/archives/edit.js @@ -12,9 +12,16 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import ServerSideRender from '@wordpress/server-side-render'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; + export default function ArchivesEdit( { attributes, setAttributes } ) { const { showLabel, showPostCounts, displayAsDropdown, type } = attributes; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + return ( <> @@ -28,6 +35,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) { type: 'monthly', } ); } } + dropdownMenuProps={ dropdownMenuProps } > ( { ...imageSchema, a: { attributes: [ 'href', 'rel', 'target' ], - classes: [ /[\w-]*/ ], + classes: [ '*' ], children: imageSchema, }, figcaption: { diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js index 76d6e98b1ccc32..9af634c87371cf 100644 --- a/packages/block-library/src/loginout/edit.js +++ b/packages/block-library/src/loginout/edit.js @@ -8,9 +8,14 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; export default function LoginOutEdit( { attributes, setAttributes } ) { const { displayLoginAsForm, redirectToCurrent } = attributes; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return ( <> @@ -23,6 +28,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) { redirectToCurrent: true, } ); } } + dropdownMenuProps={ dropdownMenuProps } > setOpen( true ), [] ); const closeModal = () => setOpen( false ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords( 'postType', @@ -326,6 +328,7 @@ export default function PageListEdit( { resetAll={ () => { setAttributes( { parentPageID: 0 } ); } } + dropdownMenuProps={ dropdownMenuProps } > { pagesTree.length > 0 && ( { - if ( typeof item === 'string' ) { + if ( item === '*' ) { + // Keep all classes. + return () => true; + } else if ( typeof item === 'string' ) { return ( /** @type {string} */ className ) => className === item; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c045bafd8a6839..ad88ee07e2150f 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 20162c5272f2ef..a5e14f0be82816 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 980f20c49821b0..030512a38fab3a 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.' ) } - - - +