Merge branch 'trunk' of github.com:WordPress/gutenberg into enhanceme…

…nt/inline-commenting-refactored-comments-component

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

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/base-styles/_z-index.scss

@@ -123,7 +123,7 @@ $z-layers: (
 	// Should be above the popover (dropdown)
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".patterns-menu-items__convert-modal": 1000001,
-	".editor-create-template-part-modal": 1000001,
+	".fields-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,
@@ -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-edit/edit.js

@@ -18,8 +18,6 @@ import { useContext, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockContext from '../block-context';
-import { withBlockBindingsSupport } from './with-block-bindings-support';
-import { canBindBlock } from '../../utils/block-bindings';
 
 /**
  * Default value used for blocks which do not define their own context needs,
@@ -49,8 +47,6 @@ const Edit = ( props ) => {
 
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
-const EditWithFiltersAndBindings = withBlockBindingsSupport( EditWithFilters );
-
 const EditWithGeneratedProps = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
@@ -71,12 +67,8 @@ const EditWithGeneratedProps = ( props ) => {
 		return null;
 	}
 
-	const EditComponent = canBindBlock( name )
-		? EditWithFiltersAndBindings
-		: EditWithFilters;
-
 	if ( blockType.apiVersion > 1 ) {
-		return <EditComponent { ...props } context={ context } />;
+		return <EditWithFilters { ...props } context={ context } />;
 	}
 
 	// Generate a class name for the block's editable form.
@@ -90,7 +82,7 @@ const EditWithGeneratedProps = ( props ) => {
 	);
 
 	return (
-		<EditComponent
+		<EditWithFilters
 			{ ...props }
 			context={ context }
 			className={ className }

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -29,7 +29,7 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
-import { canBindBlock } from '../../../utils/block-bindings';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**

packages/block-editor/src/components/rich-text/index.js

@@ -39,7 +39,7 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { canBindBlock } from '../../utils/block-bindings';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();

packages/block-editor/src/hooks/block-bindings.js

@@ -23,15 +23,15 @@ import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import {
+	canBindAttribute,
+	getBindableAttributes,
+} from '../hooks/use-bindings-attributes';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
 import { useBlockEditContext } from '../components/block-edit';
-import {
-	canBindAttribute,
-	getBindableAttributes,
-	useBlockBindingsUtils,
-} from '../utils/block-bindings';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
 import { store as blockEditorStore } from '../store';
 
 const { Menu } = unlock( componentsPrivateApis );

packages/block-editor/src/hooks/index.js

@@ -32,6 +32,7 @@ import './metadata';
 import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
 import './block-renaming';
+import './use-bindings-attributes';
 import './grid-visualizer';
 
 createBlockEditFilter(

packages/block-editor/src/components/block-edit/with-block-bindings-support.js → packages/block-editor/src/hooks/use-bindings-attributes.js

@@ -5,19 +5,31 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
 import { useCallback, useMemo, useContext } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import isURLLike from '../link-control/is-url-like';
-import { unlock } from '../../lock-unlock';
-import BlockContext from '../block-context';
-import {
-	BLOCK_BINDINGS_ALLOWED_BLOCKS,
-	canBindAttribute,
-} from '../../utils/block-bindings';
+import isURLLike from '../components/link-control/is-url-like';
+import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
+/**
+ * Given a binding of block attributes, returns a higher order component that
+ * overrides its `attributes` and `setAttributes` props to sync any changes needed.
+ *
+ * @return {WPHigherOrderComponent} Higher-order component.
+ */
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'id', 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
+};
 
 const DEFAULT_ATTRIBUTE = '__default';
 
@@ -55,12 +67,36 @@ function replacePatternOverrideDefaultBindings( blockName, bindings ) {
 }
 
 /**
- * Given a binding of block attributes, returns a higher order component that
- * overrides its `attributes` and `setAttributes` props to sync any changes needed.
+ * Based on the given block name,
+ * check if it is possible to bind the block.
  *
- * @return {WPHigherOrderComponent} Higher-order component.
+ * @param {string} blockName - The block name.
+ * @return {boolean} Whether it is possible to bind the block to sources.
  */
-export const withBlockBindingsSupport = createHigherOrderComponent(
+export function canBindBlock( blockName ) {
+	return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
+}
+
+/**
+ * Based on the given block name and attribute name,
+ * check if it is possible to bind the block attribute.
+ *
+ * @param {string} blockName     - The block name.
+ * @param {string} attributeName - The attribute name.
+ * @return {boolean} Whether it is possible to bind the block attribute.
+ */
+export function canBindAttribute( blockName, attributeName ) {
+	return (
+		canBindBlock( blockName ) &&
+		BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )
+	);
+}
+
+export function getBindableAttributes( blockName ) {
+	return BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+}
+
+export const withBlockBindingSupport = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const registry = useRegistry();
 		const blockContext = useContext( BlockContext );
@@ -72,9 +108,9 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
 			() =>
 				replacePatternOverrideDefaultBindings(
 					name,
-					props.attributes?.metadata?.bindings
+					props.attributes.metadata?.bindings
 				),
-			[ props.attributes?.metadata?.bindings, name ]
+			[ props.attributes.metadata?.bindings, name ]
 		);
 
 		// While this hook doesn't directly call any selectors, `useSelect` is
