From c845c410da84ce8824b1b730363e5450ef6113a8 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Fri, 7 Jul 2023 11:39:41 +1000 Subject: [PATCH 01/43] add hint to show template part move (#52395) --- .../sidebar-navigation-screen-main/index.js | 84 ++++++++++--------- .../template-part-hint.js | 36 ++++++++ .../sidebar-navigation-screen/style.scss | 14 ++++ 3 files changed, 94 insertions(+), 40 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 58b93d61c45a6..152139870fa59 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; +import TemplatePartHint from './template-part-hint'; export default function SidebarNavigationScreenMain() { const { location } = useNavigator(); @@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() { 'Customize the appearance of your website using the block editor.' ) } content={ - - - { __( 'Navigation' ) } - - - { __( 'Styles' ) } - - - { __( 'Pages' ) } - - - { __( 'Templates' ) } - - - { __( 'Patterns' ) } - - + <> + + + { __( 'Navigation' ) } + + + { __( 'Styles' ) } + + + { __( 'Pages' ) } + + + { __( 'Templates' ) } + + + { __( 'Patterns' ) } + + + + } /> ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js new file mode 100644 index 0000000000000..8fbe74f81bb4d --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js @@ -0,0 +1,36 @@ +/** + * WordPress dependencies + */ +import { Notice } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { store as preferencesStore } from '@wordpress/preferences'; + +const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible'; + +export default function TemplatePartHint() { + const showTemplatePartHint = useSelect( + ( select ) => + select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true, + [] + ); + + const { set: setPreference } = useDispatch( preferencesStore ); + if ( ! showTemplatePartHint ) { + return null; + } + + return ( + { + setPreference( 'core', PREFERENCE_NAME, false ); + } } + > + { __( + 'Looking for template parts? You can now find them in the new "Patterns" page.' + ) } + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index dadee024b0ead..664fce028952f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -98,6 +98,20 @@ border-top: 1px solid $gray-800; } +.edit-site-sidebar__notice { + background: $gray-800; + color: $gray-300; + margin: $grid-unit-30 0; + &.is-dismissible { + padding-right: $grid-unit-10; + } + .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus, + .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active, + .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { + color: $gray-100; + } +} + /* In general style overrides are discouraged. * This is a temporary solution to override the InputControl component's styles. * The `Theme` component will potentially be the more appropriate approach From e36aae16bb81679544966929b1a9be6f8885e994 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 7 Jul 2023 10:39:46 +1000 Subject: [PATCH 02/43] Page Content Focus: Ignore page content within a Query Loop block (#52351) * Block Editor: Pass context and className props to editor.BlockEdit filter * Page Content Focus: Ignore content blocks that are within a Query Loop --- .../src/components/block-edit/edit.js | 35 ++++++++++++++----- .../src/components/block-edit/test/edit.js | 2 +- .../list-view/use-list-view-client-ids.js | 4 +-- .../src/store/private-selectors.js | 9 ++--- .../src/store/test/private-selectors.js | 10 +++--- .../page-content-focus-manager/constants.js | 5 --- .../disable-non-page-content-blocks.js | 15 ++++++-- .../page-panels/page-content.js | 12 ++++--- 8 files changed, 56 insertions(+), 36 deletions(-) delete mode 100644 packages/edit-site/src/components/page-content-focus-manager/constants.js diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js index 1154b99efebab..31344b5433793 100644 --- a/packages/block-editor/src/components/block-edit/edit.js +++ b/packages/block-editor/src/components/block-edit/edit.js @@ -29,7 +29,25 @@ import BlockContext from '../block-context'; */ const DEFAULT_BLOCK_CONTEXT = {}; -export const Edit = ( props ) => { +const Edit = ( props ) => { + const { name } = props; + const blockType = getBlockType( name ); + + if ( ! blockType ) { + return null; + } + + // `edit` and `save` are functions or components describing the markup + // with which a block is displayed. If `blockType` is valid, assign + // them preferentially as the render value for the block. + const Component = blockType.edit || blockType.save; + + return ; +}; + +const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit ); + +const EditWithGeneratedProps = ( props ) => { const { attributes = {}, name } = props; const blockType = getBlockType( name ); const blockContext = useContext( BlockContext ); @@ -49,13 +67,8 @@ export const Edit = ( props ) => { return null; } - // `edit` and `save` are functions or components describing the markup - // with which a block is displayed. If `blockType` is valid, assign - // them preferentially as the render value for the block. - const Component = blockType.edit || blockType.save; - if ( blockType.apiVersion > 1 ) { - return ; + return ; } // Generate a class name for the block's editable form. @@ -69,8 +82,12 @@ export const Edit = ( props ) => { ); return ( - + ); }; -export default withFilters( 'editor.BlockEdit' )( Edit ); +export default EditWithGeneratedProps; diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js index 0eb4c72cbbfc9..76afbcb852ac1 100644 --- a/packages/block-editor/src/components/block-edit/test/edit.js +++ b/packages/block-editor/src/components/block-edit/test/edit.js @@ -15,7 +15,7 @@ import { /** * Internal dependencies */ -import { Edit } from '../edit'; +import Edit from '../edit'; import { BlockContextProvider } from '../../block-context'; const noop = () => {}; diff --git a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js index d51412fdf2c3d..8a1ccfcede4c1 100644 --- a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js +++ b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js @@ -16,14 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) { const { getDraggedBlockClientIds, getSelectedBlockClientIds, - getListViewClientIdsTree, + getEnabledClientIdsTree, } = unlock( select( blockEditorStore ) ); return { selectedClientIds: getSelectedBlockClientIds(), draggedClientIds: getDraggedBlockClientIds(), clientIdsTree: - blocks ?? getListViewClientIdsTree( rootClientId ), + blocks ?? getEnabledClientIdsTree( rootClientId ), }; }, [ blocks, rootClientId ] diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 454f3f32ba8f7..72f3dd3c73510 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -136,21 +136,18 @@ export const isBlockSubtreeDisabled = createSelector( * * @return {Object[]} Tree of block objects with only clientID and innerBlocks set. */ -export const getListViewClientIdsTree = createSelector( +export const getEnabledClientIdsTree = createSelector( ( state, rootClientId = '' ) => { return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => { if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) { return [ { clientId, - innerBlocks: getListViewClientIdsTree( - state, - clientId - ), + innerBlocks: getEnabledClientIdsTree( state, clientId ), }, ]; } - return getListViewClientIdsTree( state, clientId ); + return getEnabledClientIdsTree( state, clientId ); } ); }, ( state ) => [ diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index 30cf702c60526..e826db4a62bb9 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -11,7 +11,7 @@ import { getLastInsertedBlocksClientIds, getBlockEditingMode, isBlockSubtreeDisabled, - getListViewClientIdsTree, + getEnabledClientIdsTree, getEnabledBlockParents, } from '../private-selectors'; @@ -391,7 +391,7 @@ describe( 'private selectors', () => { } ); } ); - describe( 'getListViewClientIdsTree', () => { + describe( 'getEnabledClientIdsTree', () => { const baseState = { settings: {}, blocks: { @@ -462,7 +462,7 @@ describe( 'private selectors', () => { ...baseState, blockEditingModes: new Map( [] ), }; - expect( getListViewClientIdsTree( state ) ).toEqual( [ + expect( getEnabledClientIdsTree( state ) ).toEqual( [ { clientId: '6cf70164-9097-4460-bcbf-200560546988', innerBlocks: [], @@ -500,7 +500,7 @@ describe( 'private selectors', () => { blockEditingModes: new Map( [] ), }; expect( - getListViewClientIdsTree( + getEnabledClientIdsTree( state, 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ) @@ -534,7 +534,7 @@ describe( 'private selectors', () => { [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ], ] ), }; - expect( getListViewClientIdsTree( state ) ).toEqual( [ + expect( getEnabledClientIdsTree( state ) ).toEqual( [ { clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972', innerBlocks: [], diff --git a/packages/edit-site/src/components/page-content-focus-manager/constants.js b/packages/edit-site/src/components/page-content-focus-manager/constants.js deleted file mode 100644 index a81b2fd37563a..0000000000000 --- a/packages/edit-site/src/components/page-content-focus-manager/constants.js +++ /dev/null @@ -1,5 +0,0 @@ -export const PAGE_CONTENT_BLOCK_TYPES = [ - 'core/post-title', - 'core/post-featured-image', - 'core/post-content', -]; diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js index 33ea486863d20..7b184ff253c7e 100644 --- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js +++ b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js @@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import { PAGE_CONTENT_BLOCK_TYPES } from './constants'; const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); +const PAGE_CONTENT_BLOCK_TYPES = [ + 'core/post-title', + 'core/post-featured-image', + 'core/post-content', +]; + /** * Component that when rendered, makes it so that the site editor allows only * page content to be edited. */ export default function DisableNonPageContentBlocks() { useDisableNonPageContentBlocks(); + return null; } /** @@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() { const withDisableNonPageContentBlocks = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name ); - const mode = isContent ? 'contentOnly' : undefined; + const isDescendentOfQueryLoop = !! props.context.queryId; + const isPageContent = + PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) && + ! isDescendentOfQueryLoop; + const mode = isPageContent ? 'contentOnly' : undefined; useBlockEditingMode( mode ); return ; }, diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js index d6e7dd23a709f..dd40bcaef9f70 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js @@ -6,22 +6,24 @@ import { store as blockEditorStore, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants'; import { unlock } from '../../../lock-unlock'; const { BlockQuickNavigation } = unlock( blockEditorPrivateApis ); export default function PageContent() { - const clientIds = useSelect( + const clientIdsTree = useSelect( ( select ) => - select( blockEditorStore ).__experimentalGetGlobalBlocksByName( - PAGE_CONTENT_BLOCK_TYPES - ), + unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(), [] ); + const clientIds = useMemo( + () => clientIdsTree.map( ( { clientId } ) => clientId ), + [ clientIdsTree ] + ); return ; } From 089d7fd64570952dcd6f3607746643e6f21988a0 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 7 Jul 2023 09:31:12 +1200 Subject: [PATCH 03/43] Patterns: stop endless snackbars appearing (#52012) --- .../e2e-test-utils/src/create-reusable-block.js | 2 +- .../specs/editor/various/reusable-blocks.test.js | 2 +- .../reusable-block-convert-button.js | 16 +++++++++++++--- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js index 7193db49a83ef..446cf169b5c39 100644 --- a/packages/e2e-test-utils/src/create-reusable-block.js +++ b/packages/e2e-test-utils/src/create-reusable-block.js @@ -38,7 +38,7 @@ export const createReusableBlock = async ( content, title ) => { // Wait for creation to finish await page.waitForXPath( - '//*[contains(@class, "components-snackbar")]/*[text()="Synced Pattern created."]' + '//*[contains(@class, "components-snackbar")]/*[contains(text(),"Pattern created:")]' ); // Check that we have a reusable block on the page diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 1ffd4e2414336..10f9e9f24581e 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -212,7 +212,7 @@ describe( 'Reusable blocks', () => { // Wait for creation to finish. await page.waitForXPath( - '//*[contains(@class, "components-snackbar")]/*[text()="Synced Pattern created."]' + '//*[contains(@class, "components-snackbar")]/*[contains(text(),"Pattern created:")]' ); await clearAllBlocks(); diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index d051e36641281..35769238fd506 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -18,7 +18,7 @@ import { } from '@wordpress/components'; import { symbol } from '@wordpress/icons'; import { useDispatch, useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { store as coreStore } from '@wordpress/core-data'; @@ -97,15 +97,25 @@ export default function ReusableBlockConvertButton( { ); createSuccessNotice( syncType === 'fully' - ? __( 'Synced Pattern created.' ) - : __( 'Unsynced Pattern created.' ), + ? sprintf( + // translators: %s: the name the user has given to the pattern. + __( 'Synced Pattern created: %s' ), + reusableBlockTitle + ) + : sprintf( + // translators: %s: the name the user has given to the pattern. + __( 'Unsynced Pattern created: %s' ), + reusableBlockTitle + ), { type: 'snackbar', + id: 'convert-to-reusable-block-success', } ); } catch ( error ) { createErrorNotice( error.message, { type: 'snackbar', + id: 'convert-to-reusable-block-error', } ); } }, From ef51622a276c8b77e23d1dba12413d3e1e06da00 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 7 Jul 2023 00:50:02 +0100 Subject: [PATCH 04/43] Patterns: Distinguish between theme patterns and template parts in category list (#52382) --- .../index.js | 128 +++++++++++------- .../style.scss | 27 +++- 2 files changed, 105 insertions(+), 50 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index 04f893cdbf2c8..0277dda3adf05 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -7,6 +7,7 @@ import { Flex, Icon, Tooltip, + __experimentalHeading as Heading, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; @@ -109,9 +110,21 @@ export default function SidebarNavigationScreenPatterns() { ) } { hasTemplateParts && ( - - { Object.entries( templatePartAreas ).map( - ( [ area, parts ] ) => ( + <> +
+ + { __( 'Template parts' ) } + +

+ { __( + 'Synced patterns for use in template building.' + ) } +

+
+ + { Object.entries( + templatePartAreas + ).map( ( [ area, parts ] ) => ( - ) - ) } - + ) ) } + + ) } { hasPatterns && ( - - { patternCategories.map( ( category ) => ( - - { category.label } - - - - - - - } - icon={ file } - id={ category.name } - type="pattern" - isActive={ - currentCategory === - `${ category.name }` && - currentType === 'pattern' - } - /> - ) ) } - + <> +
+ + { __( 'Theme patterns' ) } + +

+ { __( + 'For insertion into documents where they can then be customized.' + ) } +

+
+ + { patternCategories.map( + ( category ) => ( + + { category.label } + + + + + + + } + icon={ file } + id={ category.name } + type="pattern" + isActive={ + currentCategory === + `${ category.name }` && + currentType === + 'pattern' + } + /> + ) + ) } + + ) } ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss index f0edb96164abc..65790b5e86216 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss @@ -1,3 +1,28 @@ .edit-site-sidebar-navigation-screen-patterns__group { - margin-bottom: $grid-unit-30; + margin-bottom: $grid-unit-40; + padding-bottom: $grid-unit-30; + border-bottom: 1px solid $gray-800; + + &:last-of-type, + &:first-of-type { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; + } + + &:first-of-type { + margin-bottom: $grid-unit-40; + } +} + +.edit-site-sidebar-navigation-screen-patterns__group-header { + p { + color: $gray-600; + } + + h2 { + font-size: 11px; + font-weight: 500; + text-transform: uppercase; + } } From 02fb4a7cb7ff976655826510d7d036f270ac112f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 6 Jul 2023 19:40:16 +0100 Subject: [PATCH 05/43] Allow opt out of auto-creation of Navigation fallback (#52319) --- .../class-gutenberg-navigation-fallback.php | 11 ++++++++++- ...erg-navigation-fallback-gutenberg-test.php | 19 ++++++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.3/class-gutenberg-navigation-fallback.php b/lib/compat/wordpress-6.3/class-gutenberg-navigation-fallback.php index 91417971e22c7..fcf6e13b0954d 100644 --- a/lib/compat/wordpress-6.3/class-gutenberg-navigation-fallback.php +++ b/lib/compat/wordpress-6.3/class-gutenberg-navigation-fallback.php @@ -23,9 +23,18 @@ class Gutenberg_Navigation_Fallback { */ public static function get_fallback() { + /** + * Filters whether or not a fallback should be created. + * + * @since 6.3.0 + * + * @param bool Whether or not to create a fallback. + */ + $should_create_fallback = apply_filters( 'gutenberg_navigation_should_create_fallback', true ); + $fallback = static::get_most_recently_published_navigation(); - if ( $fallback ) { + if ( $fallback || ! $should_create_fallback ) { return $fallback; } diff --git a/phpunit/class-gutenberg-navigation-fallback-gutenberg-test.php b/phpunit/class-gutenberg-navigation-fallback-gutenberg-test.php index 7b0719950df8b..edc48f1c71761 100644 --- a/phpunit/class-gutenberg-navigation-fallback-gutenberg-test.php +++ b/phpunit/class-gutenberg-navigation-fallback-gutenberg-test.php @@ -32,7 +32,6 @@ public function test_it_exists() { $this->assertTrue( class_exists( 'Gutenberg_Navigation_Fallback' ), 'Gutenberg_Navigation_Fallback class should exist.' ); } - /** * @covers WP_REST_Navigation_Fallback_Controller::get_fallback */ @@ -54,6 +53,24 @@ public function test_should_return_a_default_fallback_navigation_menu_in_absence $this->assertCount( 1, $navs_in_db, 'The fallback Navigation post should be the only one in the database.' ); } + /** + * @covers WP_REST_Navigation_Fallback_Controller::get_fallback + */ + public function test_should_not_automatically_create_fallback_if_filter_is_falsey() { + + add_filter( 'gutenberg_navigation_should_create_fallback', '__return_false' ); + + $data = Gutenberg_Navigation_Fallback::get_fallback(); + + $this->assertEmpty( $data ); + + $navs_in_db = $this->get_navigations_in_database(); + + $this->assertCount( 0, $navs_in_db, 'The fallback Navigation post should not have been created.' ); + + remove_filter( 'gutenberg_navigation_should_create_fallback', '__return_false' ); + } + /** * @covers WP_REST_Navigation_Fallback_Controller::get_fallback */ From 1fe426f0ae30263eff74a75fb9028bc173894d0f Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 5 Jul 2023 10:38:06 +0100 Subject: [PATCH 06/43] Update welcome guide copy (#52282) --- packages/edit-site/src/components/welcome-guide/page.js | 4 ++-- packages/edit-site/src/components/welcome-guide/template.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/welcome-guide/page.js b/packages/edit-site/src/components/welcome-guide/page.js index 2f162c0b2e84e..adb64a8033e99 100644 --- a/packages/edit-site/src/components/welcome-guide/page.js +++ b/packages/edit-site/src/components/welcome-guide/page.js @@ -31,7 +31,7 @@ export default function WelcomeGuidePage() { return null; } - const heading = __( 'Editing your page' ); + const heading = __( 'Editing a page' ); return (

{ __( - 'We’ve recently introduced the ability to edit pages within the site editor. You can switch to editing your template using the settings sidebar.' + 'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.' ) }

diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js index cf0e723ab4609..f0c02c09d1124 100644 --- a/packages/edit-site/src/components/welcome-guide/template.js +++ b/packages/edit-site/src/components/welcome-guide/template.js @@ -36,7 +36,7 @@ export default function WelcomeGuideTemplate() { return null; } - const heading = __( 'Editing your template' ); + const heading = __( 'Editing a template' ); return (

{ __( - 'You’re now editing your page’s template. To switch back to editing your page you can click the back button in the toolbar.' + 'Note that the same template can be used by multiple pages, so any changes made here may affect other pages on the site. To switch back to editing the page content click the ‘Back’ button in the toolbar.' ) }

From c522b128dbac1c3b043f9eeb7a7ef37e0a650aa5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 6 Jul 2023 01:53:31 +0100 Subject: [PATCH 07/43] Patterns: Update pattern copy (#52340) --- .../edit-site/src/components/page-patterns/patterns-list.js | 4 ++-- .../sidebar-navigation-screen-pattern/use-pattern-details.js | 4 ++-- .../components/sidebar-navigation-screen-patterns/index.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js index 2dfe197c37963..8430b61a0772d 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -79,7 +79,7 @@ export default function PatternsList( { categoryId, type } ) { { __( 'Synced' ) } { __( - 'Patterns that are kept in sync across your site' + 'Patterns that are kept in sync across the site' ) } @@ -97,7 +97,7 @@ export default function PatternsList( { categoryId, type } ) { { __( 'Standard' ) } { __( - 'Patterns that can be changed freely without affecting your site' + 'Patterns that can be changed freely without affecting the site' ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index dfc367ea0b97d..3828c18af7838 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -38,7 +38,7 @@ export default function usePatternDetails( postType, postId ) { if ( ! descriptionText && addedBy.text ) { descriptionText = sprintf( // translators: %s: pattern title e.g: "Header". - __( 'This is your %s pattern.' ), + __( 'This is the %s pattern.' ), getTitle() ); } @@ -46,7 +46,7 @@ export default function usePatternDetails( postType, postId ) { if ( ! descriptionText && postType === 'wp_block' && record?.title ) { descriptionText = sprintf( // translators: %s: user created pattern title e.g. "Footer". - __( 'This is your %s pattern.' ), + __( 'This is the %s pattern.' ), record.title ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index 0277dda3adf05..97789e6ec45fe 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -74,7 +74,7 @@ export default function SidebarNavigationScreenPatterns() { isRoot={ isTemplatePartsMode } title={ __( 'Patterns' ) } description={ __( - 'Manage what patterns are available when editing your site.' + 'Manage what patterns are available when editing the site.' ) } actions={ } footer={ footer } From d376ba9aaad6a81cb3dabaecb30574097406119d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Jul 2023 17:22:27 +0400 Subject: [PATCH 08/43] Post Title: The changes should be reflected when previewing a post (#52369) --- packages/block-library/src/post-title/index.php | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php index e1d4b255c5773..1769b199cebf1 100644 --- a/packages/block-library/src/post-title/index.php +++ b/packages/block-library/src/post-title/index.php @@ -19,8 +19,11 @@ function render_block_core_post_title( $attributes, $content, $block ) { return ''; } - $post = get_post( $block->context['postId'] ); - $title = get_the_title( $post ); + /** + * The `$post` argument is intentionally omitted so that changes are reflected when previewing a post. + * See: https://github.com/WordPress/gutenberg/pull/37622#issuecomment-1000932816. + */ + $title = get_the_title(); if ( ! $title ) { return ''; @@ -33,7 +36,7 @@ function render_block_core_post_title( $attributes, $content, $block ) { if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { $rel = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : ''; - $title = sprintf( '%4$s', get_the_permalink( $post ), esc_attr( $attributes['linkTarget'] ), $rel, $title ); + $title = sprintf( '%4$s', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title ); } $classes = array(); From 73987713f42e3d9321a93d82e261a9b7e9b74699 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 5 Jul 2023 16:44:15 +0300 Subject: [PATCH 09/43] Update fixed block toolbar (#52123) * update the icons for expanding and collapsing the fixed block toolbar * hide the tools selector item in document tools for fixed toolbar preference * reveal undo, redo and list view buttons * tweaks for show icon labels and hide zoom out for top toolbar option * improve the responsiveness of the fixed block toolbar * remove the overflow rule - bad experiment * update top toolbar test with the new label for buttons * update the toolbar tests to account for moving the collapse button --- .../block-tools/block-contextual-toolbar.js | 15 +-- .../src/components/block-tools/style.scss | 95 ++++++++++++++----- .../components/header/header-toolbar/index.js | 5 +- .../document-actions/style.scss | 8 ++ .../src/components/header-edit-mode/index.js | 26 +++-- .../src/components/layout/style.scss | 11 --- .../various/shortcut-focus-toolbar.spec.js | 22 +---- 7 files changed, 107 insertions(+), 75 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index d9c06f0324701..4856f48db7854 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -15,7 +15,7 @@ import { ToolbarButton, ToolbarGroup, } from '@wordpress/components'; -import { levelUp } from '@wordpress/icons'; +import { next, previous } from '@wordpress/icons'; import { useViewportMatch } from '@wordpress/compose'; /** @@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose'; import NavigableToolbar from '../navigable-toolbar'; import BlockToolbar from '../block-toolbar'; import { store as blockEditorStore } from '../../store'; -import BlockIcon from '../block-icon'; import { unlock } from '../../lock-unlock'; function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { @@ -93,6 +92,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { aria-label={ __( 'Block tools' ) } { ...props } > + { ! isCollapsed && } { isFixed && isLargeViewport && blockType && ( - ) : ( - levelUp - ) - } + icon={ isCollapsed ? next : previous } onClick={ () => { setIsCollapsed( ( collapsed ) => ! collapsed ); toolbarButtonRef.current.focus(); @@ -118,12 +112,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { label={ isCollapsed ? __( 'Show block tools' ) - : __( 'Show document tools' ) + : __( 'Hide block tools' ) } /> ) } - { ! isCollapsed && } ); } diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index c55b8e651c2e7..07e400344bfe1 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -131,11 +131,11 @@ @include break-medium() { &.is-fixed { - // leave room for block inserter - margin-left: $grid-unit-80; + // leave room for block inserter, undo and redo, list view + margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05; // position on top of interface header position: fixed; - top: $admin-bar-height + $grid-unit; + top: $admin-bar-height + $grid-unit - $border-width; // Don't fill up when empty min-height: initial; // remove the border @@ -145,32 +145,63 @@ &.is-collapsed { width: initial; - margin-left: $grid-unit-80 * 3 + $grid-unit-30; } .is-fullscreen-mode & { - // leave room for block inserter - margin-left: $grid-unit-80 + $grid-unit-70; - top: $grid-unit; + // leave room for block inserter, undo and redo, list view + // and some margin left + margin-left: $grid-unit-80 * 4 - 2 * $grid-unit; + top: $grid-unit - $border-width; &.is-collapsed { width: initial; - margin-left: $grid-unit-80 * 4 + $grid-unit-30; + } + } + + & > .block-editor-block-toolbar.is-showing-movers { + flex-grow: initial; + width: initial; + + // Add a border as separator in the block toolbar. + &::before { + content: ""; + width: $border-width; + height: 3 * $grid-unit; + margin-top: $grid-unit + $grid-unit-05; + margin-right: 0; + background-color: $gray-300; + position: relative; + left: math.div(-$grid-unit-05, 2); + top: -1px; } } & > .block-editor-block-toolbar__group-collapse-fixed-toolbar { border: none; + .show-icon-labels & { + .components-button.has-icon { + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + font-size: $helptext-font-size; + } + } + } + // Add a border as separator in the block toolbar. - &::after { + &::before { content: ""; width: $border-width; - height: 24px; + height: 3 * $grid-unit; margin-top: $grid-unit + $grid-unit-05; - margin-bottom: $grid-unit + $grid-unit-05; + margin-right: $grid-unit-10; background-color: $gray-300; - position: absolute; - left: 44px; + position: relative; + left: 0; top: -1px; } } @@ -178,6 +209,21 @@ & > .block-editor-block-toolbar__group-expand-fixed-toolbar { border: none; + .show-icon-labels & { + width: $grid-unit-80 * 4; + .components-button.has-icon { + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + font-size: $helptext-font-size; + } + } + } + // Add a border as separator in the block toolbar. &::before { content: ""; @@ -186,27 +232,20 @@ margin-bottom: $grid-unit + $grid-unit-05; background-color: $gray-300; position: relative; - left: -12px; //the padding of buttons - height: 24px; + left: -8px; + height: 3 * $grid-unit; + top: -1px; } } .show-icon-labels & { - margin-left: $grid-unit-80; - - &.is-collapsed { - margin-left: $grid-unit-80 * 6; - } + margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ; .is-fullscreen-mode & { - margin-left: $grid-unit-80 + $grid-unit-80; - &.is-collapsed { - margin-left: $grid-unit-80 * 7; - } + margin-left: $grid-unit * 18; // site hub, inserter and margin } - .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after { left: 0; } @@ -234,12 +273,14 @@ } &.is-fixed .block-editor-block-parent-selector { + .block-editor-block-parent-selector__button { position: relative; top: -1px; border: 0; padding-right: 6px; padding-left: 6px; + &::after { content: "\00B7"; font-size: 16px; @@ -281,7 +322,9 @@ // for the block inserter the publish button @include break-large() { &.is-fixed { - width: initial; + // the combined with of the tools at the right of the header and the margin left + // of the toolbar which includes four buttons + width: calc(100% - 240px - #{4 * $grid-unit-80}); } } diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 391e5473999bb..8f9e413707d50 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -19,6 +19,7 @@ import { Button, ToolbarItem } from '@wordpress/components'; import { listView, plus } from '@wordpress/icons'; import { useRef, useCallback } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -36,6 +37,8 @@ function HeaderToolbar() { const inserterButton = useRef(); const { setIsInserterOpened, setIsListViewOpened } = useDispatch( editPostStore ); + const { get: getPreference } = useSelect( preferencesStore ); + const hasFixedToolbar = getPreference( 'core/edit-post', 'fixedToolbar' ); const { isInserterEnabled, isInserterOpened, @@ -147,7 +150,7 @@ function HeaderToolbar() { /> { ( isWideViewport || ! showIconLabels ) && ( <> - { isLargeViewport && ( + { isLargeViewport && ! hasFixedToolbar && ( - + { ! hasFixedToolbar && ( + + ) } ) } { isZoomedOutViewExperimentEnabled && - ! isDistractionFree && ( + ! isDistractionFree && + ! hasFixedToolbar && ( { await editor.insertBlock( { name: 'core/paragraph' } ); await toolbarUtils.moveToToolbarShortcut(); await expect( - toolbarUtils.blockToolbarShowDocumentButton + toolbarUtils.blockToolbarParagraphButton ).toBeFocused(); - await expect( - toolbarUtils.documentToolbarTooltip - ).not.toBeVisible(); // Test: Focus the block toolbar from paragraph block with content await editor.insertBlock( { name: 'core/paragraph' } ); @@ -113,11 +110,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => { ); await toolbarUtils.moveToToolbarShortcut(); await expect( - toolbarUtils.blockToolbarShowDocumentButton + toolbarUtils.blockToolbarParagraphButton ).toBeFocused(); - await expect( - toolbarUtils.documentToolbarTooltip - ).not.toBeVisible(); } ); test( 'Focuses the correct toolbar in select mode', async ( { @@ -135,11 +129,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => { await toolbarUtils.useSelectMode(); await toolbarUtils.moveToToolbarShortcut(); await expect( - toolbarUtils.blockToolbarShowDocumentButton + toolbarUtils.blockToolbarParagraphButton ).toBeFocused(); - await expect( - toolbarUtils.documentToolbarTooltip - ).not.toBeVisible(); // Test: Focus the block toolbar from paragraph in select mode await editor.insertBlock( { name: 'core/paragraph' } ); @@ -149,11 +140,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => { await toolbarUtils.useSelectMode(); await toolbarUtils.moveToToolbarShortcut(); await expect( - toolbarUtils.blockToolbarShowDocumentButton + toolbarUtils.blockToolbarParagraphButton ).toBeFocused(); - await expect( - toolbarUtils.documentToolbarTooltip - ).not.toBeVisible(); } ); } ); @@ -254,7 +242,7 @@ class ToolbarUtils { exact: true, } ); this.blockToolbarShowDocumentButton = this.page.getByRole( 'button', { - name: 'Show document tools', + name: 'Hide block tools', exact: true, } ); } From 5af8f46f83dd16e164b2df7d00bbab8e1fea8dfd Mon Sep 17 00:00:00 2001 From: Tonya Mork Date: Wed, 5 Jul 2023 16:45:06 -0500 Subject: [PATCH 10/43] Drop PHP 5.6 CI jobs (#52345) * Remove PHP 5.6 PHPUnit CI job * Raise version in phpcs / WPCS --- .github/workflows/unit-test.yml | 1 - phpcs.xml.dist | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 9c93b6b93d98d..e222083a160e9 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -85,7 +85,6 @@ jobs: fail-fast: true matrix: php: - - '5.6' - '7.0' - '7.1' - '7.2' diff --git a/phpcs.xml.dist b/phpcs.xml.dist index 6f40a38522ad6..9e44d5fea1347 100644 --- a/phpcs.xml.dist +++ b/phpcs.xml.dist @@ -2,7 +2,7 @@ Sniffs for WordPress plugins, with minor modifications for Gutenberg - + *\.php$ From cc3841c7379b4b38a2583e3595bac8720e4e1f35 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 6 Jul 2023 14:48:40 +1200 Subject: [PATCH 11/43] Patterns: Add handling of sync status to the wp-admin patterns list page (#52346) --- .../src/components/import-form/index.js | 4 ++-- packages/list-reusable-blocks/src/index.js | 4 +--- packages/list-reusable-blocks/src/utils/export.js | 2 ++ packages/list-reusable-blocks/src/utils/import.js | 10 ++++++++-- .../editor/various/manage-reusable-blocks.spec.js | 2 +- 5 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js index 3b3daa49571f4..9ba1589e52f39 100644 --- a/packages/list-reusable-blocks/src/components/import-form/index.js +++ b/packages/list-reusable-blocks/src/components/import-form/index.js @@ -49,8 +49,8 @@ function ImportForm( { instanceId, onUpload } ) { case 'Invalid JSON file': uiMessage = __( 'Invalid JSON file' ); break; - case 'Invalid Reusable block JSON file': - uiMessage = __( 'Invalid Reusable block JSON file' ); + case 'Invalid Pattern JSON file': + uiMessage = __( 'Invalid Pattern JSON file' ); break; default: uiMessage = __( 'Unknown error' ); diff --git a/packages/list-reusable-blocks/src/index.js b/packages/list-reusable-blocks/src/index.js index 3c9945139856f..4440ba1c49f05 100644 --- a/packages/list-reusable-blocks/src/index.js +++ b/packages/list-reusable-blocks/src/index.js @@ -31,9 +31,7 @@ document.addEventListener( 'DOMContentLoaded', () => { const showNotice = () => { const notice = document.createElement( 'div' ); notice.className = 'notice notice-success is-dismissible'; - notice.innerHTML = `

${ __( - 'Reusable block imported successfully!' - ) }

`; + notice.innerHTML = `

${ __( 'Pattern imported successfully!' ) }

`; const headerEnd = document.querySelector( '.wp-header-end' ); if ( ! headerEnd ) { diff --git a/packages/list-reusable-blocks/src/utils/export.js b/packages/list-reusable-blocks/src/utils/export.js index 0f70931c50080..4075c7576f134 100644 --- a/packages/list-reusable-blocks/src/utils/export.js +++ b/packages/list-reusable-blocks/src/utils/export.js @@ -25,11 +25,13 @@ async function exportReusableBlock( id ) { } ); const title = post.title.raw; const content = post.content.raw; + const syncStatus = post.wp_pattern_sync_status; const fileContent = JSON.stringify( { __file: 'wp_block', title, content, + syncStatus, }, null, 2 diff --git a/packages/list-reusable-blocks/src/utils/import.js b/packages/list-reusable-blocks/src/utils/import.js index 84c28b5fcfc80..465fb080ce8df 100644 --- a/packages/list-reusable-blocks/src/utils/import.js +++ b/packages/list-reusable-blocks/src/utils/import.js @@ -27,9 +27,11 @@ async function importReusableBlock( file ) { ! parsedContent.title || ! parsedContent.content || typeof parsedContent.title !== 'string' || - typeof parsedContent.content !== 'string' + typeof parsedContent.content !== 'string' || + ( parsedContent.syncStatus && + typeof parsedContent.syncStatus !== 'string' ) ) { - throw new Error( 'Invalid Reusable block JSON file' ); + throw new Error( 'Invalid Pattern JSON file' ); } const postType = await apiFetch( { path: `/wp/v2/types/wp_block` } ); const reusableBlock = await apiFetch( { @@ -38,6 +40,10 @@ async function importReusableBlock( file ) { title: parsedContent.title, content: parsedContent.content, status: 'publish', + meta: + parsedContent.syncStatus === 'unsynced' + ? { wp_pattern_sync_status: parsedContent.syncStatus } + : undefined, }, method: 'POST', } ); diff --git a/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js index 64d09dc39af72..bb390d2b39a8e 100644 --- a/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js +++ b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js @@ -35,7 +35,7 @@ test.describe( 'Managing reusable blocks', () => { // Wait for the success notice. await expect( - page.locator( 'text=Reusable block imported successfully!' ) + page.locator( 'text=Pattern imported successfully!' ) ).toBeVisible(); // Refresh the page. From b9b4bfa5d015610cc88c09fe1ab73c8187cb9e69 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 6 Jul 2023 09:18:59 +1000 Subject: [PATCH 12/43] Exit template focus when opening the W menu (#52235) --- packages/edit-site/src/store/private-actions.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index 952c1852ae305..1b97959277760 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -11,7 +11,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; */ export const setCanvasMode = ( mode ) => - ( { registry, dispatch } ) => { + ( { registry, dispatch, select } ) => { registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' ); dispatch( { type: 'SET_CANVAS_MODE', @@ -26,6 +26,10 @@ export const setCanvasMode = ) { dispatch.setIsListViewOpened( true ); } + // Switch focus away from editing the template when switching to view mode. + if ( mode === 'view' && select.isPage() ) { + dispatch.setHasPageContentFocus( true ); + } }; /** From eb94b26cb2b679da1e33d80a7993181f2cff2803 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 5 Jul 2023 14:58:46 +0100 Subject: [PATCH 13/43] wrap buttons (#52249) --- .../edit-post/src/components/sidebar/post-status/index.js | 1 + .../edit-post/src/components/sidebar/post-trash/index.js | 5 +---- .../src/components/post-switch-to-draft-button/index.js | 7 +++---- packages/editor/src/components/post-trash/style.scss | 4 ++-- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js index 5cc9b70bf9ac3..d0633f26cf254 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -58,6 +58,7 @@ function PostStatus( { isOpened, onTogglePanel } ) { marginTop: '16px', } } spacing={ 4 } + wrap > diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js index 885be537952c0..d77c7a6d82988 100644 --- a/packages/edit-post/src/components/sidebar/post-trash/index.js +++ b/packages/edit-post/src/components/sidebar/post-trash/index.js @@ -2,14 +2,11 @@ * WordPress dependencies */ import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor'; -import { FlexItem } from '@wordpress/components'; export default function PostTrash() { return ( - - - + ); } diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js index 6521200fde590..1fb04931bfce1 100644 --- a/packages/editor/src/components/post-switch-to-draft-button/index.js +++ b/packages/editor/src/components/post-switch-to-draft-button/index.js @@ -3,7 +3,6 @@ */ import { Button, - FlexItem, __experimentalConfirmDialog as ConfirmDialog, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -41,7 +40,7 @@ function PostSwitchToDraftButton( { }; return ( - + <> @@ -60,7 +59,7 @@ function PostSwitchToDraftButton( { > { alertMessage } - + ); } diff --git a/packages/editor/src/components/post-trash/style.scss b/packages/editor/src/components/post-trash/style.scss index f24a6eb2743dd..e47981314d5f2 100644 --- a/packages/editor/src/components/post-trash/style.scss +++ b/packages/editor/src/components/post-trash/style.scss @@ -1,4 +1,4 @@ .editor-post-trash.components-button { - width: 100%; - display: block; + flex-grow: 1; + justify-content: center; } From ed76244b6f473dba4df1ff4c46389b611dcca83e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 5 Jul 2023 15:31:22 +0100 Subject: [PATCH 14/43] Update the behavior of the cached undo/redo stack (#51644) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Ella van Durpe --- docs/explanations/architecture/entities.md | 12 +++-- packages/core-data/src/actions.js | 4 +- packages/core-data/src/entity-provider.js | 62 ++++++++++++---------- packages/core-data/src/reducer.js | 8 +-- packages/core-data/src/test/reducer.js | 23 +++----- packages/data/src/registry.js | 6 +++ packages/data/src/test/registry.js | 21 ++++++++ 7 files changed, 83 insertions(+), 53 deletions(-) diff --git a/docs/explanations/architecture/entities.md b/docs/explanations/architecture/entities.md index 13e6eaca08b5a..2a3af6288d27f 100644 --- a/docs/explanations/architecture/entities.md +++ b/docs/explanations/architecture/entities.md @@ -56,8 +56,14 @@ For example, let's say a user edits the title of a post, followed by a modificat The store also keep tracks of a "pointer" to the current "undo/redo" step. By default, the pointer always points to the last item in the stack. This pointer is updated when the user performs an undo or redo operation. -### Transient changes +### Cached changes -The undo/redo core behavior also supports what we call "transient modifications". These are modifications that are not stored in the undo/redo stack right away. For instance, when a user starts typing in a text field, the value of the field is modified in the store, but this modification is not stored in the undo/redo stack until after the user moves to the next word or after a few milliseconds. This is done to avoid creating a new undo/redo step for each character typed by the user. +The undo/redo core behavior also supports what we call "cached modifications". These are modifications that are not stored in the undo/redo stack right away. For instance, when a user starts typing in a text field, the value of the field is modified in the store, but this modification is not stored in the undo/redo stack until after the user moves to the next word or after a few milliseconds. This is done to avoid creating a new undo/redo step for each character typed by the user. -So by default, `core-data` store considers all modifications to properties that are marked as "transient" (like the `blocks` property in the post entity) as transient modifications. It keeps these modifications outside the undo/redo stack in what is called a "cache" of modifications and these modifications are only stored in the undo/redo stack when we explicitely call `__unstableCreateUndoLevel` or when the next non-transient modification is performed. +Cached changes are kept outside the undo/redo stack in what is called a "cache" of modifications and these modifications are only stored in the undo/redo stack when we explicitely call `__unstableCreateUndoLevel` or when the next modification is not a cached one. + +By default all calls to `editEntityRecord` are considered "non-cached" unless the `isCached` option is passed as true. Example: + +```js +wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'post', 1, { title: 'Hello World' }, { isCached: true } ); +``` diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js index cfab95aae9f8f..2170e3ffcb4ae 100644 --- a/packages/core-data/src/actions.js +++ b/packages/core-data/src/actions.js @@ -357,7 +357,7 @@ export const editEntityRecord = `The entity being edited (${ kind }, ${ name }) does not have a loaded config.` ); } - const { transientEdits = {}, mergedEdits = {} } = entityConfig; + const { mergedEdits = {} } = entityConfig; const record = select.getRawEntityRecord( kind, name, recordId ); const editedRecord = select.getEditedEntityRecord( kind, @@ -382,7 +382,6 @@ export const editEntityRecord = : value; return acc; }, {} ), - transientEdits, }; dispatch( { type: 'EDIT_ENTITY_RECORD', @@ -395,6 +394,7 @@ export const editEntityRecord = acc[ key ] = editedRecord[ key ]; return acc; }, {} ), + isCached: options.isCached, }, }, } ); diff --git a/packages/core-data/src/entity-provider.js b/packages/core-data/src/entity-provider.js index 04bb4c21433e3..da048944f1498 100644 --- a/packages/core-data/src/entity-provider.js +++ b/packages/core-data/src/entity-provider.js @@ -7,7 +7,7 @@ import { useCallback, useEffect, } from '@wordpress/element'; -import { useSelect, useDispatch, useRegistry } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { parse, __unstableSerializeAndClean } from '@wordpress/blocks'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -154,17 +154,16 @@ export function useEntityProp( kind, name, prop, _id ) { * @return {[WPBlock[], Function, Function]} The block array and setters. */ export function useEntityBlockEditor( kind, name, { id: _id } = {} ) { - const [ meta, updateMeta ] = useEntityProp( kind, name, 'meta', _id ); - const registry = useRegistry(); const providerId = useEntityId( kind, name ); const id = _id ?? providerId; - const { content, blocks } = useSelect( + const { content, blocks, meta } = useSelect( ( select ) => { const { getEditedEntityRecord } = select( STORE_NAME ); const editedRecord = getEditedEntityRecord( kind, name, id ); return { blocks: editedRecord.blocks, content: editedRecord.content, + meta: editedRecord.meta, }; }, [ kind, name, id ] @@ -194,7 +193,7 @@ export function useEntityBlockEditor( kind, name, { id: _id } = {} ) { ( _blocks ) => { if ( ! meta ) return; // If meta.footnotes is empty, it means the meta is not registered. - if ( meta.footnotes === undefined ) return; + if ( meta.footnotes === undefined ) return {}; const { getRichTextValues } = unlock( blockEditorPrivateApis ); const _content = getRichTextValues( _blocks ).join( '' ) || ''; @@ -237,48 +236,57 @@ export function useEntityBlockEditor( kind, name, { id: _id } = {} ) { }, {} ), }; - updateMeta( { - ...meta, - footnotes: JSON.stringify( newFootnotes ), - } ); + return { + meta: { + ...meta, + footnotes: JSON.stringify( newFootnotes ), + }, + }; }, - [ meta, updateMeta ] + [ meta ] ); const onChange = useCallback( ( newBlocks, options ) => { - const { selection } = options; - const edits = { blocks: newBlocks, selection }; - - const noChange = blocks === edits.blocks; + const noChange = blocks === newBlocks; if ( noChange ) { return __unstableCreateUndoLevel( kind, name, id ); } + const { selection } = options; // We create a new function here on every persistent edit // to make sure the edit makes the post dirty and creates // a new undo level. - edits.content = ( { blocks: blocksForSerialization = [] } ) => - __unstableSerializeAndClean( blocksForSerialization ); + const edits = { + blocks: newBlocks, + selection, + content: ( { blocks: blocksForSerialization = [] } ) => + __unstableSerializeAndClean( blocksForSerialization ), + ...updateFootnotes( newBlocks ), + }; - registry.batch( () => { - updateFootnotes( edits.blocks ); - editEntityRecord( kind, name, id, edits ); - } ); + editEntityRecord( kind, name, id, edits, { isCached: false } ); }, - [ kind, name, id, blocks, updateFootnotes ] + [ + kind, + name, + id, + blocks, + updateFootnotes, + __unstableCreateUndoLevel, + editEntityRecord, + ] ); const onInput = useCallback( ( newBlocks, options ) => { const { selection } = options; - const edits = { blocks: newBlocks, selection }; - registry.batch( () => { - updateFootnotes( edits.blocks ); - editEntityRecord( kind, name, id, edits ); - } ); + const footnotesChanges = updateFootnotes( newBlocks ); + const edits = { blocks: newBlocks, selection, ...footnotesChanges }; + + editEntityRecord( kind, name, id, edits, { isCached: true } ); }, - [ kind, name, id, updateFootnotes ] + [ kind, name, id, updateFootnotes, editEntityRecord ] ); return [ blocks ?? EMPTY_ARRAY, onInput, onChange ]; diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js index b7dd9d73df15a..20755dad4be8d 100644 --- a/packages/core-data/src/reducer.js +++ b/packages/core-data/src/reducer.js @@ -439,7 +439,7 @@ export const entities = ( state = {}, action ) => { * * @property {number} list The undo stack. * @property {number} offset Where in the undo stack we are. - * @property {Object} cache Cache of unpersisted transient edits. + * @property {Object} cache Cache of unpersisted edits. */ /** @typedef {Array & UndoStateMeta} UndoState */ @@ -543,10 +543,6 @@ export function undo( state = UNDO_INITIAL_STATE, action ) { return state; } - const isCachedChange = Object.keys( action.edits ).every( - ( key ) => action.transientEdits[ key ] - ); - const edits = Object.keys( action.edits ).map( ( key ) => { return { kind: action.kind, @@ -558,7 +554,7 @@ export function undo( state = UNDO_INITIAL_STATE, action ) { }; } ); - if ( isCachedChange ) { + if ( action.meta.undo.isCached ) { return { ...state, cache: edits.reduce( appendEditToStack, state.cache ), diff --git a/packages/core-data/src/test/reducer.js b/packages/core-data/src/test/reducer.js index 4f7d9b9c0d2ae..7fac52c33c4b3 100644 --- a/packages/core-data/src/test/reducer.js +++ b/packages/core-data/src/test/reducer.js @@ -155,19 +155,21 @@ describe( 'undo', () => { from, to, } ); - const createNextEditAction = ( edits, transientEdits = {} ) => { + const createNextEditAction = ( edits, isCached ) => { let action = { kind: 'someKind', name: 'someName', recordId: 'someRecordId', edits, - transientEdits, }; action = { type: 'EDIT_ENTITY_RECORD', ...action, meta: { - undo: { edits: lastValues }, + undo: { + isCached, + edits: lastValues, + }, }, }; lastValues = { ...lastValues, ...edits }; @@ -303,10 +305,7 @@ describe( 'undo', () => { it( 'handles flattened undos/redos', () => { undoState = createNextUndoState(); undoState = createNextUndoState( { value: 1 } ); - undoState = createNextUndoState( - { transientValue: 2 }, - { transientValue: true } - ); + undoState = createNextUndoState( { transientValue: 2 }, true ); undoState = createNextUndoState( { value: 3 } ); expectedUndoState.list.push( [ @@ -335,10 +334,7 @@ describe( 'undo', () => { // Check that transient edits are merged into the last // edits. - undoState = createNextUndoState( - { transientValue: 2 }, - { transientValue: true } - ); + undoState = createNextUndoState( { transientValue: 2 }, true ); undoState = createNextUndoState( 'isCreate' ); expectedUndoState.list[ expectedUndoState.list.length - 1 ].push( createExpectedDiff( 'transientValue', { from: undefined, to: 2 } ) @@ -359,10 +355,7 @@ describe( 'undo', () => { it( 'explicitly creates an undo level when undoing while there are pending transient edits', () => { undoState = createNextUndoState(); undoState = createNextUndoState( { value: 1 } ); - undoState = createNextUndoState( - { transientValue: 2 }, - { transientValue: true } - ); + undoState = createNextUndoState( { transientValue: 2 }, true ); undoState = createNextUndoState( 'isUndo' ); expectedUndoState.list.push( [ createExpectedDiff( 'value', { from: undefined, to: 1 } ), diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js index d193a50cbc392..02a0b19136a3e 100644 --- a/packages/data/src/registry.js +++ b/packages/data/src/registry.js @@ -314,6 +314,12 @@ export function createRegistry( storeConfigs = {}, parent = null ) { } function batch( callback ) { + // If we're already batching, just call the callback. + if ( emitter.isPaused ) { + callback(); + return; + } + emitter.pause(); Object.values( stores ).forEach( ( store ) => store.emitter.pause() ); callback(); diff --git a/packages/data/src/test/registry.js b/packages/data/src/test/registry.js index b9288eae821d8..df9cb774dfc8c 100644 --- a/packages/data/src/test/registry.js +++ b/packages/data/src/test/registry.js @@ -734,6 +734,27 @@ describe( 'createRegistry', () => { unsubscribe(); expect( listener2 ).toHaveBeenCalledTimes( 1 ); } ); + + it( 'should support nested batches', () => { + const store = registry.registerStore( 'myAwesomeReducer', { + reducer: ( state = 0 ) => state + 1, + } ); + const listener = jest.fn(); + subscribeWithUnsubscribe( listener ); + + registry.batch( () => {} ); + expect( listener ).not.toHaveBeenCalled(); + + registry.batch( () => { + store.dispatch( { type: 'dummy' } ); + registry.batch( () => { + store.dispatch( { type: 'dummy' } ); + store.dispatch( { type: 'dummy' } ); + } ); + store.dispatch( { type: 'dummy' } ); + } ); + expect( listener ).toHaveBeenCalledTimes( 1 ); + } ); } ); describe( 'use', () => { From f060b18b48e9c694282ae8b07a988bda86b5f8a9 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 5 Jul 2023 10:49:03 +0100 Subject: [PATCH 15/43] Adjust top position (#52248) --- packages/edit-post/src/components/block-manager/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss index 2568856be41ab..c62e5fea93202 100644 --- a/packages/edit-post/src/components/block-manager/style.scss +++ b/packages/edit-post/src/components/block-manager/style.scss @@ -36,7 +36,7 @@ .edit-post-block-manager__category-title { position: sticky; - top: 0; + top: - $grid-unit-05; // Offsets the top padding on the modal content container padding: $grid-unit-20 0; background-color: $white; z-index: z-index(".edit-post-block-manager__category-title"); From 14bb1462eadf468701b0575e674bf2c4ef27a4c9 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 5 Jul 2023 18:10:07 +1200 Subject: [PATCH 16/43] Patterns: add a hint about the rename of reusable blocks to menu and inserter (#51771) Co-authored-by: Saxon Fletcher --- packages/block-editor/README.md | 4 ++ packages/block-editor/src/components/index.js | 5 ++ .../inserter/reusable-block-rename-hint.js | 52 +++++++++++++++++++ .../inserter/reusable-blocks-tab.js | 4 ++ .../src/components/inserter/style.scss | 28 ++++++++++ .../src/create-reusable-block.js | 2 +- .../block-editor-keyboard-shortcuts.test.js | 2 +- .../editor/various/reusable-blocks.test.js | 4 +- .../components/page-patterns/patterns-list.js | 2 +- .../reusable-block-convert-button.js | 10 ++-- 10 files changed, 103 insertions(+), 10 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/reusable-block-rename-hint.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 2c42b42afc442..937bfea2f4965 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -680,6 +680,10 @@ _Related_ Private @wordpress/block-editor APIs. +### ReusableBlocksRenameHint + +Undocumented declaration. + ### RichText _Related_ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index e804771f9ce64..a49fd623ac14a 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -164,3 +164,8 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop export { default as BlockEditorProvider } from './provider'; export { default as useSetting } from './use-setting'; + +/* + * The following rename hint component can be removed in 6.4. + */ +export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint'; diff --git a/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js new file mode 100644 index 0000000000000..09861d9b97f1c --- /dev/null +++ b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { focus } from '@wordpress/dom'; +import { useRef } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { close } from '@wordpress/icons'; +import { store as preferencesStore } from '@wordpress/preferences'; + +const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible'; + +export default function ReusableBlocksRenameHint() { + const isReusableBlocksRenameHint = useSelect( + ( select ) => + select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true, + [] + ); + + const ref = useRef(); + + const { set: setPreference } = useDispatch( preferencesStore ); + if ( ! isReusableBlocksRenameHint ) { + return null; + } + + return ( +
+
+ { __( + 'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.' + ) } +
+
+ ); +} diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js index c16d5f1a78e54..08cd8d57ba0d0 100644 --- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js +++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js @@ -13,6 +13,7 @@ import BlockTypesList from '../block-types-list'; import InserterPanel from './panel'; import InserterNoResults from './no-results'; import useBlockTypesState from './hooks/use-block-types-state'; +import ReusableBlocksRenameHint from './reusable-block-rename-hint'; function ReusableBlocksList( { onHover, onInsert, rootClientId } ) { const [ items, , , onSelectItem ] = useBlockTypesState( @@ -54,6 +55,9 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) { export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) { return ( <> +
+ +
{ await page.keyboard.type( content ); await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Create pattern' ); + await clickMenuItem( 'Create pattern/reusable block' ); const nameInput = await page.waitForSelector( reusableBlockNameInputSelector ); diff --git a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js index 24e8e3104aaaa..3be73830a4299 100644 --- a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js +++ b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js @@ -90,7 +90,7 @@ describe( 'block editor keyboard shortcuts', () => { } ); it( 'should prevent deleting multiple selected blocks from inputs', async () => { await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Create pattern' ); + await clickMenuItem( 'Create pattern/reusable block' ); const reusableBlockNameInputSelector = '.reusable-blocks-menu-items__convert-modal .components-text-control__input'; const nameInput = await page.waitForSelector( diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 10f9e9f24581e..0a18c75528930 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -197,7 +197,7 @@ describe( 'Reusable blocks', () => { // Convert block to a reusable block. await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Create pattern' ); + await clickMenuItem( 'Create pattern/reusable block' ); // Set title. const nameInput = await page.waitForSelector( @@ -383,7 +383,7 @@ describe( 'Reusable blocks', () => { // Convert to reusable. await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Create pattern' ); + await clickMenuItem( 'Create pattern/reusable block' ); const nameInput = await page.waitForSelector( reusableBlockNameInputSelector ); diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js index 8430b61a0772d..545ffdb044275 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -86,7 +86,7 @@ export default function PatternsList( { categoryId, type } ) { diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index 35769238fd506..981776880a137 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -5,6 +5,7 @@ import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks'; import { BlockSettingsMenuControls, store as blockEditorStore, + ReusableBlocksRenameHint, } from '@wordpress/block-editor'; import { useCallback, useState } from '@wordpress/element'; import { @@ -140,7 +141,7 @@ export default function ReusableBlockConvertButton( { icon={ symbol } onClick={ () => setIsModalOpen( true ) } > - { __( 'Create pattern' ) } + { __( 'Create pattern/reusable block' ) } { isModalOpen && ( + { From 8dab0a04a10820e96c6ab60c4ff808528c38bf06 Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 5 Jul 2023 15:55:58 +1000 Subject: [PATCH 17/43] Site Editor: update headings hierarchy in the 'Manage all' screens (#52271) * This commit: - updates heading levels on the template and template part pages - passes a `level` prop to Header from Page * update h2 size * Rolling back custom sizes * Rolling back unnecessary classNames There was a rogue space in trunk. Let's let it live --- packages/edit-site/src/components/page-template-parts/index.js | 2 +- packages/edit-site/src/components/page-templates/index.js | 2 +- packages/edit-site/src/components/page/header.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js index 0a50f83927979..7e9c8cb6dd6e1 100644 --- a/packages/edit-site/src/components/page-template-parts/index.js +++ b/packages/edit-site/src/components/page-template-parts/index.js @@ -45,7 +45,7 @@ export default function PageTemplateParts() { header: __( 'Template Part' ), cell: ( templatePart ) => ( - + ( - + From d98464c35b9c1b4d8dc74a2bde24d19c92200566 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 5 Jul 2023 15:35:26 +1000 Subject: [PATCH 18/43] Check randomizer experiment is enabled before rendering button (#52306) --- packages/edit-site/src/components/global-styles/palette.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js index 6e9757415524c..32d92469068ba 100644 --- a/packages/edit-site/src/components/global-styles/palette.js +++ b/packages/edit-site/src/components/global-styles/palette.js @@ -91,7 +91,7 @@ function Palette( { name } ) { - { themeColors?.length > 0 && ( + { randomizeThemeColors && themeColors?.length > 0 && ( - ) } + { window.__experimentalEnableColorRandomizer && + themeColors?.length > 0 && ( + + ) } ); } From ce5676576a07a629cd3ab50acbceda7cfcbe0c3f Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 4 Jul 2023 10:46:21 +0100 Subject: [PATCH 26/43] Navigation: Remove one preloaded endpoint (#52115) --- .../navigation-block-preloading.php | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/lib/compat/wordpress-6.3/navigation-block-preloading.php b/lib/compat/wordpress-6.3/navigation-block-preloading.php index 0def6f2c7c791..22b4a97526793 100644 --- a/lib/compat/wordpress-6.3/navigation-block-preloading.php +++ b/lib/compat/wordpress-6.3/navigation-block-preloading.php @@ -27,24 +27,6 @@ function gutenberg_preload_navigation_posts( $preload_paths, $context ) { // Preload the OPTIONS request for all Navigation posts request. $preload_paths[] = array( $navigation_rest_route, 'OPTIONS' ); - // Preload the GET request for ALL 'published' or 'draft' Navigation posts. - $preload_paths[] = array( - add_query_arg( - array( - 'context' => 'edit', - 'per_page' => 100, - 'order' => 'desc', - 'orderby' => 'date', - '_locale' => 'user', - // array indices are required to avoid query being encoded and not matching in cache. - 'status[0]' => 'publish', - 'status[1]' => 'draft', - ), - $navigation_rest_route - ), - 'GET', - ); - // Preload request for all menus in Browse Mode sidebar "Navigation" section. $preload_paths[] = array( add_query_arg( From a0bdd09e6a5ff0a227bb2db18d7d8b6a8d722f63 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 4 Jul 2023 14:03:28 +1000 Subject: [PATCH 27/43] default to showing status (#52226) --- .../components/sidebar-navigation-screen-page/status-label.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js index 13aba13aacbec..bcfc540b1f841 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js @@ -43,7 +43,7 @@ const pendingIcon = ( export default function StatusLabel( { status, date, short } ) { const relateToNow = humanTimeDiff( date ); - let statusLabel = ''; + let statusLabel = status; let statusIcon = pendingIcon; switch ( status ) { case 'publish': From 91a3458bbf6ab1e3b6b91f355da3ffea33cb0f21 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 3 Jul 2023 09:00:19 -0700 Subject: [PATCH 28/43] Command palette: rename (#52153) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Revise use of “command menu” to “command palette”. Dropping "global" where it was used as well. * Find “command center” and replace with “command palette” --- packages/commands/README.md | 4 ++-- packages/commands/src/components/command-menu.js | 6 +++--- packages/commands/src/hooks/use-command-context.js | 2 +- packages/commands/src/hooks/use-command-loader.js | 2 +- packages/commands/src/hooks/use-command.js | 2 +- packages/commands/src/store/actions.js | 4 ++-- packages/commands/src/store/reducer.js | 4 ++-- packages/edit-site/src/components/layout/index.js | 2 +- packages/edit-site/src/components/site-hub/index.js | 2 +- test/e2e/specs/site-editor/command-center.spec.js | 10 +++++----- 10 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/commands/README.md b/packages/commands/README.md index 130812664368f..c6504ff638cde 100644 --- a/packages/commands/README.md +++ b/packages/commands/README.md @@ -38,7 +38,7 @@ _Type_ ### useCommand -Attach a command to the Global command menu. +Attach a command to the command palette. _Parameters_ @@ -46,7 +46,7 @@ _Parameters_ ### useCommandLoader -Attach a command loader to the Global command menu. +Attach a command loader to the command palette. _Parameters_ diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js index 9f59db3f6f53c..b4a828f34303d 100644 --- a/packages/commands/src/components/command-menu.js +++ b/packages/commands/src/components/command-menu.js @@ -155,7 +155,7 @@ export function CommandMenu() { registerShortcut( { name: 'core/commands', category: 'global', - description: __( 'Open the global command menu' ), + description: __( 'Open the command palette' ), keyCombination: { modifier: 'primary', character: 'k', @@ -192,7 +192,7 @@ export function CommandMenu() { }; useEffect( () => { - // Focus the command menu input when mounting the modal. + // Focus the command palette input when mounting the modal. if ( isOpen ) { commandMenuInput.current.focus(); } @@ -211,7 +211,7 @@ export function CommandMenu() { __experimentalHideHeader >
- +
{ className="edit-site-site-hub_toggle-command-center" icon={ search } onClick={ () => openCommandCenter() } - label={ __( 'Open command center' ) } + label={ __( 'Open command palette' ) } /> ) } diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js index 0ee6d77d3b301..9d22248bc2362 100644 --- a/test/e2e/specs/site-editor/command-center.spec.js +++ b/test/e2e/specs/site-editor/command-center.spec.js @@ -3,7 +3,7 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -test.describe( 'Site editor command center', () => { +test.describe( 'Site editor command palette', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'emptytheme' ); } ); @@ -17,11 +17,11 @@ test.describe( 'Site editor command center', () => { await admin.visitSiteEditor(); } ); - test( 'Open the command center and navigate to the page create page', async ( { + test( 'Open the command palette and navigate to the page create page', async ( { page, } ) => { await page - .getByRole( 'button', { name: 'Open command center' } ) + .getByRole( 'button', { name: 'Open command palette' } ) .focus(); await page.keyboard.press( 'Meta+k' ); await page.keyboard.type( 'new page' ); @@ -36,11 +36,11 @@ test.describe( 'Site editor command center', () => { ).toBeVisible(); } ); - test( 'Open the command center and navigate to a template', async ( { + test( 'Open the command palette and navigate to a template', async ( { page, } ) => { await page - .getByRole( 'button', { name: 'Open command center' } ) + .getByRole( 'button', { name: 'Open command palette' } ) .click(); await page.keyboard.type( 'index' ); await page.getByRole( 'option', { name: 'index' } ).click(); From 2930ef46dd997cfe62250280125c41135a0f46cf Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com> Date: Thu, 29 Jun 2023 15:15:05 +0200 Subject: [PATCH 29/43] Image block and behaviors: Fix some warnings (#52109) * Fix first warning * Fix second warning - dividing a NaN --- lib/experimental/interactivity-api/blocks.php | 2 ++ packages/block-library/src/image/image.js | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index 0087f95cbf144..e72c486407c79 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -14,7 +14,9 @@ */ function gutenberg_block_update_interactive_view_script( $metadata ) { if ( + array_key_exists( 'name', $metadata ) && in_array( $metadata['name'], array( 'core/image' ), true ) && + array_key_exists( 'file', $metadata ) && str_contains( $metadata['file'], 'build/block-library/blocks' ) ) { $metadata['viewScript'] = array( 'file:./interactivity.min.js' ); diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 2dc39751de710..fd410fe3cbe5f 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -607,7 +607,8 @@ export default function Image( { const ratio = ( aspectRatio && evalAspectRatio( aspectRatio ) ) || ( width && height && width / height ) || - naturalWidth / naturalHeight; + naturalWidth / naturalHeight || + 1; const currentWidth = ! width && height ? height * ratio : width; const currentHeight = ! height && width ? width / ratio : height; From 859112d8f743b5e182180f2e4daeb43544883285 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 3 Jul 2023 15:20:40 +0300 Subject: [PATCH 30/43] Turn off DFM for style book and style editing (#52117) --- .../index.js | 79 +++++++++++-------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 1e2e7aac159ef..4d98b235ac81c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -37,17 +37,27 @@ export function SidebarNavigationItemGlobalStyles( props ) { const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const { createNotice } = useDispatch( noticesStore ); const { set: setPreference } = useDispatch( preferencesStore ); - const { hasGlobalStyleVariations, isDistractionFree } = useSelect( - ( select ) => ( { - hasGlobalStyleVariations: - !! select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, - isDistractionFree: select( preferencesStore ).get( - editSiteStore.name, - 'distractionFree' - ), - } ), + const { get: getPrefference } = useSelect( preferencesStore ); + + const turnOffDistractionFreeMode = useCallback( () => { + const isDistractionFree = getPrefference( + editSiteStore.name, + 'distractionFree' + ); + if ( ! isDistractionFree ) { + return; + } + setPreference( editSiteStore.name, 'distractionFree', false ); + createNotice( 'info', __( 'Distraction free mode turned off' ), { + isDismissible: true, + type: 'snackbar', + } ); + }, [ createNotice, setPreference, getPrefference ] ); + const hasGlobalStyleVariations = useSelect( + ( select ) => + !! select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, [] ); if ( hasGlobalStyleVariations ) { @@ -63,19 +73,7 @@ export function SidebarNavigationItemGlobalStyles( props ) { { - // Disable distraction free mode. - if ( isDistractionFree ) { - setPreference( - editSiteStore.name, - 'distractionFree', - false - ); - createNotice( - 'info', - __( 'Distraction free mode turned off.' ), - { type: 'snackbar' } - ); - } + turnOffDistractionFreeMode(); // Switch to edit mode. setCanvasMode( 'edit' ); // Open global styles sidebar. @@ -170,6 +168,9 @@ export default function SidebarNavigationScreenGlobalStyles() { const { setCanvasMode, setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); + const { createNotice } = useDispatch( noticesStore ); + const { set: setPreference } = useDispatch( preferencesStore ); + const { get: getPrefference } = useSelect( preferencesStore ); const isStyleBookOpened = useSelect( ( select ) => @@ -178,14 +179,28 @@ export default function SidebarNavigationScreenGlobalStyles() { [] ); - const openGlobalStyles = useCallback( - async () => - Promise.all( [ - setCanvasMode( 'edit' ), - openGeneralSidebar( 'edit-site/global-styles' ), - ] ), - [ setCanvasMode, openGeneralSidebar ] - ); + const turnOffDistractionFreeMode = useCallback( () => { + const isDistractionFree = getPrefference( + editSiteStore.name, + 'distractionFree' + ); + if ( ! isDistractionFree ) { + return; + } + setPreference( editSiteStore.name, 'distractionFree', false ); + createNotice( 'info', __( 'Distraction free mode turned off' ), { + isDismissible: true, + type: 'snackbar', + } ); + }, [ createNotice, setPreference, getPrefference ] ); + + const openGlobalStyles = useCallback( async () => { + turnOffDistractionFreeMode(); + return Promise.all( [ + setCanvasMode( 'edit' ), + openGeneralSidebar( 'edit-site/global-styles' ), + ] ); + }, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] ); const openStyleBook = useCallback( async () => { await openGlobalStyles(); From 41cecb54c5b38b4615a10b63d74453fb62cd8c98 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 3 Jul 2023 13:47:01 +0300 Subject: [PATCH 31/43] Add confirmation step when deleting a Template (#52236) --- .../src/components/template-actions/index.js | 46 +++++++++++++++---- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js index 0b54d6ef3ea71..b4618dcae966d 100644 --- a/packages/edit-site/src/components/template-actions/index.js +++ b/packages/edit-site/src/components/template-actions/index.js @@ -3,8 +3,14 @@ */ import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import { useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; +import { + DropdownMenu, + MenuGroup, + MenuItem, + __experimentalConfirmDialog as ConfirmDialog, +} from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; @@ -84,17 +90,14 @@ export default function TemplateActions( { template={ template } onClose={ onClose } /> - { + { removeTemplate( template ); onRemove?.(); onClose(); } } - > - { __( 'Delete' ) } - + isTemplate={ template.type === 'wp_template' } + /> ) } { isRevertable && ( @@ -115,3 +118,30 @@ export default function TemplateActions( { ); } + +function DeleteMenuItem( { onRemove, isTemplate } ) { + const [ isModalOpen, setIsModalOpen ] = useState( false ); + return ( + <> + setIsModalOpen( true ) } + > + { __( 'Delete' ) } + + setIsModalOpen( false ) } + confirmButtonText={ __( 'Delete' ) } + > + { isTemplate + ? __( 'Are you sure you want to delete this template?' ) + : __( + 'Are you sure you want to delete this template part?' + ) } + + + ); +} From a20e265afe45fb7c54da9d668d14fea1b692b9e0 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 3 Jul 2023 13:46:37 +0300 Subject: [PATCH 32/43] [Command Palette]: Remove suggestion for deleting templates/parts (#52168) --- packages/edit-site/src/hooks/commands/use-edit-mode-commands.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index e9e00b9723a12..3bd1b561a3ab1 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -250,7 +250,6 @@ export function useEditModeCommands() { useCommandLoader( { name: 'core/edit-site/manipulate-document', hook: useManipulateDocumentCommands, - context: 'site-editor-edit', } ); useCommandLoader( { From df103c2fd757f3df36f54c0aea9cedced879450f Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 27 Jun 2023 15:17:52 +0100 Subject: [PATCH 33/43] Update stepper styling in Home template details panel (#51972) * Update stepper styling * Remove !important --- .../src/components/sidebar-navigation-screen/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 664fce028952f..f632c52fd8b3d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -121,7 +121,11 @@ .edit-site-sidebar-navigation-screen__input-control { width: 100%; .components-input-control__container { - background: transparent; + background: $gray-800; + + .components-button { + color: $gray-200; + } } .components-input-control__input { color: $gray-200 !important; From b776600ab93139f16dc6c347aa1b1d724c67ce48 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 3 Jul 2023 10:30:02 +0300 Subject: [PATCH 34/43] [Edit Post]: Add toggle fullscreen mode and list view commands (#52184) --- .../src/hooks/commands/use-common-commands.js | 48 +++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js index 0366e78179985..71233bcb6d7bd 100644 --- a/packages/edit-post/src/hooks/commands/use-common-commands.js +++ b/packages/edit-post/src/hooks/commands/use-common-commands.js @@ -10,6 +10,8 @@ import { drawerRight, blockDefault, keyboardClose, + desktop, + listView, } from '@wordpress/icons'; import { useCommand } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -23,16 +25,24 @@ import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal'; import { store as editPostStore } from '../../store'; export default function useCommonCommands() { - const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } = - useDispatch( editPostStore ); + const { + openGeneralSidebar, + closeGeneralSidebar, + switchEditorMode, + setIsListViewOpened, + } = useDispatch( editPostStore ); const { openModal } = useDispatch( interfaceStore ); - const { editorMode, activeSidebar } = useSelect( - ( select ) => ( { - activeSidebar: select( interfaceStore ).getActiveComplementaryArea( - editPostStore.name - ), - editorMode: select( editPostStore ).getEditorMode(), - } ), + const { editorMode, activeSidebar, isListViewOpen } = useSelect( + ( select ) => { + const { getEditorMode, isListViewOpened } = select( editPostStore ); + return { + activeSidebar: select( + interfaceStore + ).getActiveComplementaryArea( editPostStore.name ), + editorMode: getEditorMode(), + isListViewOpen: isListViewOpened(), + }; + }, [] ); const { toggle } = useDispatch( preferencesStore ); @@ -85,6 +95,26 @@ export default function useCommonCommands() { }, } ); + useCommand( { + name: 'core/toggle-fullscreen-mode', + label: __( 'Toggle fullscreen mode' ), + icon: desktop, + callback: ( { close } ) => { + toggle( 'core/edit-post', 'fullscreenMode' ); + close(); + }, + } ); + + useCommand( { + name: 'core/toggle-list-view', + label: __( 'Toggle list view' ), + icon: listView, + callback: ( { close } ) => { + setIsListViewOpened( ! isListViewOpen ); + close(); + }, + } ); + useCommand( { name: 'core/toggle-top-toolbar', label: __( 'Toggle top toolbar' ), From 621aa9557e4ebcd0b79446ff353941da29656a94 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 5 Jul 2023 20:41:45 +0900 Subject: [PATCH 35/43] Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu (#52222) * Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu * Move lines --- .../index.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 4d98b235ac81c..1e9200bf0af01 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -171,13 +171,15 @@ export default function SidebarNavigationScreenGlobalStyles() { const { createNotice } = useDispatch( noticesStore ); const { set: setPreference } = useDispatch( preferencesStore ); const { get: getPrefference } = useSelect( preferencesStore ); - - const isStyleBookOpened = useSelect( - ( select ) => - 'style-book' === - unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), - [] - ); + const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => { + const { getCanvasMode, getEditorCanvasContainerView } = unlock( + select( editSiteStore ) + ); + return { + isViewMode: 'view' === getCanvasMode(), + isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(), + }; + }, [] ); const turnOffDistractionFreeMode = useCallback( () => { const isDistractionFree = getPrefference( @@ -261,7 +263,7 @@ export default function SidebarNavigationScreenGlobalStyles() { } /> - { isStyleBookOpened && ! isMobileViewport && ( + { isStyleBookOpened && ! isMobileViewport && isViewMode && ( false } From 150b10c420ae00ceb63d472d6d71cb1ec4d91eb4 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 28 Jun 2023 11:23:12 +0100 Subject: [PATCH 36/43] !important (#52025) --- .../src/components/sidebar-navigation-screen/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index f632c52fd8b3d..26a30da286fc8 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -124,7 +124,7 @@ background: $gray-800; .components-button { - color: $gray-200; + color: $gray-200 !important; } } .components-input-control__input { From 1f60798db2de6d907abfb69a383d2ec09c76b8fd Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 30 Jun 2023 21:07:58 +0100 Subject: [PATCH 37/43] Navigation in Site View: Readd the edit button (#52111) --- .../edit-button.js | 19 ++++++++----------- .../single-navigation-menu.js | 16 ++++++++++------ 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js index 7d084b6db4e26..391017796b5e6 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js @@ -2,23 +2,20 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useDispatch } from '@wordpress/data'; import { pencil } from '@wordpress/icons'; /** * Internal dependencies */ -import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; -import { unlock } from '../../lock-unlock'; - -export default function EditButton() { - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); +import { useLink } from '../routes/link'; +export default function EditButton( { postId } ) { + const linkInfo = useLink( { + postId, + postType: 'wp_navigation', + canvas: 'edit', + } ); return ( - setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> + ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js index 6351c83323f98..6b6fc8587228f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js @@ -9,6 +9,7 @@ import { decodeEntities } from '@wordpress/html-entities'; import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus'; import ScreenNavigationMoreMenu from './more-menu'; import NavigationMenuEditor from './navigation-menu-editor'; +import EditButton from './edit-button'; export default function SingleNavigationMenu( { navigationMenu, @@ -21,12 +22,15 @@ export default function SingleNavigationMenu( { return ( + <> + + + } title={ decodeEntities( menuTitle ) } description={ __( From a300af3cad1b14244c1bea0747f7c62e842f66a0 Mon Sep 17 00:00:00 2001 From: Timothy Jacobs Date: Mon, 3 Jul 2023 11:52:39 -0400 Subject: [PATCH 38/43] Fix UnitControl crashing on regex control characters. Units are now escaped using `escapeRegExp` before concatenating them into a regular expression. Fixes #52211. --------- Co-authored-by: Mitchell Austin --- packages/components/CHANGELOG.md | 7 ++++++- packages/components/src/unit-control/index.tsx | 5 +++-- packages/components/src/unit-control/test/index.tsx | 7 +++++-- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6409ce7515646..6d41445fdebe5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,9 +2,14 @@ ## Unreleased +### Bug Fix + +- `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)). + +## 25.2.0 (2023-06-23) + ### Enhancements -- `SelectControl`: Added option to set hidden options. ([#51545](https://github.com/WordPress/gutenberg/pull/51545)) - `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)). - `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)). - `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)). diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 847056ae4da47..073801df17c15 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -24,6 +24,7 @@ import { getValidParsedQuantityAndUnit, } from './utils'; import { useControlledState } from '../utils/hooks'; +import { escapeRegExp } from '../utils/strings'; import type { UnitControlProps, UnitControlOnChangeCallback } from './types'; function UnforwardedUnitControl( @@ -76,9 +77,9 @@ function UnforwardedUnitControl( ); const [ { value: firstUnitValue = '' } = {}, ...rest ] = list; const firstCharacters = rest.reduce( ( carry, { value } ) => { - const first = value?.substring( 0, 1 ) || ''; + const first = escapeRegExp( value?.substring( 0, 1 ) || '' ); return carry.includes( first ) ? carry : `${ carry }|${ first }`; - }, firstUnitValue.substring( 0, 1 ) ); + }, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) ); return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ]; }, [ nonNullValueProp, unitProp, unitsProp ] ); const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit( diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx index 9a2c719c46336..777004a6e8ae2 100644 --- a/packages/components/src/unit-control/test/index.tsx +++ b/packages/components/src/unit-control/test/index.tsx @@ -373,18 +373,21 @@ describe( 'UnitControl', () => { const units = [ { value: 'pt', label: 'pt', default: 0 }, { value: 'vmax', label: 'vmax', default: 10 }, + // Proves that units with regex control characters don't error. + { value: '+', label: '+', default: 10 }, ]; render( ); const options = getSelectOptions(); - expect( options.length ).toBe( 2 ); + expect( options.length ).toBe( 3 ); - const [ pt, vmax ] = options; + const [ pt, vmax, plus ] = options; expect( pt.value ).toBe( 'pt' ); expect( vmax.value ).toBe( 'vmax' ); + expect( plus.value ).toBe( '+' ); } ); it( 'should reset value on unit change, if unit has default value', async () => { From 17ae96fc0bf2274ba54f17e587588595e02a90b2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 4 Jul 2023 16:01:07 +1200 Subject: [PATCH 39/43] Patterns: rename wp_block sync_status postmeta to wp_pattern_sync_status (#52232) --------- Co-authored-by: Kai Hao --- packages/editor/src/components/post-sync-status/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index 22de1396d0679..0600ece953173 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -21,7 +21,6 @@ export default function PostSyncStatus() { if ( postType !== 'wp_block' ) { return null; } - const isFullySynced = ! syncStatus; return ( From 0afd8ed35c3220cc137704e4327b4a9cae1826c4 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Tue, 4 Jul 2023 13:46:21 +0300 Subject: [PATCH 40/43] Site Editor Frame: Ignore Spotlight in view mode (#52262) --- .../block-editor/use-site-editor-settings.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index af3f5ccba3498..4241c7f55cb67 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -12,11 +12,13 @@ import { unlock } from '../../lock-unlock'; import inserterMediaCategories from './inserter-media-categories'; export default function useSiteEditorSettings( templateType ) { - const { storedSettings } = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - + const { storedSettings, canvasMode } = useSelect( ( select ) => { + const { getSettings, getCanvasMode } = unlock( + select( editSiteStore ) + ); return { storedSettings: getSettings(), + canvasMode: getCanvasMode(), }; }, [] ); @@ -70,6 +72,7 @@ export default function useSiteEditorSettings( templateType ) { const { __experimentalAdditionalBlockPatterns, __experimentalAdditionalBlockPatternCategories, + focusMode, ...restStoredSettings } = storedSettings; @@ -86,6 +89,7 @@ export default function useSiteEditorSettings( templateType ) { // active for all entities. templateLock: false, template: false, + focusMode: canvasMode === 'view' && focusMode ? false : focusMode, }; - }, [ storedSettings, blockPatterns, blockPatternCategories ] ); + }, [ storedSettings, blockPatterns, blockPatternCategories, canvasMode ] ); } From 5ab9b67e7b6113ac1bbd6159223be376a003743e Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 5 Jul 2023 16:15:43 +1000 Subject: [PATCH 41/43] Guide: Place focus on the guide's container instead of its first tabbable (#52300) * Guide: Place focus on the guide's container instead of its first tabbable * Update CHANGELOG --- packages/components/CHANGELOG.md | 1 + packages/components/src/guide/index.tsx | 23 ++++++++++------------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6d41445fdebe5..404b8bda2d4be 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Bug Fix - `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)). +- `Guide`: Place focus on the guide's container instead of its first tabbable ([#52300](https://github.com/WordPress/gutenberg/pull/52300)). ## 25.2.0 (2023-06-23) diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx index e6a2d4c1252eb..c5655847d99e5 100644 --- a/packages/components/src/guide/index.tsx +++ b/packages/components/src/guide/index.tsx @@ -9,7 +9,6 @@ import classnames from 'classnames'; import { useState, useEffect, Children, useRef } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; -import { focus } from '@wordpress/dom'; /** * Internal dependencies @@ -59,9 +58,17 @@ function Guide( { onFinish, pages = [], }: GuideProps ) { - const guideContainer = useRef< HTMLDivElement >( null ); + const ref = useRef< HTMLDivElement >( null ); const [ currentPage, setCurrentPage ] = useState( 0 ); + useEffect( () => { + // Place focus at the top of the guide on mount and when the page changes. + const frame = ref.current?.querySelector( '.components-guide' ); + if ( frame instanceof HTMLElement ) { + frame.focus(); + } + }, [ currentPage ] ); + useEffect( () => { if ( Children.count( children ) ) { deprecated( 'Passing children to ', { @@ -71,16 +78,6 @@ function Guide( { } }, [ children ] ); - useEffect( () => { - // Each time we change the current page, start from the first element of the page. - // This also solves any focus loss that can happen. - if ( guideContainer.current ) { - ( - focus.tabbable.find( guideContainer.current ) as HTMLElement[] - )[ 0 ]?.focus(); - } - }, [ currentPage ] ); - if ( Children.count( children ) ) { pages = Children.map( children, ( child ) => ( { @@ -124,7 +121,7 @@ function Guide( { event.preventDefault(); } } } - ref={ guideContainer } + ref={ ref } >
From 838485c1790eabd1fef946f2fc019204b9f571e7 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Wed, 5 Jul 2023 15:48:43 +0100 Subject: [PATCH 42/43] Post editor: Require confirmation before removing Footnotes (#52277) * Post editor: Require confirmation before removing Footnotes Context: #52176 * BlockRemovalWarningModal: Limit width to 40rem * Explain that footnotes are preserved. Add warning to Site Editor --- .../block-removal-warning-modal/index.js | 3 +++ packages/edit-post/src/components/layout/index.js | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-removal-warning-modal/index.js b/packages/block-editor/src/components/block-removal-warning-modal/index.js index 2ed65481f6895..b2a8ededda261 100644 --- a/packages/block-editor/src/components/block-removal-warning-modal/index.js +++ b/packages/block-editor/src/components/block-removal-warning-modal/index.js @@ -62,6 +62,9 @@ export function BlockRemovalWarningModal() { { blockNamesForPrompt.length === 1 ? (

{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 15bc017900daa..0c18521b1215f 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -16,7 +16,10 @@ import { store as editorStore, } from '@wordpress/editor'; import { useSelect, useDispatch } from '@wordpress/data'; -import { BlockBreadcrumb } from '@wordpress/block-editor'; +import { + BlockBreadcrumb, + privateApis as blockEditorPrivateApis, +} from '@wordpress/block-editor'; import { Button, ScrollLock, Popover } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { PluginArea } from '@wordpress/plugins'; @@ -49,6 +52,9 @@ import WelcomeGuide from '../welcome-guide'; import ActionsPanel from './actions-panel'; import StartPageOptions from '../start-page-options'; import { store as editPostStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + +const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis ); const interfaceLabels = { /* translators: accessibility text for the editor top bar landmark region. */ @@ -63,6 +69,12 @@ const interfaceLabels = { footer: __( 'Editor footer' ), }; +const blockRemovalRules = { + 'core/footnotes': __( + 'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.' + ), +}; + function Layout( { styles } ) { const isMobileViewport = useViewportMatch( 'medium', '<' ); const isHugeViewport = useViewportMatch( 'huge', '>=' ); @@ -202,6 +214,7 @@ function Layout( { styles } ) { + Date: Thu, 6 Jul 2023 17:52:45 +1000 Subject: [PATCH 43/43] =?UTF-8?q?Fix=20react-dropdown-menu=20version=20to?= =?UTF-8?q?=20avoid=20breaking=20change=20from=20one=20of=20=E2=80=A6=20(#?= =?UTF-8?q?52356)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix react-dropdown-menu version to avoid breaking change from one if its dependencies. * Changelog update * move changelog entry to the right place * Update package-lock --- package-lock.json | 2 +- packages/components/CHANGELOG.md | 1 + packages/components/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e8e218128f5f3..59efa6cc364b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17424,7 +17424,7 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@floating-ui/react-dom": "1.0.0", - "@radix-ui/react-dropdown-menu": "^2.0.4", + "@radix-ui/react-dropdown-menu": "2.0.4", "@use-gesture/react": "^10.2.24", "@wordpress/a11y": "file:packages/a11y", "@wordpress/compose": "file:packages/compose", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 404b8bda2d4be..bdf9ef752d98d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)). - `Guide`: Place focus on the guide's container instead of its first tabbable ([#52300](https://github.com/WordPress/gutenberg/pull/52300)). +- `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([52356](https://github.com/WordPress/gutenberg/pull/52356)). ## 25.2.0 (2023-06-23) diff --git a/packages/components/package.json b/packages/components/package.json index 0c4e5bd056bf9..8b5bbfa594030 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -39,7 +39,7 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@floating-ui/react-dom": "1.0.0", - "@radix-ui/react-dropdown-menu": "^2.0.4", + "@radix-ui/react-dropdown-menu": "2.0.4", "@use-gesture/react": "^10.2.24", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose",