prep build 07/08

.eslintrc.js

@@ -143,9 +143,9 @@ const restrictedSyntax = [
 const restrictedSyntaxComponents = [
 	{
 		selector:
-			'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) JSXAttribute[name.name="disabled"]',
+			'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="accessibleWhenDisabled"])) JSXAttribute[name.name="disabled"]',
 		message:
-			'`disabled` used without the `__experimentalIsFocusable` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
+			'`disabled` used without the `accessibleWhenDisabled` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
 	},
 ];
 
@@ -420,6 +420,26 @@ module.exports = {
 			plugins: [ 'ssr-friendly' ],
 			extends: [ 'plugin:ssr-friendly/recommended' ],
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					// The `ariakit` and `framer-motion` APIs are meant to be consumed via
+					// the `@wordpress/components` package, hence why importing those
+					// dependencies should be allowed in the components package.
+					{
+						paths: restrictedImports.filter(
+							( { name } ) =>
+								! [
+									'@ariakit/react',
+									'framer-motion',
+								].includes( name )
+						),
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/block-editor/**' ],
 			rules: {

.github/workflows/cherry-pick-wp-release.yml

@@ -1,8 +1,13 @@
 name: Auto Cherry-Pick
 
 on:
+    push:
+        branches:
+            - trunk
+    # We also want to attempt cherry-picking when a PR is labeled after the PR
+    # is merged.
     pull_request:
-        types: [closed, labeled]
+        types: [labeled]
         branches:
             - trunk
 
@@ -14,14 +19,36 @@ concurrency:
 jobs:
     cherry-pick:
         runs-on: ubuntu-latest
-        if: github.event.pull_request.merged == true
+        # When in the context of a PR, ensure the PR is merged.
+        if: github.event.pull_request == null || github.event.pull_request.merged == true
         steps:
             - name: Determine if label should trigger cherry-pick
               id: label-check
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               with:
                   script: |
-                      const labels = context.payload.pull_request.labels.map(label => label.name);
+                      const commit_sha = context.payload.pull_request ? context.payload.pull_request.merge_commit_sha : context.sha;
+                      console.log(`Commit SHA: ${commit_sha}`);
+                      core.exportVariable('commit_sha', commit_sha);
+                      const prs = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        commit_sha,
+                      });
+                      if (prs.data.length === 0) {
+                        console.log(`No PR found for commit ${context.sha}.`);
+                        return;
+                      }
+                      const pr_number = prs.data[0].number;
+                      console.log(`PR: ${pr_number}`);
+                      core.exportVariable('pr_number', pr_number);
+
+                      const pr = await github.rest.pulls.get({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        pull_number: pr_number,
+                      });
+                      const labels = pr.data.labels.map(label => label.name);
                       console.log(`Labels: ${labels}`);
                       const regex = /^Backport to WP ([0-9]+\.[0-9]+) Beta\/RC$/;
                       let matched = false;
@@ -59,19 +86,18 @@ jobs:
               if: env.cherry_pick == 'true'
               run: |
                   TARGET_BRANCH="wp/${{ env.version }}"
-                  COMMIT_SHA=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
+                  COMMIT_SHA="${{ env.commit_sha }}"
                   echo "Target branch: $TARGET_BRANCH"
                   echo "Commit SHA: $COMMIT_SHA"
                   git checkout $TARGET_BRANCH
                   git cherry-pick $COMMIT_SHA || echo "cherry-pick-failed" > result
                   if [ -f result ] && grep -q "cherry-pick-failed" result; then
                     echo "conflict=true" >> $GITHUB_ENV
-                    echo "commit_sha=$COMMIT_SHA" >> $GITHUB_ENV
                     git cherry-pick --abort
                   else
-                    NEW_COMMIT_SHA=$(git rev-parse HEAD)
+                    CHERRY_PICK_SHA=$(git rev-parse HEAD)
                     echo "conflict=false" >> $GITHUB_ENV
-                    echo "commit_sha=$NEW_COMMIT_SHA" >> $GITHUB_ENV
+                    echo "cherry_pick_sha=$CHERRY_PICK_SHA" >> $GITHUB_ENV
                     git push origin $TARGET_BRANCH
                   fi
 
@@ -80,7 +106,7 @@ jobs:
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               with:
                   script: |
-                      const prNumber = context.issue.number;
+                      const prNumber = process.env.pr_number;
                       const version = process.env.version;
                       console.log(`prNumber: ${prNumber}`);
                       console.log(`version: ${version}`);
@@ -104,25 +130,25 @@ jobs:
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               with:
                   script: |
-                      const prNumber = context.issue.number;
-                      const commitSha = process.env.commit_sha;
+                      const prNumber = process.env.pr_number;
+                      const cherryPickSha = process.env.cherry_pick_sha;
                       const targetBranch = `wp/${process.env.version}`;
                       console.log(`prNumber: ${prNumber}`);
-                      console.log(`commitSha: ${commitSha}`);
+                      console.log(`cherryPickSha: ${cherryPickSha}`);
                       console.log(`targetBranch: ${targetBranch}`);
                       await github.rest.issues.createComment({
                         owner: context.repo.owner,
                         repo: context.repo.repo,
                         issue_number: prNumber,
-                        body: `I just cherry-picked this PR to the ${targetBranch} branch to get it included in the next release: ${commitSha}`
+                        body: `I just cherry-picked this PR to the ${targetBranch} branch to get it included in the next release: ${cherryPickSha}`
                       });
 
             - name: Comment on the PR about conflict
               if: env.cherry_pick == 'true' && env.conflict == 'true'
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               with:
                   script: |
-                      const prNumber = context.issue.number;
+                      const prNumber = process.env.pr_number;
                       const commitSha = process.env.commit_sha;
                       const targetBranch = `wp/${process.env.version}`;
                       console.log(`prNumber: ${prNumber}`);

backport-changelog/6.6/6987.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6987
+
+* https://github.com/WordPress/gutenberg/pull/63207

backport-changelog/6.6/6989.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6989
+
+* https://github.com/WordPress/gutenberg/pull/63172

backport-changelog/6.7/6836.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6836
+
+* https://github.com/WordPress/gutenberg/pull/60100

docs/how-to-guides/metabox.md

@@ -243,7 +243,7 @@ When the meta box area is saving, we display an updating overlay, to prevent use
 
 An example save url would look like:
 
-`mysite.com/wp-admin/post.php?post=1&action=edit&meta-box-loader=1`
+`example.org/wp-admin/post.php?post=1&action=edit&meta-box-loader=1`
 
 This url is automatically passed into React via a `_wpMetaBoxUrl` global variable.
 

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -206,6 +206,19 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-
 ## Styles
 
 
+### background
+
+Background styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| backgroundImage | string, object |  |
+| backgroundPosition | string, object |  |
+| backgroundRepeat | string, object |  |
+| backgroundSize | string, object |  |
+
+---
+
 ### border
 
 Border styles.

lib/block-supports/background.php

@@ -52,14 +52,14 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$background_styles                    = array();
-	$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
+	$background_styles                       = array();
+	$background_styles['backgroundImage']    = $block_attributes['style']['background']['backgroundImage'] ?? null;
+	$background_styles['backgroundSize']     = $block_attributes['style']['background']['backgroundSize'] ?? null;
+	$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
+	$background_styles['backgroundRepeat']   = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
 
 	if ( ! empty( $background_styles['backgroundImage'] ) ) {
-		$background_styles['backgroundSize']     = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
-		$background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
-		$background_styles['backgroundRepeat']   = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
-
+		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
 			$background_styles['backgroundPosition'] = 'center';

lib/block-supports/block-style-variations.php

@@ -38,6 +38,42 @@ function gutenberg_get_block_style_variation_name_from_class( $class_string ) {
 	return $matches[1] ?? null;
 }
 
+/**
+ * Recursively resolves any `ref` values within a block style variation's data.
+ *
+ * @since 6.6.0
+ *
+ * @param array $variation_data Reference to the variation data being processed.
+ * @param array $theme_json     Theme.json data to retrieve referenced values from.
+ */
+function gutenberg_resolve_block_style_variation_ref_values( &$variation_data, $theme_json ) {
+	foreach ( $variation_data as $key => &$value ) {
+		// Only need to potentially process arrays.
+		if ( is_array( $value ) ) {
+			// If ref value is set, attempt to find its matching value and update it.
+			if ( array_key_exists( 'ref', $value ) ) {
+				// Clean up any invalid ref value.
+				if ( empty( $value['ref'] ) || ! is_string( $value['ref'] ) ) {
+					unset( $variation_data[ $key ] );
+				}
+
+				$value_path = explode( '.', $value['ref'] ?? '' );
+				$ref_value  = _wp_array_get( $theme_json, $value_path );
+
+				// Only update the current value if the referenced path matched a value.
+				if ( null === $ref_value ) {
+					unset( $variation_data[ $key ] );
+				} else {
+					$value = $ref_value;
+				}
+			} else {
+				// Recursively look for ref instances.
+				gutenberg_resolve_block_style_variation_ref_values( $value, $theme_json );
+			}
+		}
+	}
+}
+
 /**
  * Render the block style variation's styles.
  *
@@ -79,6 +115,10 @@ function gutenberg_render_block_style_variation_support_styles( $parsed_block )
 		return $parsed_block;
 	}
 
+	// Recursively resolve any ref values with the appropriate value within the
+	// theme_json data.
+	gutenberg_resolve_block_style_variation_ref_values( $variation_data, $theme_json );
+
 	$variation_instance = gutenberg_create_block_style_variation_instance_name( $parsed_block, $variation );
 	$class_name         = "is-style-$variation_instance";
 	$updated_class_name = $parsed_block['attrs']['className'] . " $class_name";

lib/class-wp-theme-json-gutenberg.php

@@ -503,10 +503,10 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => 'top',
-			'backgroundPosition' => 'top',
-			'backgroundRepeat'   => 'top',
-			'backgroundSize'     => 'top',
+			'backgroundImage'    => null,
+			'backgroundPosition' => null,
+			'backgroundRepeat'   => null,
+			'backgroundSize'     => null,
 		),
 		'border'     => array(
 			'color'  => null,
@@ -3000,10 +3000,10 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
 			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-			// Nested children of the container with left and right padding that are not wide or full aligned do not get padding, unless they are direct children of an alignfull flow container.
-			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
+			// Nested children of the container with left and right padding that are not full aligned do not get padding, unless they are direct children of an alignfull flow container.
+			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }';
 			// Alignfull direct children of the containers that are targeted by the rule above do not need negative margins.
-			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
+			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }';
 		}
 
 		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';

lib/class-wp-theme-json-resolver-gutenberg.php

@@ -805,6 +805,7 @@ public static function get_style_variations( $scope = 'theme' ) {
 	 * as the value of `_link` object in REST API responses.
 	 *
 	 * @since 6.6.0
+	 * @since 6.7.0 Added support for resolving block styles.
 	 *
 	 * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance.
 	 * @return array An array of resolved paths.
@@ -818,10 +819,11 @@ public static function get_resolved_theme_uris( $theme_json ) {
 
 		$theme_json_data = $theme_json->get_raw_data();
 
-		// Top level styles.
-		$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
 		// Using the same file convention when registering web fonts. See: WP_Font_Face_Resolver:: to_theme_file_uri.
 		$placeholder = 'file:./';
+
+		// Top level styles.
+		$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
 		if (
 			isset( $background_image_url ) &&
 			is_string( $background_image_url ) &&
@@ -840,6 +842,33 @@ public static function get_resolved_theme_uris( $theme_json ) {
 				$resolved_theme_uris[] = $resolved_theme_uri;
 		}
 
+		// Block styles.
+		if ( ! empty( $theme_json_data['styles']['blocks'] ) ) {
+			foreach ( $theme_json_data['styles']['blocks'] as $block_name => $block_styles ) {
+				if ( ! isset( $block_styles['background']['backgroundImage']['url'] ) ) {
+					continue;
+				}
+				$background_image_url = $block_styles['background']['backgroundImage']['url'] ?? null;
+				if (
+					isset( $background_image_url ) &&
+					is_string( $background_image_url ) &&
+					// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
+					str_starts_with( $background_image_url, $placeholder ) ) {
+					$file_type          = wp_check_filetype( $background_image_url );
+					$src_url            = str_replace( $placeholder, '', $background_image_url );
+					$resolved_theme_uri = array(
+						'name'   => $background_image_url,
+						'href'   => sanitize_url( get_theme_file_uri( $src_url ) ),
+						'target' => "styles.blocks.{$block_name}.background.backgroundImage.url",
+					);
+					if ( isset( $file_type['type'] ) ) {
+						$resolved_theme_uri['type'] = $file_type['type'];
+					}
+					$resolved_theme_uris[] = $resolved_theme_uri;
+				}
+			}
+		}
+
 		return $resolved_theme_uris;
 	}
 

lib/experimental/posts/load.php

@@ -7,13 +7,15 @@
 
 add_action( 'admin_menu', 'gutenberg_replace_posts_dashboard' );
 
-// Default to is-fullscreen-mode to avoid jumps in the UI.
-add_filter(
-	'admin_body_class',
-	static function ( $classes ) {
-		return "$classes is-fullscreen-mode";
-	}
-);
+if ( isset( $_GET['page'] ) && 'gutenberg-posts-dashboard' === $_GET['page'] ) {
+	// Default to is-fullscreen-mode to avoid jumps in the UI.
+	add_filter(
+		'admin_body_class',
+		static function ( $classes ) {
+			return "$classes is-fullscreen-mode";
+		}
+	);
+}
 
 /**
  * Renders the new posts dashboard page.

lib/global-styles-and-settings.php

@@ -258,6 +258,7 @@ function gutenberg_add_global_styles_block_custom_css() {
 function gutenberg_add_global_styles_for_blocks() {
 	global $wp_styles;
 	$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$tree        = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $tree );
 	$block_nodes = $tree->get_styles_block_nodes();
 	foreach ( $block_nodes as $metadata ) {
 		$block_css = $tree->get_styles_for_block( $metadata );

packages/block-directory/src/components/downloadable-block-list-item/index.js

@@ -96,7 +96,7 @@ function DownloadableBlockListItem( { composite, item, onClick } ) {
 		<CompositeItem
 			render={
 				<Button
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					type="button"
 					role="option"
 					className="block-directory-downloadable-block-list-item"