From 3a1cbcf6c1a82cca1b4948c461a355a8e453f444 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers <359867+desrosj@users.noreply.github.com> Date: Thu, 6 Jun 2024 09:22:03 -0400 Subject: [PATCH 01/24] Test using Node.js 22.x. (#62341) * Test using Node.js 22.x. * Update Node.js in create block workflow. --------- Co-authored-by: desrosj Co-authored-by: sirreal Co-authored-by: gziolo --- .github/workflows/create-block.yml | 2 +- .github/workflows/unit-test.yml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index ff1f1eb980347b..2a7ea040f8b493 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -20,7 +20,7 @@ jobs: strategy: fail-fast: false matrix: - node: ['20', '21'] + node: ['20', '22'] os: ['macos-latest', 'ubuntu-latest', 'windows-latest'] steps: diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 570fd8477b5fed..a813e4d2d8f5ba 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -27,7 +27,7 @@ jobs: strategy: fail-fast: false matrix: - node: ['20', '21'] + node: ['20', '22'] shard: ['1/4', '2/4', '3/4', '4/4'] steps: @@ -66,7 +66,7 @@ jobs: strategy: fail-fast: false matrix: - node: ['20', '21'] + node: ['20', '22'] steps: - name: Checkout repository From 91835a52cef9145384e9d7bf926b83b9a5fe436d Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 6 Jun 2024 23:27:00 +0900 Subject: [PATCH 02/24] Query: Adjust the position of sticky search field in Patterns modal (#62370) Co-authored-by: t-hamano Co-authored-by: jasmussen --- packages/block-library/src/query/editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index 61b553b6ed02e0..9b9db430a81a65 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -39,7 +39,8 @@ position: sticky; top: 0; padding: $grid-unit-20 0; - margin-bottom: 2px; + transform: translateY(- $grid-unit-05); // Offsets the top padding on the modal content container + margin-bottom: - $grid-unit-05; z-index: z-index(".block-library-query-pattern__selection-search"); } } From f7a3c656511bf93c0e28a388ab461a1f9abbf787 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Jun 2024 18:47:59 +0400 Subject: [PATCH 03/24] Core Data: Fix errors when the entities list doesn't contain config key (#62346) Co-authored-by: Mamaduka Co-authored-by: tyxla Co-authored-by: Mr2P --- packages/core-data/src/queried-data/reducer.js | 7 ++++--- packages/core-data/src/reducer.js | 2 +- packages/core-data/src/resolvers.js | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/core-data/src/queried-data/reducer.js b/packages/core-data/src/queried-data/reducer.js index 1f9bb64c7889d7..3a0c8869175c47 100644 --- a/packages/core-data/src/queried-data/reducer.js +++ b/packages/core-data/src/queried-data/reducer.js @@ -110,7 +110,8 @@ export function items( state = {}, action ) { [ context ]: { ...state[ context ], ...action.items.reduce( ( accumulator, value ) => { - const itemId = value[ key ]; + const itemId = value?.[ key ]; + accumulator[ itemId ] = conservativeMapItem( state?.[ context ]?.[ itemId ], value @@ -164,7 +165,7 @@ export function itemIsComplete( state = {}, action ) { [ context ]: { ...state[ context ], ...action.items.reduce( ( result, item ) => { - const itemId = item[ key ]; + const itemId = item?.[ key ]; // Defer to completeness if already assigned. Technically the // data may be outdated if receiving items for a field subset. @@ -232,7 +233,7 @@ const receiveQueries = compose( [ return { itemIds: getMergedItemIds( state?.itemIds || [], - action.items.map( ( item ) => item[ key ] ), + action.items.map( ( item ) => item?.[ key ] ).filter( Boolean ), page, perPage ), diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js index 8e6be425244687..3d6473d7610366 100644 --- a/packages/core-data/src/reducer.js +++ b/packages/core-data/src/reducer.js @@ -256,7 +256,7 @@ function entity( entityConfig ) { const nextState = { ...state }; for ( const record of action.items ) { - const recordId = record[ action.key ]; + const recordId = record?.[ action.key ]; const edits = nextState[ recordId ]; if ( ! edits ) { continue; diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js index 3e5373eda6d6ab..167b8ac052fe45 100644 --- a/packages/core-data/src/resolvers.js +++ b/packages/core-data/src/resolvers.js @@ -278,7 +278,7 @@ export const getEntityRecords = if ( ! query?._fields && ! query.context ) { const key = entityConfig.key || DEFAULT_ENTITY_KEY; const resolutionsArgs = records - .filter( ( record ) => record[ key ] ) + .filter( ( record ) => record?.[ key ] ) .map( ( record ) => [ kind, name, record[ key ] ] ); dispatch( { From e0b3aa1a911f90cef6efbc3552a19d21f45680b6 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 6 Jun 2024 07:55:32 -0700 Subject: [PATCH 04/24] Use data-wp-on-async directives in core blocks when handler does not need synchronous access to event (#62160) * Use data-wp-on-async directives when handler does not need synchronous access to event * Fix unit tests Co-authored-by: westonruter Co-authored-by: cbravobernal --- packages/block-library/src/navigation/index.php | 16 ++++++++-------- packages/block-library/src/navigation/view.js | 2 +- .../src/query-pagination-next/index.php | 2 +- .../src/query-pagination-previous/index.php | 2 +- packages/block-library/src/search/index.php | 4 ++-- phpunit/blocks/render-query-test.php | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 940277d47a2af9..f814e19a13cd37 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -495,7 +495,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo $close_button_directives = ''; if ( $is_interactive ) { $open_button_directives = ' - data-wp-on--click="actions.openMenuOnClick" + data-wp-on-async--click="actions.openMenuOnClick" data-wp-on--keydown="actions.handleMenuKeydown" '; $responsive_container_directives = ' @@ -503,7 +503,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo data-wp-class--is-menu-open="state.isMenuOpen" data-wp-watch="callbacks.initMenu" data-wp-on--keydown="actions.handleMenuKeydown" - data-wp-on--focusout="actions.handleMenuFocusout" + data-wp-on-async--focusout="actions.handleMenuFocusout" tabindex="-1" '; $responsive_dialog_directives = ' @@ -512,7 +512,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo data-wp-bind--role="state.roleAttribute" '; $close_button_directives = ' - data-wp-on--click="actions.closeMenuOnClick" + data-wp-on-async--click="actions.closeMenuOnClick" '; $responsive_container_content_directives = ' data-wp-watch="callbacks.focusFirstElement" @@ -826,7 +826,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut $tags->set_attribute( 'data-wp-interactive', 'core/navigation' ); $tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' ); $tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' ); - $tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' ); + $tags->set_attribute( 'data-wp-on-async--focusout', 'actions.handleMenuFocusout' ); $tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' ); // This is a fix for Safari. Without it, Safari doesn't change the active @@ -836,8 +836,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut $tags->set_attribute( 'tabindex', '-1' ); if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) { - $tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' ); - $tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' ); + $tags->set_attribute( 'data-wp-on-async--mouseenter', 'actions.openMenuOnHover' ); + $tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' ); } // Add directives to the toggle submenu button. @@ -847,7 +847,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut 'class_name' => 'wp-block-navigation-submenu__toggle', ) ) ) { - $tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' ); + $tags->set_attribute( 'data-wp-on-async--click', 'actions.toggleMenuOnClick' ); $tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' ); // The `aria-expanded` attribute for SSR is already added in the submenu block. } @@ -858,7 +858,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut 'class_name' => 'wp-block-navigation__submenu-container', ) ) ) { - $tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' ); + $tags->set_attribute( 'data-wp-on-async--focus', 'actions.openMenuOnFocus' ); } // Iterate through subitems if exist. diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 14d09e061848e7..9da7ab70d84f33 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -143,7 +143,7 @@ const { state, actions } = store( // If focus is outside modal, and in the document, close menu // event.target === The element losing focus // event.relatedTarget === The element receiving focus (if any) - // When focusout is outsite the document, + // When focusout is outside the document, // `window.document.activeElement` doesn't change. // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari. diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index d574f940938469..3b5be47fbed371 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -77,7 +77,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block ) ) { $p->set_attribute( 'data-wp-key', 'query-pagination-next' ); $p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' ); - $p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' ); + $p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' ); $p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' ); $content = $p->get_updated_html(); } diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index 95ed54075a7c54..1592f0a10cbff5 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -63,7 +63,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl ) ) { $p->set_attribute( 'data-wp-key', 'query-pagination-previous' ); $p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' ); - $p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' ); + $p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' ); $p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' ); $content = $p->get_updated_html(); } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 9d4c61f4163127..39b8591c86600f 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -191,8 +191,8 @@ function render_block_core_search( $attributes ) { data-wp-interactive="core/search"' . $form_context . 'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible" - data-wp-on--keydown="actions.handleSearchKeydown" - data-wp-on--focusout="actions.handleSearchFocusout" + data-wp-on-async--keydown="actions.handleSearchKeydown" + data-wp-on-async--focusout="actions.handleSearchFocusout" '; } diff --git a/phpunit/blocks/render-query-test.php b/phpunit/blocks/render-query-test.php index a68bd2c7adcbac..7fe39f390b2e62 100644 --- a/phpunit/blocks/render-query-test.php +++ b/phpunit/blocks/render-query-test.php @@ -94,13 +94,13 @@ public function test_rendering_query_with_enhanced_pagination() { $p->next_tag( array( 'class_name' => 'wp-block-query-pagination-previous' ) ); $this->assertSame( 'query-pagination-previous', $p->get_attribute( 'data-wp-key' ) ); $this->assertSame( 'core/query::actions.navigate', $p->get_attribute( 'data-wp-on--click' ) ); - $this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on--mouseenter' ) ); + $this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on-async--mouseenter' ) ); $this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) ); $p->next_tag( array( 'class_name' => 'wp-block-query-pagination-next' ) ); $this->assertSame( 'query-pagination-next', $p->get_attribute( 'data-wp-key' ) ); $this->assertSame( 'core/query::actions.navigate', $p->get_attribute( 'data-wp-on--click' ) ); - $this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on--mouseenter' ) ); + $this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on-async--mouseenter' ) ); $this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) ); $router_config = wp_interactivity_config( 'core/router' ); From 0c6b86858e43b3ed386bd57597924ca7ef1c5c43 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 6 Jun 2024 17:19:02 +0200 Subject: [PATCH 05/24] Mobile Release v1.120.0 (#62365) * [Mobile] - Image corrector - Check the path extension is a valid one (#62190) * Mobile - Image corrector - Check the path extension is a valid one * [Mobile] - Image corrector- Expand comment explaining the filtering for file: media paths * Integration Test helpers - Expand pasteIntoRichText to support passing files as a parameter * Mobile Editor Tests - Add new tests related to pasting HTML content with local image paths * Update snapshot * [Mobile] - Unsupported block - UI improvements (#62240) * Mobile - Unsupported block editor - Update editor style overrides * Mobile - Unsupported block - Update UI to show Tap to edit for unsupported blocks, simplifying the flow to open the Unsupported block editor * Fix unsupported block condition * Update snapshot * Fix condition for the help icon * Update Unsupported Block Editor condition and reverts the functionality to select the block first before opening the editor. * Release script: Update react-native-editor version to 1.120.0 * Release script: Update CHANGELOG for version 1.120.0 * Release script: Update podfile Co-authored-by: geriux Co-authored-by: SiobhyB --- package-lock.json | 6 +++--- packages/react-native-aztec/package.json | 2 +- packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/CHANGELOG.md | 2 ++ packages/react-native-editor/ios/Podfile.lock | 8 ++++---- packages/react-native-editor/package.json | 2 +- 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index e2a875e89a92a8..7e20ec0fa393dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55127,7 +55127,7 @@ }, "packages/react-native-aztec": { "name": "@wordpress/react-native-aztec", - "version": "1.119.1", + "version": "1.120.0", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/element": "file:../element", @@ -55144,7 +55144,7 @@ }, "packages/react-native-bridge": { "name": "@wordpress/react-native-bridge", - "version": "1.119.1", + "version": "1.120.0", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/react-native-aztec": "file:../react-native-aztec" @@ -55159,7 +55159,7 @@ }, "packages/react-native-editor": { "name": "@wordpress/react-native-editor", - "version": "1.119.1", + "version": "1.120.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index dd290b47c435de..0c870edf7e5ea0 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.119.1", + "version": "1.120.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 3921901d8ac036..c66c65cb8866a0 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.119.1", + "version": "1.120.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index e57e671931567d..44f5b63bd1f4d0 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,8 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased + +## 1.120.0 - [*] Prevent deleting content when backspacing in the first Paragraph block [#62069] - [internal] Adds new bridge functionality for updating content [#61796] diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 86405ca4eacfc0..9407c238841aa1 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -13,7 +13,7 @@ PODS: - ReactCommon/turbomodule/core (= 0.73.3) - fmt (6.2.1) - glog (0.3.5) - - Gutenberg (1.119.1): + - Gutenberg (1.120.0): - React-Core (= 0.73.3) - React-CoreModules (= 0.73.3) - React-RCTImage (= 0.73.3) @@ -1109,7 +1109,7 @@ PODS: - React-Core - RNSVG (14.0.0): - React-Core - - RNTAztecView (1.119.1): + - RNTAztecView (1.120.0): - React-Core - WordPress-Aztec-iOS (= 1.19.11) - SDWebImage (5.11.1): @@ -1343,7 +1343,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 73b3972e2bd20b3235ff2014f06a3d3af675ed29 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 - Gutenberg: be04e16bda9f59460f938d9c3f1248778df0368f + Gutenberg: 0d15c3a0b8aace231a954709a536580d7905c867 hermes-engine: 5420539d016f368cd27e008f65f777abd6098c56 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c @@ -1402,7 +1402,7 @@ SPEC CHECKSUMS: RNReanimated: 6936b41d8afb97175e7c0ab40425b53103f71046 RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825 RNSVG: 255767813dac22db1ec2062c8b7e7b856d4e5ae6 - RNTAztecView: 268a6489f223c3a91afa2ba5ee7bef82df900c69 + RNTAztecView: 3a1df2dd827082d22a4dd06b6031e2fefd2885c6 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index c131e7caf1f776..6e6a52a0817e53 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.119.1", + "version": "1.120.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From b2e649f147baddf4837159a2dbe94b6c04bc92d3 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Jun 2024 20:01:22 +0400 Subject: [PATCH 06/24] FlatTermSelector: Update the term suggestion limit (#62359) Unlinked contributors: fcenteno, keenode. Co-authored-by: Mamaduka Co-authored-by: t-hamano --- .../src/components/post-taxonomies/flat-term-selector.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js index 109c6faf53b415..a558cc05f555d3 100644 --- a/packages/editor/src/components/post-taxonomies/flat-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/flat-term-selector.js @@ -26,9 +26,12 @@ import MostUsedTerms from './most-used-terms'; const EMPTY_ARRAY = []; /** - * Module constants + * How the max suggestions limit was chosen: + * - Matches the `per_page` range set by the REST API. + * - Can't use "unbound" query. The `FormTokenField` needs a fixed number. + * - Matches default for `FormTokenField`. */ -const MAX_TERMS_SUGGESTIONS = 20; +const MAX_TERMS_SUGGESTIONS = 100; const DEFAULT_QUERY = { per_page: MAX_TERMS_SUGGESTIONS, _fields: 'id,name', From 044a05f1486f2631675ac3a98ddd64018c63e574 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 6 Jun 2024 17:20:48 +0100 Subject: [PATCH 07/24] Site Editor Hub: Simplify (#61579) Unlinked contributors: dereksmart. Co-authored-by: youknowriad Co-authored-by: draganescu Co-authored-by: jeryj Co-authored-by: richtabor Co-authored-by: annezazu Co-authored-by: jasmussen Co-authored-by: Mamaduka Co-authored-by: stokesman Co-authored-by: ramonjd --- packages/base-styles/_z-index.scss | 2 - .../src/components/block-editor/style.scss | 11 + .../edit-site/src/components/editor/index.js | 22 +- .../src/components/editor/style.scss | 4 - .../edit-site/src/components/layout/index.js | 75 ++----- .../src/components/layout/style.scss | 75 ++----- .../sidebar-navigation-screen/style.scss | 2 +- .../src/components/site-hub/index.js | 201 +++++------------- .../src/components/site-hub/style.scss | 5 +- .../src/components/site-icon/style.scss | 4 - .../edit-site/src/store/private-actions.js | 88 +++++--- .../specs/site-editor/template-part.spec.js | 18 +- .../specs/site-editor/template-revert.spec.js | 5 +- 13 files changed, 187 insertions(+), 325 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 0e3dddf70632b3..c8c35acfce4867 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -189,8 +189,6 @@ $z-layers: ( ".customize-widgets__block-toolbar": 7, // Site editor layout - ".edit-site-layout__header-container": 4, - ".edit-site-layout__hub": 3, ".edit-site-page-header": 2, ".edit-site-page-content": 1, ".edit-site-patterns__dataviews-list-pagination": 2, diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 3849eed24a4ea3..2e6e7f95b715f3 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -1,4 +1,15 @@ +/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ +::view-transition-old(frame), +::view-transition-new(frame) { + animation-duration: 0; +} +/* stylelint-enable */ + .edit-site-visual-editor__editor-canvas { + /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ + view-transition-name: frame; + /* stylelint-enable */ + &.is-focused { outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color); outline-offset: calc(-2 * var(--wp-admin-border-width-focus)); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 779b69cdeeef21..cd6b7198752392 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -7,6 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; +import { Button } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { EditorKeyboardShortcutsRegister, @@ -40,10 +41,11 @@ import { } from '../editor-canvas-container'; import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; +import SiteIcon from '../site-icon'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; import useEditorTitle from './use-editor-title'; -const { Editor } = unlock( editorPrivateApis ); +const { Editor, BackButton } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -125,6 +127,7 @@ export default function EditSiteEditor( { isLoading } ) { ], [ settings.styles, canvasMode, currentPostIsTrashed ] ); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const { createSuccessNotice } = useDispatch( noticesStore ); const history = useHistory(); const onActionPerformed = useCallback( @@ -213,6 +216,23 @@ export default function EditSiteEditor( { isLoading } ) { ! isEditingPage && } > + { isEditMode && ( + + { ( { length } ) => + length <= 1 && ( + + ) + } + + ) } { supportsGlobalStyles && } diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index f44b5a6f02ce20..b157057062c9d1 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -17,7 +17,3 @@ display: flex; justify-content: center; } - -.editor-header { - padding-left: $header-height; -} diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 4bbf29cced39ea..58de32d4b46878 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -16,9 +16,10 @@ import { useReducedMotion, useViewportMatch, useResizeObserver, + usePrevious, } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { useState, useRef, useEffect } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { CommandMenu, @@ -72,7 +73,7 @@ export default function Layout() { useCommonCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); - + const toggleRef = useRef(); const { isDistractionFree, hasFixedToolbar, @@ -120,27 +121,6 @@ export default function Layout() { triggerAnimationOnChange: canvasMode + '__' + routeKey, } ); - // This determines which animation variant should apply to the header. - // There is also a `isDistractionFreeHovering` state that gets priority - // when hovering the `edit-site-layout__header-container` in distraction - // free mode. It's set via framer and trickles down to all the children - // so they can use this variant state too. - // - // TODO: The issue with this is we want to have the hover state stick when hovering - // a popover opened via the header. We'll probably need to lift this state to - // handle it ourselves. Also, focusWithin the header needs to be handled. - let headerAnimationState; - - if ( canvasMode === 'view' ) { - // We need 'view' to always take priority so 'isDistractionFree' - // doesn't bleed over into the view (sidebar) state - headerAnimationState = 'view'; - } else if ( isDistractionFree ) { - headerAnimationState = 'isDistractionFree'; - } else { - headerAnimationState = canvasMode; // edit, view, init - } - // Sets the right context for the command palette let commandContext = 'site-editor'; @@ -154,6 +134,14 @@ export default function Layout() { const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); + const previousCanvaMode = usePrevious( canvasMode ); + useEffect( () => { + if ( previousCanvaMode === 'edit' ) { + toggleRef.current?.focus(); + } + // Should not depend on the previous canvas mode value but the next. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ canvasMode ] ); // Synchronizing the URL with the store value of canvasMode happens in an effect // This condition ensures the component is only rendered after the synchronization happens @@ -183,41 +171,6 @@ export default function Layout() { } ) } > - - - -
{ /* The NavigableRegion must always be rendered and not use @@ -246,6 +199,12 @@ export default function Layout() { } } className="edit-site-layout__sidebar" > + { areas.sidebar } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 0c5412b6d765bb..01c31de0d65d6c 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -11,37 +11,6 @@ } } -.edit-site-layout__hub { - position: fixed; - top: 0; - left: 0; - width: calc(100vw - #{$canvas-padding * 2}); - height: $header-height; - z-index: z-index(".edit-site-layout__hub"); - - @include break-medium { - width: calc(#{$nav-sidebar-width} - #{$grid-unit-15}); - } - - .edit-site-layout.is-full-canvas & { - padding-right: 0; - border-radius: 0; - width: $header-height; - box-shadow: none; - } -} - -.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) { - margin-bottom: $header-height; - @include break-medium { - margin-bottom: 0; - } -} - -.edit-site-layout__header-container { - z-index: z-index(".edit-site-layout__header-container"); -} - .edit-site-layout__content { height: 100%; flex-grow: 1; @@ -163,10 +132,22 @@ height: 100%; } +/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ +html.canvas-mode-edit-transition::view-transition-group(toggle) { + animation-delay: 255ms; +} +/* stylelint-enable */ + +.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle { + display: none; +} + .edit-site-layout__view-mode-toggle.components-button { + /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ + view-transition-name: toggle; + /* stylelint-enable */ position: relative; color: $white; - border-radius: 0; height: $header-height; width: $header-height; overflow: hidden; @@ -174,6 +155,8 @@ display: flex; align-items: center; justify-content: center; + background: $gray-900; + border-radius: 0; &:hover, &:active { @@ -207,7 +190,6 @@ .edit-site-layout__view-mode-toggle-icon { display: flex; - border-radius: $radius-block-ui; height: $grid-unit-80; width: $grid-unit-80; justify-content: center; @@ -244,33 +226,6 @@ } } -.edit-site-layout.is-distraction-free { - .edit-site-layout__header-container { - height: $header-height; - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: z-index(".edit-site-layout__header-container"); - width: 100%; - - // We need ! important because we override inline styles - // set by the motion component. - &:focus-within { - opacity: 1 !important; - div { - transform: translateX(0) translateY(0) translateZ(0) !important; - } - } - } - - .edit-site-site-hub { - position: absolute; - top: 0; - z-index: z-index(".edit-site-layout__hub"); - } -} - .edit-site-layout__area { flex-grow: 1; margin: 0; 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 7691f9ba2cdb0b..43b789d669ba4d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -59,7 +59,7 @@ position: sticky; top: 0; background: $gray-900; - padding-top: $grid-unit-60 + $header-height; + padding-top: $grid-unit-60; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon"); diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 160015a4bf3b15..b53fed2d7a94f4 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -7,19 +7,11 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { - Button, - __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, - __experimentalHStack as HStack, -} from '@wordpress/components'; -import { useReducedMotion } from '@wordpress/compose'; +import { Button, __experimentalHStack as HStack } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { decodeEntities } from '@wordpress/html-entities'; -import { memo } from '@wordpress/element'; +import { memo, forwardRef } from '@wordpress/element'; import { search } from '@wordpress/icons'; import { store as commandsStore } from '@wordpress/commands'; import { displayShortcut } from '@wordpress/keycodes'; @@ -32,14 +24,10 @@ import { store as editSiteStore } from '../../store'; import SiteIcon from '../site-icon'; import { unlock } from '../../lock-unlock'; -const HUB_ANIMATION_DURATION = 0.3; - -const SiteHub = memo( ( { isTransparent, className } ) => { - const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect( - ( select ) => { - const { getCanvasMode, getSettings } = unlock( - select( editSiteStore ) - ); +const SiteHub = memo( + forwardRef( ( { isTransparent }, ref ) => { + const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); const { getSite, @@ -47,7 +35,6 @@ const SiteHub = memo( ( { isTransparent, className } ) => { } = select( coreStore ); const _site = getSite(); return { - canvasMode: getCanvasMode(), dashboardLink: getSettings().__experimentalDashboardLink || 'index.php', homeUrl: getUnstableBase()?.home, @@ -56,141 +43,63 @@ const SiteHub = memo( ( { isTransparent, className } ) => { ? filterURLForDisplay( _site?.url ) : _site?.title, }; - }, - [] - ); - const { open: openCommandCenter } = useDispatch( commandsStore ); - - const disableMotion = useReducedMotion(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { clearSelectedBlock } = useDispatch( blockEditorStore ); - const { setDeviceType } = useDispatch( editorStore ); - const isBackToDashboardButton = canvasMode === 'view'; - const siteIconButtonProps = isBackToDashboardButton - ? { - href: dashboardLink, - label: __( 'Go to the Dashboard' ), - } - : { - href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a ` - + +
- - { canvasMode === 'view' && ( + +
+ +
-
- -
- -