Merge branch 'WordPress:trunk' into trunk

backport-changelog/6.8/7695.md

@@ -4,3 +4,4 @@ https://github.com/WordPress/wordpress-develop/pull/7695
 * https://github.com/WordPress/gutenberg/pull/67465
 * https://github.com/WordPress/gutenberg/pull/66579
 * https://github.com/WordPress/gutenberg/pull/66654
+* https://github.com/WordPress/gutenberg/pull/67518

docs/contributors/repository-management.md

@@ -165,9 +165,3 @@ If you meet this criterion of several meaningful contributions having been accep
 ## Projects
 
 We use [GitHub projects](https://github.com/WordPress/gutenberg/projects) to keep track of details that aren't immediately actionable, but that we want to keep around for future reference.
-
-Some key projects include:
-
--   [Phase 2](https://github.com/WordPress/gutenberg/projects/13) - Development tasks needed for Phase 2 of Gutenberg.
--   [Phase 2 design](https://github.com/WordPress/gutenberg/projects/21) - Tasks for design in Phase 2. Note: specific projects may have their own boards.
--   [Ideas](https://github.com/WordPress/gutenberg/projects/8) - Project containing tickets that, while closed for the time being, can be revisited in the future.

docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md

@@ -186,6 +186,8 @@ As of Gutenberg version 14.2, the following controls are available:
 -   `taxQuery` - Shows available taxonomies filters for the currently selected post type.
 -   `author` - Shows an input field to filter the query by author.
 -   `search` - Shows an input field to filter the query by keywords.
+-   `format` - Shows an input field to filter the query by array/collection of [formats](https://developer.wordpress.org/advanced-administration/wordpress/post-formats/#supported-formats).
+-   `parents` - Shows an input field to filter the query using parent(s) entity.
 
 In our case, the property would look like this:
 

docs/reference-guides/data/data-core-blocks.md

@@ -385,7 +385,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Default block name.
+-   `?string`: Default block name.
 
 ### getDefaultBlockVariation
 
@@ -464,7 +464,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Name of the block for handling non-block content.
+-   `?string`: Name of the block for handling non-block content.
 
 ### getGroupingBlockName
 
@@ -502,7 +502,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Name of the block for handling the grouping of blocks.
+-   `?string`: Name of the block for handling the grouping of blocks.
 
 ### getUnregisteredFallbackBlockName
 
@@ -540,7 +540,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Name of the block for handling unregistered blocks.
+-   `?string`: Name of the block for handling unregistered blocks.
 
 ### hasBlockSupport
 

docs/reference-guides/data/data-core-editor.md

@@ -272,7 +272,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Template ID.
+-   `?string`: Template ID.
 
 ### getDeviceType
 

docs/reference-guides/data/data-core-keyboard-shortcuts.md

@@ -239,7 +239,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Shortcut description.
+-   `?string`: Shortcut description.
 
 ### getShortcutKeyCombination
 
@@ -335,7 +335,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Shortcut representation.
+-   `?string`: Shortcut representation.
 
 <!-- END TOKEN(Autogenerated selectors|../../../packages/keyboard-shortcuts/src/store/selectors.js) -->
 

lib/compat/wordpress-6.8/preload.php

@@ -22,6 +22,7 @@ function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) {
 			$route_for_post = rest_get_route_for_post( $post );
 			if ( $route_for_post ) {
 				$paths[] = add_query_arg( 'context', 'edit', $route_for_post );
+				$paths[] = add_query_arg( 'context', 'edit', '/wp/v2/types/' . $post->post_type );
 				if ( 'page' === $post->post_type ) {
 					$paths[] = add_query_arg(
 						'slug',

packages/babel-preset-default/polyfill-exclusions.js

@@ -7,4 +7,25 @@ module.exports = [
 	// This is an IE-only feature which we don't use, and don't want to polyfill.
 	// @see https://github.com/WordPress/gutenberg/pull/49234
 	'web.immediate',
+	// Remove Set feature polyfills.
+	//
+	// The Babel/core-js integration has a severe limitation, in that any Set
+	// objects (e.g. `new Set()`) are assumed to need all instance methods, and
+	// get them all polyfilled. There is no validation as to whether those
+	// methods are actually in use.
+	//
+	// This limitation causes a number of packages to unnecessarily get a
+	// dependency on `wp-polyfill`, which in most cases gets loaded as part of
+	// the critical path and can thus have an impact on performance.
+	//
+	// There is no good solution to this, and the one we've opted for here is
+	// to disable polyfilling these features entirely. Developers will need to
+	// take care not to use them in scenarios where the code may be running in
+	// older browsers without native support for them.
+	//
+	// These need to be specified as both `es.` and `esnext.` due to the way
+	// internal dependencies are set up in Babel / core-js.
+	//
+	// @see https://github.com/WordPress/gutenberg/pull/67230
+	/^es(next)?\.set\./,
 ];

packages/base-styles/_z-index.scss

@@ -132,6 +132,7 @@ $z-layers: (
 	".editor-action-modal": 1000001,
 	".editor-post-template__swap-template-modal": 1000001,
 	".edit-site-template-panel__replace-template-modal": 1000001,
+	".fields-controls__template-modal": 1000001,
 
 	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
 	// because it uses emotion and not sass. We need it to render on top its parent popover.

packages/block-editor/src/components/block-canvas/index.js

@@ -56,7 +56,8 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				style={ { height, display: 'flex' } }
+				className="block-editor-block-canvas"
+				style={ { height } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -67,10 +68,6 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ {
-						height: '100%',
-						width: '100%',
-					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -81,6 +78,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
+			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

packages/block-editor/src/components/block-switcher/index.js

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -185,21 +186,6 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
-	<>
-		<BlockIcon
-			className="block-editor-block-switcher__toggle"
-			icon={ icon }
-			showColors
-		/>
-		{ showTitle && blockTitle && (
-			<span className="block-editor-block-switcher__toggle-text">
-				{ blockTitle }
-			</span>
-		) }
-	</>
-);
-
 export const BlockSwitcher = ( { clientIds } ) => {
 	const {
 		hasContentOnlyLocking,
@@ -272,6 +258,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		clientId: clientIds?.[ 0 ],
 		maximumLength: 35,
 	} );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
 
 	if ( invalidBlocks ) {
 		return null;
@@ -282,6 +273,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		? blockTitle
 		: __( 'Multiple blocks selected' );
 
+	const blockIndicatorText =
+		( isReusable || isTemplate ) && ! showIconLabels && blockTitle
+			? blockTitle
+			: undefined;
+
 	const hideDropdown =
 		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
@@ -295,12 +291,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockSwitcherLabel }
 					icon={
-						<BlockIndicator
+						<BlockIcon
+							className="block-editor-block-switcher__toggle"
 							icon={ icon }
-							showTitle={ isReusable || isTemplate }
-							blockTitle={ blockTitle }
+							showColors
 						/>
 					}
+					text={ blockIndicatorText }
 				/>
 			</ToolbarGroup>
 		);
@@ -329,12 +326,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={
-							<BlockIndicator
+							<BlockIcon
+								className="block-editor-block-switcher__toggle"
 								icon={ icon }
-								showTitle={ isReusable || isTemplate }
-								blockTitle={ blockTitle }
+								showColors
 							/>
 						}
+						text={ blockIndicatorText }
 						toggleProps={ {
 							description: blockSwitcherDescription,
 							...toggleProps,

packages/block-editor/src/components/block-switcher/style.scss

@@ -26,15 +26,6 @@
 	}
 }
 
-.block-editor-block-switcher__toggle-text {
-	margin-left: $grid-unit-10;
-
-	// Account for double label when show-text-buttons is set.
-	.show-icon-labels & {
-		display: none;
-	}
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
 

packages/block-editor/src/components/iframe/content.scss

@@ -10,6 +10,7 @@
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
 		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 
 		position: fixed;
 		left: 0;
@@ -18,7 +19,7 @@
 		bottom: 0;
 		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
 		// and removing the scrollbar causes the content to shift.
-		overflow-y: scroll;
+		overflow-y: $overflow-behavior;
 	}
 
 	&.is-zoomed-out {

packages/block-editor/src/components/iframe/use-scale-canvas.js

@@ -35,6 +35,21 @@ function calculateScale( {
 	);
 }
 
+/**
+ * Compute the next scrollHeight based on the transition states.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollHeight based on scale and frame value changes.
+ */
+function computeScrollHeightNext( transitionFrom, transitionTo ) {
+	const { scaleValue: prevScale, scrollHeight: prevScrollHeight } =
+		transitionFrom;
+	const { frameSize, scaleValue } = transitionTo;
+
+	return prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;
+}
+
 /**
  * Compute the next scrollTop position after scaling the iframe content.
  *
@@ -47,12 +62,12 @@ function computeScrollTopNext( transitionFrom, transitionTo ) {
 		containerHeight: prevContainerHeight,
 		frameSize: prevFrameSize,
 		scaleValue: prevScale,
-		scrollTop,
-		scrollHeight,
+		scrollTop: prevScrollTop,
 	} = transitionFrom;
-	const { containerHeight, frameSize, scaleValue } = transitionTo;
+	const { containerHeight, frameSize, scaleValue, scrollHeight } =
+		transitionTo;
 	// Step 0: Start with the current scrollTop.
-	let scrollTopNext = scrollTop;
+	let scrollTopNext = prevScrollTop;
 	// Step 1: Undo the effects of the previous scale and frame around the
 	// midpoint of the visible area.
 	scrollTopNext =
@@ -71,15 +86,12 @@ function computeScrollTopNext( transitionFrom, transitionTo ) {
 	// iframe if the top of the iframe content is visible in the container.
 	// The same edge case for the bottom is skipped because changing content
 	// makes calculating it impossible.
-	scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
+	scrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;
 
 	// This is the scrollTop value if you are scrolled to the bottom of the
 	// iframe. We can't just let the browser handle it because we need to
 	// animate the scaling.
-	const maxScrollTop =
-		scrollHeight * ( scaleValue / prevScale ) +
-		frameSize * 2 -
-		containerHeight;
+	const maxScrollTop = scrollHeight - containerHeight;
 
 	// Step 4: Clamp the scrollTopNext between the minimum and maximum
 	// possible scrollTop positions. Round the value to avoid subpixel
@@ -226,6 +238,15 @@ export function useScaleCanvas( {
 			`${ scrollTopNext }px`
 		);
 
+		// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-overflow-behavior',
+			transitionFromRef.current.scrollHeight ===
+				transitionFromRef.current.containerHeight
+				? 'auto'
+				: 'scroll'
+		);
+
 		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
 
 		return iframeDocument.documentElement.animate(
@@ -278,6 +299,9 @@ export function useScaleCanvas( {
 		iframeDocument.documentElement.style.removeProperty(
 			'--wp-block-editor-iframe-zoom-out-scroll-top-next'
 		);
+		iframeDocument.documentElement.style.removeProperty(
+			'--wp-block-editor-iframe-zoom-out-overflow-behavior'
+		);
 
 		// Update previous values.
 		transitionFromRef.current = transitionToRef.current;
@@ -409,20 +433,24 @@ export function useScaleCanvas( {
 				// the iframe at this point when we're about to animate the zoom out.
 				// The iframe scrollTop, scrollHeight, and clientHeight will all be
 				// the most accurate.
-				transitionFromRef.current.containerHeight =
-					transitionFromRef.current.containerHeight ??
-					containerHeight; // Use containerHeight, as it's the previous container height value if none was set.
 				transitionFromRef.current.scrollTop =
 					iframeDocument.documentElement.scrollTop;
 				transitionFromRef.current.scrollHeight =
 					iframeDocument.documentElement.scrollHeight;
+				// Use containerHeight, as it's the previous container height before the zoom out animation starts.
+				transitionFromRef.current.containerHeight = containerHeight;
 
 				transitionToRef.current = {
 					scaleValue,
 					frameSize,
 					containerHeight:
-						iframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container, as it will be the most up-to-date.
+						iframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
 				};
+
+				transitionToRef.current.scrollHeight = computeScrollHeightNext(
+					transitionFromRef.current,
+					transitionToRef.current
+				);
 				transitionToRef.current.scrollTop = computeScrollTopNext(
 					transitionFromRef.current,
 					transitionToRef.current