prep build 12/3

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,3 +20,9 @@ https://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->
 <!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->
 
 ## Screenshots or screencast <!-- if applicable -->
+
+<!-- If you would like to upload screenshots, feel free to use the table below when it is useful to show the difference between before and after the change. -->
+
+|Before|After|
+|-|-|
+|<!-- Before screenshot here -->|<!-- After screenshot here -->|

backport-changelog/6.8/7687.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7687
 
 * https://github.com/WordPress/gutenberg/pull/66488
+* https://github.com/WordPress/gutenberg/pull/67497

backport-changelog/6.8/7695.md

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

docs/reference-guides/block-api/block-transforms.md

@@ -44,7 +44,7 @@ A transformation of type `block` is an object that takes the following parameter
 -   **transform** _(function)_: a callback that receives the attributes and inner blocks of the block being processed. It should return a block object or an array of block objects.
 -   **isMatch** _(function, optional)_: a callback that receives the block attributes as the first argument and the block object as the second argument and should return a boolean. Returning `false` from this function will prevent the transform from being available and displayed as an option to the user.
 -   **isMultiBlock** _(boolean, optional)_: whether the transformation can be applied when multiple blocks are selected. If true, the `transform` function's first parameter will be an array containing each selected block's attributes, and the second an array of each selected block's inner blocks. False by default.
--   **priority** _(number, optional)_: controls the priority with which a transformation is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transformation is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from Paragraph block to Heading block**
 
@@ -97,7 +97,7 @@ A transformation of type `enter` is an object that takes the following parameter
 -   **type** _(string)_: the value `enter`.
 -   **regExp** _(RegExp)_: the Regular Expression to use as a matcher. If the value matches, the transformation will be applied.
 -   **transform** _(function)_: a callback that receives an object with a `content` field containing the value that has been entered. It should return a block object or an array of block objects.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from --- to Separator block**
 
@@ -124,7 +124,7 @@ A transformation of type `files` is an object that takes the following parameter
 -   **type** _(string)_: the value `files`.
 -   **transform** _(function)_: a callback that receives the array of files being processed. It should return a block object or an array of block objects.
 -   **isMatch** _(function, optional)_: a callback that receives the array of files being processed and should return a boolean. Returning `false` from this function will prevent the transform from being applied.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from file to File block**
 
@@ -164,7 +164,7 @@ A transformation of type `prefix` is an object that takes the following paramete
 -   **type** _(string)_: the value `prefix`.
 -   **prefix** _(string)_: the character or sequence of characters that match this transform.
 -   **transform** _(function)_: a callback that receives the content introduced. It should return a block object or an array of block objects.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from text to custom block**
 
