From 538f18dc7fcfc6c06a9332e2c674fa8762d95976 Mon Sep 17 00:00:00 2001
From: Kellen Mace <kellen.mace@gmail.com>
Date: Tue, 21 May 2024 17:40:05 -0400
Subject: [PATCH 01/28] Documentation: Add PostURL component docs (#61737)

* Add JSDoc dockblock for PostURL component

* Refine PostURL JSDocs

* Add PostURLPanel JSDocs

* Add PostURLLabel JSDocs

* Add PostURLCheck JSDocs

* Auto-generate editor docs for PostURL updates

---------

Co-authored-by: Damon Cook <damonacook@gmail.com>
---
 packages/editor/README.md                     | 45 ++++++++++++++++---
 .../editor/src/components/post-url/check.js   |  8 ++++
 .../editor/src/components/post-url/index.js   | 12 +++++
 .../editor/src/components/post-url/label.js   | 10 +++++
 .../editor/src/components/post-url/panel.js   |  5 +++
 5 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/packages/editor/README.md b/packages/editor/README.md
index 1fdb1d0918f5a6..2997ac0c2d420a 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -1207,19 +1207,50 @@ _Returns_
 
 ### PostURL
 
-Undocumented declaration.
+Renders the `PostURL` component.
+
+_Usage_
+
+```jsx
+<PostURL />
+```
+
+_Parameters_
+
+-   _onClose_ `Function`: Callback function to be executed when the popover is closed.
+
+_Returns_
+
+-   `Component`: The rendered PostURL component.
 
 ### PostURLCheck
 
-Undocumented declaration.
+Check if the post URL is valid and visible.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `Element`: The child components.
+
+_Returns_
+
+-   `Component|null`: The child components if the post URL is valid and visible, otherwise null.
 
 ### PostURLLabel
 
-Undocumented declaration.
+Represents a label component for a post URL.
+
+_Returns_
+
+-   `Component`: The PostURLLabel component.
 
 ### PostURLPanel
 
-Undocumented declaration.
+Renders the `PostURLPanel` component.
+
+_Returns_
+
+-   `JSX.Element`: The rendered PostURLPanel component.
 
 ### PostVisibility
 
@@ -1362,7 +1393,11 @@ _Returns_
 
 ### usePostURLLabel
 
-Undocumented declaration.
+Custom hook to get the label for the post URL.
+
+_Returns_
+
+-   `string`: The filtered and decoded post URL label.
 
 ### usePostVisibilityLabel
 
diff --git a/packages/editor/src/components/post-url/check.js b/packages/editor/src/components/post-url/check.js
index 65c54846a702b1..7eb390472bdd7d 100644
--- a/packages/editor/src/components/post-url/check.js
+++ b/packages/editor/src/components/post-url/check.js
@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Check if the post URL is valid and visible.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child components.
+ *
+ * @return {Component|null} The child components if the post URL is valid and visible, otherwise null.
+ */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index cf55e30473329d..9453977a23bf05 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -24,6 +24,18 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURL` component.
+ *
+ * @example
+ * ```jsx
+ * <PostURL />
+ * ```
+ *
+ * @param {Function} onClose Callback function to be executed when the popover is closed.
+ *
+ * @return {Component} The rendered PostURL component.
+ */
 export default function PostURL( { onClose } ) {
 	const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } =
 		useSelect( ( select ) => {
diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js
index 5c233dfd549467..4f03e2bce0d05f 100644
--- a/packages/editor/src/components/post-url/label.js
+++ b/packages/editor/src/components/post-url/label.js
@@ -9,10 +9,20 @@ import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Represents a label component for a post URL.
+ *
+ * @return {Component} The PostURLLabel component.
+ */
 export default function PostURLLabel() {
 	return usePostURLLabel();
 }
 
+/**
+ * Custom hook to get the label for the post URL.
+ *
+ * @return {string} The filtered and decoded post URL label.
+ */
 export function usePostURLLabel() {
 	const postLink = useSelect(
 		( select ) => select( editorStore ).getPermalink(),
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index c4a1cbba935c7d..fbf174cc28bf36 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -15,6 +15,11 @@ import PostURL from './index';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURLPanel` component.
+ *
+ * @return {JSX.Element} The rendered PostURLPanel component.
+ */
 export default function PostURLPanel() {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.

From dd4e2dd85536661bf069db7aa44cdda54360ae44 Mon Sep 17 00:00:00 2001
From: sanjucta <sanjuctab@gmail.com>
Date: Wed, 22 May 2024 03:21:59 +0530
Subject: [PATCH 02/28] Add docblock to PostTitle and PostTitleRaw component
 (#61740)

* Add docblock to PostTitle component

* Refine PostTitle component JSDocs

* Add PostTitleRaw component JSDocs

* Add usePostTitle JSDocs

* Add usePostTitleFocus JSDocs

* Auto-generate editor docs for PostTitle updates

---------

Co-authored-by: Damon Cook <damonacook@gmail.com>
---
 packages/editor/README.md                             | 11 ++++++++++-
 packages/editor/src/components/post-title/index.js    |  9 ++++++++-
 .../src/components/post-title/post-title-raw.js       |  8 ++++++++
 .../src/components/post-title/use-post-title-focus.js |  7 +++++++
 .../src/components/post-title/use-post-title.js       |  5 +++++
 5 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/editor/README.md b/packages/editor/README.md
index 2997ac0c2d420a..341cda77474e0d 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -1177,7 +1177,16 @@ Undocumented declaration.
 
 ### PostTitle
 
-Undocumented declaration.
+Renders the `PostTitle` component.
+
+_Parameters_
+
+-   \_\_\_ `Object`: Unused parameter.
+-   _forwardedRef_ `Element`: Forwarded ref for the component.
+
+_Returns_
+
+-   `Component`: The rendered PostTitle component.
 
 ### PostTitleRaw
 
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index b307b2467b869b..57ab39f0061615 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -211,4 +210,12 @@ function PostTitle( _, forwardedRef ) {
 	);
 }
 
+/**
+ * Renders the `PostTitle` component.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Forwarded ref for the component.
+ *
+ * @return {Component} The rendered PostTitle component.
+ */
 export default forwardRef( PostTitle );
diff --git a/packages/editor/src/components/post-title/post-title-raw.js b/packages/editor/src/components/post-title/post-title-raw.js
index a9510bc136c231..a4c9713a094925 100644
--- a/packages/editor/src/components/post-title/post-title-raw.js
+++ b/packages/editor/src/components/post-title/post-title-raw.js
@@ -20,6 +20,14 @@ import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 
+/**
+ * Renders a raw post title input field.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Reference to the component's DOM node.
+ *
+ * @return {Component} The rendered component.
+ */
 function PostTitleRaw( _, forwardedRef ) {
 	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
diff --git a/packages/editor/src/components/post-title/use-post-title-focus.js b/packages/editor/src/components/post-title/use-post-title-focus.js
index effac53f2670a2..127b7661462ba9 100644
--- a/packages/editor/src/components/post-title/use-post-title-focus.js
+++ b/packages/editor/src/components/post-title/use-post-title-focus.js
@@ -9,6 +9,13 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook that manages the focus behavior of the post title input field.
+ *
+ * @param {Element} forwardedRef - The forwarded ref for the input field.
+ *
+ * @return {Object} - The ref object.
+ */
 export default function usePostTitleFocus( forwardedRef ) {
 	const ref = useRef();
 
diff --git a/packages/editor/src/components/post-title/use-post-title.js b/packages/editor/src/components/post-title/use-post-title.js
index 65bd67af6fb4c8..d335064a523549 100644
--- a/packages/editor/src/components/post-title/use-post-title.js
+++ b/packages/editor/src/components/post-title/use-post-title.js
@@ -7,6 +7,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook for managing the post title in the editor.
+ *
+ * @return {Object} An object containing the current title and a function to update the title.
+ */
 export default function usePostTitle() {
 	const { editPost } = useDispatch( editorStore );
 	const { title } = useSelect( ( select ) => {

From af0061937965a5bc7caeb40ffeae24c358d1e958 Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Wed, 22 May 2024 03:32:14 +0530
Subject: [PATCH 03/28] Added doc for PostFeaturedImage components (#61165)

---
 packages/editor/README.md                     | 40 +++++++++++++++++--
 .../components/post-featured-image/check.js   |  9 +++++
 .../components/post-featured-image/index.js   | 15 +++++++
 .../components/post-featured-image/panel.js   |  9 +++++
 4 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/packages/editor/README.md b/packages/editor/README.md
index 341cda77474e0d..91072345f10605 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -974,15 +974,49 @@ Undocumented declaration.
 
 ### PostFeaturedImage
 
-Undocumented declaration.
+Renders the component for managing the featured image of a post.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.currentPostId_ `number`: ID of the current post.
+-   _props.featuredImageId_ `number`: ID of the featured image.
+-   _props.onUpdateImage_ `Function`: Function to call when the image is updated.
+-   _props.onRemoveImage_ `Function`: Function to call when the image is removed.
+-   _props.media_ `Object`: The media object representing the featured image.
+-   _props.postType_ `string`: Post type.
+-   _props.noticeUI_ `Element`: UI for displaying notices.
+-   _props.noticeOperations_ `Object`: Operations for managing notices.
+
+_Returns_
+
+-   `Element`: Component to be rendered .
 
 ### PostFeaturedImageCheck
 
-Undocumented declaration.
+Wrapper component that renders its children only if the post type supports a featured image and the theme supports post thumbnails.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostFeaturedImagePanel
 
-Undocumented declaration.
+Renders the panel for the post featured image.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.withPanelBody_ `boolean`: Whether to include the panel body. Default true.
+
+_Returns_
+
+-   `Component|null`: The component to be rendered. Return Null if the editor panel is disabled for featured image.
 
 ### PostFormat
 
diff --git a/packages/editor/src/components/post-featured-image/check.js b/packages/editor/src/components/post-featured-image/check.js
index 24a9f80058ddcc..823559f766bc35 100644
--- a/packages/editor/src/components/post-featured-image/check.js
+++ b/packages/editor/src/components/post-featured-image/check.js
@@ -4,6 +4,15 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 import ThemeSupportCheck from '../theme-support-check';
 
+/**
+ * Wrapper component that renders its children only if the post type supports a featured image
+ * and the theme supports post thumbnails.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostFeaturedImageCheck( { children } ) {
 	return (
 		<ThemeSupportCheck supportKeys="post-thumbnails">
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index 5407cac15b5422..63c89669435d5e 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -266,6 +266,21 @@ const applyWithDispatch = withDispatch(
 	}
 );
 
+/**
+ * Renders the component for managing the featured image of a post.
+ *
+ * @param {Object}   props                  Props.
+ * @param {number}   props.currentPostId    ID of the current post.
+ * @param {number}   props.featuredImageId  ID of the featured image.
+ * @param {Function} props.onUpdateImage    Function to call when the image is updated.
+ * @param {Function} props.onRemoveImage    Function to call when the image is removed.
+ * @param {Object}   props.media            The media object representing the featured image.
+ * @param {string}   props.postType         Post type.
+ * @param {Element}  props.noticeUI         UI for displaying notices.
+ * @param {Object}   props.noticeOperations Operations for managing notices.
+ *
+ * @return {Element} Component to be rendered .
+ */
 export default compose(
 	withNotices,
 	applyWithSelect,
diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js
index 87d80dda4a7c1f..dd2a1527152ddf 100644
--- a/packages/editor/src/components/post-featured-image/panel.js
+++ b/packages/editor/src/components/post-featured-image/panel.js
@@ -15,6 +15,15 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
+/**
+ * Renders the panel for the post featured image.
+ *
+ * @param {Object}  props               Props.
+ * @param {boolean} props.withPanelBody Whether to include the panel body. Default true.
+ *
+ * @return {Component|null} The component to be rendered.
+ * Return Null if the editor panel is disabled for featured image.
+ */
 export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {

From 76702814603ae8d88bcc3ecc763b597280f97b4a Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Wed, 22 May 2024 03:36:00 +0530
Subject: [PATCH 04/28] Added doc for PostLastRevision components (#61166)

---
 packages/editor/README.md                     | 23 ++++++++++++++++---
 .../components/post-last-revision/check.js    |  8 +++++++
 .../components/post-last-revision/index.js    |  9 ++++++--
 .../components/post-last-revision/panel.js    |  5 ++++
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/editor/README.md b/packages/editor/README.md
index 91072345f10605..64e28992ee2c3a 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -1047,15 +1047,32 @@ _Returns_
 
 ### PostLastRevision
 
-Undocumented declaration.
+Renders the component for displaying the last revision of a post.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostLastRevisionCheck
 
-Undocumented declaration.
+Wrapper component that renders its children if the post has more than one revision.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `Component|null`: Rendered child components if post has more than one revision, otherwise null.
 
 ### PostLastRevisionPanel
 
-Undocumented declaration.
+Renders the panel for displaying the last revision of a post.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostLockedModal
 
diff --git a/packages/editor/src/components/post-last-revision/check.js b/packages/editor/src/components/post-last-revision/check.js
index 44f96b9cf7acb0..c570f5e42cdc32 100644
--- a/packages/editor/src/components/post-last-revision/check.js
+++ b/packages/editor/src/components/post-last-revision/check.js
@@ -9,6 +9,14 @@ import { useSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children if the post has more than one revision.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component|null} Rendered child components if post has more than one revision, otherwise null.
+ */
 function PostLastRevisionCheck( { children } ) {
 	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js
index e747befefe44e0..97031106772ada 100644
--- a/packages/editor/src/components/post-last-revision/index.js
+++ b/packages/editor/src/components/post-last-revision/index.js
@@ -13,7 +13,12 @@ import { addQueryArgs } from '@wordpress/url';
 import PostLastRevisionCheck from './check';
 import { store as editorStore } from '../../store';
 
-function LastRevision() {
+/**
+ * Renders the component for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostLastRevision() {
 	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
 			select( editorStore );
@@ -42,4 +47,4 @@ function LastRevision() {
 	);
 }
 
-export default LastRevision;
+export default PostLastRevision;
diff --git a/packages/editor/src/components/post-last-revision/panel.js b/packages/editor/src/components/post-last-revision/panel.js
index de0aee0ab77503..e87475cc2b34e9 100644
--- a/packages/editor/src/components/post-last-revision/panel.js
+++ b/packages/editor/src/components/post-last-revision/panel.js
@@ -9,6 +9,11 @@ import { PanelBody } from '@wordpress/components';
 import PostLastRevision from './';
 import PostLastRevisionCheck from './check';
 
+/**
+ * Renders the panel for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostLastRevisionPanel() {
 	return (
 		<PostLastRevisionCheck>

From f3069783fec48ebc4ac3b0e550b2e491d2f0eab7 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 21 May 2024 16:49:37 -0700
Subject: [PATCH 05/28] Workflows: test to check for label and skip backport
 changelog (#61808)

* Test to check for label and skip check

Test PHP change

Action

* Added extra label check

* Sentence case for the label: No Core Sync Required

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: priethor <priethor@git.wordpress.org>
---
 .github/workflows/check-backport-changelog.yml           | 3 ++-
 lib/class-wp-rest-global-styles-controller-gutenberg.php | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml
index 0d7025474d715d..dd3fe28fbfd59f 100644
--- a/.github/workflows/check-backport-changelog.yml
+++ b/.github/workflows/check-backport-changelog.yml
@@ -2,7 +2,7 @@ name: Verify Core Backport Changlog
 
 on:
     pull_request:
-        types: [opened, synchronize]
+        types: [opened, synchronize, labeled, unlabeled]
         paths:
             - 'lib/**'
             - '!lib/load.php'
@@ -31,6 +31,7 @@ jobs:
             - name: 'Fetch relevant history from origin'
               run: git fetch origin ${{ github.event.pull_request.base.ref }}
             - name: Check CHANGELOG status
+              if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }}
               env:
                   PR_NUMBER: ${{ github.event.number }}
               run: |
diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php
index 3c960564a8fe0a..9bbca1ffcab404 100644
--- a/lib/class-wp-rest-global-styles-controller-gutenberg.php
+++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * REST API: Try: bundle WP_Theme_JSON class instead of inheriting per WordPress version class
+ * REST API: Bundle WP_Theme_JSON class instead of inheriting per WordPress version class
  *
  * Changes to this class should be synced to the corresponding class
  * in WordPress core: src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php.

From f937eddef6a270d0e62f2a9e3c79d297ee6e1ac0 Mon Sep 17 00:00:00 2001
From: Kellen Mace <kellen.mace@gmail.com>
Date: Wed, 22 May 2024 00:51:20 -0400
Subject: [PATCH 06/28] Fix an issue causing wp-scripts commands to fail if the
 file path contained a space character (#61748)

* Add test file

* Add test JS file with new package version

* Bump lint-staged npm package version to fix issue where wp-scripts commands would fail if the file path contained a space

* Remove test files

Co-authored-by: kellenmace <kellenmace@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
---
 package-lock.json | 31 ++++++++++++++++++++++++-------
 package.json      |  2 +-
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 35ea50b60b7ada..5caa380f4749bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -206,7 +206,7 @@
 				"jest-message-util": "29.6.2",
 				"jest-watch-typeahead": "2.2.2",
 				"lerna": "7.1.4",
-				"lint-staged": "10.0.1",
+				"lint-staged": "10.0.2",
 				"make-dir": "3.0.0",
 				"mkdirp": "3.0.1",
 				"mock-match-media": "0.4.2",
@@ -35256,9 +35256,9 @@
 			}
 		},
 		"node_modules/lint-staged": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz",
-			"integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==",
+			"version": "10.0.2",
+			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz",
+			"integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==",
 			"dev": true,
 			"dependencies": {
 				"chalk": "^3.0.0",
@@ -35272,6 +35272,7 @@
 				"micromatch": "^4.0.2",
 				"normalize-path": "^3.0.0",
 				"please-upgrade-node": "^3.2.0",
+				"string-argv": "0.3.1",
 				"stringify-object": "^3.3.0"
 			},
 			"bin": {
@@ -47781,6 +47782,15 @@
 				"safe-buffer": "~5.1.0"
 			}
 		},
+		"node_modules/string-argv": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+			"integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.6.19"
+			}
+		},
 		"node_modules/string-length": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -83177,9 +83187,9 @@
 			}
 		},
 		"lint-staged": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz",
-			"integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==",
+			"version": "10.0.2",
+			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz",
+			"integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==",
 			"dev": true,
 			"requires": {
 				"chalk": "^3.0.0",
@@ -83193,6 +83203,7 @@
 				"micromatch": "^4.0.2",
 				"normalize-path": "^3.0.0",
 				"please-upgrade-node": "^3.2.0",
+				"string-argv": "0.3.1",
 				"stringify-object": "^3.3.0"
 			},
 			"dependencies": {
@@ -92808,6 +92819,12 @@
 				"safe-buffer": "~5.1.0"
 			}
 		},
+		"string-argv": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+			"integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+			"dev": true
+		},
 		"string-length": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
diff --git a/package.json b/package.json
index 7995d6a9755a7e..77dce7cb5a5e72 100644
--- a/package.json
+++ b/package.json
@@ -218,7 +218,7 @@
 		"jest-message-util": "29.6.2",
 		"jest-watch-typeahead": "2.2.2",
 		"lerna": "7.1.4",
-		"lint-staged": "10.0.1",
+		"lint-staged": "10.0.2",
 		"make-dir": "3.0.0",
 		"mkdirp": "3.0.1",
 		"mock-match-media": "0.4.2",

From c70633dabadb1c9ea846663d4d2b086394993035 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Wed, 22 May 2024 09:54:05 +0200
Subject: [PATCH 07/28] History: add getLocationWithParams method (#61823)

* History: add getLocationWithParams method

* Fix effect loop in pages dataview
---
 .../src/components/add-new-pattern/index.js   | 16 +++++++-------
 .../src/components/page-pages/index.js        | 18 +++++++++------
 .../sidebar-dataviews/add-new-view.js         |  8 +++----
 .../custom-dataviews-list.js                  | 12 +++++-----
 .../leaf-more-menu.js                         |  7 +++---
 .../edit-site/src/utils/use-activate-theme.js |  4 ++--
 packages/router/src/history.js                | 17 ++++++++++++++
 packages/router/src/router.js                 | 22 ++++---------------
 8 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 7ecbf640790a83..bca37df9715004 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -25,14 +25,13 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
 
 export default function AddNewPattern() {
 	const history = useHistory();
-	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -141,16 +140,17 @@ export default function AddNewPattern() {
 						return;
 					}
 					try {
+						const {
+							params: { postType, categoryId },
+						} = history.getLocationWithParams();
 						let currentCategoryId;
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
-						if ( params.postType !== TEMPLATE_PART_POST_TYPE ) {
+						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
 							const currentCategory = categoryMap
 								.values()
-								.find(
-									( term ) => term.name === params.categoryId
-								);
-							if ( !! currentCategory ) {
+								.find( ( term ) => term.name === categoryId );
+							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||
 									( await findOrCreateTerm(
@@ -170,7 +170,7 @@ export default function AddNewPattern() {
 						// category.
 						if (
 							! currentCategoryId &&
-							params.categoryId !== 'my-patterns'
+							categoryId !== 'my-patterns'
 						) {
 							history.push( {
 								postType: PATTERN_TYPES.user,
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 81f34e9ba59a89..391db38fbc51b6 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -51,8 +51,9 @@ const getFormattedDate = ( dateToDisplay ) =>
 	);
 
 function useView( postType ) {
-	const { params } = useLocation();
-	const { activeView = 'all', isCustom = 'false', layout } = params;
+	const {
+		params: { activeView = 'all', isCustom = 'false', layout },
+	} = useLocation();
 	const history = useHistory();
 	const selectedDefaultView = useMemo( () => {
 		const defaultView =
@@ -128,6 +129,7 @@ function useView( postType ) {
 	const setDefaultViewAndUpdateUrl = useCallback(
 		( viewToSet ) => {
 			if ( viewToSet.type !== view?.type ) {
+				const { params } = history.getLocationWithParams();
 				history.push( {
 					...params,
 					layout: viewToSet.type,
@@ -135,7 +137,7 @@ function useView( postType ) {
 			}
 			setView( viewToSet );
 		},
-		[ params, view?.type, history ]
+		[ history, view?.type ]
 	);
 
 	if ( isCustom === 'false' ) {
@@ -203,19 +205,21 @@ export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
-	const { params } = useLocation();
-	const { isCustom = 'false' } = params;
 
 	const onSelectionChange = useCallback(
 		( items ) => {
-			if ( isCustom === 'false' && view?.type === LAYOUT_LIST ) {
+			const { params } = history.getLocationWithParams();
+			if (
+				( params.isCustom ?? 'false' ) === 'false' &&
+				view?.type === LAYOUT_LIST
+			) {
 				history.push( {
 					...params,
 					postId: items.length === 1 ? items[ 0 ].id : undefined,
 				} );
 			}
 		},
-		[ history, params, view?.type, isCustom ]
+		[ history, view?.type ]
 	);
 
 	const queryArgs = useMemo( () => {
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index 92986912d29cb8..ffddddb9cad292 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -22,12 +22,9 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { DEFAULT_VIEWS } from './default-views';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 function AddNewItemModalContent( { type, setIsAdding } ) {
-	const {
-		params: { postType },
-	} = useLocation();
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
@@ -68,6 +65,9 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						),
 					}
 				);
+				const {
+					params: { postType },
+				} = history.getLocationWithParams();
 				history.push( {
 					postType,
 					activeView: savedRecord.id,
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
index 5c7b3d038e76d9..5b8ccb4b69e6da 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -27,7 +27,7 @@ import DataViewItem from './dataview-item';
 import AddNewItem from './add-new-view';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -81,9 +81,6 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 }
 
 function CustomDataViewItem( { dataviewId, isActive } ) {
-	const {
-		params: { postType },
-	} = useLocation();
 	const history = useHistory();
 	const { dataview } = useSelect(
 		( select ) => {
@@ -145,9 +142,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 											}
 										);
 										if ( isActive ) {
-											history.replace( {
-												postType,
-											} );
+											const {
+												params: { postType },
+											} = history.getLocationWithParams();
+											history.replace( { postType } );
 										}
 										onClose();
 									} }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
index 3749505c6b56fb..568ec291f9ed11 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -20,10 +20,9 @@ const POPOVER_PROPS = {
  */
 import { unlock } from '../../lock-unlock';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -60,6 +59,7 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: attributes.type,
@@ -72,6 +72,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: 'page',
@@ -84,7 +85,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 		},
-		[ history, params ]
+		[ history ]
 	);
 
 	return (
diff --git a/packages/edit-site/src/utils/use-activate-theme.js b/packages/edit-site/src/utils/use-activate-theme.js
index e5f9488a3edd8b..0dafd88340ba75 100644
--- a/packages/edit-site/src/utils/use-activate-theme.js
+++ b/packages/edit-site/src/utils/use-activate-theme.js
@@ -14,7 +14,7 @@ import {
 	currentlyPreviewingTheme,
 } from './is-previewing-theme';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 /**
  * This should be refactored to use the REST API, once the REST API can activate themes.
@@ -23,7 +23,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
  */
 export function useActivateTheme() {
 	const history = useHistory();
-	const { params } = useLocation();
 	const { startResolution, finishResolution } = useDispatch( coreStore );
 
 	return async () => {
@@ -38,6 +37,7 @@ export function useActivateTheme() {
 			finishResolution( 'activateTheme' );
 			// Remove the wp_theme_preview query param: we've finished activating
 			// the queue and are switching to normal Site Editor.
+			const { params } = history.getLocationWithParams();
 			history.replace( { ...params, wp_theme_preview: undefined } );
 		}
 	};
diff --git a/packages/router/src/history.js b/packages/router/src/history.js
index 56c85914a5453f..3a04745923a817 100644
--- a/packages/router/src/history.js
+++ b/packages/router/src/history.js
@@ -38,7 +38,24 @@ function replace( params, state ) {
 	return originalHistoryReplace.call( history, { search }, state );
 }
 
+const locationMemo = new WeakMap();
+function getLocationWithParams() {
+	const location = history.location;
+	let locationWithParams = locationMemo.get( location );
+	if ( ! locationWithParams ) {
+		locationWithParams = {
+			...location,
+			params: Object.fromEntries(
+				new URLSearchParams( location.search )
+			),
+		};
+		locationMemo.set( location, locationWithParams );
+	}
+	return locationWithParams;
+}
+
 history.push = push;
 history.replace = replace;
+history.getLocationWithParams = getLocationWithParams;
 
 export default history;
diff --git a/packages/router/src/router.js b/packages/router/src/router.js
index 233ee6962de763..55807175a5bdd9 100644
--- a/packages/router/src/router.js
+++ b/packages/router/src/router.js
@@ -23,25 +23,11 @@ export function useHistory() {
 	return useContext( HistoryContext );
 }
 
-const locationCache = new Map();
-function getLocationWithParams( location ) {
-	if ( locationCache.get( location.search ) ) {
-		return locationCache.get( location.search );
-	}
-	const searchParams = new URLSearchParams( location.search );
-	const ret = {
-		...location,
-		params: Object.fromEntries( searchParams.entries() ),
-	};
-	locationCache.clear();
-	locationCache.set( location.search, ret );
-
-	return ret;
-}
-
 export function RouterProvider( { children } ) {
-	const location = useSyncExternalStore( history.listen, () =>
-		getLocationWithParams( history.location )
+	const location = useSyncExternalStore(
+		history.listen,
+		history.getLocationWithParams,
+		history.getLocationWithParams
 	);
 
 	return (

From f306096741fe61a76833dbf66b64993678f8d84f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 22 May 2024 10:01:49 +0100
Subject: [PATCH 08/28] React: Upgrade to the new JSX transform  (#61692)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
---
 lib/client-assets.php                         |  8 ++++
 package-lock.json                             | 15 +-----
 package.json                                  |  3 +-
 packages/babel-preset-default/CHANGELOG.md    |  4 ++
 packages/babel-preset-default/index.js        | 13 +----
 packages/babel-preset-default/package.json    |  1 -
 .../components/global-styles/color-panel.js   | 29 +++++++-----
 packages/components/CHANGELOG.md              |  4 ++
 .../src/custom-select-control/index.js        |  3 +-
 .../components/src/form-token-field/index.tsx |  2 +-
 .../lib/util.js                               |  7 +++
 packages/interactivity/src/directives.tsx     | 23 ++++-----
 packages/interactivity/src/hooks.tsx          | 22 ++++-----
 packages/scripts/CHANGELOG.md                 |  4 ++
 tools/webpack/packages.js                     | 31 +-----------
 tools/webpack/vendors.js                      | 47 +++++++++++++++++++
 webpack.config.js                             |  2 +
 17 files changed, 117 insertions(+), 101 deletions(-)
 create mode 100644 tools/webpack/vendors.js

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 13884f90fb3ea5..a159bc53e6a591 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -590,6 +590,14 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		array( 'react' ),
 		'18'
 	);
+
+	gutenberg_override_script(
+		$scripts,
+		'react-jsx-runtime',
+		gutenberg_url( 'build/vendors/react-jsx-runtime' . $extension ),
+		array( 'react' ),
+		'18'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 
diff --git a/package-lock.json b/package-lock.json
index 5caa380f4749bb..18e04972eec1f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,8 +80,7 @@
 				"@wordpress/warning": "file:packages/warning",
 				"@wordpress/widgets": "file:packages/widgets",
 				"@wordpress/wordcount": "file:packages/wordcount",
-				"es-module-shims": "^1.8.2",
-				"wicg-inert": "3.1.2"
+				"es-module-shims": "^1.8.2"
 			},
 			"devDependencies": {
 				"@actions/core": "1.9.1",
@@ -52381,11 +52380,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/wicg-inert": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
-			"integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
-		},
 		"node_modules/wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -53173,7 +53167,6 @@
 				"@babel/preset-env": "^7.16.0",
 				"@babel/preset-typescript": "^7.16.0",
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 				"@wordpress/browserslist-config": "file:../browserslist-config",
 				"@wordpress/warning": "file:../warning",
 				"browserslist": "^4.21.10",
@@ -68520,7 +68513,6 @@
 				"@babel/preset-env": "^7.16.0",
 				"@babel/preset-typescript": "^7.16.0",
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 				"@wordpress/browserslist-config": "file:../browserslist-config",
 				"@wordpress/warning": "file:../warning",
 				"browserslist": "^4.21.10",
@@ -96269,11 +96261,6 @@
 				"has-tostringtag": "^1.0.0"
 			}
 		},
-		"wicg-inert": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
-			"integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
-		},
 		"wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/package.json b/package.json
index 77dce7cb5a5e72..0902b172c9319c 100644
--- a/package.json
+++ b/package.json
@@ -92,8 +92,7 @@
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount",
-		"es-module-shims": "^1.8.2",
-		"wicg-inert": "3.1.2"
+		"es-module-shims": "^1.8.2"
 	},
 	"devDependencies": {
 		"@actions/core": "1.9.1",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 5735008dd472dc..15ced9c9dde12c 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
 ## 7.42.0 (2024-05-16)
 
 ## 7.41.0 (2024-05-02)
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index 40f7c31bb3c25b..45ec6473be3cbc 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -75,21 +75,10 @@ module.exports = ( api ) => {
 		],
 		plugins: [
 			require.resolve( '@wordpress/warning/babel-plugin' ),
-			[
-				require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
-				{
-					scopeVariable: 'createElement',
-					scopeVariableFrag: 'Fragment',
-					source: 'react',
-					isDefault: false,
-				},
-			],
 			[
 				require.resolve( '@babel/plugin-transform-react-jsx' ),
 				{
-					pragma: 'createElement',
-					pragmaFrag: 'Fragment',
-					useSpread: true,
+					runtime: 'automatic',
 				},
 			],
 			maybeGetPluginTransformRuntime(),
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 4b12101565b45c..438cce0f47b96b 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -35,7 +35,6 @@
 		"@babel/preset-env": "^7.16.0",
 		"@babel/preset-typescript": "^7.16.0",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config",
 		"@wordpress/warning": "file:../warning",
 		"browserslist": "^4.21.10",
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 33aec0979a3c4d..baa5a0779cfd05 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -710,19 +710,22 @@ export default function ColorPanel( {
 			onChange={ onChange }
 			panelId={ panelId }
 		>
-			{ items.map( ( item ) => (
-				<ColorPanelDropdown
-					key={ item.key }
-					{ ...item }
-					colorGradientControlSettings={ {
-						colors,
-						disableCustomColors: ! areCustomSolidsEnabled,
-						gradients,
-						disableCustomGradients: ! areCustomGradientsEnabled,
-					} }
-					panelId={ panelId }
-				/>
-			) ) }
+			{ items.map( ( item ) => {
+				const { key, ...restItem } = item;
+				return (
+					<ColorPanelDropdown
+						key={ key }
+						{ ...restItem }
+						colorGradientControlSettings={ {
+							colors,
+							disableCustomColors: ! areCustomSolidsEnabled,
+							gradients,
+							disableCustomGradients: ! areCustomGradientsEnabled,
+						} }
+						panelId={ panelId }
+					/>
+				);
+			} ) }
 			{ children }
 		</Wrapper>
 	);
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7ada9626797d45..4e965c7960b8e3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
 
+### Internal
+
+-   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
 ## 27.6.0 (2024-05-16)
 
 ### Internal
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 46bc4f4d9a4fb1..979aa0f7bdff8d 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -185,12 +185,11 @@ export default function CustomSelectControl( props ) {
 					<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 						{ isOpen &&
 							items.map( ( item, index ) => (
-								// eslint-disable-next-line react/jsx-key
 								<li
+									key={ item.key }
 									{ ...getItemProps( {
 										item,
 										index,
-										key: item.key,
 										className: clsx(
 											item.className,
 											'components-custom-select-control__item',
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index d89080b4410c41..9fa3d3b7323df2 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index 92fdcff11612ea..55a908c31a7ab9 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -42,6 +42,10 @@ function defaultRequestToExternal( request ) {
 
 		case 'react-dom':
 			return 'ReactDOM';
+
+		case 'react/jsx-runtime':
+		case 'react/jsx-dev-runtime':
+			return 'ReactJSXRuntime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
@@ -117,6 +121,9 @@ function defaultRequestToHandle( request ) {
 
 		case 'lodash-es':
 			return 'lodash';
+
+		case 'react/jsx-runtime':
+			return 'react-jsx-runtime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index b0b78bb27efe50..d0619bb37d4c7f 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -1,8 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react-hooks/exhaustive-deps */
 
-/* @jsx createElement */
-
 /**
  * External dependencies
  */
@@ -231,6 +229,7 @@ export default () => {
 	// data-wp-context
 	directive(
 		'context',
+		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
@@ -260,7 +259,7 @@ export default () => {
 				return proxifyContext( currentValue.current, inheritedValue );
 			}, [ defaultEntry, inheritedValue ] );
 
-			return <Provider value={ contextStack }>{ children }</Provider>;
+			return createElement( Provider, { value: contextStack }, children );
 		},
 		{ priority: 5 }
 	);
@@ -481,12 +480,10 @@ export default () => {
 		} ) => {
 			// Preserve the initial inner HTML.
 			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
+			return createElement( Type, {
+				dangerouslySetInnerHTML: { __html: cached },
+				...rest,
+			} );
 		}
 	);
 
@@ -549,10 +546,10 @@ export default () => {
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
 
-				return (
-					<Provider value={ mergedContext } key={ key }>
-						{ element.props.content }
-					</Provider>
+				return createElement(
+					Provider,
+					{ value: mergedContext, key },
+					element.props.content
 				);
 			} );
 		},
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 735ed26aabc8cc..4d4e2d6d6f6629 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -1,5 +1,3 @@
-/* @jsx createElement */
-
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -352,17 +350,15 @@ const Directives = ( {
 
 	// Recursively render the wrapper for the next priority level.
 	const children =
-		nextPriorityLevels.length > 0 ? (
-			<Directives
-				directives={ directives }
-				priorityLevels={ nextPriorityLevels }
-				element={ element }
-				originalProps={ originalProps }
-				previousScope={ scope }
-			/>
-		) : (
-			element
-		);
+		nextPriorityLevels.length > 0
+			? createElement( Directives, {
+					directives,
+					priorityLevels: nextPriorityLevels,
+					element,
+					originalProps,
+					previousScope: scope,
+			  } )
+			: element;
 
 	const props = { ...originalProps, children };
 	const directiveArgs = {
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 8bc3319e52836c..8c5aa8c623ef09 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
 ## 27.9.0 (2024-05-16)
 
 ### New Features
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 0a4b8cef574464..899ee36ec93813 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -102,34 +102,6 @@ const exportDefaultPackages = [
 	'warning',
 ];
 
-const vendors = {
-	react: [
-		'react/umd/react.development.js',
-		'react/umd/react.production.min.js',
-	],
-	'react-dom': [
-		'react-dom/umd/react-dom.development.js',
-		'react-dom/umd/react-dom.production.min.js',
-	],
-	'inert-polyfill': [
-		'wicg-inert/dist/inert.js',
-		'wicg-inert/dist/inert.min.js',
-	],
-};
-const vendorsCopyConfig = Object.entries( vendors ).flatMap(
-	( [ key, [ devFilename, prodFilename ] ] ) => {
-		return [
-			{
-				from: `node_modules/${ devFilename }`,
-				to: `build/vendors/${ key }.js`,
-			},
-			{
-				from: `node_modules/${ prodFilename }`,
-				to: `build/vendors/${ key }.min.js`,
-			},
-		];
-	}
-);
 module.exports = {
 	...baseConfig,
 	name: 'packages',
@@ -176,8 +148,7 @@ module.exports = {
 					transform: stylesTransform,
 					noErrorOnMissing: true,
 				} ) )
-				.concat( bundledPackagesPhpConfig )
-				.concat( vendorsCopyConfig ),
+				.concat( bundledPackagesPhpConfig ),
 		} ),
 		new MomentTimezoneDataPlugin( {
 			startYear: 2000,
diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js
new file mode 100644
index 00000000000000..d21c029f6c3971
--- /dev/null
+++ b/tools/webpack/vendors.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+const importedVendors = {
+	react: { import: 'react', global: 'React' },
+	'react-dom': { import: 'react-dom', global: 'ReactDOM' },
+	'react-jsx-runtime': {
+		import: 'react/jsx-runtime',
+		global: 'ReactJSXRuntime',
+	},
+};
+
+module.exports = [
+	...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => {
+		return [ 'production', 'development' ].map( ( mode ) => {
+			return {
+				mode,
+				target: 'browserslist',
+				output: {
+					filename:
+						mode === 'development'
+							? `vendors/[name].js`
+							: `vendors/[name].min.js`,
+					path: join( __dirname, '..', '..', 'build' ),
+				},
+				entry: {
+					[ name ]: {
+						import: config.import,
+						library: {
+							name: config.global,
+							type: 'window',
+						},
+					},
+				},
+
+				externals:
+					name === 'react'
+						? {}
+						: {
+								react: 'React',
+						  },
+			};
+		} );
+	} ),
+];
diff --git a/webpack.config.js b/webpack.config.js
index 8558707f4bc9fa..45b22cc5354dcf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,10 +5,12 @@ const blocksConfig = require( './tools/webpack/blocks' );
 const developmentConfigs = require( './tools/webpack/development' );
 const interactivity = require( './tools/webpack/interactivity' );
 const packagesConfig = require( './tools/webpack/packages' );
+const vendorsConfig = require( './tools/webpack/vendors' );
 
 module.exports = [
 	...blocksConfig,
 	interactivity,
 	packagesConfig,
 	...developmentConfigs,
+	...vendorsConfig,
 ];

From 448e855ba1e649ba7f511732b4970d9b91e5428e Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 22 May 2024 13:13:51 +0400
Subject: [PATCH 09/28] Style Book: Use state to initialize examples (#61848)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/edit-site/src/components/style-book/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 900fa47beb99c2..0d699544613209 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -190,7 +190,7 @@ function StyleBook( {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const examples = useMemo( getExamples, [] );
+	const [ examples ] = useState( getExamples );
 	const tabs = useMemo(
 		() =>
 			getCategories()

From 25c9ddfe61fe4374014e19fc0850891199a20d4e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 22 May 2024 10:41:35 +0100
Subject: [PATCH 10/28] DataViews: Remove non-used file (#61853)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../dataviews/src/dropdown-menu-helper.js     | 61 -------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 packages/dataviews/src/dropdown-menu-helper.js

diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js
deleted file mode 100644
index ce0ace8f61e551..00000000000000
--- a/packages/dataviews/src/dropdown-menu-helper.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-import { SVG, Circle } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const { DropdownMenuItemV2: DropdownMenuItem } = unlock(
-	componentsPrivateApis
-);
-
-const radioCheck = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
-	</SVG>
-);
-
-/**
- * A custom implementation of a radio menu item using the standard menu item
- * component, which allows deselecting selected values.
- */
-export const DropdownMenuRadioItemCustom = forwardRef(
-	function DropdownMenuRadioItemCustom(
-		{ checked, name, value, hideOnClick, onChange, onClick, ...props },
-		ref
-	) {
-		const onClickHandler = ( e ) => {
-			onClick?.( e );
-			onChange?.( { ...e, target: { ...e.target, value } } );
-		};
-		return (
-			<DropdownMenuItem
-				ref={ ref }
-				role="menuitemradio"
-				name={ name }
-				aria-checked={ checked }
-				hideOnClick={ !! hideOnClick }
-				prefix={
-					checked ? (
-						<Icon icon={ radioCheck } />
-					) : (
-						<span
-							className="dataviews-filters__custom-menu-radio-item-prefix"
-							aria-hidden="true"
-						></span>
-					)
-				}
-				onClick={ onClickHandler }
-				{ ...props }
-			/>
-		);
-	}
-);

From cef484e5f6fa1a1ea408ed797d3ec3a474f63136 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <me@andreidraganescu.info>
Date: Wed, 22 May 2024 12:53:44 +0300
Subject: [PATCH 11/28] Zoom out: Render in-between inserters when selected
 (#61559)

---
 .../src/components/block-tools/zoom-out-mode-inserters.js   | 4 +++-
 test/e2e/specs/site-editor/zoom-out.spec.js                 | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 4396f54b19707b..ca27fd8ad37857 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -21,6 +21,7 @@ function ZoomOutModeInserters() {
 		sectionRootClientId,
 		insertionPoint,
 		setInserterIsOpened,
+		selectedSection,
 	} = useSelect( ( select ) => {
 		const { getSettings, getBlockOrder } = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
@@ -32,6 +33,7 @@ function ZoomOutModeInserters() {
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const editor = select( 'core/editor' );
 		return {
+			selectedSection: editor.getSelectedBlock(),
 			blockOrder: getBlockOrder( root ),
 			insertionPoint: unlock( editor ).getInsertionPoint(),
 			sectionRootClientId: root,
@@ -62,7 +64,7 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! selectedSection ) {
 		return null;
 	}
 
diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 63ad58b2e18a59..2cd0db8b1ebe22 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -24,6 +24,12 @@ test.describe( 'Zoom Out', () => {
 		await page.getByRole( 'button', { name: 'Styles' } ).click();
 		await page.getByRole( 'button', { name: 'Browse styles' } ).click();
 
+		// select the 1st pattern
+		await page
+			.frameLocator( 'iframe[name="editor-canvas"]' )
+			.locator( 'header' )
+			.click();
+
 		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
 		await page.getByLabel( 'Add pattern' ).first().click();
 		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );

From e7eb60a1176c923a2e20ce025e7531a0ccb1ed21 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Wed, 22 May 2024 13:10:53 +0200
Subject: [PATCH 12/28] withRegistryProvider: prevent intermediate state with
 no children (#61859)

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
---
 .../provider/with-registry-provider.js        | 71 +++++++++----------
 .../provider/with-registry-provider.js        | 63 ++++++++--------
 2 files changed, 65 insertions(+), 69 deletions(-)

diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js
index 5c00da6e93eabc..582a9bd547f20e 100644
--- a/packages/block-editor/src/components/provider/with-registry-provider.js
+++ b/packages/block-editor/src/components/provider/with-registry-provider.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -15,41 +11,40 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
-const withRegistryProvider = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return withRegistry(
-			( { useSubRegistry = true, registry, ...props } ) => {
-				if ( ! useSubRegistry ) {
-					return (
-						<WrappedComponent registry={ registry } { ...props } />
-					);
-				}
-
-				const [ subRegistry, setSubRegistry ] = useState( null );
-				useEffect( () => {
-					const newRegistry = createRegistry( {}, registry );
-					newRegistry.registerStore(
-						blockEditorStoreName,
-						storeConfig
-					);
-					setSubRegistry( newRegistry );
-				}, [ registry ] );
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry( {}, registry );
+		subRegistry.registerStore( blockEditorStoreName, storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
 
-				if ( ! subRegistry ) {
-					return null;
-				}
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
+				registry,
+				useSubRegistry
+			);
 
-				return (
-					<RegistryProvider value={ subRegistry }>
-						<WrappedComponent
-							registry={ subRegistry }
-							{ ...props }
-						/>
-					</RegistryProvider>
-				);
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
-		);
-	},
+
+			return (
+				<RegistryProvider value={ subRegistry }>
+					<WrappedComponent registry={ subRegistry } { ...props } />
+				</RegistryProvider>
+			);
+		},
 	'withRegistryProvider'
 );
 
diff --git a/packages/editor/src/components/provider/with-registry-provider.js b/packages/editor/src/components/provider/with-registry-provider.js
index 32c30a9f8d6873..cebbb766ff9429 100644
--- a/packages/editor/src/components/provider/with-registry-provider.js
+++ b/packages/editor/src/components/provider/with-registry-provider.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
 
@@ -15,41 +11,46 @@ import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
  */
 import { storeConfig } from '../../store';
 
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry(
+			{
+				'core/block-editor': blockEditorStoreConfig,
+			},
+			registry
+		);
+		// Todo: The interface store should also be created per instance.
+		subRegistry.registerStore( 'core/editor', storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
+
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		withRegistry( ( props ) => {
-			const {
-				useSubRegistry = true,
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
 				registry,
-				...additionalProps
-			} = props;
-			if ( ! useSubRegistry ) {
-				return <WrappedComponent { ...additionalProps } />;
-			}
-
-			const [ subRegistry, setSubRegistry ] = useState( null );
-			useEffect( () => {
-				const newRegistry = createRegistry(
-					{
-						'core/block-editor': blockEditorStoreConfig,
-					},
-					registry
-				);
-				// Todo: The interface store should also be created per instance.
-				newRegistry.registerStore( 'core/editor', storeConfig );
-				setSubRegistry( newRegistry );
-			}, [ registry ] );
+				useSubRegistry
+			);
 
-			if ( ! subRegistry ) {
-				return null;
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
 
 			return (
 				<RegistryProvider value={ subRegistry }>
-					<WrappedComponent { ...additionalProps } />
+					<WrappedComponent registry={ subRegistry } { ...props } />
 				</RegistryProvider>
 			);
-		} ),
+		},
 	'withRegistryProvider'
 );
 

From 6e8c26100818b7db463e1536cc1fc5a8893de467 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 22 May 2024 14:32:09 +0300
Subject: [PATCH 13/28] Tooltip: Fix Ariakit tooltip store usage (#61858)

* Tooltip: Fix Ariakit tooltip store usage

* CHANGELOG

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: diegohaz <hazdiego@git.wordpress.org>
---
 packages/components/CHANGELOG.md          | 1 +
 packages/components/src/tooltip/index.tsx | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4e965c7960b8e3..73365bda8de59e 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### Internal
 
 -   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   Tooltip: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)).
 
 ## 27.6.0 (2024-05-16)
 
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 87c7506a9c5f7d..1eb0de7fed009d 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -87,10 +87,7 @@ function UnforwardedTooltip(
 	}
 	computedPlacement = computedPlacement || 'bottom';
 
-	// Removing the `Ariakit` namespace from the hook name allows ESLint to
-	// properly identify the hook, and apply the correct linting rules.
-	const useAriakitTooltipStore = Ariakit.useTooltipStore;
-	const tooltipStore = useAriakitTooltipStore( {
+	const tooltipStore = Ariakit.useTooltipStore( {
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );

From 66d35c10b9d78a47dfbd8583622527998eaa2972 Mon Sep 17 00:00:00 2001
From: Madhu Dollu <madhusudhan.dollu@gmail.com>
Date: Wed, 22 May 2024 14:34:44 +0200
Subject: [PATCH 14/28] Shadow: add unit tests for shadow support (#60063)

* add unit tests for shadow support

* refactor tests

* Update method doc block

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* add core pr reference

---------

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: vcanales <vcanales@git.wordpress.org>
---
 backport-changelog/6279.md             |   3 +
 phpunit/block-supports/shadow-test.php | 112 +++++++++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 backport-changelog/6279.md
 create mode 100644 phpunit/block-supports/shadow-test.php

diff --git a/backport-changelog/6279.md b/backport-changelog/6279.md
new file mode 100644
index 00000000000000..f372c33d339b8a
--- /dev/null
+++ b/backport-changelog/6279.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6279
+
+* https://github.com/WordPress/gutenberg/pull/60063
diff --git a/phpunit/block-supports/shadow-test.php b/phpunit/block-supports/shadow-test.php
new file mode 100644
index 00000000000000..c2fc0defe8199c
--- /dev/null
+++ b/phpunit/block-supports/shadow-test.php
@@ -0,0 +1,112 @@
+<?php
+
+/**
+ * Test the shadow block supports.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Shadow_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $test_block_name;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+	}
+
+	public function tear_down() {
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	/**
+	 * Registers a new block for testing shadow support.
+	 *
+	 * @param string $block_name Name for the test block.
+	 * @param array  $supports   Array defining block support configuration.
+	 *
+	 * @return WP_Block_Type The block type for the newly registered test block.
+	 */
+	private function register_shadow_block_with_support( $block_name, $supports = array() ) {
+		$this->test_block_name = $block_name;
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => $supports,
+			)
+		);
+		$registry = WP_Block_Type_Registry::get_instance();
+
+		return $registry->get_registered( $this->test_block_name );
+	}
+
+	/**
+	 * Tests the generation of shadow block support styles.
+	 *
+	 * @dataProvider data_generate_shadow_fixtures
+	 *
+	 * @param boolean|array $support Shadow block support configuration.
+	 * @param string        $value   Shadow style value for style attribute object.
+	 * @param array         $expected       Expected shadow block support styles.
+	 */
+	public function test_gutenberg_apply_shadow_support( $support, $value, $expected ) {
+		$block_type  = self::register_shadow_block_with_support(
+			'test/shadow-block',
+			array( 'shadow' => $support )
+		);
+		$block_attrs = array( 'style' => array( 'shadow' => $value ) );
+		$actual      = gutenberg_apply_shadow_support( $block_type, $block_attrs );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_generate_shadow_fixtures() {
+		return array(
+			'with no styles'               => array(
+				'support'  => true,
+				'value'    => '',
+				'expected' => array(),
+			),
+			'without support'              => array(
+				'support'  => false,
+				'value'    => '1px 1px 1px #000',
+				'expected' => array(),
+			),
+			'with single shadow'           => array(
+				'support'  => true,
+				'value'    => '1px 1px 1px #000',
+				'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000;' ),
+			),
+			'with comma separated shadows' => array(
+				'support'  => true,
+				'value'    => '1px 1px 1px #000, 2px 2px 2px #fff',
+				'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000, 2px 2px 2px #fff;' ),
+			),
+			'with preset shadow'           => array(
+				'support'  => true,
+				'value'    => 'var:preset|shadow|natural',
+				'expected' => array( 'style' => 'box-shadow:var(--wp--preset--shadow--natural);' ),
+			),
+			'with serialization skipped'   => array(
+				'support'  => array( '__experimentalSkipSerialization' => true ),
+				'value'    => '1px 1px 1px #000',
+				'expected' => array(),
+			),
+		);
+	}
+}

From f2d1937c20af4bf123aee1984fc79560194b9a6f Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 22 May 2024 08:43:46 -0400
Subject: [PATCH 15/28] Make color variations fit in a bit better visually
 (#61617)

* Use smaller placement

* remove border radius

* fix scrollbars

* add the border-radius to the previews

---------

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
---
 .../edit-site/src/components/global-styles/style.scss    | 1 -
 .../src/components/global-styles/variations/style.scss   | 9 ++++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 04450edea29666..6afb0e787cf56a 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -7,7 +7,6 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
 	display: block;
 	width: 100%;
diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
index e68726ebae4ca0..336e8ceac7ca6d 100644
--- a/packages/edit-site/src/components/global-styles/variations/style.scss
+++ b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -8,15 +8,18 @@
 		border-radius: $radius-block-ui;
 		outline: $border-width solid rgba($black, 0.15);
 		outline-offset: -$border-width;
+		overflow: hidden;
 		position: relative;
 		// Add the same transition that block style variations and other buttons have.
 		transition: outline 0.1s linear;
 		@include reduce-motion("transition");
 
 		&.is-pill {
-			height: $button-size-next-default-40px;
-			border-radius: 100px;
-			overflow: hidden;
+			height: $button-size-compact;
+
+			.block-editor-iframe__scale-container {
+				overflow: hidden;
+			}
 		}
 	}
 

From 8075cb194d11627b44b805d8e6ceaa3797b89cc2 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 14:20:17 +0100
Subject: [PATCH 16/28] Global Styles: Filter out color and typography
 variations (#61327)

Update packages/edit-site/src/components/global-styles/style-variations-container.js

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

Update packages/edit-site/src/components/global-styles/style-variations-container.js

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

update function name

remove variations which are empty once the property has been filtered out

move to a reduce function

remove duplicate values

Global Styles: Don't filter out variations where the heading and body fonts are the sane

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
---
 .../src/components/global-styles/hooks.js     | 47 ++++---------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 50032786e39942..5bc823a81dbf7a 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -9,22 +9,16 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -142,38 +136,17 @@ export function useTypographyVariations() {
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
 		} );
-
-	const { base } = useContext( GlobalStylesContext );
 	/*
-	 * Filter duplicate variations based on whether the variaitons
-	 * have different heading and body font families.
+	 * Filter out variations with no settings or styles.
 	 */
 	return typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-
-					// Always preseve the default variation.
-					if ( variation?.title === 'Default' ) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					} else if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-					return acc;
-				}, {} )
-		  )
+		? typographyVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
 		: [];
 }

From a53dee6cdc6d0991650228132b89607144d6056f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 22 May 2024 14:43:06 +0100
Subject: [PATCH 17/28] Editor: Unify the content area of the post and site
 editors (#61860)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../edit-post/src/components/layout/index.js  | 10 ++----
 .../edit-site/src/components/editor/index.js  | 32 ++++++++-----------
 .../editor/src/components/provider/index.js   |  2 ++
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 0518f5507d9841..25e74f24577d0e 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -12,7 +12,6 @@ import {
 	UnsavedChangesWarning,
 	EditorNotices,
 	EditorKeyboardShortcutsRegister,
-	EditorKeyboardShortcuts,
 	EditorSnackbars,
 	store as editorStore,
 	privateApis as editorPrivateApis,
@@ -24,7 +23,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -335,7 +333,6 @@ function Layout( { initialPost } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
-			<EditorKeyboardShortcuts />
 			<BlockKeyboardShortcuts />
 
 			<InterfaceSkeleton
@@ -367,7 +364,9 @@ function Layout( { initialPost } ) {
 						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
 							<TextEditor />
 						) }
-						{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
+						{ ! isLargeViewport && mode === 'visual' && (
+							<BlockToolbar hideDragHandle />
+						) }
 						{ isRichEditingEnabled && mode === 'visual' && (
 							<VisualEditor styles={ styles } />
 						) }
@@ -377,9 +376,6 @@ function Layout( { initialPost } ) {
 								<MetaBoxes location="advanced" />
 							</div>
 						) }
-						{ isMobileViewport && sidebarIsOpened && (
-							<ScrollLock />
-						) }
 					</>
 				}
 				footer={
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index c521ea3d8e5c35..2ba3a94f6e704d 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -25,7 +25,6 @@ import {
 } from '@wordpress/block-editor';
 import {
 	EditorKeyboardShortcutsRegister,
-	EditorKeyboardShortcuts,
 	EditorNotices,
 	privateApis as editorPrivateApis,
 	store as editorStore,
@@ -265,6 +264,15 @@ export default function Editor( { isLoading, onClick } ) {
 
 	return (
 		<>
+			<GlobalStylesRenderer />
+			<EditorKeyboardShortcutsRegister />
+			{ isEditMode && <BlockKeyboardShortcuts /> }
+			{ showVisualEditor && (
+				<>
+					<TemplatePartConverter />
+					<PatternModal />
+				</>
+			) }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (
@@ -342,27 +350,15 @@ export default function Editor( { isLoading, onClick } ) {
 						}
 						content={
 							<>
-								<GlobalStylesRenderer />
 								{ isEditMode && <EditorNotices /> }
-								{ showVisualEditor && (
-									<>
-										<TemplatePartConverter />
-										{ ! isLargeViewport && (
-											<BlockToolbar hideDragHandle />
-										) }
-										<SiteEditorCanvas onClick={ onClick } />
-										<PatternModal />
-									</>
-								) }
 								{ editorMode === 'text' && isEditMode && (
 									<CodeEditor />
 								) }
-								{ isEditMode && (
-									<>
-										<EditorKeyboardShortcutsRegister />
-										<EditorKeyboardShortcuts />
-										<BlockKeyboardShortcuts />
-									</>
+								{ ! isLargeViewport && showVisualEditor && (
+									<BlockToolbar hideDragHandle />
+								) }
+								{ showVisualEditor && (
+									<SiteEditorCanvas onClick={ onClick } />
 								) }
 							</>
 						}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 93dbb00d8216cc..9830a20f40fad9 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -30,6 +30,7 @@ import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
 import StartTemplateOptions from '../start-template-options';
+import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -273,6 +274,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									{ type === 'wp_navigation' && (
 										<NavigationBlockEditingMode />
 									) }
+									<EditorKeyboardShortcuts />
 									<KeyboardShortcutHelpModal />
 									<BlockRemovalWarnings />
 									<StartPageOptions />

From 6108134aae75d1bd4826256490c609cb29044cd8 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Wed, 22 May 2024 16:49:07 +0300
Subject: [PATCH 18/28] Consolidate and fix `rename` post action (#61857)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../src/components/post-actions/actions.js    | 148 +++++-------------
 1 file changed, 36 insertions(+), 112 deletions(-)

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 28bce1f1becc6e..f30df56e67e2e8 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -498,7 +498,37 @@ const renamePostAction = {
 	id: 'rename-post',
 	label: __( 'Rename' ),
 	isEligible( post ) {
-		return post.status !== 'trash';
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		// Templates, template parts and patterns have special checks for renaming.
+		if (
+			! [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+				...Object.values( PATTERN_TYPES ),
+			].includes( post.type )
+		) {
+			return true;
+		}
+		// In the case of templates, we can only remove custom templates.
+		if ( post.type === TEMPLATE_POST_TYPE ) {
+			return isTemplateRemovable( post ) && post.is_custom;
+		}
+		// Make necessary checks for template parts and patterns.
+		const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE;
+		const isUserPattern = post.type === PATTERN_TYPES.user;
+		// In patterns list page we map the templates parts to a different object
+		// than the one returned from the endpoint. This is why we need to check for
+		// two props whether is custom or has a theme file.
+		const isCustomPattern =
+			isUserPattern ||
+			( isTemplatePart &&
+				( post.isCustom || post.source === TEMPLATE_ORIGINS.custom ) );
+		const hasThemeFile =
+			isTemplatePart &&
+			( post.templatePart?.has_theme_file || post.has_theme_file );
+		return isCustomPattern && ! hasThemeFile;
 	},
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
@@ -908,111 +938,6 @@ const deleteTemplateAction = {
 	},
 };
 
-const renameTemplateAction = {
-	id: 'rename-template',
-	label: __( 'Rename' ),
-	isEligible: ( template ) => {
-		// We can only remove templates or template parts that can be removed.
-		// Additionally in the case of templates, we can only remove custom templates.
-		if (
-			! isTemplateRemovable( template ) ||
-			( template.type === TEMPLATE_POST_TYPE && ! template.is_custom )
-		) {
-			return false;
-		}
-		return true;
-	},
-	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
-		const template = templates[ 0 ];
-		const title = decodeEntities( template.title.rendered );
-		const [ editedTitle, setEditedTitle ] = useState( title );
-		const {
-			editEntityRecord,
-			__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-		} = useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		async function onTemplateRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord(
-					'postType',
-					template.type,
-					template.id,
-					{
-						title: editedTitle,
-					}
-				);
-				// Update state before saving rerenders the list.
-				setEditedTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveSpecifiedEntityEdits(
-					'postType',
-					template.type,
-					template.id,
-					[ 'title' ], // Only save title to avoid persisting other edits.
-					{
-						throwOnError: true,
-					}
-				);
-				createSuccessNotice(
-					template.type === TEMPLATE_POST_TYPE
-						? __( 'Template renamed.' )
-						: __( 'Template part renamed.' ),
-					{
-						type: 'snackbar',
-					}
-				);
-				onActionPerformed?.( templates );
-			} catch ( error ) {
-				const fallbackErrorMessage =
-					template.type === TEMPLATE_POST_TYPE
-						? __( 'An error occurred while renaming the template.' )
-						: __(
-								'An error occurred while renaming the template part.'
-						  );
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: fallbackErrorMessage;
-
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		}
-		return (
-			<form onSubmit={ onTemplateRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ editedTitle }
-						onChange={ setEditedTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							variant="tertiary"
-							onClick={ closeModal }
-							__next40pxDefaultSize
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							__next40pxDefaultSize
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		);
-	},
-};
-
 const canDeleteOrReset = ( item ) => {
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const isUserPattern = item.type === PATTERN_TYPES.user;
@@ -1196,13 +1121,12 @@ export function usePostActions( postType, onActionPerformed ) {
 				  ! isPattern &&
 				  duplicatePostAction
 				: false,
-			! isTemplateOrTemplatePart && renamePostAction,
-			isTemplateOrTemplatePart && renameTemplateAction,
+			renamePostAction,
 			isPattern && exportPatternAsJSONAction,
-			isTemplateOrTemplatePart && resetTemplateAction,
-			! isTemplateOrTemplatePart && restorePostAction,
-			isTemplateOrTemplatePart && deleteTemplateAction,
-			! isTemplateOrTemplatePart && permanentlyDeletePostAction,
+			isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction,
+			isTemplateOrTemplatePart
+				? deleteTemplateAction
+				: permanentlyDeletePostAction,
 			isPattern && deletePatternAction,
 			! isTemplateOrTemplatePart && trashPostAction,
 		].filter( Boolean );

From 528edb0e86e9cd7c20eb74f2219f3fae45e11ecd Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 22 May 2024 19:01:18 +0400
Subject: [PATCH 19/28] Post Actions: Hide the trash action for auto-drafts
 (#61865)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/editor/src/components/post-actions/actions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index f30df56e67e2e8..926d9b92fe5d13 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -49,8 +49,8 @@ const trashPostAction = {
 	label: __( 'Move to Trash' ),
 	isPrimary: true,
 	icon: trash,
-	isEligible( { status } ) {
-		return status !== 'trash';
+	isEligible( item ) {
+		return ! [ 'auto-draft', 'trash' ].includes( item.status );
 	},
 	supportsBulk: true,
 	hideModalHeader: true,

From 51775a181070a3c45c10138741e1af2f394431a6 Mon Sep 17 00:00:00 2001
From: Karthik Thayyil <30643833+kt-12@users.noreply.github.com>
Date: Wed, 22 May 2024 16:29:26 +0100
Subject: [PATCH 20/28] Remove additional call to
 `WP_Theme_JSON_Gutenberg::__construct` (#61262)

---
 lib/class-wp-theme-json-data-gutenberg.php     | 11 +++++++++++
 lib/class-wp-theme-json-resolver-gutenberg.php | 17 +++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/lib/class-wp-theme-json-data-gutenberg.php b/lib/class-wp-theme-json-data-gutenberg.php
index c564016b1a7119..4ff7775f4b559c 100644
--- a/lib/class-wp-theme-json-data-gutenberg.php
+++ b/lib/class-wp-theme-json-data-gutenberg.php
@@ -68,4 +68,15 @@ public function update_with( $new_data ) {
 	public function get_data() {
 		return $this->theme_json->get_raw_data();
 	}
+
+	/**
+	 * Return theme JSON object.
+	 *
+	 * @since 18.3.0
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public function get_theme_json() {
+		return $this->theme_json;
+	}
 }
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index 5aaa2ea7e3eac7..0d6aa7bd73fd3a 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -173,8 +173,7 @@ public static function get_core_data() {
 		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 		 */
 		$theme_json   = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) );
-		$config       = $theme_json->get_data();
-		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
+		static::$core = $theme_json->get_theme_json();
 
 		return static::$core;
 	}
@@ -254,9 +253,8 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 			 *
 			 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 			 */
-			$theme_json      = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
-			$theme_json_data = $theme_json->get_data();
-			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
+			$theme_json    = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
+			static::$theme = $theme_json->get_theme_json();
 
 			if ( $wp_theme->parent() ) {
 				// Get parent theme.json.
@@ -398,10 +396,9 @@ public static function get_block_data() {
 		 *
 		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 		 */
-		$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
-		$config     = $theme_json->get_data();
+		$theme_json     = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
+		static::$blocks = $theme_json->get_theme_json();
 
-		static::$blocks = new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
 		return static::$blocks;
 	}
 
@@ -533,8 +530,8 @@ public static function get_user_data() {
 				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 				 */
 				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-				$config     = $theme_json->get_data();
-				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+
+				return $theme_json->get_theme_json();
 			}
 
 			// Very important to verify that the flag isGlobalStylesUserThemeJSON is true.

From ef1d966a8a4737a358153223555fb6a42108ce94 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 16:50:32 +0100
Subject: [PATCH 21/28] Inserter: Only always show the inserter when the zoom
 out experiment is on (#61856)

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
---
 .../src/components/inserter-sidebar/index.js  | 71 ++++++++++++-------
 .../editor/various/inserting-blocks.spec.js   |  2 +-
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index cd45d101f187a3..25927c57650f41 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -6,7 +6,10 @@ import {
 	__experimentalLibrary as Library,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -52,6 +55,10 @@ export default function InserterSidebar( {
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: true,
+	} );
 	const libraryRef = useRef();
 
 	// When closing the inserter, focus should return to the toggle button.
@@ -70,30 +77,46 @@ export default function InserterSidebar( {
 		[ closeInserterSidebar ]
 	);
 
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
-			<div className="editor-inserter-sidebar__content">
-				<Library
-					showMostUsedBlocks={ showMostUsedBlocks }
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobileViewport }
-					rootClientId={
-						blockSectionRootClientId ?? insertionPoint.rootClientId
-					}
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalInitialTab={ insertionPoint.tab }
-					__experimentalInitialCategory={ insertionPoint.category }
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					__experimentalOnPatternCategorySelection={
-						isRightSidebarOpen ? closeGeneralSidebar : undefined
-					}
-					ref={ libraryRef }
-					onClose={ closeInserterSidebar }
-				/>
+	const inserterContents = (
+		<div className="editor-inserter-sidebar__content">
+			<Library
+				showMostUsedBlocks={ showMostUsedBlocks }
+				showInserterHelpPanel
+				shouldFocusBlock={ isMobileViewport }
+				rootClientId={
+					blockSectionRootClientId ?? insertionPoint.rootClientId
+				}
+				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				__experimentalInitialTab={ insertionPoint.tab }
+				__experimentalInitialCategory={ insertionPoint.category }
+				__experimentalFilterValue={ insertionPoint.filterValue }
+				__experimentalOnPatternCategorySelection={
+					isRightSidebarOpen ? closeGeneralSidebar : undefined
+				}
+				ref={ libraryRef }
+				onClose={ closeInserterSidebar }
+			/>
+		</div>
+	);
+
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div
+				onKeyDown={ closeOnEscape }
+				className="editor-inserter-sidebar"
+			>
+				{ inserterContents }
 			</div>
+		);
+	}
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="editor-inserter-sidebar"
+		>
+			{ inserterContents }
 		</div>
 	);
 }
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index 1a443152800dec..3ef5a8f65045f1 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -636,7 +636,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			page.getByRole( 'region', {
 				name: 'Block Library',
 			} )
-		).toBeVisible();
+		).toBeHidden();
 	} );
 
 	test( 'shows block preview when hovering over block in inserter', async ( {

From aecf8636ac2c6f0471813ef0820ed99549c1e054 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 22 May 2024 11:53:02 -0400
Subject: [PATCH 22/28] Fix positioning for panel close icon to be consistent
 across panels (#61832)

---
 packages/editor/src/components/inserter-sidebar/style.scss | 2 +-
 packages/editor/src/components/sidebar/style.scss          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index 739e000abafe2c..c33e6eb7751c90 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -8,7 +8,7 @@
 
 .block-editor-inserter-sidebar__header {
 	border-bottom: $border-width solid $gray-300;
-	padding-right: $grid-unit-10;
+	padding-right: $grid-unit-15;
 	display: flex;
 	justify-content: space-between;
 
diff --git a/packages/editor/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss
index 6a4b02094a0f77..9853088dde1be7 100644
--- a/packages/editor/src/components/sidebar/style.scss
+++ b/packages/editor/src/components/sidebar/style.scss
@@ -1,6 +1,6 @@
 .components-panel__header.editor-sidebar__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-20;
+	padding-right: $grid-unit-15;
 
 	.components-button.has-icon {
 		padding: 0;

From 7e04961095abbfab2be649b029e5d4fc701e4d1b Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 17:00:03 +0100
Subject: [PATCH 23/28] Enable the test before we run the E2E test

---
 test/e2e/specs/site-editor/zoom-out.spec.js | 22 ++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 2cd0db8b1ebe22..3fed2b49f8e4a6 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -8,11 +8,31 @@ test.describe( 'Zoom Out', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+
+		const zoomedOutCheckbox = page.getByLabel(
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
+		);
+
+		await zoomedOutCheckbox.setChecked( true );
+		await expect( zoomedOutCheckbox ).toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+
 		await admin.visitSiteEditor();
 		await editor.canvas.locator( 'body' ).click();
 	} );
 
+	test.afterEach( async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+		const zoomedOutCheckbox = page.getByLabel(
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
+		);
+		await zoomedOutCheckbox.setChecked( false );
+		await expect( zoomedOutCheckbox ).not.toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+	} );
+
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );

From c43627a5b057fdc652e864cf0b373b3818cd2c44 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 17:02:03 +0100
Subject: [PATCH 24/28] Revert "Enable the test before we run the E2E test"

This reverts commit 7e04961095abbfab2be649b029e5d4fc701e4d1b.
---
 test/e2e/specs/site-editor/zoom-out.spec.js | 22 +--------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 3fed2b49f8e4a6..2cd0db8b1ebe22 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -8,31 +8,11 @@ test.describe( 'Zoom Out', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, editor, page } ) => {
-		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
-
-		const zoomedOutCheckbox = page.getByLabel(
-			'Enable zoomed out view when selecting a pattern category in the main inserter.'
-		);
-
-		await zoomedOutCheckbox.setChecked( true );
-		await expect( zoomedOutCheckbox ).toBeChecked();
-		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
-
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor();
 		await editor.canvas.locator( 'body' ).click();
 	} );
 
-	test.afterEach( async ( { admin, page } ) => {
-		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
-		const zoomedOutCheckbox = page.getByLabel(
-			'Enable zoomed out view when selecting a pattern category in the main inserter.'
-		);
-		await zoomedOutCheckbox.setChecked( false );
-		await expect( zoomedOutCheckbox ).not.toBeChecked();
-		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
-	} );
-
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );

From 9722b824b7a0d1b6ba6361f2acef7d3c0cf4a87e Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 17:47:27 +0100
Subject: [PATCH 25/28] Zoom Out: Hide inserters behind the experiment flag
 (#61866)

* Zoom Out: Hide inserters behind the experiment flag

* Enable the test before we run the E2E test

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
---
 .../src/components/block-tools/index.js       | 11 +++++-----
 test/e2e/specs/site-editor/zoom-out.spec.js   | 22 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index dba0adbbd8325f..ad744a81cca623 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -231,11 +231,12 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
-					<ZoomOutModeInserters
-						__unstableContentRef={ __unstableContentRef }
-					/>
-				) }
+				{ window.__experimentalEnableZoomedOutPatternsTab &&
+					isZoomOutMode && (
+						<ZoomOutModeInserters
+							__unstableContentRef={ __unstableContentRef }
+						/>
+					) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);
diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 2cd0db8b1ebe22..3fed2b49f8e4a6 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -8,11 +8,31 @@ test.describe( 'Zoom Out', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+
+		const zoomedOutCheckbox = page.getByLabel(
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
+		);
+
+		await zoomedOutCheckbox.setChecked( true );
+		await expect( zoomedOutCheckbox ).toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+
 		await admin.visitSiteEditor();
 		await editor.canvas.locator( 'body' ).click();
 	} );
 
+	test.afterEach( async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+		const zoomedOutCheckbox = page.getByLabel(
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
+		);
+		await zoomedOutCheckbox.setChecked( false );
+		await expect( zoomedOutCheckbox ).not.toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+	} );
+
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );

From 22622bf2b35bfff0ccc95e8963e3ab749edfd985 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Wed, 22 May 2024 19:18:36 +0200
Subject: [PATCH 26/28] Try: Add CSS Custom Properties to CSS types (#61872)

* Augment module.

* Add changelog entry.

Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md                   |  1 +
 .../src/color-palette/stories/index.story.tsx      | 13 +++++--------
 packages/components/src/css.d.ts                   |  9 +++++++++
 packages/components/src/progress-bar/index.tsx     | 14 ++++++--------
 4 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 packages/components/src/css.d.ts

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 73365bda8de59e..09ff36f34def5e 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Internal
 
+-   Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)).
 -   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
 -   Tooltip: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)).
 
diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx
index b49de51c1d16e3..727e840ff99358 100644
--- a/packages/components/src/color-palette/stories/index.story.tsx
+++ b/packages/components/src/color-palette/stories/index.story.tsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 
 /**
@@ -92,13 +91,11 @@ MultipleOrigins.args = {
 export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
-			style={
-				{
-					'--red': '#f00',
-					'--yellow': '#ff0',
-					'--blue': '#00f',
-				} as CSSProperties
-			}
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
 		>
 			<Template { ...args } />
 		</div>
diff --git a/packages/components/src/css.d.ts b/packages/components/src/css.d.ts
new file mode 100644
index 00000000000000..598eb388f6d352
--- /dev/null
+++ b/packages/components/src/css.d.ts
@@ -0,0 +1,9 @@
+import type * as CSS from 'csstype';
+
+// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587
+declare module 'csstype' {
+	interface Properties {
+		// Allow any CSS Custom Properties
+		[ index: `--${ string }` ]: any;
+	}
+}
diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx
index ed13c036e99162..d670d558ebd837 100644
--- a/packages/components/src/progress-bar/index.tsx
+++ b/packages/components/src/progress-bar/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -26,13 +26,11 @@ function UnforwardedProgressBar(
 	return (
 		<ProgressBarStyled.Track className={ className }>
 			<ProgressBarStyled.Indicator
-				style={
-					{
-						'--indicator-width': ! isIndeterminate
-							? `${ value }%`
-							: undefined,
-					} as CSSProperties
-				}
+				style={ {
+					'--indicator-width': ! isIndeterminate
+						? `${ value }%`
+						: undefined,
+				} }
 				isIndeterminate={ isIndeterminate }
 			/>
 			<ProgressBarStyled.ProgressElement

From 6fbc6c7a3a50046db56fc88c145a07edf89986ba Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 22 May 2024 19:57:57 +0100
Subject: [PATCH 27/28] Commands: Unify the editor context between post and
 site editors (#61862)

---
 .../edit-post/src/components/layout/index.js  |  2 +-
 .../edit-site/src/components/editor/index.js  |  8 +--
 .../edit-site/src/components/layout/index.js  |  2 +-
 .../src/components/pattern-modal/duplicate.js | 37 -------------
 .../src/components/pattern-modal/index.js     | 19 -------
 .../src/components/pattern-modal/rename.js    | 30 -----------
 .../hooks/commands/use-edit-mode-commands.js  | 47 +----------------
 .../editor/src/components/commands/index.js   | 52 ++++++++++++++++++-
 .../pattern-duplicate-modal/index.js          | 50 ++++++++++++++++++
 .../components/pattern-rename-modal/index.js  | 44 ++++++++++++++++
 .../editor/src/components/provider/index.js   |  4 ++
 11 files changed, 154 insertions(+), 141 deletions(-)
 delete mode 100644 packages/edit-site/src/components/pattern-modal/duplicate.js
 delete mode 100644 packages/edit-site/src/components/pattern-modal/index.js
 delete mode 100644 packages/edit-site/src/components/pattern-modal/rename.js
 create mode 100644 packages/editor/src/components/pattern-duplicate-modal/index.js
 create mode 100644 packages/editor/src/components/pattern-rename-modal/index.js

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 25e74f24577d0e..6db95b6694a686 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -204,7 +204,7 @@ function Layout( { initialPost } ) {
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
 		? 'block-selection-edit'
-		: 'post-editor-edit';
+		: 'entity-edit';
 	useCommandContext( commandContext );
 
 	const styles = useEditorStyles();
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 2ba3a94f6e704d..c094f1e6282567 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -48,7 +48,6 @@ import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
@@ -267,12 +266,7 @@ export default function Editor( { isLoading, onClick } ) {
 			<GlobalStylesRenderer />
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
-			{ showVisualEditor && (
-				<>
-					<TemplatePartConverter />
-					<PatternModal />
-				</>
-			) }
+			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 83beee41642d30..6c9668c28d0cc1 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -150,7 +150,7 @@ export default function Layout() {
 	let commandContext = 'site-editor';
 
 	if ( canvasMode === 'edit' ) {
-		commandContext = 'site-editor-edit';
+		commandContext = 'entity-edit';
 	}
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js
deleted file mode 100644
index cf79dacef8d426..00000000000000
--- a/packages/edit-site/src/components/pattern-modal/duplicate.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_MODALS } from './';
-import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-
-const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function PatternDuplicateModal() {
-	const { record } = useEditedEntityRecord();
-	const { closeModal } = useDispatch( interfaceStore );
-
-	const isActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate )
-	);
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return (
-		<DuplicatePatternModal
-			onClose={ closeModal }
-			onSuccess={ () => closeModal() }
-			pattern={ record }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/pattern-modal/index.js b/packages/edit-site/src/components/pattern-modal/index.js
deleted file mode 100644
index 95d08a058b3f84..00000000000000
--- a/packages/edit-site/src/components/pattern-modal/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import PatternRenameModal from './rename';
-import PatternDuplicateModal from './duplicate';
-
-export const PATTERN_MODALS = {
-	rename: 'edit-site/pattern-rename',
-	duplicate: 'edit-site/pattern-duplicate',
-};
-
-export default function PatternModal() {
-	return (
-		<>
-			<PatternDuplicateModal />
-			<PatternRenameModal />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/pattern-modal/rename.js b/packages/edit-site/src/components/pattern-modal/rename.js
deleted file mode 100644
index 8c817172cc2099..00000000000000
--- a/packages/edit-site/src/components/pattern-modal/rename.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_MODALS } from './';
-import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-
-const { RenamePatternModal } = unlock( patternsPrivateApis );
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function PatternRenameModal() {
-	const { record: pattern } = useEditedEntityRecord();
-	const { closeModal } = useDispatch( interfaceStore );
-	const isActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERN_MODALS.rename )
-	);
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return <RenamePatternModal onClose={ closeModal } pattern={ pattern } />;
-}
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 1ca24b318a4448..f11a831e0edb04 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
@@ -4,7 +4,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	edit,
 	trash,
 	rotateLeft,
 	rotateRight,
@@ -13,7 +12,6 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	symbol,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -30,9 +28,8 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
-import { PATTERN_TYPES, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
 const { interfaceStore } = unlock( editorPrivateApis );
@@ -225,45 +222,11 @@ function useEditUICommands() {
 	};
 }
 
-function usePatternCommands() {
-	const { isLoaded, record: pattern } = useEditedEntityRecord();
-	const { openModal } = useDispatch( interfaceStore );
-
-	if ( ! isLoaded ) {
-		return { isLoading: true, commands: [] };
-	}
-
-	const commands = [];
-
-	if ( pattern?.type === PATTERN_TYPES.user ) {
-		commands.push( {
-			name: 'core/rename-pattern',
-			label: __( 'Rename pattern' ),
-			icon: edit,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.rename );
-				close();
-			},
-		} );
-		commands.push( {
-			name: 'core/duplicate-pattern',
-			label: __( 'Duplicate pattern' ),
-			icon: symbol,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.duplicate );
-				close();
-			},
-		} );
-	}
-
-	return { isLoading: false, commands };
-}
-
 export function useEditModeCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/page-content-focus',
 		hook: usePageContentFocusCommands,
-		context: 'site-editor-edit',
+		context: 'entity-edit',
 	} );
 
 	useCommandLoader( {
@@ -271,12 +234,6 @@ export function useEditModeCommands() {
 		hook: useManipulateDocumentCommands,
 	} );
 
-	useCommandLoader( {
-		name: 'core/edit-site/patterns',
-		hook: usePatternCommands,
-		context: 'site-editor-edit',
-	} );
-
 	useCommandLoader( {
 		name: 'core/edit-site/edit-ui',
 		hook: useEditUICommands,
diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js
index c79dc8cd1daa43..bcafbd4691add0 100644
--- a/packages/editor/src/components/commands/index.js
+++ b/packages/editor/src/components/commands/index.js
@@ -3,7 +3,14 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { code, listView, external, keyboard } from '@wordpress/icons';
+import {
+	code,
+	edit,
+	listView,
+	external,
+	keyboard,
+	symbol,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
@@ -15,6 +22,9 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+import { modalName as patternRenameModalName } from '../pattern-rename-modal';
+import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
 
 function useEditorCommandLoader() {
 	const {
@@ -221,9 +231,49 @@ function useEditorCommandLoader() {
 	};
 }
 
+function useEditedEntityContextualCommands() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+	const { openModal } = useDispatch( interfaceStore );
+	const commands = [];
+
+	if ( postType === PATTERN_POST_TYPE ) {
+		commands.push( {
+			name: 'core/rename-pattern',
+			label: __( 'Rename pattern' ),
+			icon: edit,
+			callback: ( { close } ) => {
+				openModal( patternRenameModalName );
+				close();
+			},
+		} );
+		commands.push( {
+			name: 'core/duplicate-pattern',
+			label: __( 'Duplicate pattern' ),
+			icon: symbol,
+			callback: ( { close } ) => {
+				openModal( patternDuplicateModalName );
+				close();
+			},
+		} );
+	}
+
+	return { isLoading: false, commands };
+}
+
 export default function useCommands() {
 	useCommandLoader( {
 		name: 'core/editor/edit-ui',
 		hook: useEditorCommandLoader,
 	} );
+
+	useCommandLoader( {
+		name: 'core/editor/contextual-commands',
+		hook: useEditedEntityContextualCommands,
+		context: 'entity-edit',
+	} );
 }
diff --git a/packages/editor/src/components/pattern-duplicate-modal/index.js b/packages/editor/src/components/pattern-duplicate-modal/index.js
new file mode 100644
index 00000000000000..2e5593536d1834
--- /dev/null
+++ b/packages/editor/src/components/pattern-duplicate-modal/index.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-duplicate';
+
+export default function PatternDuplicateModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ () => closeModal() }
+			pattern={ record }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/pattern-rename-modal/index.js b/packages/editor/src/components/pattern-rename-modal/index.js
new file mode 100644
index 00000000000000..ea9a46e977b240
--- /dev/null
+++ b/packages/editor/src/components/pattern-rename-modal/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { RenamePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-rename';
+
+export default function PatternRenameModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return <RenamePatternModal onClose={ closeModal } pattern={ record } />;
+}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 9830a20f40fad9..56c86968f0274f 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -31,6 +31,8 @@ import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
 import StartTemplateOptions from '../start-template-options';
 import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
+import PatternRenameModal from '../pattern-rename-modal';
+import PatternDuplicateModal from '../pattern-duplicate-modal';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -279,6 +281,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									<BlockRemovalWarnings />
 									<StartPageOptions />
 									<StartTemplateOptions />
+									<PatternRenameModal />
+									<PatternDuplicateModal />
 								</>
 							) }
 						</BlockEditorProviderComponent>

From 5ee24454f2622135633520a7231fb7cbb767ed75 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 21 May 2024 15:46:58 -0400
Subject: [PATCH 28/28] use shadows instead of borders

---
 .../src/components/interface-skeleton/style.scss         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index a0e56658355ac8..9d8c40aaeedb67 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -125,24 +125,27 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__sidebar {
+	border-top: $border-width solid $gray-200;
 	overflow: hidden;
 
 	@include break-medium() {
-		border-left: $border-width solid $gray-200;
+		box-shadow: -$border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	}
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	border-top: $border-width solid $gray-200;
 	right: 0;
+
 	@include break-medium() {
-		border-right: $border-width solid $gray-200;
+		box-shadow: $border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	}
 }
 
 .interface-interface-skeleton__header {
 	flex-shrink: 0;
 	height: auto;  // Keep the height flexible.
-	border-bottom: $border-width solid $gray-200;
+	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	z-index: z-index(".interface-interface-skeleton__header");
 	color: $gray-900;
 }