@@ -160,7 +196,7 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
 
 		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
 		const hasPatternOverridesDefaultBinding =
-			props.attributes?.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
 				?.source === 'core/pattern-overrides';
 
 		const _setAttributes = useCallback(
@@ -247,13 +283,40 @@ export const withBlockBindingsSupport = createHigherOrderComponent(
 		);
 
 		return (
-			<BlockEdit
-				{ ...props }
-				attributes={ { ...props.attributes, ...boundAttributes } }
-				setAttributes={ _setAttributes }
-				context={ { ...context, ...updatedContext } }
-			/>
+			<>
+				<BlockEdit
+					{ ...props }
+					attributes={ { ...props.attributes, ...boundAttributes } }
+					setAttributes={ _setAttributes }
+					context={ { ...context, ...updatedContext } }
+				/>
+			</>
 		);
 	},
 	'withBlockBindingSupport'
 );
+
+/**
+ * Filters a registered block's settings to enhance a block's `edit` component
+ * to upgrade bound attributes.
+ *
+ * @param {WPBlockSettings} settings - Registered block settings.
+ * @param {string}          name     - Block name.
+ * @return {WPBlockSettings} Filtered block settings.
+ */
+function shimAttributeSource( settings, name ) {
+	if ( ! canBindBlock( name ) ) {
+		return settings;
+	}
+
+	return {
+		...settings,
+		edit: withBlockBindingSupport( settings.edit ),
+	};
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
+	shimAttributeSource
+);

packages/block-editor/src/utils/block-bindings.js

@@ -13,43 +13,6 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-export const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
-	'core/paragraph': [ 'content' ],
-	'core/heading': [ 'content' ],
-	'core/image': [ 'id', 'url', 'title', 'alt' ],
-	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
-};
-
-/**
- * Based on the given block name,
- * check if it is possible to bind the block.
- *
- * @param {string} blockName - The block name.
- * @return {boolean} Whether it is possible to bind the block to sources.
- */
-export function canBindBlock( blockName ) {
-	return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
-}
-
-/**
- * Based on the given block name and attribute name,
- * check if it is possible to bind the block attribute.
- *
- * @param {string} blockName     - The block name.
- * @param {string} attributeName - The attribute name.
- * @return {boolean} Whether it is possible to bind the block attribute.
- */
-export function canBindAttribute( blockName, attributeName ) {
-	return (
-		canBindBlock( blockName ) &&
-		BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )
-	);
-}
-
-export function getBindableAttributes( blockName ) {
-	return BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
-}
-
 /**
  * Contains utils to update the block `bindings` metadata.
  *

packages/block-library/src/navigation-submenu/edit.js

@@ -474,6 +474,11 @@ export default function NavigationSubmenuEdit( {
 							}
 						} }
 					/>
+					{ description && (
+						<span className="wp-block-navigation-item__description">
+							{ description }
+						</span>
+					) }
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<LinkUI
 							clientId={ clientId }

packages/block-library/src/navigation-submenu/index.php

@@ -159,7 +159,16 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '>';
 		// End appending HTML attributes to anchor tag.
 
+		$html .= '<span class="wp-block-navigation-item__label">';
 		$html .= $label;
+		$html .= '</span>';
+
+		// Add description if available.
+		if ( ! empty( $attributes['description'] ) ) {
+			$html .= '<span class="wp-block-navigation-item__description">';
+			$html .= wp_kses_post( $attributes['description'] );
+			$html .= '</span>';
+		}
 
 		$html .= '</a>';
 		// End anchor tag content.
@@ -180,6 +189,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</span>';
 
+		// Add description if available.
+		if ( ! empty( $attributes['description'] ) ) {
+			$html .= '<span class="wp-block-navigation-item__description">';
+			$html .= wp_kses_post( $attributes['description'] );
+			$html .= '</span>';
+		}
+
 		$html .= '</button>';
 
 		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';

packages/block-library/src/navigation/README.md

@@ -10,4 +10,5 @@ The structural CSS for the navigation block targets generic classnames across me
 -   `.wp-block-navigation-item` is applied to every menu item.
 -   `.wp-block-navigation-item__content` is applied to the link inside a menu item.
 -   `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
+-   `.wp-block-navigation-item__description` is applied to the innermost container around the menu item description.
 -   `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).

packages/dependency-extraction-webpack-plugin/lib/index.js

@@ -387,6 +387,16 @@ class DependencyExtractionWebpackPlugin {
 				assetData.type = 'module';
 			}
 
+			if ( compilation.options?.optimization?.runtimeChunk !== false ) {
+				// Sets the script handle for the shared runtime file so WordPress registers it only once when using the asset file.
+				assetData.handle =
+					compilation.name +
+					'-' +
+					chunkJSFile
+						.replace( /\\/g, '/' )
+						.replace( jsExtensionRegExp, '' );
+			}
+
 			if ( combineAssets ) {
 				combinedAssetsData[ chunkJSFile ] = assetData;
 				continue;