@@ -197,7 +197,7 @@ A transformation of type `raw` is an object that takes the following parameters:
 -   **schema** _(object|function, optional)_: defines an [HTML content model](https://html.spec.whatwg.org/multipage/dom.html#content-models) used to detect and process pasted contents. See [below](#schemas-and-content-models).
 -   **selector** _(string, optional)_: a CSS selector string to determine whether the element matches according to the [element.matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) method. The transform won't be executed if the element doesn't match. This is a shorthand and alternative to using `isMatch`, which, if present, will take precedence.
 -   **isMatch** _(function, optional)_: a callback that receives the node being processed and should return a boolean. Returning `false` from this function will prevent the transform from being applied.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from URLs to Embed block**
 
@@ -273,7 +273,7 @@ A transformation of type `shortcode` is an object that takes the following param
 -   **transform** _(function, optional)_: a callback that receives the shortcode attributes as the first argument and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as the second. It should return a block object or an array of block objects. When this parameter is defined, it will take precedence over the `attributes` parameter.
 -   **attributes** _(object, optional)_: object representing where the block attributes should be sourced from, according to the attributes shape defined by the [block configuration object](./block-registration.md). If a particular attribute contains a `shortcode` key, it should be a function that receives the shortcode attributes as the first arguments and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as second, and returns a value for the attribute that will be sourced in the block's comment.
 -   **isMatch** _(function, optional)_: a callback that receives the shortcode attributes per the [Shortcode API](https://codex.wordpress.org/Shortcode_API) and should return a boolean. Returning `false` from this function will prevent the shortcode to be transformed into this block.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from shortcode to block using `transform`**
 

lib/compat/wordpress-6.8/preload.php

@@ -10,10 +10,26 @@
  */
 function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) {
 	if ( 'core/edit-site' === $context->name ) {
-		if ( ! empty( $_GET['postId'] ) ) {
-			$route_for_post = rest_get_route_for_post( $_GET['postId'] );
+		$post = null;
+		if ( isset( $_GET['postId'] ) && is_numeric( $_GET['postId'] ) ) {
+			$post = get_post( (int) $_GET['postId'] );
+		}
+		if ( isset( $_GET['p'] ) && preg_match( '/^\/page\/(\d+)$/', $_GET['p'], $matches ) ) {
+			$post = get_post( (int) $matches[1] );
+		}
+
+		if ( $post ) {
+			$route_for_post = rest_get_route_for_post( $post );
 			if ( $route_for_post ) {
 				$paths[] = add_query_arg( 'context', 'edit', $route_for_post );
+				if ( 'page' === $post->post_type ) {
+					$paths[] = add_query_arg(
+						'slug',
+						// @see https://github.com/WordPress/gutenberg/blob/489f6067c623926bce7151a76755bb68d8e22ea7/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js#L139-L140
+						'page-' . $post->post_name,
+						'/wp/v2/templates/lookup'
+					);
+				}
 			}
 		}
 
@@ -31,9 +47,9 @@ function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) {
 				'site_icon_url',
 				'site_logo',
 				'timezone_string',
-				'url',
 				'default_template_part_areas',
 				'default_template_types',
+				'url',
 			)
 		);
 		$paths[] = '/wp/v2/templates/lookup?slug=front-page';
@@ -70,6 +86,9 @@ function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) {
 		 */
 		$context = current_user_can( 'edit_theme_options' ) ? 'edit' : 'view';
 		$paths[] = "/wp/v2/global-styles/$global_styles_id?context=$context";
+
+		// Used by getBlockPatternCategories in useBlockEditorSettings.
+		$paths[] = '/wp/v2/block-patterns/categories';
 	}
 	return $paths;
 }

lib/experiments-page.php

@@ -69,7 +69,7 @@ function gutenberg_initialize_experiments_settings() {
 
 	add_settings_field(
 		'gutenberg-color-randomizer',
-		__( 'Color randomizer ', 'gutenberg' ),
+		__( 'Color randomizer', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',

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,

packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-left"
         aria-label="My custom left"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -35,7 +35,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-right"
         aria-label="My custom right"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -100,7 +100,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="left"
         aria-label="Align text left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -123,7 +123,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="center"
         aria-label="Align text center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -146,7 +146,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="right"
         aria-label="Align text right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -42,7 +42,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="None"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -64,7 +64,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -86,7 +86,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -108,7 +108,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

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

@@ -1,13 +1,12 @@
 // This creates a "slot" where the block you're dragging appeared.
 // We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
-	background-color: currentColor !important;
-	opacity: 0.05 !important;
+	opacity: 0.1 !important;
 	border-radius: $radius-small !important;
 
-	// Disabling pointer events during the drag event is necessary,
-	// lest the block might affect your drag operation.
-	pointer-events: none !important;
+	iframe {
+		pointer-events: none;
+	}
 
 	// Hide the multi selection indicator when dragging.
 	&::selection {
@@ -18,3 +17,10 @@
 		content: none !important;
 	}
 }
+
+// Images are draggable by default, so disable drag for them if not explicitly
+// set. This is done so that the block can capture the drag event instead.
+.wp-block img:not([draggable]),
+.wp-block svg:not([draggable]) {
+	pointer-events: none;
+}

packages/block-editor/src/components/block-edit/edit.js

@@ -18,6 +18,8 @@ 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,
@@ -47,6 +49,8 @@ const Edit = ( props ) => {
 
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
+const EditWithFiltersAndBindings = withBlockBindingsSupport( EditWithFilters );
+
 const EditWithGeneratedProps = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
@@ -67,8 +71,12 @@ const EditWithGeneratedProps = ( props ) => {
 		return null;
 	}
 
+	const EditComponent = canBindBlock( name )
+		? EditWithFiltersAndBindings
+		: EditWithFilters;
+
 	if ( blockType.apiVersion > 1 ) {
-		return <EditWithFilters { ...props } context={ context } />;
+		return <EditComponent { ...props } context={ context } />;
 	}
 
 	// Generate a class name for the block's editable form.
@@ -82,7 +90,7 @@ const EditWithGeneratedProps = ( props ) => {
 	);
 
 	return (
-		<EditWithFilters
+		<EditComponent
 			{ ...props }
 			context={ context }
 			className={ className }