Merge branch 'trunk' into block/title-case

.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.)',
 	},
 ];
 
@@ -277,6 +277,69 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
+			excludedFiles: [
+				'packages/components/src/**/@(test|stories)/**',
+				'**/*.@(native|ios|android).js',
+			],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+					// Temporary rules until we're ready to officially deprecate the bottom margins.
+					...[
+						'BaseControl',
+						'CheckboxControl',
+						'ComboboxControl',
+						'DimensionControl',
+						'FocalPointPicker',
+						'RangeControl',
+						'SearchControl',
+						'SelectControl',
+						'TextControl',
+						'TextareaControl',
+						'ToggleControl',
+						'ToggleGroupControl',
+						'TreeSelect',
+					].map( ( componentName ) => ( {
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`,
+						message:
+							componentName +
+							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
+					} ) ),
+					// Temporary rules until we're ready to officially default to the new size.
+					...[
+						'BorderBoxControl',
+						'BorderControl',
+						'ComboboxControl',
+						'CustomSelectControl',
+						'DimensionControl',
+						'FontSizePicker',
+						'NumberControl',
+						'RangeControl',
+						'ToggleGroupControl',
+					].map( ( componentName ) => ( {
+						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="size"][value.value!="default"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					} ) ),
+					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
+					...[ 'SelectControl', 'TextControl' ].map(
+						( componentName ) => ( {
+							// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+							selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+							message:
+								componentName +
+								' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+						} )
+					),
+				],
+			},
+		},
 		{
 			files: [
 				// Components package.
@@ -397,6 +460,7 @@ module.exports = {
 				'no-restricted-syntax': [
 					'error',
 					...restrictedSyntax,
+					...restrictedSyntaxComponents,
 					{
 						selector:
 							':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])',
@@ -419,6 +483,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: {

.gitattributes

@@ -20,3 +20,6 @@ changelog.txt linguist-language=Markdown
 
 # Flag docs directory as documentation for GitHub stats.
 docs/** linguist-documentation
+
+# TSConfig files use jsonc.
+tsconfig*.json linguist-language=jsonc

.github/CODEOWNERS

@@ -18,7 +18,7 @@
 /packages/block-library/src/comment-template    @michalczaplinski
 /packages/block-library/src/comments            @michalczaplinski
 /packages/block-library/src/table-of-contents   @ZebulanStanphill
-/packages/block-library/src/image               @artemiomorales @michalczaplinski
+/packages/block-library/src/image               @artemiomorales
 
 # Duotone
 /lib/block-supports/duotone.php
@@ -119,9 +119,9 @@
 /packages/plugins                               @gziolo @adamsilverstein
 
 # Rich Text
-/packages/format-library                        @ellatrix @fluiddot @dcalhoun
-/packages/rich-text                             @ellatrix @fluiddot @dcalhoun
-/packages/block-editor/src/components/rich-text @ellatrix @fluiddot @dcalhoun
+/packages/format-library                        @ellatrix @dcalhoun
+/packages/rich-text                             @ellatrix @dcalhoun
+/packages/block-editor/src/components/rich-text @ellatrix @dcalhoun
 
 # Project Management
 /.github                                        @desrosj

.github/ISSUE_TEMPLATE/Bug_report.yml

@@ -49,25 +49,19 @@ body:
       validations:
           required: false
 
-    - type: dropdown
+    - type: checkboxes
       id: existing
       attributes:
           label: Please confirm that you have searched existing issues in the repo.
           description: You can do this by searching https://github.com/WordPress/gutenberg/issues and making sure the bug is not related to another plugin.
-          multiple: true
           options:
-              - 'Yes'
-              - 'No'
-      validations:
-          required: true
+              - label: 'Yes'
+                required: true
 
-    - type: dropdown
+    - type: checkboxes
       id: plugins
       attributes:
           label: Please confirm that you have tested with all plugins deactivated except Gutenberg.
-          multiple: true
           options:
-              - 'Yes'
-              - 'No'
-      validations:
-          required: true
+              - label: 'Yes'
+                required: true

.github/workflows/build-plugin-zip.yml

@@ -171,7 +171,7 @@ jobs:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
@@ -270,12 +270,12 @@ jobs:
               run: echo "version=$(echo $VERSION | cut -d / -f 3 | sed 's/-rc./ RC/' )" >> $GITHUB_OUTPUT
 
             - name: Download Plugin Zip Artifact
-              uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: gutenberg-plugin
 
             - name: Download Release Notes Artifact
-              uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: release-notes
 
@@ -333,7 +333,7 @@ jobs:
                   git config user.email [email protected]
 
             - name: Setup Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
               with:
                   node-version-file: 'main/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'

.github/workflows/bundle-size.yml

@@ -43,7 +43,7 @@ jobs:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true

.github/workflows/check-backport-changelog.yml

@@ -1,4 +1,4 @@
-name: Verify Core Backport Changlog
+name: Verify Core Backport Changelog
 
 on:
     pull_request:
@@ -18,22 +18,15 @@ on:
             - '!packages/e2e-tests/**'
 jobs:
     check:
-        name: Check CHANGELOG diff
+        name: Check for a Core backport changelog entry
         runs-on: ubuntu-latest
+        if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }}
         steps:
-            - name: 'Get PR commit count'
-              run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
-            - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
-                  fetch-depth: ${{ env.PR_COMMIT_COUNT }}
-                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
-            - 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') }}
+            - name: Check the changelog folder
               env:
                   PR_NUMBER: ${{ github.event.number }}
               run: |

.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}`);

.github/workflows/create-block.yml

@@ -14,13 +14,17 @@ concurrency:
 
 jobs:
     checks:
-        name: Checks w/Node.js ${{ matrix.node }} on ${{ matrix.os }}
+        name: Checks w/Node.js ${{ matrix.node.name }} on ${{ matrix.os }}
         runs-on: ${{ matrix.os }}
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
             matrix:
-                node: ['20', '22']
+                node:
+                    - name: 20
+                      version: 20
+                    - name: 22
+                      version: 22.4
                 os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
         steps:
@@ -31,7 +35,7 @@ jobs:
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
               with:
-                  node-version: ${{ matrix.node }}
+                  node-version: ${{ matrix.node.version }}
 
             - name: Create block
               shell: bash