diff --git a/.eslintrc.js b/.eslintrc.js index 490c542f9d456..177f3cf35b8cc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -83,6 +83,72 @@ const restrictedImports = [ }, ]; +const restrictedSyntax = [ + // NOTE: We can't include the forward slash in our regex or + // we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern) + // here. That's why we use \\u002F in the regexes below. + { + selector: + 'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]', + message: 'Path access on WordPress dependencies is not allowed.', + }, + { + selector: + 'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' + + majorMinorRegExp + + '/]', + message: + 'Deprecated functions must be removed before releasing this version.', + }, + { + selector: + 'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]', + message: + 'This method is deprecated. You should use the more explicit API methods available.', + }, + { + selector: + 'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]', + message: 'Prefer page.waitForSelector instead.', + }, + { + selector: 'JSXAttribute[name.name="id"][value.type="Literal"]', + message: + 'Do not use string literals for IDs; use withInstanceId instead.', + }, + { + // Discourage the usage of `Math.random()` as it's a code smell + // for UUID generation, for which we already have a higher-order + // component: `withInstanceId`. + selector: + 'CallExpression[callee.object.name="Math"][callee.property.name="random"]', + message: + 'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)', + }, + { + selector: + 'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)', + message: + 'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.', + }, + { + selector: + 'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]', + message: + 'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.', + }, +]; + +/** `no-restricted-syntax` rules for components. */ +const restrictedSyntaxComponents = [ + { + selector: + 'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) 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.)', + }, +]; + module.exports = { root: true, extends: [ @@ -104,6 +170,10 @@ module.exports = { rules: { 'jest/expect-expect': 'off', 'react/jsx-boolean-value': 'error', + 'react/jsx-curly-brace-presence': [ + 'error', + { props: 'never', children: 'never' }, + ], '@wordpress/dependency-group': 'error', '@wordpress/wp-global-usage': 'error', '@wordpress/react-no-unsafe-timeout': 'error', @@ -143,63 +213,7 @@ module.exports = { disallowTypeAnnotations: false, }, ], - 'no-restricted-syntax': [ - 'error', - // NOTE: We can't include the forward slash in our regex or - // we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern) - // here. That's why we use \\u002F in the regexes below. - { - selector: - 'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]', - message: - 'Path access on WordPress dependencies is not allowed.', - }, - { - selector: - 'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' + - majorMinorRegExp + - '/]', - message: - 'Deprecated functions must be removed before releasing this version.', - }, - { - selector: - 'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]', - message: - 'This method is deprecated. You should use the more explicit API methods available.', - }, - { - selector: - 'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]', - message: 'Prefer page.waitForSelector instead.', - }, - { - selector: 'JSXAttribute[name.name="id"][value.type="Literal"]', - message: - 'Do not use string literals for IDs; use withInstanceId instead.', - }, - { - // Discourage the usage of `Math.random()` as it's a code smell - // for UUID generation, for which we already have a higher-order - // component: `withInstanceId`. - selector: - 'CallExpression[callee.object.name="Math"][callee.property.name="random"]', - message: - 'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)', - }, - { - selector: - 'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)', - message: - 'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.', - }, - { - selector: - 'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]', - message: - 'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.', - }, - ], + 'no-restricted-syntax': [ 'error', ...restrictedSyntax ], }, overrides: [ { @@ -249,6 +263,20 @@ module.exports = { ], }, }, + { + files: [ + 'packages/*/src/**/*.[tj]s?(x)', + 'storybook/stories/**/*.[tj]s?(x)', + ], + excludedFiles: [ '**/*.native.js' ], + rules: { + 'no-restricted-syntax': [ + 'error', + ...restrictedSyntax, + ...restrictedSyntaxComponents, + ], + }, + }, { files: [ // Components package. @@ -368,6 +396,7 @@ module.exports = { rules: { 'no-restricted-syntax': [ 'error', + ...restrictedSyntax, { selector: ':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])', diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs index f6527c3de9d97..477cd4fbacb40 100644 --- a/.git-blame-ignore-revs +++ b/.git-blame-ignore-revs @@ -18,3 +18,6 @@ c56e8a1910ed74f405b74bbb12fe81dea974e5c3 # Autofix eslint curly rule. 0221522f253e094b277a1485b7a2d186cb172632 + +# ESLint: Enable react/jsx-curly-brace-presence +5d4baa9ab5f57d207cc3a048003216a8574574d9 diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index 149faee274206..a572074f72c9c 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.github/workflows/build-plugin-zip.yml @@ -69,7 +69,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: token: ${{ secrets.GUTENBERG_TOKEN }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -165,7 +165,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: ${{ needs.bump-version.outputs.release_branch || github.ref }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -222,7 +222,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: fetch-depth: 2 ref: ${{ needs.bump-version.outputs.release_branch }} @@ -311,14 +311,14 @@ jobs: if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }} steps: - name: Checkout (for CLI) - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: path: main ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Checkout (for publishing) - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: path: publish # Later, we switch this branch in the script that publishes packages. diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 1065421044373..2e7f2c98305fb 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -37,7 +37,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: fetch-depth: 1 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml index dd3fe28fbfd59..99d7e1ca5b53a 100644 --- a/.github/workflows/check-backport-changelog.yml +++ b/.github/workflows/check-backport-changelog.yml @@ -22,7 +22,7 @@ jobs: - name: 'Get PR commit count' run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}" - name: Checkout code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: ${{ github.event.pull_request.head.ref }} repository: ${{ github.event.pull_request.head.repo.full_name }} diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml index d995d641fae57..ccc6efac3c378 100644 --- a/.github/workflows/check-components-changelog.yml +++ b/.github/workflows/check-components-changelog.yml @@ -20,7 +20,7 @@ jobs: - name: 'Get PR commit count' run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}" - name: Checkout code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: ${{ github.event.pull_request.head.ref }} repository: ${{ github.event.pull_request.head.repo.full_name }} diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index 7c26cb6e14e76..2a7ea040f8b49 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -20,11 +20,11 @@ jobs: strategy: fail-fast: false matrix: - node: ['20', '21'] + node: ['20', '22'] os: ['macos-latest', 'ubuntu-latest', 'windows-latest'] steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index 16680038e0db6..c4f165d42699d 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -27,7 +27,7 @@ jobs: totalParts: [8] steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -102,7 +102,7 @@ jobs: steps: # Checkout defaults to using the branch which triggered the event, which # isn't necessarily `trunk` (e.g. in the case of a merge). - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml index 633f62d5ed28c..b444b8f974df7 100644 --- a/.github/workflows/gradle-wrapper-validation.yml +++ b/.github/workflows/gradle-wrapper-validation.yml @@ -6,7 +6,7 @@ jobs: name: 'Validation' runs-on: ubuntu-latest steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - uses: gradle/wrapper-validation-action@v3 diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index 2a80325dba9d4..9090ab305dadf 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -33,7 +33,7 @@ jobs: WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/php-changes-detection.yml b/.github/workflows/php-changes-detection.yml index 6d0a0a451a515..d003d149a9a09 100644 --- a/.github/workflows/php-changes-detection.yml +++ b/.github/workflows/php-changes-detection.yml @@ -10,14 +10,14 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} steps: - name: Check out code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: fetch-depth: 0 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Get changed PHP files id: changed-files-php - uses: tj-actions/changed-files@a29e8b565651ce417abb5db7164b4a2ad8b6155c # v44.4.0 + uses: tj-actions/changed-files@d6babd6899969df1a11d14c368283ea4436bca78 # v44.5.2 with: files: | lib/** @@ -54,7 +54,7 @@ jobs: This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. - If so, it is recommended to create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core Github repository](https://github.com/WordPress/wordpress-develop) soon after this pull request is merged. + If so, it is recommended to create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core GitHub repository](https://github.com/WordPress/wordpress-develop) soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in [WordPress Slack](https://make.wordpress.org/chat/). @@ -76,7 +76,7 @@ jobs: This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. - If so, it is recommended to create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core Github repository](https://github.com/WordPress/wordpress-develop) soon after this pull request is merged. + If so, it is recommended to create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core GitHub repository](https://github.com/WordPress/wordpress-develop) soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in [WordPress Slack](https://make.wordpress.org/chat/). diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml index 94397afd7b4bc..ab139c19e6dde 100644 --- a/.github/workflows/publish-npm-packages.yml +++ b/.github/workflows/publish-npm-packages.yml @@ -31,7 +31,7 @@ jobs: steps: - name: Checkout (for CLI) if: ${{ github.event.inputs.release_type != 'wp' }} - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: path: cli ref: trunk @@ -39,7 +39,7 @@ jobs: - name: Checkout (for publishing) if: ${{ github.event.inputs.release_type != 'wp' }} - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: path: publish # Later, we switch this branch in the script that publishes packages. @@ -49,7 +49,7 @@ jobs: - name: Checkout (for publishing WP major version) if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }} - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: path: publish ref: wp/${{ github.event.inputs.wp_version }} diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml index 099203bbffe72..61c522474a7b3 100644 --- a/.github/workflows/pull-request-automation.yml +++ b/.github/workflows/pull-request-automation.yml @@ -12,7 +12,7 @@ jobs: steps: # Checkout defaults to using the branch which triggered the event, which # isn't necessarily `trunk` (e.g. in the case of a merge). - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index a4dce407d1c0f..bd23fb219ce75 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -23,7 +23,7 @@ jobs: steps: - name: checkout - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -60,7 +60,7 @@ jobs: - name: Create AVD and generate snapshot for caching if: steps.avd-cache.outputs.cache-hit != 'true' - uses: reactivecircus/android-emulator-runner@6b0df4b0efb23bb0ec63d881db79aefbc976e4b2 # v2.30.1 + uses: reactivecircus/android-emulator-runner@77986be26589807b8ebab3fde7bbf5c60dabec32 # v2.31.0 with: api-level: ${{ matrix.api-level }} force-avd-creation: false @@ -71,7 +71,7 @@ jobs: script: echo "Generated AVD snapshot for caching." - name: Run tests - uses: reactivecircus/android-emulator-runner@6b0df4b0efb23bb0ec63d881db79aefbc976e4b2 # v2.30.1 + uses: reactivecircus/android-emulator-runner@77986be26589807b8ebab3fde7bbf5c60dabec32 # v2.31.0 with: api-level: ${{ matrix.api-level }} force-avd-creation: false diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index 516f783c11e40..83228bd87b85c 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -23,11 +23,11 @@ jobs: native-test-name: [gutenberg-editor-rendering] steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - - uses: ruby/setup-ruby@cacc9f1c0b3f4eb8a16a6bb0ed10897b43b9de49 # v1.176.0 + - uses: ruby/setup-ruby@d5fb7a202fc07872cb44f00ba8e6197b70cb0c55 # v1.179.0 with: # `.ruby-version` file location working-directory: packages/react-native-editor/ios diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index ff3fe96d505f6..32d7c60968119 100644 --- a/.github/workflows/static-checks.yml +++ b/.github/workflows/static-checks.yml @@ -22,7 +22,7 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 7486ea32533e6..dfe301386849f 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -12,7 +12,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index a4a639e183d5b..a813e4d2d8f5b 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -27,12 +27,12 @@ jobs: strategy: fail-fast: false matrix: - node: ['20', '21'] + node: ['20', '22'] shard: ['1/4', '2/4', '3/4', '4/4'] steps: - name: Checkout repository - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -66,11 +66,11 @@ jobs: strategy: fail-fast: false matrix: - node: ['20', '21'] + node: ['20', '22'] steps: - name: Checkout repository - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -121,7 +121,7 @@ jobs: name: Build JavaScript assets for PHP unit tests runs-on: ubuntu-latest steps: - - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -170,7 +170,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -185,7 +185,7 @@ jobs: # dependency versions are installed and cached. ## - name: Set up PHP - uses: shivammathur/setup-php@c665c7a15b5295c2488ac8a87af9cb806cd72198 # v2.30.4 + uses: shivammathur/setup-php@fc14643b0a99ee9db10a3c025a33d76544fa3761 # v2.30.5 with: php-version: '${{ matrix.php }}' ini-file: development @@ -281,12 +281,12 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Set up PHP - uses: shivammathur/setup-php@c665c7a15b5295c2488ac8a87af9cb806cd72198 # v2.30.4 + uses: shivammathur/setup-php@fc14643b0a99ee9db10a3c025a33d76544fa3761 # v2.30.5 with: php-version: '7.4' coverage: none @@ -351,7 +351,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml index 8f57a749b0601..9bb40a3f06cbc 100644 --- a/.github/workflows/upload-release-to-plugin-repo.yml +++ b/.github/workflows/upload-release-to-plugin-repo.yml @@ -51,7 +51,7 @@ jobs: return $? } - # Only update trunk *if* the published release's version in Github is GREATER + # Only update trunk *if* the published release's version in GitHub is GREATER # than the version currently published in the WP plugins repo. If not, then it # will upload it as a new tag. shouldUpdateTrunk=false @@ -96,7 +96,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 + uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6 with: ref: ${{ matrix.branch }} token: ${{ secrets.GUTENBERG_TOKEN }} diff --git a/backport-changelog/6.6/6559.md b/backport-changelog/6.6/6559.md new file mode 100644 index 0000000000000..176a2e04f0257 --- /dev/null +++ b/backport-changelog/6.6/6559.md @@ -0,0 +1,6 @@ +https://github.com/WordPress/wordpress-develop/pull/6559 + +* https://github.com/WordPress/gutenberg/pull/60349 +* https://github.com/WordPress/gutenberg/pull/60464 +* https://github.com/WordPress/gutenberg/pull/60491 +* https://github.com/WordPress/gutenberg/pull/61757 diff --git a/backport-changelog/6.6/6590.md b/backport-changelog/6.6/6590.md new file mode 100644 index 0000000000000..47ef89e0db40c --- /dev/null +++ b/backport-changelog/6.6/6590.md @@ -0,0 +1,5 @@ +https://github.com/WordPress/wordpress-develop/pull/6590 + +* https://github.com/WordPress/gutenberg/pull/59531 +* https://github.com/WordPress/gutenberg/pull/61182 +* https://github.com/WordPress/gutenberg/pull/61717 diff --git a/backport-changelog/6.6/6616.md b/backport-changelog/6.6/6616.md new file mode 100644 index 0000000000000..bb35d6c74493c --- /dev/null +++ b/backport-changelog/6.6/6616.md @@ -0,0 +1,7 @@ +https://github.com/WordPress/wordpress-develop/pull/6616 + +* https://github.com/WordPress/gutenberg/pull/58409 +* https://github.com/WordPress/gutenberg/pull/61328 +* https://github.com/WordPress/gutenberg/pull/61842 +* https://github.com/WordPress/gutenberg/pull/62199 +* https://github.com/WordPress/gutenberg/pull/62252 diff --git a/backport-changelog/6.6/6662.md b/backport-changelog/6.6/6662.md new file mode 100644 index 0000000000000..5b25fc9930491 --- /dev/null +++ b/backport-changelog/6.6/6662.md @@ -0,0 +1,4 @@ +https://github.com/WordPress/wordpress-develop/pull/6662 + +* https://github.com/WordPress/gutenberg/pull/57908 +* https://github.com/WordPress/gutenberg/pull/62125 diff --git a/backport-changelog/6.6/6694.md b/backport-changelog/6.6/6694.md new file mode 100644 index 0000000000000..a9eb5a7f37ef5 --- /dev/null +++ b/backport-changelog/6.6/6694.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6694 + +* https://github.com/WordPress/gutenberg/pull/60694 diff --git a/backport-changelog/6.6/6731.md b/backport-changelog/6.6/6731.md new file mode 100644 index 0000000000000..b867187325165 --- /dev/null +++ b/backport-changelog/6.6/6731.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6731 + +* https://github.com/WordPress/gutenberg/pull/62299 diff --git a/backport-changelog/6.6/6737.md b/backport-changelog/6.6/6737.md new file mode 100644 index 0000000000000..84e2234ca4e79 --- /dev/null +++ b/backport-changelog/6.6/6737.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6737 + +* https://github.com/WordPress/gutenberg/pull/62305 diff --git a/backport-changelog/6.6/6744.md b/backport-changelog/6.6/6744.md new file mode 100644 index 0000000000000..032f5420cb718 --- /dev/null +++ b/backport-changelog/6.6/6744.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6744 + +* https://github.com/WordPress/gutenberg/pull/62355 \ No newline at end of file diff --git a/backport-changelog/6.6/6756.md b/backport-changelog/6.6/6756.md new file mode 100644 index 0000000000000..688b258c095fa --- /dev/null +++ b/backport-changelog/6.6/6756.md @@ -0,0 +1,4 @@ +https://github.com/WordPress/wordpress-develop/pull/6756 + +* https://github.com/WordPress/gutenberg/pull/62461 +* https://github.com/WordPress/gutenberg/pull/62495 diff --git a/backport-changelog/6.6/6785.md b/backport-changelog/6.6/6785.md new file mode 100644 index 0000000000000..ad26227bf1256 --- /dev/null +++ b/backport-changelog/6.6/6785.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6785 + +* https://github.com/WordPress/gutenberg/pull/62459 diff --git a/backport-changelog/6.7/6750.md b/backport-changelog/6.7/6750.md new file mode 100644 index 0000000000000..257ebe3a5aa69 --- /dev/null +++ b/backport-changelog/6.7/6750.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6750 + +* https://github.com/WordPress/gutenberg/pull/62357 \ No newline at end of file diff --git a/bin/cherry-pick.mjs b/bin/cherry-pick.mjs index d81bc017fc0be..e6b2b6f0692a5 100644 --- a/bin/cherry-pick.mjs +++ b/bin/cherry-pick.mjs @@ -466,7 +466,7 @@ function getCurrentBranch() { */ async function reportGhUnavailable() { console.log( - 'Github CLI is not setup. This script will not be able to automatically' + 'GitHub CLI is not setup. This script will not be able to automatically' ); console.log( 'comment on the processed PRs and remove the backport label from them.' diff --git a/bin/packages/check-build-type-declaration-files.js b/bin/packages/check-build-type-declaration-files.js index 74c7cfa5e3c2a..3d70145ceb588 100644 --- a/bin/packages/check-build-type-declaration-files.js +++ b/bin/packages/check-build-type-declaration-files.js @@ -70,7 +70,7 @@ async function getDecFile( packagePath ) { async function typecheckDeclarations( file ) { return new Promise( ( resolve, reject ) => { exec( - `npx tsc --target esnext --moduleResolution node --noEmit ${ file }`, + `npx tsc --target esnext --moduleResolution node --noEmit "${ file }"`, ( error, stdout, stderr ) => { if ( error ) { reject( { file, error, stderr, stdout } ); diff --git a/bin/plugin/commands/changelog.js b/bin/plugin/commands/changelog.js index 652c6e97a6c0a..43164a80ab24a 100644 --- a/bin/plugin/commands/changelog.js +++ b/bin/plugin/commands/changelog.js @@ -606,11 +606,11 @@ function getEntry( issue ) { /** * Builds a formatted string of the Issue/PR title with a link - * to the Github URL for that item. + * to the GitHub URL for that item. * * @param {string} title the title of the Issue/PR. * @param {number} number the ID/number of the Issue/PR. - * @param {string} url the URL of the Github Issue/PR. + * @param {string} url the URL of the GitHub Issue/PR. * @return {string} the formatted item */ function getFormattedItemDescription( title, number, url ) { @@ -856,7 +856,7 @@ function sortFeatureGroups( featureGroups ) { } /** - * Returns a list of PRs created by first time contributors based on the Github + * Returns a list of PRs created by first time contributors based on the GitHub * label associated with the PR. Also filters out any "bots". * * @param {IssuesListForRepoResponseItem[]} pullRequests List of pull requests. diff --git a/bin/plugin/commands/test/changelog.js b/bin/plugin/commands/test/changelog.js index 12420fd1e4b6f..9c9d423d18d1c 100644 --- a/bin/plugin/commands/test/changelog.js +++ b/bin/plugin/commands/test/changelog.js @@ -25,7 +25,7 @@ import _pullRequests from './fixtures/pull-requests.json'; import botPullRequestFixture from './fixtures/bot-pull-requests.json'; /** - * pull-requests.json is a static snapshot of real data from the Github API. + * pull-requests.json is a static snapshot of real data from the GitHub API. * We merge this with dummy fixture data for a "bot" pull request so as to * ensure future updates to the pull-requests.json doesn't reduce test coverage * of filtering out of bot PRs. diff --git a/changelog.txt b/changelog.txt index 5791fb711c2c4..8679f4a40ba9e 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,477 @@ == Changelog == += 18.5.0 = + +## Changelog + +### Features + +#### Global Styles +- Add defaultSpacingSizes option (theme.json v3). ([61842](https://github.com/WordPress/gutenberg/pull/61842)) +- Edit/create shadows in global styles. ([60706](https://github.com/WordPress/gutenberg/pull/60706)) +- Relocate Background Image controls to sit under Layout. ([61886](https://github.com/WordPress/gutenberg/pull/61886)) + +#### Block Library +- Enable shadow support for cover block. ([61883](https://github.com/WordPress/gutenberg/pull/61883)) + +#### Block bindings +- Allow editing in post meta source. ([61753](https://github.com/WordPress/gutenberg/pull/61753)) + +#### Script Modules API +- Add script module data implementation. ([61658](https://github.com/WordPress/gutenberg/pull/61658)) + +#### Synced Patterns +- Add `__default` binding for pattern overrides. ([60694](https://github.com/WordPress/gutenberg/pull/60694)) + +#### Block Styles +- Extend block style variations as mechanism for achieving section styling. ([57908](https://github.com/WordPress/gutenberg/pull/57908)) + + +### Enhancements + +- Block card: Fix typographic widow. ([61438](https://github.com/WordPress/gutenberg/pull/61438)) +- Block settings: Update variant of "Apply globally" Button component to secondary. ([61850](https://github.com/WordPress/gutenberg/pull/61850)) +- Editor: Align the Post Format control design with the rest of the post sidebar controls. ([62066](https://github.com/WordPress/gutenberg/pull/62066)) +- Editor: Polish the style of some of the post summary rows. ([61645](https://github.com/WordPress/gutenberg/pull/61645)) +- Format Library: Refactor 'Inline Image' edit component. ([62135](https://github.com/WordPress/gutenberg/pull/62135)) +- Playwright end-to-end Utils: Add fullscreenMode option to createNewPost. ([61766](https://github.com/WordPress/gutenberg/pull/61766)) +- Post Sticky Toggle: Improve the design. ([62012](https://github.com/WordPress/gutenberg/pull/62012)) +- Post Summary: Move PostTemplatePanel below URL and Author. ([62137](https://github.com/WordPress/gutenberg/pull/62137)) +- Remove trash button in post/page inspector. ([61792](https://github.com/WordPress/gutenberg/pull/61792)) +- Shadows instead of borders on interface skeleton. ([61835](https://github.com/WordPress/gutenberg/pull/61835)) +- Tweak contextual block toolbar position. ([61836](https://github.com/WordPress/gutenberg/pull/61836)) +- Update: For synced entities the icon should be purple. ([62024](https://github.com/WordPress/gutenberg/pull/62024)) +- Update: Implement new author panel design. ([61362](https://github.com/WordPress/gutenberg/pull/61362)) +- Update: Implement new parent and order design. ([61918](https://github.com/WordPress/gutenberg/pull/61918)) +- Update: Move duplicate pattern and template part actions to the editor package. ([61879](https://github.com/WordPress/gutenberg/pull/61879)) + +#### Site Editor +- Block Editor: Check for multiple block usage in the block-editor package. ([62086](https://github.com/WordPress/gutenberg/pull/62086)) +- Copy custom CSS between variations when switching. ([61752](https://github.com/WordPress/gutenberg/pull/61752)) +- Data views: Align page headers. ([62115](https://github.com/WordPress/gutenberg/pull/62115)) +- Inspector summary rows: Make tooltips appear middle-left. ([61815](https://github.com/WordPress/gutenberg/pull/61815)) +- Inspector: Add '/' prefix to Link button. ([62073](https://github.com/WordPress/gutenberg/pull/62073)) +- Inspector: Display home / posts page badge. ([62071](https://github.com/WordPress/gutenberg/pull/62071)) +- Inspector: Remove revisions panel. ([61867](https://github.com/WordPress/gutenberg/pull/61867)) +- Make post meta row button treatment consistent. ([61954](https://github.com/WordPress/gutenberg/pull/61954)) +- Remove 'Manage...' prefix in Pages / Templates data views. ([62107](https://github.com/WordPress/gutenberg/pull/62107)) +- Remove the details pages. ([61741](https://github.com/WordPress/gutenberg/pull/61741)) +- Update actions order in site editor for template and template parts. ([61803](https://github.com/WordPress/gutenberg/pull/61803)) +- Use site title as a link. ([61258](https://github.com/WordPress/gutenberg/pull/61258)) +- [Site Editor]: Add create pattern button in patterns page. ([60302](https://github.com/WordPress/gutenberg/pull/60302)) +- withRegistryProvider: Prevent intermediate state with no children. ([61859](https://github.com/WordPress/gutenberg/pull/61859)) + +#### Data Views +- Add badge to title for posts & front pages. ([61718](https://github.com/WordPress/gutenberg/pull/61718)) +- Clarify `date` value in Pages. ([61709](https://github.com/WordPress/gutenberg/pull/61709)) +- DataViews: `label` prop in Actions API can be either a `string` or a `function`. ([61942](https://github.com/WordPress/gutenberg/pull/61942)) +- Fix pagination position on pages with short lists. ([61712](https://github.com/WordPress/gutenberg/pull/61712)) +- Pages data view: Add Pending and Private views. ([62138](https://github.com/WordPress/gutenberg/pull/62138)) +- Pages sidebar: Adds published & scheduled items. ([62021](https://github.com/WordPress/gutenberg/pull/62021)) +- Stop Patterns data view header shrinking. ([61801](https://github.com/WordPress/gutenberg/pull/61801)) +- Update grid layout on small screens. ([61820](https://github.com/WordPress/gutenberg/pull/61820)) +- Update list layout action styling. ([61797](https://github.com/WordPress/gutenberg/pull/61797)) +- Update page component (and some data view elements) spacing metrics. ([61333](https://github.com/WordPress/gutenberg/pull/61333)) +- Visually hide 'Actions' column header. ([61710](https://github.com/WordPress/gutenberg/pull/61710)) + +#### Global Styles +- Add block-level Text Alignment UI. ([61717](https://github.com/WordPress/gutenberg/pull/61717)) +- Add option to remove site-wide theme background image. ([61998](https://github.com/WordPress/gutenberg/pull/61998)) +- Background image: Add support for relative theme path URLs in top-level theme.json styles. ([61271](https://github.com/WordPress/gutenberg/pull/61271)) +- Background image: Update controls defaults and layout. ([62000](https://github.com/WordPress/gutenberg/pull/62000)) +- Background images: Add defaults for background size. ([62046](https://github.com/WordPress/gutenberg/pull/62046)) +- Don't filter out typography variations where the heading and body fonts are the same. ([61327](https://github.com/WordPress/gutenberg/pull/61327)) +- Make color variations fit in a bit better visually. ([61617](https://github.com/WordPress/gutenberg/pull/61617)) +- Make it clearer how to edit a site's palette. ([61364](https://github.com/WordPress/gutenberg/pull/61364)) +- Move type presets below elements. ([61863](https://github.com/WordPress/gutenberg/pull/61863)) +- Restore the default variation to the color and typography style tiles. ([61901](https://github.com/WordPress/gutenberg/pull/61901)) +- Show shadow tool by default under global styles. ([61981](https://github.com/WordPress/gutenberg/pull/61981)) + +#### Components +- Add vw and vh units to the custom font size picker. ([60607](https://github.com/WordPress/gutenberg/pull/60607)) +- CustomSelectControlV2: Use `InputBase` for styling. ([60261](https://github.com/WordPress/gutenberg/pull/60261)) +- Tabs: Indicator animation. ([60560](https://github.com/WordPress/gutenberg/pull/60560)) +- Try: Add CSS Custom Properties to CSS types. ([61872](https://github.com/WordPress/gutenberg/pull/61872)) + +#### Zoom Out +- Hide inserters behind the experiment flag. ([61866](https://github.com/WordPress/gutenberg/pull/61866)) +- Inserter: Auto-close the inserter unless the zoom out experiment is on. ([61856](https://github.com/WordPress/gutenberg/pull/61856)) +- Show the inserters only when a section is selected. ([61559](https://github.com/WordPress/gutenberg/pull/61559)) +- The patterns tab behind a new experiment. ([61601](https://github.com/WordPress/gutenberg/pull/61601)) + +#### Block Editor +- Adjust pattern list items resting, hover, focus styles. ([61831](https://github.com/WordPress/gutenberg/pull/61831)) +- Tweak pattern categories sidebar. ([62113](https://github.com/WordPress/gutenberg/pull/62113)) +- Writing flow: Remove first empty paragraph on Backspace. ([61889](https://github.com/WordPress/gutenberg/pull/61889)) + +#### Block bindings +- Add Block Bindings Panel to Block Inspector. ([61527](https://github.com/WordPress/gutenberg/pull/61527)) +- Add indicator for metadata changes to Save Panel when reviewing modified entities. ([61811](https://github.com/WordPress/gutenberg/pull/61811)) +- Lock binding editing with functions. ([61734](https://github.com/WordPress/gutenberg/pull/61734)) + +#### Block Variations +- Detect active variation correctly based on RichText attribute. ([62325](https://github.com/WordPress/gutenberg/pull/62325)) +- Have `getActiveBlockVariation` return variation with highest specificity. ([62031](https://github.com/WordPress/gutenberg/pull/62031)) +- Support dot notation in `isActive` string array. ([62088](https://github.com/WordPress/gutenberg/pull/62088)) + +#### Layout +- More consistent root padding. ([60715](https://github.com/WordPress/gutenberg/pull/60715)) +- Try using coloured overlay instead of border for grid visualiser. ([61390](https://github.com/WordPress/gutenberg/pull/61390)) + +#### Block Library +- Added Bluesky icon to the Social Icon Block. ([61372](https://github.com/WordPress/gutenberg/pull/61372)) +- Media & Text: Replace the deprecated __experimentalImageSizeControl with ResolutionTool. ([57540](https://github.com/WordPress/gutenberg/pull/57540)) + +#### Inspector Controls +- Align both "Design" pattern list panels. ([62161](https://github.com/WordPress/gutenberg/pull/62161)) + +#### Post Editor +- Add home template details to inspector controls. ([61762](https://github.com/WordPress/gutenberg/pull/61762)) + +#### Interactivity API +- Clarify some warning messages. ([61720](https://github.com/WordPress/gutenberg/pull/61720)) + +#### Patterns +- Adjust the icons and text of the binding connected blocks. ([61560](https://github.com/WordPress/gutenberg/pull/61560)) + + +### Bug Fixes + +- Editor: Only render the site logo once if there's a fill. ([62320](https://github.com/WordPress/gutenberg/pull/62320)) +- Interactivity API: Increase directive `wp-each-child` priority. ([62293](https://github.com/WordPress/gutenberg/pull/62293))w +- Compose: Fix 'useFocusOnMount' cleanup callback. ([62053](https://github.com/WordPress/gutenberg/pull/62053)) +- Do not auto save post status changes. ([62171](https://github.com/WordPress/gutenberg/pull/62171)) +- Editor: Fix canvas padding in post editor. ([61893](https://github.com/WordPress/gutenberg/pull/61893)) +- EntityProvider: Avoid remounts and simplify. ([61882](https://github.com/WordPress/gutenberg/pull/61882)) +- Fix shadow and border for pattern categories panel. ([62158](https://github.com/WordPress/gutenberg/pull/62158)) +- Image Block: Conditionally Render Block Control Based on Component Presence. ([62132](https://github.com/WordPress/gutenberg/pull/62132)) +- Interactivity API: Fix null and number strings as namespaces runtime error. ([61960](https://github.com/WordPress/gutenberg/pull/61960)) +- PostCardPanel: Fix ESLint error. ([62109](https://github.com/WordPress/gutenberg/pull/62109)) +- Remove build-types/ clean from clean:Packages. ([62008](https://github.com/WordPress/gutenberg/pull/62008)) +- Script Modules: Fix private method reflection access. ([62154](https://github.com/WordPress/gutenberg/pull/62154)) +- ServerSideRender: Fix data loading in development mode. ([62140](https://github.com/WordPress/gutenberg/pull/62140)) +- Shadow Panel: Make subtitle translatable. ([62022](https://github.com/WordPress/gutenberg/pull/62022)) +- Site Editor: Fix the Root Padding styles. ([61906](https://github.com/WordPress/gutenberg/pull/61906)) +- Writing flow: Fix heading crash on split (via paste). ([61900](https://github.com/WordPress/gutenberg/pull/61900)) +- e2e: Fix Site Editor Styles test. ([62111](https://github.com/WordPress/gutenberg/pull/62111)) + +#### Post Editor +- Consolidate and fix `delete` and `edit` post actions. ([61912](https://github.com/WordPress/gutenberg/pull/61912)) +- Consolidate and fix `rename` post action. ([61857](https://github.com/WordPress/gutenberg/pull/61857)) +- Document Bar: Decode HTML entities and take into account cases where there is no title. ([62087](https://github.com/WordPress/gutenberg/pull/62087)) +- Editor: Don't apply purple accent to the unsynced pattern title. ([61704](https://github.com/WordPress/gutenberg/pull/61704)) +- Editor: Ensure Copy button in sidebar copies whole permalink, *with* URL protocol. ([61876](https://github.com/WordPress/gutenberg/pull/61876)) +- Editor: Fix the 'DocumentBar' position for long titles. ([61691](https://github.com/WordPress/gutenberg/pull/61691)) +- Editor: Render publish date control when the status is `future`(scheduled). ([62070](https://github.com/WordPress/gutenberg/pull/62070)) +- Editor: Unify button size in pre-publish panel. ([62123](https://github.com/WordPress/gutenberg/pull/62123)) +- Editor: Use edited entity for post actions. ([61892](https://github.com/WordPress/gutenberg/pull/61892)) +- Fix read only post status styles. ([61722](https://github.com/WordPress/gutenberg/pull/61722)) +- Post Actions: Hide the trash action for auto-drafts. ([61865](https://github.com/WordPress/gutenberg/pull/61865)) + +#### Block Editor +- Inserter: Update Openverse API URLs. ([62241](https://github.com/WordPress/gutenberg/pull/62241)) +- Fix being unable to switch modes while inserter is open. ([61563](https://github.com/WordPress/gutenberg/pull/61563)) +- Fix editor inserter tabs indicator. ([61973](https://github.com/WordPress/gutenberg/pull/61973)) +- Fix positioning of close icons in panels to be consistent. ([61832](https://github.com/WordPress/gutenberg/pull/61832)) +- Fix syncing of publish date between publish and post status panel. ([62165](https://github.com/WordPress/gutenberg/pull/62165)) +- Improve link conrol preview when show button text label is enabled. ([61726](https://github.com/WordPress/gutenberg/pull/61726)) +- Inserter: Show all blocks (alternative). ([62169](https://github.com/WordPress/gutenberg/pull/62169)) +- InspectorControls: Text not displayed when "Show button text labels" is enabled. ([61949](https://github.com/WordPress/gutenberg/pull/61949)) +- Link Control: Fix focus handlers in development mode. ([62141](https://github.com/WordPress/gutenberg/pull/62141)) +- Media & Text block: Remove the link option when the featured image is used. ([60510](https://github.com/WordPress/gutenberg/pull/60510)) +- Writing flow: Fix paste for input fields. ([61389](https://github.com/WordPress/gutenberg/pull/61389)) + +#### Block Library +- Classic block: Fix content syncing effect for React StrictMode. ([62051](https://github.com/WordPress/gutenberg/pull/62051)) +- Don't steal focus when opening browse all blocks. ([61975](https://github.com/WordPress/gutenberg/pull/61975)) +- Fix: The latest post block - post titles overlapping. ([61356](https://github.com/WordPress/gutenberg/pull/61356)) +- Fixed : Update `alt text decision tree` links to be translatable. ([62076](https://github.com/WordPress/gutenberg/pull/62076)) +- Fixed: Custom HTML Block should display content in LTR layout for all languages. ([62083](https://github.com/WordPress/gutenberg/pull/62083)) +- More block: Fix React warning when adding custom text. ([61936](https://github.com/WordPress/gutenberg/pull/61936)) +- useUploadMediaFromBlobURL: Prevent duplicate uploads in StrictMode. ([62059](https://github.com/WordPress/gutenberg/pull/62059)) + +#### Global Styles +- Fix make dimensions.aspectRatios key of theme.json files translatable. ([61774](https://github.com/WordPress/gutenberg/pull/61774)) +- Hide the presets panel for when there are less or exactly one presets available. ([62074](https://github.com/WordPress/gutenberg/pull/62074)) +- Prevent Typography panel title from wrapping. ([62124](https://github.com/WordPress/gutenberg/pull/62124)) +- Shadow Panel: Generates unique shadow slugs by finding max suffix and incrementing it. ([61997](https://github.com/WordPress/gutenberg/pull/61997)) +- Styles: try wrapping with :Root to fix reset styles. ([61638](https://github.com/WordPress/gutenberg/pull/61638)) +- Transform Styles: Update selector so that styles work when custom fields panel is active. ([62121](https://github.com/WordPress/gutenberg/pull/62121)) + +#### Site Editor +- Align the template title to the center in the 'Add template' screen. ([62175](https://github.com/WordPress/gutenberg/pull/62175)) +- Close publish sidebar if not in `edit` mode. ([61707](https://github.com/WordPress/gutenberg/pull/61707)) +- Fix the site editor Admin Bar menu item. ([61851](https://github.com/WordPress/gutenberg/pull/61851)) +- Use a consistent snackbar position. ([61756](https://github.com/WordPress/gutenberg/pull/61756)) + +#### Components +- Fix: The focus styles for tabPanel. ([61317](https://github.com/WordPress/gutenberg/pull/61317)) +- InputControl: Fix z-index issue causing slider dots to appear in front of the Appearance dropdown. ([61937](https://github.com/WordPress/gutenberg/pull/61937)) +- getAutocompleterUI: Don't redefine ListBox component on every render. ([61877](https://github.com/WordPress/gutenberg/pull/61877)) + +#### Synced Patterns +- Block Bindings: Filter pattern overrides source in bindings panel. ([62015](https://github.com/WordPress/gutenberg/pull/62015)) +- Fix detaching patterns when a pattern has overrides, but there are no override values. ([62014](https://github.com/WordPress/gutenberg/pull/62014)) + +#### Block bindings +- Don't show non-existing and not supported attributes in block bindings panel. ([62183](https://github.com/WordPress/gutenberg/pull/62183)) + +#### Layout +- Remove extra bracket in the site editor root padding styles. ([62159](https://github.com/WordPress/gutenberg/pull/62159)) + +#### Block Styles +- Fix block style variation styles for blocks with complex selectors. ([62125](https://github.com/WordPress/gutenberg/pull/62125)) + +#### Code Editor +- Editor: Unify text/code editor between post and site editors. ([61934](https://github.com/WordPress/gutenberg/pull/61934)) + +#### Page Content Focus +- Remove lock icons from Content blocks inner blocks when editing a page in the site editor. ([61922](https://github.com/WordPress/gutenberg/pull/61922)) + +#### Patterns +- Templates: Only resolve patterns for REST API endpoints. ([61757](https://github.com/WordPress/gutenberg/pull/61757)) + +#### Interactivity API +- Turn named capturing groups back into numbered ones inside `toVdom`. ([61728](https://github.com/WordPress/gutenberg/pull/61728)) + +#### Block API +- Fix: Enable Text Align UI to be controlled correctly with theme.json. ([61182](https://github.com/WordPress/gutenberg/pull/61182)) + +#### REST API +- Return an empty object when no fallback templates are found (wp/v2/templates/lookup). ([60925](https://github.com/WordPress/gutenberg/pull/60925)) + + +### Accessibility + +#### Global Styles +- Shadow Panel: Improve a11y and fix browser console error. ([61980](https://github.com/WordPress/gutenberg/pull/61980)) + +#### Data Views +- Always show Actions table header. ([61847](https://github.com/WordPress/gutenberg/pull/61847)) + +#### Block Library +- Fix: Adds help props for description of Play Inline toggle. ([61310](https://github.com/WordPress/gutenberg/pull/61310)) + + +### Performance + +- Perf: Batch block list settings in single action. ([61329](https://github.com/WordPress/gutenberg/pull/61329)) +- Remove additional call to `WP_Theme_JSON_Gutenberg::__construct`. ([61262](https://github.com/WordPress/gutenberg/pull/61262)) + +#### Interactivity API +- Introduce `wp-on-async` directive as performant alternative over synchronous `wp-on` directive. ([61885](https://github.com/WordPress/gutenberg/pull/61885)) + +#### Post Editor +- DocumentBar: Only selected data needed for rendering. ([61706](https://github.com/WordPress/gutenberg/pull/61706)) + + +### Experiments + +#### Interactivity API +- Use output buffer and HTML tag processor to inject directives on BODY tag for full-page client-side navigation. ([61212](https://github.com/WordPress/gutenberg/pull/61212)) + + +### Documentation + +- Add JSDoc to PostVisibility, PostVisibilityCheck, and PostVisibilityLabel. ([61735](https://github.com/WordPress/gutenberg/pull/61735)) +- Add PostURL component documentation. ([61737](https://github.com/WordPress/gutenberg/pull/61737)) +- Add a section about block filters to the Filters and Hooks doc. ([61771](https://github.com/WordPress/gutenberg/pull/61771)) +- Add an example and improve readability of the Block Filters doc. ([61770](https://github.com/WordPress/gutenberg/pull/61770)) +- Add docblock to PostTitle and PostTitleRaw component. ([61740](https://github.com/WordPress/gutenberg/pull/61740)) +- Add documentation for DocumentBar. ([61733](https://github.com/WordPress/gutenberg/pull/61733)) +- Add documentation for PostFeaturedImage, PostFeaturedImageCheck, PostFeaturedImagePanel. ([61165](https://github.com/WordPress/gutenberg/pull/61165)) +- Add documentation for PostLastRevision, PostLastRevisionCheck, PostLastRevisionPanel components. ([61166](https://github.com/WordPress/gutenberg/pull/61166)) +- Add documentation for PostSchedule, PostScheduleCheck, PostSchedulePanel, PostScheduleLabel, usePostScheduleLabel components. ([61345](https://github.com/WordPress/gutenberg/pull/61345)) +- Add documentation for the EditorNotices component. ([61736](https://github.com/WordPress/gutenberg/pull/61736)) +- Add documentation for the EditorProvider and ExperimentalEditorProvider components. ([61739](https://github.com/WordPress/gutenberg/pull/61739)) +- Added missing @global documentation. ([61537](https://github.com/WordPress/gutenberg/pull/61537)) +- Changelog: Add note about removing legacy operators. ([62013](https://github.com/WordPress/gutenberg/pull/62013)) +- Docs: Fix spacing in PHP doc block in comments block. ([61911](https://github.com/WordPress/gutenberg/pull/61911)) +- EditorBoundary editor component. ([61950](https://github.com/WordPress/gutenberg/pull/61950)) +- Fix typo. ([61830](https://github.com/WordPress/gutenberg/pull/61830)) +- Fix: Block library README.md link. ([62081](https://github.com/WordPress/gutenberg/pull/62081)) +- Fix: Custom block editor link. ([61962](https://github.com/WordPress/gutenberg/pull/61962)) +- For `PostTextEditor` component. ([62099](https://github.com/WordPress/gutenberg/pull/62099)) +- LocalAutosaveMonitor editor component. ([61951](https://github.com/WordPress/gutenberg/pull/61951)) +- PageTemplate + PostTemplatePanel editor components. ([61961](https://github.com/WordPress/gutenberg/pull/61961)) +- PostComments editor component. ([61964](https://github.com/WordPress/gutenberg/pull/61964)) +- PostDiscussionPanel editor component. ([61966](https://github.com/WordPress/gutenberg/pull/61966)) +- PostExcerptPanel editor component. ([61967](https://github.com/WordPress/gutenberg/pull/61967)) +- PostLockedModal editor component. ([61968](https://github.com/WordPress/gutenberg/pull/61968)) +- PostPendingStatus + PostPendingStatusCheck editor components. ([61970](https://github.com/WordPress/gutenberg/pull/61970)) +- PostPingbacks editor component. ([62035](https://github.com/WordPress/gutenberg/pull/62035)) +- PostPreviewButton editor component. ([62036](https://github.com/WordPress/gutenberg/pull/62036)) +- Storybook: Add badges based on `tags`. ([61111](https://github.com/WordPress/gutenberg/pull/61111)) +- Update PostFormat, PostFormatCheck editor component documentation. ([61732](https://github.com/WordPress/gutenberg/pull/61732)) +- Update block.json file with correct links. ([61880](https://github.com/WordPress/gutenberg/pull/61880)) +- Update link to architecture key concepts. ([61965](https://github.com/WordPress/gutenberg/pull/61965)) +- Update links to correct lodash website. ([62188](https://github.com/WordPress/gutenberg/pull/62188)) +- Update plugin-document-setting-panel.md. ([61782](https://github.com/WordPress/gutenberg/pull/61782)) +- Update tutorial.md. ([62054](https://github.com/WordPress/gutenberg/pull/62054)) + + +### Code Quality + +- Add curly brace autofix commit to `.git-blame-ignore-revs`. ([62144](https://github.com/WordPress/gutenberg/pull/62144)) +- Add eslint rule for curly brace presence in JSX. ([62026](https://github.com/WordPress/gutenberg/pull/62026)) +- Blocks: Remove pipe usage and dependency on compose. ([62127](https://github.com/WordPress/gutenberg/pull/62127)) +- Clean up packages build-types when cleaning types. ([61939](https://github.com/WordPress/gutenberg/pull/61939)) +- Command Palette: Remove unused URL parameter. ([61783](https://github.com/WordPress/gutenberg/pull/61783)) +- Commands: Unify the editor context between post and site editors. ([61862](https://github.com/WordPress/gutenberg/pull/61862)) +- Dataviews: Remove unused dependencies. ([62010](https://github.com/WordPress/gutenberg/pull/62010)) +- Distraction Free: Unify the header animation. ([62167](https://github.com/WordPress/gutenberg/pull/62167)) +- Editor: Move editor toggle commands to the editor package. ([62093](https://github.com/WordPress/gutenberg/pull/62093)) +- Editor: Move the InterfaceSkeleton to the editor package. ([62118](https://github.com/WordPress/gutenberg/pull/62118)) +- Editor: Move the resizing of the editor to the EditorCanvas component. ([61896](https://github.com/WordPress/gutenberg/pull/61896)) +- Editor: Remove extra div container and unify the container between post and site editors. ([62016](https://github.com/WordPress/gutenberg/pull/62016)) +- Editor: Remove obsolete `listViewLabel` prop from DocumentTools. ([62032](https://github.com/WordPress/gutenberg/pull/62032)) +- Editor: Remove useless props from InserterSidebar component. ([62103](https://github.com/WordPress/gutenberg/pull/62103)) +- Editor: Unify the MediaUpload hook between post and site editors. ([62085](https://github.com/WordPress/gutenberg/pull/62085)) +- Editor: Unify the content area of the post and site editors. ([61860](https://github.com/WordPress/gutenberg/pull/61860)) +- Fix: React compiler error on button. ([61958](https://github.com/WordPress/gutenberg/pull/61958)) +- Fix: Remove unused css block on patterns page. ([62058](https://github.com/WordPress/gutenberg/pull/62058)) +- Fix: Remove unused css code from the navigation screen. ([62060](https://github.com/WordPress/gutenberg/pull/62060)) +- Fix: Some jsdoc return types on edit site selector. ([62061](https://github.com/WordPress/gutenberg/pull/62061)) +- Improve distclean script. ([62019](https://github.com/WordPress/gutenberg/pull/62019)) +- Interactivity API: Move all utils inside `utils.ts`. ([61721](https://github.com/WordPress/gutenberg/pull/61721)) +- Interactivity API: Move init.js to TypeScript. ([61723](https://github.com/WordPress/gutenberg/pull/61723)) +- Make onPatternCategorySelection private. ([62130](https://github.com/WordPress/gutenberg/pull/62130)) +- Remove useless clsx calls. ([61969](https://github.com/WordPress/gutenberg/pull/61969)) +- Rename backport-changelog/6279.md to backport-changelog/6.6/6279.md. ([61894](https://github.com/WordPress/gutenberg/pull/61894)) +- Update: Remove unused components. ([61955](https://github.com/WordPress/gutenberg/pull/61955)) +- end-to-end Tests: Fix React warnings triggered by test plugins. ([61935](https://github.com/WordPress/gutenberg/pull/61935)) + +#### Components +- CustomSelectControl: Fix `menuProps` mutation. ([62149](https://github.com/WordPress/gutenberg/pull/62149)) +- Fix remaining warning in ColorPanelDropdown. ([61933](https://github.com/WordPress/gutenberg/pull/61933)) +- Make the `ProgressBar` public. ([61062](https://github.com/WordPress/gutenberg/pull/61062)) +- Remove reduceMotion utility. ([61963](https://github.com/WordPress/gutenberg/pull/61963)) +- SlotFills: Use state for registry initialization. ([61802](https://github.com/WordPress/gutenberg/pull/61802)) +- Style Book: Use state to initialize examples. ([61848](https://github.com/WordPress/gutenberg/pull/61848)) +- Tooltip: Fix Ariakit tooltip store usage. ([61858](https://github.com/WordPress/gutenberg/pull/61858)) +- `ProgressBar`: Simplify default `width` implementation and make it more easily overridable. ([61976](https://github.com/WordPress/gutenberg/pull/61976)) + +#### Block Editor +- Fix `ZoomOutModeInserters` dependencies. ([61908](https://github.com/WordPress/gutenberg/pull/61908)) +- Fix wrapper props mutation in BlockListBlock. ([61789](https://github.com/WordPress/gutenberg/pull/61789)) +- Remove some utility functions. ([61784](https://github.com/WordPress/gutenberg/pull/61784)) +- Shadows: Unlock private components and hooks at the file level. ([61790](https://github.com/WordPress/gutenberg/pull/61790)) +- Unlock private setting keys at the file level. ([61813](https://github.com/WordPress/gutenberg/pull/61813)) +- Unlock the private 'kebabCase' function at a file level. ([60755](https://github.com/WordPress/gutenberg/pull/60755)) +- useBlockInspectorAnimationSettings: Remove unnecessary deps. ([61822](https://github.com/WordPress/gutenberg/pull/61822)) + +#### Data Views +- DataViews: Full type the dataviews package. ([61854](https://github.com/WordPress/gutenberg/pull/61854)) +- DataViews: Remove non-used file. ([61853](https://github.com/WordPress/gutenberg/pull/61853)) +- DataViews: Remove unnecessary dependency for pattern fields memo. ([61870](https://github.com/WordPress/gutenberg/pull/61870)) +- DataViews: Type all the filters components. ([61795](https://github.com/WordPress/gutenberg/pull/61795)) +- DataViews: Type the BulkActionsToolbar component. ([61673](https://github.com/WordPress/gutenberg/pull/61673)) +- DataViews: Type the ViewActions component. ([61729](https://github.com/WordPress/gutenberg/pull/61729)) +- DataViews: Type the ViewTable component. ([61682](https://github.com/WordPress/gutenberg/pull/61682)) + +#### Block Library +- Added unit test for post excerpt block render function. ([43451](https://github.com/WordPress/gutenberg/pull/43451)) +- Avoid using component naming conventions for non-component code. ([61793](https://github.com/WordPress/gutenberg/pull/61793)) +- Button: Fix ESLint warning. ([62126](https://github.com/WordPress/gutenberg/pull/62126)) +- Remove CSS hack for Internet Explorer 11. ([62043](https://github.com/WordPress/gutenberg/pull/62043)) +- Remove useless styles. ([62017](https://github.com/WordPress/gutenberg/pull/62017)) +- Search Block: Fix `borderRadius` mutation. ([61794](https://github.com/WordPress/gutenberg/pull/61794)) + +#### Site Editor +- History: Add getLocationWithParams method. ([61823](https://github.com/WordPress/gutenberg/pull/61823)) +- Navigation Focus Mode: Remove leftover code. ([61897](https://github.com/WordPress/gutenberg/pull/61897)) +- Remove useless onClick handler. ([61902](https://github.com/WordPress/gutenberg/pull/61902)) +- Update to use the EditorInterface component from the editor package. ([62146](https://github.com/WordPress/gutenberg/pull/62146)) + +#### Block hooks +- Navigation block: Check for insert_hooked_blocks_into_rest_response i…. ([62134](https://github.com/WordPress/gutenberg/pull/62134)) +- Navigation block: Check for update_ignored_hooked_blocks_postmeta in core. ([61903](https://github.com/WordPress/gutenberg/pull/61903)) + +#### Font Library +- Font Library Modal: Remove some contexts. ([62042](https://github.com/WordPress/gutenberg/pull/62042)) + +#### Post Editor +- Template Actions: Fix console error when resetting template. ([61921](https://github.com/WordPress/gutenberg/pull/61921)) + +#### Global Styles +- Components: Fix React Warning triggers by the new JSX transform. ([61917](https://github.com/WordPress/gutenberg/pull/61917)) + +#### Interactivity API +- Interactivity API : Refactor interactivity-router to TS. ([61730](https://github.com/WordPress/gutenberg/pull/61730)) + +#### CSS & Styling +- Fix editor view mode canvas shadow. ([61688](https://github.com/WordPress/gutenberg/pull/61688)) + + +### Tools + +- Build: Use globalThis over process.env and enable TS lib checking. ([61486](https://github.com/WordPress/gutenberg/pull/61486)) + +#### Testing +- E2E: Fix canvas waiter in visitSiteEditor. ([61816](https://github.com/WordPress/gutenberg/pull/61816)) +- PaletteEdit: Fix another flaky test. ([61818](https://github.com/WordPress/gutenberg/pull/61818)) +- PaletteEdit: Fix flaky test. ([61791](https://github.com/WordPress/gutenberg/pull/61791)) +- Shadow: Add unit tests for shadow support. ([60063](https://github.com/WordPress/gutenberg/pull/60063)) +- Skip flaky 'Zoom out' end-to-end test. ([61925](https://github.com/WordPress/gutenberg/pull/61925)) +- Synced Pattern: Wait for pattern creation in end-to-end tests. ([62174](https://github.com/WordPress/gutenberg/pull/62174)) +- Tests: Change how directives processing gets disabled. ([62095](https://github.com/WordPress/gutenberg/pull/62095)) +- Workflows: Try a backport changelog. ([61785](https://github.com/WordPress/gutenberg/pull/61785)) + +#### Build Tooling +- Add 60 minute timeout to performance job. ([61957](https://github.com/WordPress/gutenberg/pull/61957)) +- Enable parallel processing for PHPCS sniffs. ([61700](https://github.com/WordPress/gutenberg/pull/61700)) +- Fix an issue causing wp-scripts commands to fail if the file path contained a space character. ([61748](https://github.com/WordPress/gutenberg/pull/61748)) +- React: Upgrade to the new JSX transform. ([61692](https://github.com/WordPress/gutenberg/pull/61692)) +- Workflows: Test to check for label and skip backport changelog. ([61808](https://github.com/WordPress/gutenberg/pull/61808)) + + +### Various + +- Inserter: Encapsulate styles for tablist and close button. ([61760](https://github.com/WordPress/gutenberg/pull/61760)) +- Update 'Add template' screen to prefer template_name label instead of singular_name. ([60367](https://github.com/WordPress/gutenberg/pull/60367)) +- Update: Move pattern actions to the editor package. [take 2]. ([61612](https://github.com/WordPress/gutenberg/pull/61612)) + +#### Global Styles +- Update copy for color variations from "Presets" to "Palettes". ([62147](https://github.com/WordPress/gutenberg/pull/62147)) + +#### Synced Patterns +- Remove `IS_GUTENBERG_PLUGIN` check to ensure pattern overrides ship in 6.6. ([62011](https://github.com/WordPress/gutenberg/pull/62011)) + +#### npm Packages +- Packages: Increase the minimum required Node.js version to v18.12.0. ([61930](https://github.com/WordPress/gutenberg/pull/61930)) + +#### Layout +- Update child layout selector to match core. ([61777](https://github.com/WordPress/gutenberg/pull/61777)) + +#### Components +- Introduce Combobox `expandOnFocus` property. ([61705](https://github.com/WordPress/gutenberg/pull/61705)) + + +## First time contributors + +The following PRs were merged by first time contributors: + +- @akashdhawade2005: Fix: Block library README.md link. ([62081](https://github.com/WordPress/gutenberg/pull/62081)) +- @amitraj2203: Added Bluesky icon to the Social Icon Block. ([61372](https://github.com/WordPress/gutenberg/pull/61372)) +- @dbrian: Add JSDoc to PostVisibility, PostVisibilityCheck, and PostVisibilityLabel. ([61735](https://github.com/WordPress/gutenberg/pull/61735)) +- @gemkev: Update tutorial.md. ([62054](https://github.com/WordPress/gutenberg/pull/62054)) +- @kellenmace: Fix an issue causing wp-scripts commands to fail if the file path contained a space character. ([61748](https://github.com/WordPress/gutenberg/pull/61748)) +- @narenin: Fixed: Custom HTML Block should display content in LTR layout for all languages. ([62083](https://github.com/WordPress/gutenberg/pull/62083)) +- @nateinaction: Add documentation for the EditorProvider and ExperimentalEditorProvider components. ([61739](https://github.com/WordPress/gutenberg/pull/61739)) +- @paolopiaggio: Playwright end-to-end Utils: Add fullscreenMode option to createNewPost. ([61766](https://github.com/WordPress/gutenberg/pull/61766)) +- @sanjucta: Add docblock to PostTitle and PostTitleRaw component. ([61740](https://github.com/WordPress/gutenberg/pull/61740)) +- @vipul0425: Fix: The latest post block - post titles overlapping. ([61356](https://github.com/WordPress/gutenberg/pull/61356)) + + +## Contributors + +The following contributors merged PRs in this release: + +@aaronrobertshaw @abhi3315 @afercia @ajlende @akashdhawade2005 @akasunil @Aljullu @amitraj2203 @andrewserong @anton-vlasenko @anver @artemiomorales @carolinan @cbravobernal @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @dbrian @draganescu @ellatrix @fabiankaegy @fullofcaffeine @gemkev @geriux @glendaviesnz @gziolo @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kellenmace @kevin940726 @kt-12 @madhusudhand @Mamaduka @mattsherman @mcsf @michalczaplinski @mirka @narenin @nateinaction @ndiego @ntsekouras @oandregal @ockham @paolopiaggio @ramonjd @retrofox @richtabor @sanjucta @SantosGuillamot @scruffian @senadir @shail-mehta @sirreal @stokesman @t-hamano @talldan @taylorgorman @tellthemachines @tjcafferkey @twstokes @tyxla @vcanales @vipul0425 @westonruter @WunderBart @youknowriad + + + + = 18.4.1 = ## Changelog @@ -906,7 +1378,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@tellthemachines @arthur791004 +@tellthemachines @arthur791004 = 18.1.1 = @@ -920,7 +1392,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@okmttdhr @ntsekouras +@okmttdhr @ntsekouras = 18.1.0 = @@ -1951,7 +2423,7 @@ The following contributors merged PRs in this release: - Rich text: Fix typing into empty flex element. ([59473](https://github.com/WordPress/gutenberg/pull/59473)) - URLPopover: Fix a problem with the layout of link settings. ([58906](https://github.com/WordPress/gutenberg/pull/58906)) - Fix issue with appender jumping when creating a new pattern. ([59582](https://github.com/WordPress/gutenberg/pull/59582)) -- Allow event bubbling even if keydown is passed. ([59474](https://github.com/WordPress/gutenberg/pull/59474)) +- Allow event bubbling even if keydown is passed. ([59474](https://github.com/WordPress/gutenberg/pull/59474)) #### Custom Fields - Block Bindings: Fix console error when selecting a bound block. ([59598](https://github.com/WordPress/gutenberg/pull/59598)) @@ -2872,7 +3344,7 @@ The following contributors merged PRs in this release: - Docs: Copy and formatting edits for the "Static or Dynamic rendering" guide. ([58681](https://github.com/WordPress/gutenberg/pull/58681)) - Docs: Copy and formatting edits for the "The block in the Editor" guide. ([58697](https://github.com/WordPress/gutenberg/pull/58697)) - Docs: Copy and formatting edits for the "The block wrapper" guide. ([58704](https://github.com/WordPress/gutenberg/pull/58704)) -- Docs: Copy and formatting edits for the "Working with Javascript for the Block Editor" guide. ([58651](https://github.com/WordPress/gutenberg/pull/58651)) +- Docs: Copy and formatting edits for the "Working with JavaScript for the Block Editor" guide. ([58651](https://github.com/WordPress/gutenberg/pull/58651)) - Docs: Copy and formatting edits for the "block.json" guide. ([58732](https://github.com/WordPress/gutenberg/pull/58732)) - Docs: Copy edits and list formatting for main Block Editor Handbook readme. ([58652](https://github.com/WordPress/gutenberg/pull/58652)) - Docs: Fix list formatting and some grammar in the Entities explanation doc. ([58655](https://github.com/WordPress/gutenberg/pull/58655)) @@ -3091,7 +3563,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@ramonjd +@ramonjd = 17.7.0-rc.1 = @@ -3446,7 +3918,7 @@ The following contributors merged PRs in this release: - Docs: Copy and formatting edits for the "Static or Dynamic rendering" guide. ([58681](https://github.com/WordPress/gutenberg/pull/58681)) - Docs: Copy and formatting edits for the "The block in the Editor" guide. ([58697](https://github.com/WordPress/gutenberg/pull/58697)) - Docs: Copy and formatting edits for the "The block wrapper" guide. ([58704](https://github.com/WordPress/gutenberg/pull/58704)) -- Docs: Copy and formatting edits for the "Working with Javascript for the Block Editor" guide. ([58651](https://github.com/WordPress/gutenberg/pull/58651)) +- Docs: Copy and formatting edits for the "Working with JavaScript for the Block Editor" guide. ([58651](https://github.com/WordPress/gutenberg/pull/58651)) - Docs: Copy and formatting edits for the "block.json" guide. ([58732](https://github.com/WordPress/gutenberg/pull/58732)) - Docs: Copy edits and list formatting for main Block Editor Handbook readme. ([58652](https://github.com/WordPress/gutenberg/pull/58652)) - Docs: Fix list formatting and some grammar in the Entities explanation doc. ([58655](https://github.com/WordPress/gutenberg/pull/58655)) @@ -3673,7 +4145,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@dd32 +@dd32 = 17.6.2 = @@ -4191,7 +4663,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@andrewserong @t-hamano @luisherranz @pbking +@andrewserong @t-hamano @luisherranz @pbking = 17.6.0-rc.1 = @@ -4618,7 +5090,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@fullofcaffeine +@fullofcaffeine @@ -4635,7 +5107,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@youknowriad @fullofcaffeine +@youknowriad @fullofcaffeine @@ -4908,7 +5380,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@glendaviesnz +@glendaviesnz @@ -4940,7 +5412,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@ellatrix +@ellatrix @@ -5015,7 +5487,7 @@ The following contributors merged PRs in this release: - Gallery: Hide some controls when multi-editing blocks. ([57378](https://github.com/WordPress/gutenberg/pull/57378)) - Image Block: Get lightbox trigger button ref via data-wp-init. ([57089](https://github.com/WordPress/gutenberg/pull/57089)) - Image: Hide caption control when multi-editing images. ([57357](https://github.com/WordPress/gutenberg/pull/57357)) -- Video: Hide some controls when multi-editing blocks. ([57375](https://github.com/WordPress/gutenberg/pull/57375)) +- Video: Hide some controls when multi-editing blocks. ([57375](https://github.com/WordPress/gutenberg/pull/57375)) - Image Block: Fix deprecation when width/height attribute is number. ([57063](https://github.com/WordPress/gutenberg/pull/57063)) #### Patterns @@ -5028,7 +5500,7 @@ The following contributors merged PRs in this release: - Fix image upload bug. ([57040](https://github.com/WordPress/gutenberg/pull/57040)) - Reduce clearance around the Frame in the site editor. ([57023](https://github.com/WordPress/gutenberg/pull/57023)) - Swap Template: Show the right templates for the right post type. ([57149](https://github.com/WordPress/gutenberg/pull/57149)) -- Save Button: Fix the translation of the Activate button. ([57147](https://github.com/WordPress/gutenberg/pull/57147)) +- Save Button: Fix the translation of the Activate button. ([57147](https://github.com/WordPress/gutenberg/pull/57147)) - SlotFill: Allow contextual SlotFillProviders. ([56779](https://github.com/WordPress/gutenberg/pull/56779)) #### Post Editor @@ -5257,7 +5729,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@glendaviesnz +@glendaviesnz @@ -5946,7 +6418,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@jorgefilipecosta +@jorgefilipecosta = 17.2.0 = @@ -6190,7 +6662,7 @@ The following contributors merged PRs in this release: - Docs: Fundamentals of Block Development - File structure of a block. ([56551](https://github.com/WordPress/gutenberg/pull/56551)) - Docs: Fundamentals of Block Development - Registration of a block. ([56334](https://github.com/WordPress/gutenberg/pull/56334)) - Docs: Fundamentals of Block Development - The block wrapper. ([56596](https://github.com/WordPress/gutenberg/pull/56596)) -- Docs: Fundamentals of Block Development - Working with Javascript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553)) +- Docs: Fundamentals of Block Development - Working with JavaScript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553)) - Docs: Fundamentals of Block Development - block.json. ([56435](https://github.com/WordPress/gutenberg/pull/56435)) - Docs: Improve downloadBlob example. ([56225](https://github.com/WordPress/gutenberg/pull/56225)) - Documentation - Block Editor Handbook - Add end user documentation about Block Editor as a resource on the Landing Page of the Block Editor Handbook. ([49854](https://github.com/WordPress/gutenberg/pull/49854)) @@ -6519,7 +6991,7 @@ The following contributors merged PRs in this release: - Docs: Fundamentals of Block Development - File structure of a block. ([56551](https://github.com/WordPress/gutenberg/pull/56551)) - Docs: Fundamentals of Block Development - Registration of a block. ([56334](https://github.com/WordPress/gutenberg/pull/56334)) - Docs: Fundamentals of Block Development - The block wrapper. ([56596](https://github.com/WordPress/gutenberg/pull/56596)) -- Docs: Fundamentals of Block Development - Working with Javascript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553)) +- Docs: Fundamentals of Block Development - Working with JavaScript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553)) - Docs: Fundamentals of Block Development - block.json. ([56435](https://github.com/WordPress/gutenberg/pull/56435)) - Docs: Improve downloadBlob example. ([56225](https://github.com/WordPress/gutenberg/pull/56225)) - Documentation - Block Editor Handbook - Add end user documentation about Block Editor as a resource on the Landing Page of the Block Editor Handbook. ([49854](https://github.com/WordPress/gutenberg/pull/49854)) @@ -7605,7 +8077,7 @@ The following contributors merged PRs in this release: ## Changelog This copies the commits from the 16.7.1 patch release into the 16.8.0 main release. - + ### Tools #### Build Tooling @@ -9064,7 +9536,7 @@ The following contributors merged PRs in this release: - Button: Remove default border from the destructive button. ([53607](https://github.com/WordPress/gutenberg/pull/53607)) - LineHeightControl: Allow for more granular control of decimal places. ([52902](https://github.com/WordPress/gutenberg/pull/52902)) - Snackbar: Design and motion improvements. ([53248](https://github.com/WordPress/gutenberg/pull/53248)) -- Modal: +- Modal: - Add `headerActions` prop to enable buttons or other elements to be injected in the header. ([53328](https://github.com/WordPress/gutenberg/pull/53328)) - Enhance overlay interactions, enabling outside interactions without dismissal. ([52994](https://github.com/WordPress/gutenberg/pull/52994)) - ProgressBar: Update colors, including gray 300 for track color ([53349](https://github.com/WordPress/gutenberg/pull/53349)), theme system accent for indicator color ([53347](https://github.com/WordPress/gutenberg/pull/53347)), and the theme accent color variable. ([53632](https://github.com/WordPress/gutenberg/pull/53632)). @@ -9074,7 +9546,7 @@ The following contributors merged PRs in this release: - Add a `stretch` option to block's vertical alignment options. ([53325](https://github.com/WordPress/gutenberg/pull/53325)) - Exit upon pressing enter in an empty paragraph at the end of the block. ([53311](https://github.com/WordPress/gutenberg/pull/53311)) - Classic block: Increase dimensions of modal and allow toggling fullscreen. ([53449](https://github.com/WordPress/gutenberg/pull/53449)) -- Details block: +- Details block: - Add `accordion` and `toggle` keywords to improve block's discoverability. ([53501](https://github.com/WordPress/gutenberg/pull/53501)) - Add layout and block spacing options. ([53282](https://github.com/WordPress/gutenberg/pull/53282)) - File block: Add block spacing options. ([45107](https://github.com/WordPress/gutenberg/pull/45107)) @@ -9114,7 +9586,7 @@ The following contributors merged PRs in this release: ### Bug Fixes -#### Commands +#### Commands - Style tweaks to fix metrics for resting and no results view in command palette. ([53497](https://github.com/WordPress/gutenberg/pull/53497)) - Order template results in Site Editor, to fix some templates not displaying. ([53286](https://github.com/WordPress/gutenberg/pull/53286)) - Don't allow access to Styles-related pages via the command palette in the hybrid theme. ([53123](https://github.com/WordPress/gutenberg/pull/53123)) @@ -9122,12 +9594,12 @@ The following contributors merged PRs in this release: #### Block Library - Button block: Avoid losing user changes when the `ButtonEdit` component re-renders. ([53507](https://github.com/WordPress/gutenberg/pull/53507)) - Cover block: Fix flickering when inserted in templates and also fix `isDark` calculation bugs. ([53253](https://github.com/WordPress/gutenberg/pull/53253)) -- Footnotes block: +- Footnotes block: - Ensure autosave works and escapes quotes as expected. ([53664](https://github.com/WordPress/gutenberg/pull/53664)) - Fix accidental override. ([53663](https://github.com/WordPress/gutenberg/pull/53663)) - Fix recursion into updating attributes when attributes is not an object. ([53257](https://github.com/WordPress/gutenberg/pull/53257)) - Remove Footnotes when interactive formatting is disabled. ([53474](https://github.com/WordPress/gutenberg/pull/53474)) -- Image block: +- Image block: - Fix image stretching with only height. ([53443](https://github.com/WordPress/gutenberg/pull/53443)) - Don't render `DimensionsTool` if it is not resizable. ([53181](https://github.com/WordPress/gutenberg/pull/53181)) - Fix stretched images constrained by max-width. ([53274](https://github.com/WordPress/gutenberg/pull/53274)) @@ -9243,7 +9715,7 @@ The following contributors merged PRs in this release: - Fix outdated specification in the "Anatomy of a Block". ([53581](https://github.com/WordPress/gutenberg/pull/53581)) #### How To Guides -- Block Tutorial: +- Block Tutorial: - Adds import from `@wordpress/i18n` in code example. ([53504](https://github.com/WordPress/gutenberg/pull/53504)) - Adds package.json configuration instructions to tutorial. ([53689](https://github.com/WordPress/gutenberg/pull/53689)) - Building a Custom Block Editor: Consolidate and update the guide. ([53159](https://github.com/WordPress/gutenberg/pull/53159)) @@ -9259,7 +9731,7 @@ The following contributors merged PRs in this release: - Edit Post: Update "PluginDocumentSettingPanel" documentation. ([53393](https://github.com/WordPress/gutenberg/pull/53393)) - Interface: Fix "complimentary" typo with "complementary". ([53413](https://github.com/WordPress/gutenberg/pull/53413)) -#### Interactivity API +#### Interactivity API - Revamp of README to include API Reference among other indications. ([53385](https://github.com/WordPress/gutenberg/pull/53385)) - Add missing section in ToC and minor improvements to Getting Started Guide. ([53362](https://github.com/WordPress/gutenberg/pull/53362)) - Update Interactivity API package README with clear references to documentation. ([53388](https://github.com/WordPress/gutenberg/pull/53388)) @@ -9281,7 +9753,7 @@ The following contributors merged PRs in this release: #### Block Library - Button block: Replace the `isSmall` deprecated prop in the `WidthPanel`. ([53472](https://github.com/WordPress/gutenberg/pull/53472)) - Details block: Remove unnecessary comment attributes. ([51610](https://github.com/WordPress/gutenberg/pull/51610)) -- Footnotes block: +- Footnotes block: - Add some test coverage for footnotes logic in useEntityBlockEditor. ([53376](https://github.com/WordPress/gutenberg/pull/53376)) - Checking type before using count(). ([53660](https://github.com/WordPress/gutenberg/pull/53660)) - LinkControl/LinkUI: Remove unused `className` prop. ([53348](https://github.com/WordPress/gutenberg/pull/53348)) @@ -9649,7 +10121,7 @@ The following contributors merged PRs in this release: ### Tools - Add GH action to enforce PR labels. ([52760](https://github.com/WordPress/gutenberg/pull/52760)) -- Changelog automation: +- Changelog automation: - Make Accessibility a top-level section. ([52900](https://github.com/WordPress/gutenberg/pull/52900)) - Update to work with consolidated a11y labels. ([52896](https://github.com/WordPress/gutenberg/pull/52896)) - Use the correct label to filter Mobile app PRs. ([53024](https://github.com/WordPress/gutenberg/pull/53024)) @@ -9948,7 +10420,7 @@ The following contributors merged PRs in this release: #### Project Management - Update issue gardening automation with new label. ([52173](https://github.com/WordPress/gutenberg/pull/52173)) - Revert "Update Changelog for 16.1.2". ([52433](https://github.com/WordPress/gutenberg/pull/52433)) -- Github workflow: Add a PHP backport changes action. ([52096](https://github.com/WordPress/gutenberg/pull/52096)) +- GitHub workflow: Add a PHP backport changes action. ([52096](https://github.com/WordPress/gutenberg/pull/52096)) ## First time contributors @@ -9987,7 +10459,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@getdave @mcsf +@getdave @mcsf = 16.2.0 = @@ -10051,13 +10523,13 @@ The following contributors merged PRs in this release: - Footnotes: save numbering through the entity provider (https://github.com/WordPress/gutenberg/pull/52423) #### Code Quality / Performance -- Iframe: avoid asset parsing & fix script localisation +- Iframe: avoid asset parsing & fix script localisation ## Contributors The following contributors merged PRs in this release: -@ellatrix @ockham @t-hamano +@ellatrix @ockham @t-hamano = 16.2.0-rc.1 = @@ -10310,7 +10782,7 @@ The following contributors merged PRs in this release: - Update delete page button label. ([51812](https://github.com/WordPress/gutenberg/pull/51812)) - Update versions in WP for 6.3. ([51984](https://github.com/WordPress/gutenberg/pull/51984)) - Wrap "Move to trash" and "Switch to draft" buttons when labels are too long to fit on a single row. ([52249](https://github.com/WordPress/gutenberg/pull/52249)) -- [Github-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. ([49082](https://github.com/WordPress/gutenberg/pull/49082)) +- [GitHub-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. ([49082](https://github.com/WordPress/gutenberg/pull/49082)) #### Block Library - Block Editor: Unify texts for Create pattern modal. ([52151](https://github.com/WordPress/gutenberg/pull/52151)) @@ -10625,7 +11097,7 @@ The following contributors merged PRs in this release: - Update delete page button label. ([51812](https://github.com/WordPress/gutenberg/pull/51812)) - Update versions in WP for 6.3. ([51984](https://github.com/WordPress/gutenberg/pull/51984)) - Wrap "Move to trash" and "Switch to draft" buttons when labels are too long to fit on a single row. ([52249](https://github.com/WordPress/gutenberg/pull/52249)) -- [Github-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. ([49082](https://github.com/WordPress/gutenberg/pull/49082)) +- [GitHub-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. ([49082](https://github.com/WordPress/gutenberg/pull/49082)) #### Block Library - Block Editor: Unify texts for Create pattern modal. ([52151](https://github.com/WordPress/gutenberg/pull/52151)) @@ -10951,7 +11423,7 @@ The following contributors merged PRs in this release: #### Block Variations - [Block Library - Post Terms]: Custom taxonomies do not show icons when transforming from the toolbar. ([51476](https://github.com/WordPress/gutenberg/pull/51476)) -#### Page Content Focus +#### Page Content Focus - Switch to Page panel when deselecting a block [51881](https://github.com/WordPress/gutenberg/pull/51881) - Don't show 'Back to page' notification when navigating away from page [51880](https://github.com/WordPress/gutenberg/pull/51880) - useBlockSync(): Reset inner blocks when component unmounts [51783](https://github.com/WordPress/gutenberg/pull/51783) @@ -11091,7 +11563,7 @@ The following contributors merged PRs in this release: - Babel config: Enable useSpread option for JSX transform to reduce transpilation. ([51574](https://github.com/WordPress/gutenberg/pull/51574)) - Lodash: Remove from lint staged type check. ([51698](https://github.com/WordPress/gutenberg/pull/51698)) - Performance Tests: Update the base point to compare against. ([51689](https://github.com/WordPress/gutenberg/pull/51689)) -- wp-env: Try to fix failing PHP Github actions. ([51513](https://github.com/WordPress/gutenberg/pull/51513)) +- wp-env: Try to fix failing PHP GitHub actions. ([51513](https://github.com/WordPress/gutenberg/pull/51513)) - npm lockfile: Hoist reakit and date-fns packages to the top. ([51500](https://github.com/WordPress/gutenberg/pull/51500)) #### Plugin @@ -11110,7 +11582,7 @@ The following PRs were merged by first time contributors: The following contributors merged PRs in this release: -@aaronrobertshaw @afercia @alexstine @andrewserong @aristath @artemiomorales @aurooba @bangank36 @c4rl0sbr4v0 @carolinan @ciampo @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanfra @kozer @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @okmttdhr @paulopmt1 @pbking @peterwilsoncc @pooja-muchandikar @ramonjd @richtabor @samnajian @SantosGuillamot @SavPhill @SaxonF @scruffian @shimotmk @Sidsector9 @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @walbo @WunderBart @xerpa43 @youknowriad @priethor @ajlende @mirka +@aaronrobertshaw @afercia @alexstine @andrewserong @aristath @artemiomorales @aurooba @bangank36 @c4rl0sbr4v0 @carolinan @ciampo @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanfra @kozer @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @okmttdhr @paulopmt1 @pbking @peterwilsoncc @pooja-muchandikar @ramonjd @richtabor @samnajian @SantosGuillamot @SavPhill @SaxonF @scruffian @shimotmk @Sidsector9 @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @walbo @WunderBart @xerpa43 @youknowriad @priethor @ajlende @mirka @@ -11368,7 +11840,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@hellofromtonya @ndiego +@hellofromtonya @ndiego = 15.9.0 = @@ -11428,7 +11900,7 @@ The following contributors merged PRs in this release: - Remove `unwrap` from transforms and add `ungroup` to more blocks. ([50385](https://github.com/WordPress/gutenberg/pull/50385)) - Add new API to allow inserter items to be prioritised. ([50510](https://github.com/WordPress/gutenberg/pull/50510)) - Integrate `prioritizedInserterBlocks` API to slash inserter. ([50658](https://github.com/WordPress/gutenberg/pull/50658)) - + #### Global Styles - Custom CSS: Force display of in custom css input boxes to LTR. ([50768](https://github.com/WordPress/gutenberg/pull/50768)) - Styles Navigation Screen: Add Style Book. ([50566](https://github.com/WordPress/gutenberg/pull/50566)) @@ -11447,7 +11919,7 @@ The following contributors merged PRs in this release: #### Accessibility - Modals: Update the Cancel action's button design. ([50544](https://github.com/WordPress/gutenberg/pull/50544)) - Writing flow: Improve keyboard navigation on certain input types. ([43667](https://github.com/WordPress/gutenberg/pull/43667)) - + #### Icons - Add new `HeadingLevel` icons. ([50856](https://github.com/WordPress/gutenberg/pull/50856)) - Smaller external link icon. ([50728](https://github.com/WordPress/gutenberg/pull/50728)) @@ -12159,7 +12631,7 @@ Continued the work refactor away from Lodash usages to reduce the build size - Re-write of the landing page. ([49643](https://github.com/WordPress/gutenberg/pull/49643)) - Improve insertBlock(s) documentation. ([50078](https://github.com/WordPress/gutenberg/pull/50078)) - Small Typo: Remove dots. ([49853](https://github.com/WordPress/gutenberg/pull/49853)) - + ### Code Quality - Fix PrivateInserter import. ([50038](https://github.com/WordPress/gutenberg/pull/50038)) @@ -12177,7 +12649,7 @@ Continued the work refactor away from Lodash usages to reduce the build size - Migrate CPT end-to-end tests to Playwright. ([50031](https://github.com/WordPress/gutenberg/pull/50031)) - Fonts API: Add tests for gutenberg_add_registered_fonts_to_theme_json(). ([50049](https://github.com/WordPress/gutenberg/pull/50049)) - Expand multi-line block tests. ([49732](https://github.com/WordPress/gutenberg/pull/49732)) -- Rich text test helpers mimic user events. ([49804](https://github.com/WordPress/gutenberg/pull/49804)) +- Rich text test helpers mimic user events. ([49804](https://github.com/WordPress/gutenberg/pull/49804)) - Fix editor canvas detaching error in end-to-end tests. ([49374](https://github.com/WordPress/gutenberg/pull/49374)) #### Build Tooling @@ -12347,7 +12819,7 @@ The following contributors merged PRs in this release: ### Performance -- Continued the work refactor away from Lodash usages to reduce the build size +- Continued the work refactor away from Lodash usages to reduce the build size ([49725](https://github.com/WordPress/gutenberg/pull/49725), [49724](https://github.com/WordPress/gutenberg/pull/49724), [49638](https://github.com/WordPress/gutenberg/pull/49638), [49654](https://github.com/WordPress/gutenberg/pull/49654), [49639](https://github.com/WordPress/gutenberg/pull/49639), [49637](https://github.com/WordPress/gutenberg/pull/49637), [49727](https://github.com/WordPress/gutenberg/pull/49727)) ### Documentation @@ -13043,7 +13515,7 @@ The following contributors merged PRs in this release: - Create automatic change higher order reducer. ([48312](https://github.com/WordPress/gutenberg/pull/48312)) - [Inserter]: Preload media categories empty check - client side. ([47503](https://github.com/WordPress/gutenberg/pull/47503)) -#### Post Editor +#### Post Editor - Revert iframed editor for WP core only. ([48076](https://github.com/WordPress/gutenberg/pull/48076)) - PageAttributesCheck: Return boolean value directly from the selector. ([48336](https://github.com/WordPress/gutenberg/pull/48336)) - Apply busy status to the publish button in progress and unify button width. ([48444](https://github.com/WordPress/gutenberg/pull/48444)) @@ -13161,7 +13633,7 @@ The following contributors merged PRs in this release: ### Performance -#### Block Editor +#### Block Editor - Block Editor: Improve empty `getBlockParents()` perf. ([48242](https://github.com/WordPress/gutenberg/pull/48242)) - Fix perf regression in duotone hooks. ([48401](https://github.com/WordPress/gutenberg/pull/48401)) - Writing flow: Avoid recalc style on every selection change. ([48409](https://github.com/WordPress/gutenberg/pull/48409)) @@ -13192,7 +13664,7 @@ The following contributors merged PRs in this release: - Lodash: Remove some `_.get()` from Image block. ([48489](https://github.com/WordPress/gutenberg/pull/48489)) - Playwright: Fix request utils for non Docker envs. ([48206](https://github.com/WordPress/gutenberg/pull/48206)) - [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. ([48352](https://github.com/WordPress/gutenberg/pull/48352)) -- Add a manual performance job that we can trigger from Github UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302)) +- Add a manual performance job that we can trigger from GitHub UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302)) - Track new front-end metric: LCP-TTFB. ([48288](https://github.com/WordPress/gutenberg/pull/48288)) ### Documentation @@ -13206,7 +13678,7 @@ The following contributors merged PRs in this release: - Updates to the curating the editor experience to include 6.1 & 6.2 items. ([48294](https://github.com/WordPress/gutenberg/pull/48294)) ### Tools -#### Testing +#### Testing - Migrate `switch-to-draft` to Playwright. ([48120](https://github.com/WordPress/gutenberg/pull/48120)) - VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. ([48260](https://github.com/WordPress/gutenberg/pull/48260)) - Update end-to-end test snapshots to Jest 29 default. ([48626](https://github.com/WordPress/gutenberg/pull/48626)) @@ -13268,7 +13740,7 @@ The following contributors merged PRs in this release: - Create automatic change higher order reducer. ([48312](https://github.com/WordPress/gutenberg/pull/48312)) - [Inserter]: Preload media categories empty check - client side. ([47503](https://github.com/WordPress/gutenberg/pull/47503)) -#### Post Editor +#### Post Editor - Revert iframed editor for WP core only. ([48076](https://github.com/WordPress/gutenberg/pull/48076)) - PageAttributesCheck: Return boolean value directly from the selector. ([48336](https://github.com/WordPress/gutenberg/pull/48336)) - Apply busy status to the publish button in progress and unify button width. ([48444](https://github.com/WordPress/gutenberg/pull/48444)) @@ -13386,7 +13858,7 @@ The following contributors merged PRs in this release: ### Performance -#### Block Editor +#### Block Editor - Block Editor: Improve empty `getBlockParents()` perf. ([48242](https://github.com/WordPress/gutenberg/pull/48242)) - Fix perf regression in duotone hooks. ([48401](https://github.com/WordPress/gutenberg/pull/48401)) - Writing flow: Avoid recalc style on every selection change. ([48409](https://github.com/WordPress/gutenberg/pull/48409)) @@ -13417,7 +13889,7 @@ The following contributors merged PRs in this release: - Lodash: Remove some `_.get()` from Image block. ([48489](https://github.com/WordPress/gutenberg/pull/48489)) - Playwright: Fix request utils for non Docker envs. ([48206](https://github.com/WordPress/gutenberg/pull/48206)) - [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. ([48352](https://github.com/WordPress/gutenberg/pull/48352)) -- Add a manual performance job that we can trigger from Github UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302)) +- Add a manual performance job that we can trigger from GitHub UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302)) - Track new front-end metric: LCP-TTFB. ([48288](https://github.com/WordPress/gutenberg/pull/48288)) ### Documentation @@ -13431,7 +13903,7 @@ The following contributors merged PRs in this release: - Updates to the curating the editor experience to include 6.1 & 6.2 items. ([48294](https://github.com/WordPress/gutenberg/pull/48294)) ### Tools -#### Testing +#### Testing - Migrate `switch-to-draft` to Playwright. ([48120](https://github.com/WordPress/gutenberg/pull/48120)) - VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. ([48260](https://github.com/WordPress/gutenberg/pull/48260)) - Update end-to-end test snapshots to Jest 29 default. ([48626](https://github.com/WordPress/gutenberg/pull/48626)) @@ -13690,7 +14162,7 @@ The following contributors merged PRs in this release: - [Automated Testing]: Fix wrong button fixture. ([48305](https://github.com/WordPress/gutenberg/pull/48305)) #### Build Tooling -- Add a manual performance job that we can trigger from Github UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302)) +- Add a manual performance job that we can trigger from GitHub UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302)) - Add command to run performance tests in debug mode. ([48614](https://github.com/WordPress/gutenberg/pull/48614)) - Make the performance tests more stable. ([48094](https://github.com/WordPress/gutenberg/pull/48094)) - SpacingSizesControl: Fix white dot on thumb. ([48574](https://github.com/WordPress/gutenberg/pull/48574)) @@ -13785,7 +14257,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@jsnajdr +@jsnajdr = 15.2.2 = @@ -14870,7 +15342,7 @@ The following contributors merged PRs in this release: ### Bug Fixes #### Block Editor -- Move block variation picker styles in the iframe ([47109](https://github.com/WordPress/gutenberg/pull/47109)) +- Move block variation picker styles in the iframe ([47109](https://github.com/WordPress/gutenberg/pull/47109)) - Add useBlockPreview styles in iframe ([47110](https://github.com/WordPress/gutenberg/pull/47110)) #### Block Library @@ -15425,7 +15897,7 @@ Fixes compatibility with WordPress 6.0.x. This includes the following PRs: - #46809 Broadly, this needed to include the two refactors of the Theme_JSON compatibility files, along with two fixes switching `wp_*` and `gutenberg_*` function variants as needed. - + ## Contributors The following contributors were involved with this release: @@ -15732,7 +16204,7 @@ The following contributors merged PRs in this release: ### Tools #### Build Tooling -- Adds Github Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247)) +- Adds GitHub Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247)) - Prevent api-fetch and core-data from being imported in the block editor package. ([46302](https://github.com/WordPress/gutenberg/pull/46302)) - Serialize the map objects properly in the Redux dev tools. ([46282](https://github.com/WordPress/gutenberg/pull/46282)) @@ -16010,7 +16482,7 @@ The following contributors merged PRs in this release: ### Tools #### Build Tooling -- Adds Github Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247)) +- Adds GitHub Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247)) - Prevent api-fetch and core-data from being imported in the block editor package. ([46302](https://github.com/WordPress/gutenberg/pull/46302)) - Serialize the map objects properly in the Redux dev tools. ([46282](https://github.com/WordPress/gutenberg/pull/46282)) @@ -16047,7 +16519,7 @@ The following contributors merged PRs in this release: The following contributors merged PRs in this release: -@youknowriad +@youknowriad = 14.7.2 = @@ -17408,7 +17880,7 @@ The following contributors merged PRs in this release: - Query Loop: Hide instructions for FormTokenField. ([44641](https://github.com/WordPress/gutenberg/pull/44641)) - Tag Cloud: Remove `strtolower` around taxonomy name. ([16112](https://github.com/WordPress/gutenberg/pull/16112)) - Video: Update placeholder style. ([44215](https://github.com/WordPress/gutenberg/pull/44215)) - + #### Components - FontSizePicker: Make control take up full width. ([44559](https://github.com/WordPress/gutenberg/pull/44559)) - Placeholder: Remove unnecessary background color. ([44497](https://github.com/WordPress/gutenberg/pull/44497)) @@ -17841,7 +18313,7 @@ The following PRs were merged by first time contributors: The following contributors merged PRs in this release: -@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad +@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad @@ -20218,7 +20690,7 @@ The following contributors merged PRs in this release: - JS Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook. ([42024](https://github.com/WordPress/gutenberg/pull/42024)) -### Accessibility +### Accessibility - Add aria-checked to the selected heading level menu item. ([42273](https://github.com/WordPress/gutenberg/pull/42273)) - Fix tabbing from first or last block in site editor. ([42036](https://github.com/WordPress/gutenberg/pull/42036)) @@ -20327,7 +20799,7 @@ The following contributors merged PRs in this release: - Tip: Covert component to TypeScript. ([42262](https://github.com/WordPress/gutenberg/pull/42262)) - VisuallyHidden: Convert component to TypeScript. ([42220](https://github.com/WordPress/gutenberg/pull/42220)) - Spacer: Complete TypeScript migration of component. ([42013](https://github.com/WordPress/gutenberg/pull/42013)) -- +- #### Components - Add eslint to prevent SSR breakage. ([42248](https://github.com/WordPress/gutenberg/pull/42248)) - Fix typos in components changelog. ([42244](https://github.com/WordPress/gutenberg/pull/42244)) @@ -20417,7 +20889,7 @@ The following contributors merged PRs in this release: ### Enhancements -#### UI +#### UI - Increase fade intensity during spotlight mode. ([40454](https://github.com/WordPress/gutenberg/pull/40454)) - Improvements to "inherit default layout" toggle. ([41893](https://github.com/WordPress/gutenberg/pull/41893)) - Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516)) @@ -20477,7 +20949,7 @@ The following contributors merged PRs in this release: - [Block Editor]: Fix content loss from `replaceInnerBlocks` with controlled blocks. ([41948](https://github.com/WordPress/gutenberg/pull/41948)) - Fix action button spacing on the widget editor. ([41915](https://github.com/WordPress/gutenberg/pull/41915)) - Render duotone presets in pattern preview. ([41249](https://github.com/WordPress/gutenberg/pull/41249)) - + #### Block Library - List v2: - Fix impossible to outdent multiple list items. ([41713](https://github.com/WordPress/gutenberg/pull/41713)) @@ -21793,7 +22265,7 @@ The following contributors merged PRs in this release: ### Bug Fixes -- Fix the position of the block inserter in between blocks ([40919](https://github.com/WordPress/gutenberg/pull/40919)) +- Fix the position of the block inserter in between blocks ([40919](https://github.com/WordPress/gutenberg/pull/40919)) = 13.2.0 = @@ -22163,7 +22635,7 @@ The following PRs were merged by first time contributors: - Fixed focus loss when navigating the guide component. ([40324](https://github.com/WordPress/gutenberg/pull/40324)) - Navigation block: After choosing an option from Select Menu, focus after block rerender. ([40390](https://github.com/WordPress/gutenberg/pull/40390)) - Block Styles: Remove unnecessary button role and 'onKeyDown' handler. ([40427](https://github.com/WordPress/gutenberg/pull/40427)) - + ### Performance - Added a context param to sidebar entity request. ([40148](https://github.com/WordPress/gutenberg/pull/40148)) @@ -22201,12 +22673,12 @@ The following PRs were merged by first time contributors: - Stop exporting individual color objects from color values file. ([40387](https://github.com/WordPress/gutenberg/pull/40387)) - Added reusable BlockPopover and BlockPopoverInbetween components. ([40441](https://github.com/WordPress/gutenberg/pull/40441)) - Cleaned BlockMover component and styles. ([40379](https://github.com/WordPress/gutenberg/pull/40379)) - + #### Packages - Block Editor: Remove unused sub-components in list view. ([40448](https://github.com/WordPress/gutenberg/pull/40448)) - Data: Cancel render queue in a more straightforward way. ([40433](https://github.com/WordPress/gutenberg/pull/40433)) - + #### Plugin - Added `edit` context to patterns REST controllers. ([40259](https://github.com/WordPress/gutenberg/pull/40259)) @@ -39250,7 +39722,7 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p * `is_gutenberg_page` incorrectly assumes `get_current_screen` exists, add check. * Brings code inline with CSS standards by switching font weight to numeric values. * Wrapped component would not the most up-to-date store values if it incurred a store state change during its own mount (e.g. dispatching during its own constructor), resolved by rerunning selection. -* Display an error message if Javascript is disabled. +* Display an error message if JavaScript is disabled. * Update to React 16.6.3. * Adds missing components dependency for RichText. * Refactors list block to remove previously exposed RichText/TinyMCE logic. diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md index 4c8950eb5e7cd..f304ec9cd3a48 100644 --- a/docs/contributors/code/release.md +++ b/docs/contributors/code/release.md @@ -320,13 +320,13 @@ If an RC already exists for a new version, you _need_ to cherry-pick the same co The cherry-picking process can be automated with the [`npm run cherry-pick`](/docs/contributors/code/auto-cherry-picking.md) script, but be sure to use the `Backport to Gutenberg Minor Release` label when running the script. -You must also ensure that all PRs being included are assigned to the Github Milestone on which the minor release is based. Bear in mind, that when PRs are _merged_ they are automatically assigned a milestone for the next _stable_ release. Therefore you will need to go back through each PR in Github and re-assign the Milestone. +You must also ensure that all PRs being included are assigned to the GitHub Milestone on which the minor release is based. Bear in mind, that when PRs are _merged_ they are automatically assigned a milestone for the next _stable_ release. Therefore you will need to go back through each PR in GitHub and re-assign the Milestone. For example, if you are releasing version `12.5.4`, then all PRs picked for that release must be unassigned from the `12.6` Milestone and instead assigned to the `12.5` Milestone. Once cherry picking is complete, you can also remove the `Backport to Gutenberg Minor Release` label from the PRs. -Once you have the stable release branch in order and the correct Milestone assigned to your PRs you can _push the branch to Github_ and continue with the release process using the Github website GUI. +Once you have the stable release branch in order and the correct Milestone assigned to your PRs you can _push the branch to GitHub_ and continue with the release process using the GitHub website GUI. #### Running the minor release diff --git a/docs/contributors/folder-structure.md b/docs/contributors/folder-structure.md index cbad182a58f44..e20ba81708a06 100644 --- a/docs/contributors/folder-structure.md +++ b/docs/contributors/folder-structure.md @@ -76,7 +76,7 @@ The following snippet explains how the Gutenberg repository is structured omitti │ Set of documentation pages composing the [Block editor handbook](https://developer.wordpress.org/block-editor/). │ ├── platform-docs - │ Documentation website targetted to non WordPress developpers + │ Documentation website targeted to non WordPress developers │ using Gutenberg in their own applications. │ Deployed on [https://wordpress.org/gutenberg-framework/](https://wordpress.org/gutenberg-framework/). │ diff --git a/docs/explanations/README.md b/docs/explanations/README.md index 04d9f8e9e15b5..2d0da6cabdf67 100644 --- a/docs/explanations/README.md +++ b/docs/explanations/README.md @@ -8,5 +8,5 @@ - [Block Editor Performance](/docs/explanations/architecture/performance.md). - What are the decision decisions behind the Data Module? - [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md) -- [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md/#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package) +- [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package) - [Template and template parts flows](/docs/explanations/architecture/full-site-editing-templates.md) diff --git a/docs/explanations/architecture/performance.md b/docs/explanations/architecture/performance.md index de3b7b5dcdbd5..4c8b6386b9263 100644 --- a/docs/explanations/architecture/performance.md +++ b/docs/explanations/architecture/performance.md @@ -69,7 +69,7 @@ The performance results for each commit are pushed to codevitals and can be seen It's thus very important to ensure that the metric being computed is stable. Meaning, if you run the same test twice with the same code and environment, you'll get results that are close. -Our performance job runs Github CI which means that we can't trust the consistency of the numbers that we get between two similar job runs. Github CI may allocate different CPU and memory resources for us over time for instance. To alleviate this problem, each time we run the performance job on the trunk branch, we compare the current commit's performance to a fixed reference commit hash, which allows us to track the relative difference between the current commit and the reference commit consistently regardless of environment changes. +Our performance job runs GitHub CI which means that we can't trust the consistency of the numbers that we get between two similar job runs. GitHub CI may allocate different CPU and memory resources for us over time for instance. To alleviate this problem, each time we run the performance job on the trunk branch, we compare the current commit's performance to a fixed reference commit hash, which allows us to track the relative difference between the current commit and the reference commit consistently regardless of environment changes. ### Update the reference commit @@ -77,7 +77,7 @@ Gutenberg supports only two WP versions, this impacts the performance job in two - The base WP version used to run the performance job needs to be updated, when the minimum version supported by Gutenberg changes. In order to do that, we rely on the `Tested up to` flag of the plugin's `readme.txt` file. So each time that flag is changed, the version used for the performance job is changed as well. - - Updating the WP version used for performance jobs means that there's a high chance that the reference commit used for performance test stability becomes incompatible with the WP version that is used. So every time, the `Tested up to` flag is updated in the `readme.txt` is changed, we also have to update the reference commit that is used in `.github/workflows/performance.yml`. + - Updating the WP version used for performance jobs means that there's a high chance that the reference commit used for performance test stability becomes incompatible with the WP version that is used. So every time, the `Tested up to` flag is updated in the `readme.txt` is changed, we also have to update the reference commit that is used in `.github/workflows/performance.yml`. The new reference commit hash that is chosen needs to meet the following requirements: diff --git a/docs/getting-started/fundamentals/README.md b/docs/getting-started/fundamentals/README.md index fd2941711dd01..42dbace9d7ba3 100644 --- a/docs/getting-started/fundamentals/README.md +++ b/docs/getting-started/fundamentals/README.md @@ -9,4 +9,4 @@ This section provides an introduction to the most relevant concepts in block dev 1. **[The block in the Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-in-the-editor):** How a block, as a React component, is loaded in the Block Editor and an overview of its structure. 1. **[Markup representation of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block):** How blocks are represented in the database, theme templates, and patterns. 1. **[Static or Dynamic rendering of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering):** How blocks generate their front-end output either dynamically or statically. -1. **[Javascript in the Block Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/javascript-in-the-block-editor):** How to work with modern Javascript when developing for the Block Editor. +1. **[JavaScript in the Block Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/javascript-in-the-block-editor):** How to work with modern JavaScript when developing for the Block Editor. diff --git a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md index 42d7363b6aa4d..348b95ba88da3 100644 --- a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md +++ b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md @@ -1,20 +1,20 @@ -# Working with Javascript for the Block Editor +# Working with JavaScript for the Block Editor Developing blocks for the Block Editor often involves using modern JavaScript (ESNext and JSX), and most examples here in the Block Editor Handbook are written in these syntaxes. -However, this form of JavaScript must be transformed into a browser-compatible format, necessitating a build step. This process transforms, bundles, and optimizes JavaScript source code and related assets into a format suitable for production environments. +However, this form of JavaScript must be transformed into a browser-compatible format, necessitating a build step. This process transforms, bundles, and optimizes JavaScript source code and related assets into a format suitable for production environments. ## JavaScript with a build process Using a build process for block development unlocks the full potential of modern JavaScript, facilitating the use of ESNext and JSX. -[ESNext](https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#standardization_process) refers to Javascript's most recent syntax and features. [JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension developed by the React project that enables you to write JavaScript that resembles HTML. +[ESNext](https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#standardization_process) refers to JavaScript's most recent syntax and features. [JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension developed by the React project that enables you to write JavaScript that resembles HTML. Since browsers cannot directly execute ESNext and JSX, these syntaxes must be transformed into browser-compatible JavaScript. [webpack](https://webpack.js.org/concepts/why-webpack/) is a pluggable tool that processes and bundles JavaScript for browser compatibility. [Babel](https://babeljs.io/), a plugin for webpack, converts ESNext and JSX into standard JavaScript. -Configuring webpack and Babel can be challenging, so it's recommended that you use the [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) package. This tool simplifies development by preconfiguring both, so you rarely need to write custom webpack or Babel configurations. +Configuring webpack and Babel can be challenging, so it's recommended that you use the [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) package. This tool simplifies development by preconfiguring both, so you rarely need to write custom webpack or Babel configurations. For an introduction, refer to the [Get started with wp-scripts](/docs/getting-started/devenv/get-started-with-wp-scripts.md) guide. @@ -28,21 +28,21 @@ The diagram below provides an overview of the build process when using the `wp-s - **Development Mode (`npm run start`):** This mode is tailored for active development. It skips minification for easier debugging, generates source maps for better error tracking, and watches your source files for changes. When a change is detected, it automatically rebuilds the affected files, allowing you to see updates in real-time. -The `wp-scripts` package also facilitates the use of JavaScript modules, allowing code distribution across multiple files and resulting in a streamlined bundle after the build process. The [block-development-example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) GitHub repository provides some good examples. +The `wp-scripts` package also facilitates the use of JavaScript modules, allowing code distribution across multiple files and resulting in a streamlined bundle after the build process. The [block-development-example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) GitHub repository provides some good examples.
In most situations, no customization will be needed, but you can provide a webpack.config.js when using wp-scripts to modify the build process to suit your needs.
-## Javascript without a build process +## JavaScript without a build process Integrating JavaScript into your WordPress projects without a build process can be the most straightforward approach in specific scenarios. This is particularly true for projects that don't leverage JSX or other advanced JavaScript features requiring compilation. -When you opt out of a build process, you interact directly with WordPress's [Javascript APIs](/docs/reference-guides/packages/) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file. +When you opt out of a build process, you interact directly with WordPress's [JavaScript APIs](/docs/reference-guides/packages/) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file. For example, suppose you're creating a script that registers a new block [variation](/docs/reference-guides/block-api/block-variations.md) using the `registerBlockVariation` function from the [`blocks`](/docs/reference-guides/packages/packages-blocks.md) package. You must include `wp-blocks` in your script's dependency array. This guarantees that the `wp.blocks.registerBlockVariation` method is available and defined by the time your script executes. -In the following example, the `wp-blocks` dependency is defined when enqueuing the `variations.js` file. +In the following example, the `wp-blocks` dependency is defined when enqueuing the `variations.js` file. ```php function example_enqueue_block_variations() { @@ -84,10 +84,10 @@ Refer to [Enqueueing assets in the Editor](/docs/how-to-guides/enqueueing-assets ## Additional resources - [Package reference](/docs/reference-guides/packages.md) -- [Get started with wp-scripts](/docs/getting-started/devenv/get-started-with-wp-scripts.md) -- [Enqueueing assets in the Editor](/docs/how-to-guides/enqueueing-assets-in-the-editor.md) -- [WordPress package handles](/docs/contributors/code/scripts.md) -- [Javascript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | MDN Web Docs +- [Get started with wp-scripts](/docs/getting-started/devenv/get-started-with-wp-scripts.md) +- [Enqueueing assets in the Editor](/docs/how-to-guides/enqueueing-assets-in-the-editor.md) +- [WordPress package handles](/docs/contributors/code/scripts.md) +- [JavaScript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | MDN Web Docs - [block-development-examples](https://github.com/WordPress/block-development-examples) | GitHub repository - [block-theme-examples](https://github.com/wptrainingteam/block-theme-examples) | GitHub repository - [How webpack and WordPress packages interact](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) | Developer Blog diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md index b57391a806cf6..641ecad07ab9b 100644 --- a/docs/getting-started/tutorial.md +++ b/docs/getting-started/tutorial.md @@ -156,7 +156,7 @@ Save the file and select the block in the Editor. You will now see both Color an #### Removing unnecessary code -For simplicity, the styling for the Copyright Date Block will be controlled entirely by the color and typography block supports. This block also does not have any front-end Javascript. Therefore, you don't need to specify stylesheets or a `viewScript` in the `block.json` file. +For simplicity, the styling for the Copyright Date Block will be controlled entirely by the color and typography block supports. This block also does not have any front-end JavaScript. Therefore, you don't need to specify stylesheets or a `viewScript` in the `block.json` file. 1. Remove the line for `editorStyle` 2. Remove the line for `style` diff --git a/docs/how-to-guides/data-basics/3-building-an-edit-form.md b/docs/how-to-guides/data-basics/3-building-an-edit-form.md index 34136ff408080..65c4d0a5486a0 100644 --- a/docs/how-to-guides/data-basics/3-building-an-edit-form.md +++ b/docs/how-to-guides/data-basics/3-building-an-edit-form.md @@ -215,7 +215,7 @@ As you can see, the `title` of an Entity Record is an object, but the `title` of This is no accident. Fields like `title`, `excerpt`, and `content` may contain [shortcodes](https://developer.wordpress.org/apis/handbook/shortcode/) or [dynamic blocks](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md), which means they can only be rendered on the server. For such fields, the REST API exposes both the `raw` markup _and_ the `rendered` string. For example, in the block editor, `content.rendered` could used as a visual preview, and `content.raw` could be used to populate the code editor. -So why is the `content` of an Edited Entity Record a string? Since Javascript is not be able to properly render arbitrary block markup, it stores only the `raw` markup without the `rendered` part. And since that's a string, the entire field becomes a string. +So why is the `content` of an Edited Entity Record a string? Since JavaScript is not be able to properly render arbitrary block markup, it stores only the `raw` markup without the `rendered` part. And since that's a string, the entire field becomes a string. We can now update `EditPageForm` accordingly. We can access the actions using the [`useDispatch`](/packages/data/README.md#usedispatch) hook similarly to how we use `useSelect` to access selectors: diff --git a/docs/how-to-guides/enqueueing-assets-in-the-editor.md b/docs/how-to-guides/enqueueing-assets-in-the-editor.md index 02d9020d351e3..fb0efb88e6796 100644 --- a/docs/how-to-guides/enqueueing-assets-in-the-editor.md +++ b/docs/how-to-guides/enqueueing-assets-in-the-editor.md @@ -18,7 +18,7 @@ There are different hooks to use depending on the answers to these questions, an Whenever you need to enqueue assets for the Editor itself (i.e. not the user-generated content), you should use the [`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/) hook coupled with the standard [`wp_enqueue_script`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) and [`wp_enqueue_style`](https://developer.wordpress.org/reference/functions/wp_enqueue_style/) functions. -Examples might be adding custom inspector or toolbar controls, registering block styles and variations in Javascript, registering Editor plugins, etc. +Examples might be adding custom inspector or toolbar controls, registering block styles and variations in JavaScript, registering Editor plugins, etc. ```php /** @@ -31,7 +31,7 @@ function example_enqueue_editor_assets() { ); wp_enqueue_style( 'example-editor-styles', - plugins_url( 'editor-styles.css', __FILE__ ) + plugins_url( 'editor-styles.css', __FILE__ ) ); } add_action( 'enqueue_block_editor_assets', 'example_enqueue_editor_assets' ); diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md index 69f0606c93649..f71bd67bfaf2e 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -310,20 +310,21 @@ There's one special setting property, `appearanceTools`, which is a boolean and To retain backward compatibility, the existing `add_theme_support` declarations that configure the block editor are retrofit in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, it'll be the same as setting `settings.color.custom` to `false`. If the `theme.json` contains any settings, these will take precedence over the values declared via `add_theme_support`. This is the complete list of equivalences: -| add_theme_support | theme.json setting | -| --------------------------- | --------------------------------------------------------- | -| `custom-line-height` | Set `typography.lineHeight` to `true`. | -| `custom-spacing` | Set `spacing.padding` to `true`. | -| `custom-units` | Provide the list of units via `spacing.units`. | -| `disable-custom-colors` | Set `color.custom` to `false`. | -| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`. | -| `disable-custom-gradients` | Set `color.customGradient` to `false`. | -| `editor-color-palette` | Provide the list of colors via `color.palette`. | -| `editor-font-sizes` | Provide the list of font size via `typography.fontSizes`. | -| `editor-gradient-presets` | Provide the list of gradients via `color.gradients`. | -| `appearance-tools` | Set `appearanceTools` to `true`. | -| `border` | Set `border: color, radius, style, width` to `true`. | -| `link-color ` | Set `color.link` to `true`. | +| add_theme_support | theme.json setting | +| --------------------------- | ------------------------------------------------------------- | +| `custom-line-height` | Set `typography.lineHeight` to `true`. | +| `custom-spacing` | Set `spacing.padding` to `true`. | +| `custom-units` | Provide the list of units via `spacing.units`. | +| `disable-custom-colors` | Set `color.custom` to `false`. | +| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`. | +| `disable-custom-gradients` | Set `color.customGradient` to `false`. | +| `editor-color-palette` | Provide the list of colors via `color.palette`. | +| `editor-font-sizes` | Provide the list of font size via `typography.fontSizes`. | +| `editor-gradient-presets` | Provide the list of gradients via `color.gradients`. | +| `editor-spacing-sizes` | Provide the list of spacing sizes via `spacing.spacingSizes`. | +| `appearance-tools` | Set `appearanceTools` to `true`. | +| `border` | Set `border: color, radius, style, width` to `true`. | +| `link-color ` | Set `color.link` to `true`. | #### Presets @@ -336,16 +337,7 @@ The following presets can be defined via `theme.json`: - `color.palette`: - generates 3 classes per preset value: color, background-color, and border-color. - generates a single custom property per preset value. -- `spacing.spacingScale`: used to generate an array of spacing preset sizes for use with padding, margin, and gap settings. - - `operator`: specifies how to calculate the steps with either `*` for multiplier, or `+` for sum. - - `increment`: the amount to increment each step by. Core by default uses a 'perfect 5th' multiplier of `1.5`. - - `steps`: the number of steps to generate in the spacing scale. The default is 7. To prevent the generation of the spacing presets, and to disable the related UI, this can be set to `0`. - - `mediumStep`: the steps in the scale are generated descending and ascending from a medium step, so this should be the size value of the medium space, without the unit. The default medium step is `1.5rem` so the mediumStep value is `1.5`. - - `unit`: the unit the scale uses, eg. `px, rem, em, %`. The default is `rem`. -- `spacing.spacingSizes`: themes can choose to include a static `spacing.spacingSizes` array of spacing preset sizes if they have a sequence of sizes that can't be generated via an increment or multiplier. - - `name`: a human readable name for the size, eg. `Small, Medium, Large`. - - `slug`: the machine readable name. In order to provide the best cross site/theme compatibility the slugs should be in the format, "10","20","30","40","50","60", with "50" representing the `Medium` size value. - - `size`: the size, including the unit, eg. `1.5rem`. It is possible to include fluid values like `clamp(2rem, 10vw, 20rem)`. +- `spacing.spacingSizes`/`spacing.spacingScale`: generates a single custom property per preset value. - `typography.fontSizes`: generates a single class and custom property per preset value. - `typography.fontFamilies`: generates a single custom property per preset value. diff --git a/docs/manifest.json b/docs/manifest.json index a257753046355..1704e6d711510 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -102,7 +102,7 @@ "parent": "fundamentals" }, { - "title": "Working with Javascript for the Block Editor", + "title": "Working with JavaScript for the Block Editor", "slug": "javascript-in-the-block-editor", "markdown_source": "../docs/getting-started/fundamentals/javascript-in-the-block-editor.md", "parent": "fundamentals" @@ -1121,6 +1121,12 @@ "markdown_source": "../packages/components/src/popover/README.md", "parent": "components" }, + { + "title": "ProgressBar", + "slug": "progress-bar", + "markdown_source": "../packages/components/src/progress-bar/README.md", + "parent": "components" + }, { "title": "QueryControls", "slug": "query-controls", diff --git a/docs/reference-guides/block-api/block-styles.md b/docs/reference-guides/block-api/block-styles.md index 90b6c06d18f59..b47b1a76a71f6 100644 --- a/docs/reference-guides/block-api/block-styles.md +++ b/docs/reference-guides/block-api/block-styles.md @@ -1,6 +1,6 @@ # Styles -Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/) for a full example. +Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Use styles and stylesheets](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md) for a full example on how to apply styles to a block. _Example:_ diff --git a/docs/reference-guides/block-api/block-variations.md b/docs/reference-guides/block-api/block-variations.md index 0440858810b65..8a0c6b1dd5bd6 100644 --- a/docs/reference-guides/block-api/block-variations.md +++ b/docs/reference-guides/block-api/block-variations.md @@ -1,12 +1,11 @@ # Variations -The Block Variations API allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied. +The Block Variations API allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied. Variations are an excellent way to create iterations of existing blocks without building entirely new blocks from scratch. To better understand this API, consider the Embed block. This block contains numerous variations for each type of embeddable content (WordPress, Youtube, etc.). Each Embed block variation shares the same underlying functionality for editing, saving, and so on. Besides the name and descriptive information, the main difference is the `providerNameSlug` attribute. Below is a simplified example of the variations in the Embed block. View the [source code](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/embed/variations.js) for the complete specification. - ```js variations: [ { @@ -38,7 +37,7 @@ A block variation is defined by an object that can contain the following fields: - `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks. - `example` (optional, type `Object`) – Provides structured data for the block preview. Set to `undefined` to disable the preview. See the [Block Registration API](/docs/reference-guides/block-api/block-registration.md#example-optional) for more details. - `scope` (optional, type `WPBlockVariationScope[]`) - Defaults to `block` and `inserter`. The list of scopes where the variation is applicable. Available options include: - - `block` - Used by blocks to filter specific block variations. `Columns` and `Query` blocks have such variations, which are passed to the [experimental BlockVariationPicker](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-variation-picker/README.md) component. This component handles displaying the variations and allows users to choose one of them. + - `block` - Used by blocks to filter specific block variations. `Columns` and `Query` blocks have such variations, which are passed to the [experimental BlockVariationPicker](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-variation-picker/README.md) component. This component handles displaying the variations and allows users to choose one of them. - `inserter` - Block variation is shown on the inserter. - `transform` - Block variation is shown in the component for variation transformations. - `isDefault` (optional, type `boolean`) – Defaults to `false`. Indicates whether the current variation is the default one (details below). @@ -55,13 +54,10 @@ Block variations can be declared during a block's registration by providing the To create a variation for an existing block, such as a Core block, use `wp.blocks.registerBlockVariation()`. This function accepts the name of the block and the object defining the variation. ```js -wp.blocks.registerBlockVariation( - 'core/embed', - { - name: 'custom-embed', - attributes: { providerNameSlug: 'custom' }, - } -); +wp.blocks.registerBlockVariation( 'core/embed', { + name: 'custom-embed', + attributes: { providerNameSlug: 'custom' }, +} ); ``` ## Removing a block variation @@ -102,17 +98,14 @@ By default, all variations will show up in the Inserter in addition to the origi For example, if you want Media & Text block to display the image on the right by default, you could create a variation like this: ```js - wp.blocks.registerBlockVariation( - 'core/media-text', - { - name: 'media-text-media-right', - title: __( 'Media & Text' ), - isDefault: true, - attributes: { - mediaPosition: 'right' - } - } -) +wp.blocks.registerBlockVariation( 'core/media-text', { + name: 'media-text-media-right', + title: __( 'Media & Text' ), + isDefault: true, + attributes: { + mediaPosition: 'right', + }, +} ); ``` ### Caveats to using `isDefault` @@ -129,9 +122,9 @@ While the `isActive` property is optional, it's recommended. This API is used by If `isActive` is not set, the Editor cannot distinguish between an instance of the original block and your variation, so the original block information will be displayed. -The property can be set to either a function or an array of strings (`string[]`). +The property can be set to either an array of strings (`string[]`), or a function. It is recommended to use the string array version whenever possible. -The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance). +The `string[]` version is used to declare which of the block instance's attributes should be compared to the given variation's. Each attribute will be checked and the variation will be active if all of them match. As an example, in the core Embed block, the `providerNameSlug` attribute is used to determine the embed provider (e.g. 'youtube' or 'twitter'). The variations may be declared like this: @@ -159,53 +152,59 @@ const variations = [ attributes: { providerNameSlug: 'youtube', responsive: true }, }, // ... -] +]; ``` - The `isActive` function can compare the block instance value for `providerNameSlug` to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active: +The `isActive` property would then look like this: ```js -isActive: ( blockAttributes, variationAttributes ) => - blockAttributes.providerNameSlug === variationAttributes.providerNameSlug, +isActive: [ 'providerNameSlug' ]; ``` -The `string[]` version is used to declare which attributes should be compared as a shorthand. Each attribute will be checked and the variation will be active if all of them match. Using the same example for the embed block, the string version would look like this: +This will cause the block instance value for `providerNameSlug` to be compared to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active. + +Nested object paths are also supported since WordPress `6.6.0`. For example, consider a block variation that has a `query` object as an attribute. It is possible to determine if the variation is active solely based on that object's `postType` property (while ignoring all its other properties): ```js -isActive: [ 'providerNameSlug' ] +isActive: [ 'query.postType' ]; ``` -### Caveats to using `isActive` +The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance). -The `isActive` property can return false positives if multiple variations exist for a specific block and the `isActive` checks are not specific enough. To demonstrate this, consider the following example: +Using the same example for the embed block, the function version would look like this: ```js -wp.blocks.registerBlockVariation( - 'core/paragraph', - { - name: 'paragraph-red', - title: 'Red Paragraph', - attributes: { - textColor: 'vivid-red', - }, - isActive: [ 'textColor' ], - } -); +isActive: ( blockAttributes, variationAttributes ) => + blockAttributes.providerNameSlug === variationAttributes.providerNameSlug, +``` -wp.blocks.registerBlockVariation( - 'core/paragraph', - { - name: 'paragraph-red-grey', - title: 'Red/Grey Paragraph', - attributes: { - textColor: 'vivid-red', - backgroundColor: 'cyan-bluish-gray' - }, - isActive: [ 'textColor', 'backgroundColor' ] - } -); +### Specificity of `isActive` matches + +_Note: Improved handling since WordPress `6.6.0`._ + +If there are multiple variations whose `isActive` check matches a given block instance, and all of them are string arrays, then the variation with the highest _specificity_ will be chosen. Consider the following example: + +```js +wp.blocks.registerBlockVariation( 'core/paragraph', { + name: 'paragraph-red', + title: 'Red Paragraph', + attributes: { + textColor: 'vivid-red', + }, + isActive: [ 'textColor' ], +} ); + +wp.blocks.registerBlockVariation( 'core/paragraph', { + name: 'paragraph-red-grey', + title: 'Red/Grey Paragraph', + attributes: { + textColor: 'vivid-red', + backgroundColor: 'cyan-bluish-gray', + }, + isActive: [ 'textColor', 'backgroundColor' ], +} ); ``` -The `isActive` check on both variations tests the `textColor`, but each variations uses `vivid-red`. Since the `paragraph-red` variation is registered first, once the `paragraph-red-grey` variation is inserted into the Editor, it will have the title `Red Paragraph` instead of `Red/Grey Paragraph`. As soon as the Editor finds a match, it stops checking. +If a block instance has attributes `textColor: vivid-red` and `backgroundColor: cyan-bluish-gray`, both variations' `isActive` criterion will match that block instance. In this case, the more _specific_ match will be determined to be the active variation, where specificity is calculated as the length of each `isActive` array. This means that the `Red/Grey Paragraph` will be shown as the active variation. -There have been [discussions](https://github.com/WordPress/gutenberg/issues/41303#issuecomment-1526193087) around how the API can be improved, but as of WordPress 6.3, this remains an issue to watch out for. +Note that specificity cannot be determined for a matching variation if its `isActive` property is a function rather than a `string[]`. In this case, the first matching variation will be determined to be the active variation. For this reason, it is generally recommended to use a `string[]` rather than a `function` for the `isActive` property. diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7b7dbe9291567..93ab0a031800f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -616,7 +616,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme -- **Supports:** align (full, wide), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~ ## Date @@ -706,7 +706,7 @@ Give special visual emphasis to a quote from your text. ([Source](https://github - **Name:** core/pullquote - **Category:** text -- **Supports:** align (full, left, right, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight) +- **Supports:** align (full, left, right, wide), anchor, background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight) - **Attributes:** citation, textAlign, value ## Query Loop @@ -783,7 +783,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju - **Name:** core/quote - **Category:** text -- **Supports:** anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** citation, textAlign, value ## Read More @@ -948,7 +948,7 @@ Insert poetry. Use special spacing formats. Or quote song lyrics. ([Source](http - **Name:** core/verse - **Category:** text -- **Supports:** anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight) +- **Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight) - **Attributes:** content, textAlign ## Video diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 862a8b2d8a06a..f687eb79732b5 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -1439,7 +1439,7 @@ wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( { per_page: 'page_size', search: 'q', }; - const url = new URL( 'https://api.openverse.engineering/v1/images/' ); + const url = new URL( 'https://api.openverse.org/v1/images/' ); Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { const queryKey = mapFromInserterMediaRequest[ key ] || key; url.searchParams.set( queryKey, value ); diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md index b6e0d639c3fc8..85255af785cbb 100644 --- a/docs/reference-guides/interactivity-api/README.md +++ b/docs/reference-guides/interactivity-api/README.md @@ -1,6 +1,6 @@ # Interactivity API Reference -The Interactivity API, [introduced in WordPress 6.5](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/), provides a standard way for developers to add interactions to the front end of their blocks. The API is also used in many Core WordPress blocks, including Search, Query, Navigation, and File. +The Interactivity API, [introduced in WordPress 6.5](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/), provides a standard way for developers to add interactions to the front end of their blocks. The API is also used in many Core WordPress blocks, including Search, Query, Navigation, and File. This standard makes it easier for developers to create rich, interactive user experiences, from simple counters or pop-ups to more complex features like instant page navigation, instant search, shopping carts, or checkouts. @@ -32,7 +32,7 @@ To get a deeper understanding of what the Interactivity API is or find answers t Interactivity API is included in Core in WordPress 6.5. For versions below, you'll need Gutenberg 17.5 or higher installed and activated in your WordPress installation. -It’s also important to highlight that the block creation workflow doesn’t change, and all the [prerequisites](https://developer.wordpress.org/block-editor/getting-started/devenv/) remain the same. These include: +It’s also important to highlight that the block creation workflow doesn’t change, and all the [prerequisites](https://developer.wordpress.org/block-editor/getting-started/devenv/) remain the same. These include: - [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor) - [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools) @@ -55,7 +55,7 @@ To indicate that the block [supports](https://developer.wordpress.org/block-edit Refer to the [`interactivity` support property docs](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity) to get a more detailed description of this property. -#### Load Interactivity API Javascript code with `viewScriptModule` +#### Load Interactivity API JavaScript code with `viewScriptModule` The Interactivity API provides the `@wordpress/interactivity` Script Module. JavaScript using the Interactivity API should be implemented as Script Modules so they can depend on `@wordpress/interactivity`. [Script Modules have been available since WordPress 6.5](https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/). Blocks can use [`viewScriptModule` block metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script-module) to enqueue their Script Modules easily: @@ -82,7 +82,7 @@ The use of `viewScriptModule` also requires the `--experimental-modules` flag fo #### Add `wp-interactive` directive to a DOM element -To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the DOM element in the block's `render.php` or `save.js` files. +To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the DOM element in the block's `render.php` or `save.js` files. diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md index 043a50cb5186e..8b56ed4ce98b4 100644 --- a/docs/reference-guides/slotfills/README.md +++ b/docs/reference-guides/slotfills/README.md @@ -33,7 +33,7 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } ); SlotFills are created using `createSlotFill`. This creates two components, `Slot` and `Fill` which are then used to create a new component that is exported on the `wp.plugins` global. -**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js#L54)) +**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55)) ```js /** @@ -61,34 +61,70 @@ export default PluginPostStatusInfo; This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel. As we can see, the `` is wrapping all of the items that will appear in the panel. -Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `` and `` components. +Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed in the end of the component. -See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-post/src/components/sidebar/post-status/index.js#L26). +See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39). ```js -const PostStatus = ( { isOpened, onTogglePanel } ) => ( - - - { ( fills ) => ( - <> - - - - - - - { fills } - - - ) } - - -); +export default function PostSummary( { onActionPerformed } ) { + const { isRemovedPostStatusPanel } = useSelect( ( select ) => { + // We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do + // not use isEditorPanelEnabled since this panel should not be disabled through the UI. + const { isEditorPanelRemoved, getCurrentPostType } = + select( editorStore ); + return { + isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ), + postType: getCurrentPostType(), + }; + }, [] ); + + return ( + + + { ( fills ) => ( + <> + + + } + /> + + + + + + + { ! isRemovedPostStatusPanel && ( + + + + + + + + + + + + + + + + + + { fills } + + ) } + + + ) } + + + ); +} ``` ## Currently available SlotFills and examples diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index f752fe8104a56..59a820a16697c 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -167,6 +167,7 @@ Settings related to spacing. | padding | boolean | false | | | units | array | px,em,rem,vh,vw,% | | | customSpacingSize | boolean | true | | +| defaultSpacingSizes | boolean | true | | | spacingSizes | array | | name, size, slug | | spacingScale | object | | | diff --git a/docs/reference-guides/theme-json-reference/theme-json-migrations.md b/docs/reference-guides/theme-json-reference/theme-json-migrations.md index c304bfe39493e..8e9d56ed054e6 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-migrations.md +++ b/docs/reference-guides/theme-json-reference/theme-json-migrations.md @@ -88,8 +88,27 @@ The new `defaultFontSizes` option gives control over showing default font sizes It is `true` by default when switching to v3. This is to be consistent with how other `default*` options work such as `settings.color.defaultPalette`, but differs from the behavior in v2. -In theme.json v2, the default font sizes were only shown when theme sizes were not defined. A theme providing font sizes with the same slugs as the defaults would always override the default ones. - To keep behavior similar to v2 with a v3 theme.json: * If you do not have any `fontSizes` defined, `defaultFontSizes` can be left out or set to `true`. * If you have some `fontSizes` defined, set `defaultFontSizes` to `false`. + +#### `settings.spacing.defaultSpacingSizes` + +In theme.json v2, there are two settings that could be used to set theme level spacing sizes: `settings.spacing.spacingSizes` and `settings.spacing.spacingScale`. Setting both `spacingSizes` _and_ `spacingScale` would only use the values from `spacingSizes`. And setting either of them would always replace the entire set of default spacing sizes provided by WordPress. + +The default `spacingSizes` slugs provided by WordPress are: `20`, `30`, `40`, `50`, `60`, `70`, and `80`. + +The new `defaultSpacingSizes` option gives control over showing default spacing sizes and preventing those defaults from being overridden. + +- When set to `true` it will show the default spacing sizes and prevent them from being overridden by the theme. +- When set to `false` it will hide the default spacing sizes and allow the theme to use the default slugs. + +`defaultSpacingSizes` is `true` by default when switching to v3. This is to be consistent with how other `default*` options work such as `settings.color.defaultPalette`, but differs from the behavior in v2. + +Additionally, in v3 both `spacingSizes` and `spacingScale` can be set at the same time. Presets defined in `spacingSizes` with slugs matching the generated presets from `spacingSizes` will override the generated ones. + +To keep behavior similar to v2 with a v3 theme.json: +* If you do not have any `spacingSizes` presets or `spacingScale` config defined, `defaultSpacingSizes` can be left out or set to `true`. +* If you disabled default spacing sizes by setting `spacingScale` to `{ "steps": 0 }`, remove the `spacingScale` config and set `defaultSpacingSizes` to `false`. +* If you defined only one of either `spacingScale` or `spacingSizes` for your presets, set `defaultSpacingSizes` to `false`. +* If you defined both `spacingScale` and `spacingSizes`, remove the `spacingSizes` config _and_ set `defaultSpacingSizes` to `false`. diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js index e830012bc5770..3c1f0fee2090f 100644 --- a/docs/tool/manifest.js +++ b/docs/tool/manifest.js @@ -16,7 +16,6 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', { 'packages/components/src/theme/README.md', 'packages/components/src/view/README.md', 'packages/components/src/dropdown-menu-v2/README.md', - 'packages/components/src/progress-bar/README.md', 'packages/components/src/tabs/README.md', 'packages/components/src/custom-select-control-v2/README.md', ], diff --git a/gutenberg.php b/gutenberg.php index becad26a3e9f3..a8d9ebe7e981f 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -5,7 +5,7 @@ * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality. * Requires at least: 6.4 * Requires PHP: 7.2 - * Version: 18.4.1 + * Version: 18.5.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/lib/README.md b/lib/README.md index cbc86d67a18f7..8e22f676a153d 100644 --- a/lib/README.md +++ b/lib/README.md @@ -6,7 +6,7 @@ The Gutenberg plugin is continuously enhancing existing features and creating ne During a WordPress release, new features, bugfixes and other changes are "synced" between the Gutenberg plugin and WordPress Core. Consistent naming and directory structures make this process easier by preventing naming conflicts and compartmentalizing release-specific code. -The following documentation is intended to act as a guide only. If you're unsure about naming or where to place new PHP files, please don't hesitate to ping other contributors on Github or ask in the #core-editor channel on [WordPress Slack](https://make.wordpress.org/chat/). +The following documentation is intended to act as a guide only. If you're unsure about naming or where to place new PHP files, please don't hesitate to ping other contributors on GitHub or ask in the #core-editor channel on [WordPress Slack](https://make.wordpress.org/chat/). ## File structure @@ -194,10 +194,10 @@ Existing comments in `lib/load.php` should act as a guide. If you've changed or added PHP files to the Gutenberg plugin, you'll need to confirm whether the changes are to be synced to WordPress Core, and therefore featured in the next release of WordPress. -The Gutenberg Github pull request in question should be labeled with the `Needs PHP backport` label if the changes are to be synced to Core. +The Gutenberg GitHub pull request in question should be labeled with the `Needs PHP backport` label if the changes are to be synced to Core. -If so, it is recommended to create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core Github repository](https://github.com/WordPress/wordpress-develop) soon after your pull request is merged. +If so, it is recommended to create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core GitHub repository](https://github.com/WordPress/wordpress-develop) soon after your pull request is merged. -So too, if you've made changes in WordPress Core to code that also lives in the Gutenberg plugin, these changes will need to be synced (often called "backporting") to Gutenberg. The relevant Gutenberg Github pull request should be labeled with the `Backport from WordPress Core` label. +So too, if you've made changes in WordPress Core to code that also lives in the Gutenberg plugin, these changes will need to be synced (often called "backporting") to Gutenberg. The relevant Gutenberg GitHub pull request should be labeled with the `Backport from WordPress Core` label. If you're unsure, you can always ask for help in the #core-editor channel in [WordPress Slack](https://make.wordpress.org/chat/). diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php index 53668e114e04c..defd7cd391b16 100644 --- a/lib/block-editor-settings.php +++ b/lib/block-editor-settings.php @@ -58,7 +58,7 @@ function gutenberg_get_block_editor_settings( $settings ) { * entered by users does not break other global styles. */ $global_styles[] = array( - 'css' => gutenberg_get_global_styles_custom_css(), + 'css' => gutenberg_get_global_stylesheet( array( 'custom-css' ) ), '__unstableType' => 'user', 'isGlobalStyles' => true, ); diff --git a/lib/block-supports/block-style-variations.php b/lib/block-supports/block-style-variations.php new file mode 100644 index 0000000000000..f2bc6af92e9de --- /dev/null +++ b/lib/block-supports/block-style-variations.php @@ -0,0 +1,518 @@ +get_raw_data(); + + // Only the first block style variation with data is supported. + $variation_data = array(); + foreach ( $variations as $variation ) { + $variation_data = $theme_json['styles']['blocks'][ $parsed_block['blockName'] ]['variations'][ $variation ] ?? array(); + + if ( ! empty( $variation_data ) ) { + break; + } + } + + if ( empty( $variation_data ) ) { + return $parsed_block; + } + + $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"; + + /* + * Even though block style variations are effectively theme.json partials, + * they can't be processed completely as though they are. + * + * Block styles support custom selectors to direct specific types of styles + * to inner elements. For example, borders on Image block's get applied to + * the inner `img` element rather than the wrapping `figure`. + * + * The following relocates the "root" block style variation styles to + * under an appropriate blocks property to leverage the preexisting style + * generation for simple block style variations. This way they get the + * custom selectors they need. + * + * The inner elements and block styles for the variation itself are + * still included at the top level but scoped by the variation's selector + * when the stylesheet is generated. + */ + $elements_data = $variation_data['elements'] ?? array(); + $blocks_data = $variation_data['blocks'] ?? array(); + unset( $variation_data['elements'] ); + unset( $variation_data['blocks'] ); + + _wp_array_set( + $blocks_data, + array( $parsed_block['blockName'], 'variations', $variation_instance ), + $variation_data + ); + + $config = array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'elements' => $elements_data, + 'blocks' => $blocks_data, + ), + ); + + // Turn off filter that excludes block nodes. They are needed here for the variation's inner block types. + if ( ! is_admin() ) { + remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); + } + + // Temporarily prevent variation instance from being sanitized while processing theme.json. + $styles_registry = WP_Block_Styles_Registry::get_instance(); + $styles_registry->register( $parsed_block['blockName'], array( 'name' => $variation_instance ) ); + + $variation_theme_json = new WP_Theme_JSON_Gutenberg( $config, 'blocks' ); + $variation_styles = $variation_theme_json->get_stylesheet( + array( 'styles' ), + array( 'custom' ), + array( + 'skip_root_layout_styles' => true, + 'scope' => ".$class_name", + ) + ); + + // Clean up temporary block style now instance styles have been processed. + $styles_registry->unregister( $parsed_block['blockName'], $variation_instance ); + + // Restore filter that excludes block nodes. + if ( ! is_admin() ) { + add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); + } + + if ( empty( $variation_styles ) ) { + return $parsed_block; + } + + wp_register_style( 'block-style-variation-styles', false, array( 'global-styles', 'wp-block-library' ) ); + wp_add_inline_style( 'block-style-variation-styles', $variation_styles ); + + /* + * Add variation instance class name to block's className string so it can + * be enforced in the block markup via render_block filter. + */ + _wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name ); + + return $parsed_block; +} + +/** + * Ensure the variation block support class name generated and added to + * block attributes in the `render_block_data` filter gets applied to the + * block's markup. + * + * @see gutenberg_render_block_style_variation_support_styles + * + * @since 6.6.0 + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * + * @return string Filtered block content. + */ +function gutenberg_render_block_style_variation_class_name( $block_content, $block ) { + if ( ! $block_content || empty( $block['attrs']['className'] ) ) { + return $block_content; + } + + /* + * Matches a class prefixed by `is-style`, followed by the + * variation slug, then `--`, and finally a hash. + * + * See `gutenberg_create_block_style_variation_instance_name` for class generation. + */ + preg_match( '/\bis-style-(\S+?--\w+)\b/', $block['attrs']['className'], $matches ); + + if ( empty( $matches ) ) { + return $block_content; + } + + $tags = new WP_HTML_Tag_Processor( $block_content ); + + if ( $tags->next_tag() ) { + /* + * Ensure the variation instance class name set in the + * `render_block_data` filter is applied in markup. + * See `gutenberg_render_block_style_variation_support_styles`. + */ + $tags->add_class( $matches[0] ); + } + + return $tags->get_updated_html(); +} + +/** + * Collects block style variation data for merging with theme.json data. + * + * @since 6.6.0 + * + * @param array $variations Shared block style variations. + * + * @return array Block variations data to be merged under `styles.blocks`. + */ +function gutenberg_resolve_block_style_variations( $variations ) { + $variations_data = array(); + + if ( empty( $variations ) ) { + return $variations_data; + } + + $have_named_variations = ! wp_is_numeric_array( $variations ); + + foreach ( $variations as $key => $variation ) { + $supported_blocks = $variation['blockTypes'] ?? array(); + + /* + * Standalone theme.json partial files for block style variations + * will have their styles under a top-level property by the same name. + * Variations defined within an existing theme.json or theme style + * variation will themselves already be the required styles data. + */ + $variation_data = $variation['styles'] ?? $variation; + + if ( empty( $variation_data ) ) { + continue; + } + + /* + * Block style variations read in via standalone theme.json partials + * need to have their name set to the kebab case version of their title. + */ + $variation_name = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] ); + + foreach ( $supported_blocks as $block_type ) { + // Add block style variation data under current block type. + $path = array( $block_type, 'variations', $variation_name ); + _wp_array_set( $variations_data, $path, $variation_data ); + } + } + + return $variations_data; +} + +/** + * Merges variations data with existing theme.json data ensuring that the + * current theme.json data values take precedence. + * + * @since 6.6.0 + * + * @param array $variations_data Block style variations data keyed by block type. + * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data. + * @param string $origin Origin for the theme.json data. + * + * @return WP_Theme_JSON_Gutenberg The merged theme.json data. + */ +function gutenberg_merge_block_style_variations_data( $variations_data, $theme_json, $origin = 'theme' ) { + if ( empty( $variations_data ) ) { + return $theme_json; + } + + $variations_theme_json_data = array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( 'blocks' => $variations_data ), + ); + + $variations_theme_json = new WP_Theme_JSON_Data_Gutenberg( $variations_theme_json_data, $origin ); + + /* + * Merge the current theme.json data over shared variation data so that + * any explicit per block variation values take precedence. + */ + return $variations_theme_json->update_with( $theme_json->get_data() ); +} + +/** + * Merges any shared block style variation definitions from a theme style + * variation into their appropriate block type within theme json styles. Any + * custom user selections already made will take precedence over the shared + * style variation value. + * + * @since 6.6.0 + * + * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data. + * + * @return WP_Theme_JSON_Data_Gutenberg + */ +function gutenberg_resolve_block_style_variations_from_theme_style_variation( $theme_json ) { + $theme_json_data = $theme_json->get_data(); + $shared_variations = $theme_json_data['styles']['blocks']['variations'] ?? array(); + $variations_data = gutenberg_resolve_block_style_variations( $shared_variations ); + + return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json, 'user' ); +} + +/** + * Merges block style variation data sourced from standalone partial + * theme.json files. + * + * @since 6.6.0 + * + * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data. + * + * @return WP_Theme_JSON_Data_Gutenberg + */ +function gutenberg_resolve_block_style_variations_from_theme_json_partials( $theme_json ) { + $block_style_variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' ); + $variations_data = gutenberg_resolve_block_style_variations( $block_style_variations ); + + return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json ); +} + +/** + * Merges shared block style variations registered within the + * `styles.blocks.variations` property of the primary theme.json file. + * + * @since 6.6.0 + * + * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data. + * + * @return WP_Theme_JSON_Data_Gutenberg + */ +function gutenberg_resolve_block_style_variations_from_primary_theme_json( $theme_json ) { + $theme_json_data = $theme_json->get_data(); + $block_style_variations = $theme_json_data['styles']['blocks']['variations'] ?? array(); + $variations_data = gutenberg_resolve_block_style_variations( $block_style_variations ); + + return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json ); +} + +/** + * Merges block style variations registered via the block styles registry with a + * style object, under their appropriate block types within theme.json styles. + * Any variation values defined within the theme.json specific to a block type + * will take precedence over these shared definitions. + * + * @since 6.6.0 + * + * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data. + * + * @return WP_Theme_JSON_Data_Gutenberg + */ +function gutenberg_resolve_block_style_variations_from_styles_registry( $theme_json ) { + $registry = WP_Block_Styles_Registry::get_instance(); + $styles = $registry->get_all_registered(); + $variations_data = array(); + + foreach ( $styles as $block_type => $variations ) { + foreach ( $variations as $variation_name => $variation ) { + if ( ! empty( $variation['style_data'] ) ) { + $path = array( $block_type, 'variations', $variation_name ); + _wp_array_set( $variations_data, $path, $variation['style_data'] ); + } + } + } + + return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json ); +} + +/** + * Enqueues styles for block style variations. + * + * @since 6.6.0 + */ +function gutenberg_enqueue_block_style_variation_styles() { + wp_enqueue_style( 'block-style-variation-styles' ); +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( 'block-style-variation', array() ); + +// Remove core filters and action. +if ( function_exists( 'wp_render_block_style_variation_support_styles' ) ) { + remove_filter( 'render_block_data', 'wp_render_block_style_variation_support_styles' ); +} +if ( function_exists( 'wp_render_block_style_variation_class_name' ) ) { + remove_filter( 'render_block', 'wp_render_block_style_variation_class_name' ); +} +if ( function_exists( 'wp_enqueue_block_style_variation_styles' ) ) { + remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles' ); +} + +if ( function_exists( 'wp_resolve_block_style_variations_from_primary_theme_json' ) ) { + remove_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_primary_theme_json' ); +} +if ( function_exists( 'wp_resolve_block_style_variations_from_theme_json_partials' ) ) { + remove_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_theme_json_partials' ); +} +if ( function_exists( 'wp_resolve_block_style_variations_from_styles_registry' ) ) { + remove_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_styles_registry' ); +} +if ( function_exists( 'wp_resolve_block_style_variations_from_theme_style_variation' ) ) { + remove_filter( 'wp_theme_json_data_user', 'wp_resolve_block_style_variations_from_theme_style_variation' ); +} + +// Add Gutenberg filters and action. +add_filter( 'render_block_data', 'gutenberg_render_block_style_variation_support_styles', 10, 2 ); +add_filter( 'render_block', 'gutenberg_render_block_style_variation_class_name', 10, 2 ); +add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_style_variation_styles', 1 ); + +// Resolve block style variations from all their potential sources. The order here is deliberate. +add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_primary_theme_json', 10, 1 ); +add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_theme_json_partials', 10, 1 ); +add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_styles_registry', 10, 1 ); + +add_filter( 'wp_theme_json_data_user', 'gutenberg_resolve_block_style_variations_from_theme_style_variation', 10, 1 ); + + +/** + * Registers any block style variations contained within the provided + * theme.json data. + * + * @access private + * + * @param array $variations Shared block style variations. + */ +function gutenberg_register_block_style_variations_from_theme_json_data( $variations ) { + if ( empty( $variations ) ) { + return; + } + + $registry = WP_Block_Styles_Registry::get_instance(); + $have_named_variations = ! wp_is_numeric_array( $variations ); + + foreach ( $variations as $key => $variation ) { + $supported_blocks = $variation['blockTypes'] ?? array(); + + /* + * Standalone theme.json partial files for block style variations + * will have their styles under a top-level property by the same name. + * Variations defined within an existing theme.json or theme style + * variation will themselves already be the required styles data. + */ + $variation_data = $variation['styles'] ?? $variation; + + if ( empty( $variation_data ) ) { + continue; + } + + /* + * Block style variations read in via standalone theme.json partials + * need to have their name set to the kebab case version of their title. + */ + $variation_name = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] ); + $variation_label = $variation['title'] ?? $variation_name; + + foreach ( $supported_blocks as $block_type ) { + $registered_styles = $registry->get_registered_styles_for_block( $block_type ); + + // Register block style variation if it hasn't already been registered. + if ( ! array_key_exists( $variation_name, $registered_styles ) ) { + register_block_style( + $block_type, + array( + 'name' => $variation_name, + 'label' => $variation_label, + ) + ); + } + } + } +} + +/** + * Register shared block style variations defined by the theme. + * + * These can come in three forms: + * - the theme's theme.json + * - the theme's partials (standalone files in `/styles` that only define block style variations) + * - the user's theme.json (for example, theme style variations the user selected) + * + * @access private + */ +function gutenberg_register_block_style_variations_from_theme() { + // Partials from `/styles`. + $variations_partials = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' ); + gutenberg_register_block_style_variations_from_theme_json_data( $variations_partials ); + + /* + * Pull the data from the specific origin instead of the merged data. + * This is because, for 6.6, we only support registering block style variations + * for the 'theme' and 'custom' origins but not for 'default' (core theme.json) + * or 'custom' (theme.json in a block). + * + * When/If we add support for every origin, we should switch to using the public API + * instead, e.g.: wp_get_global_styles( array( 'blocks', 'variations' ) ). + */ + + // theme.json of the theme. + $theme_json_theme = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data(); + $variations_theme = $theme_json_theme->get_data()['styles']['blocks']['variations'] ?? array(); + gutenberg_register_block_style_variations_from_theme_json_data( $variations_theme ); + + // User data linked for this theme. + $theme_json_user = WP_Theme_JSON_Resolver_Gutenberg::get_user_data(); + $variations_user = $theme_json_user->get_data()['styles']['blocks']['variations'] ?? array(); + gutenberg_register_block_style_variations_from_theme_json_data( $variations_user ); +} + +// Remove core init action registering variations. +if ( function_exists( 'wp_register_block_style_variations_from_theme' ) ) { + remove_action( 'init', 'wp_register_block_style_variations_from_theme' ); +} +add_action( 'init', 'gutenberg_register_block_style_variations_from_theme' ); diff --git a/lib/block-template-utils.php b/lib/block-template-utils.php new file mode 100644 index 0000000000000..a644047d3cfdc --- /dev/null +++ b/lib/block-template-utils.php @@ -0,0 +1,114 @@ +open( $filename, ZipArchive::CREATE | ZipArchive::OVERWRITE ) ) { + return new WP_Error( 'unable_to_create_zip', __( 'Unable to open export file (archive) for writing.', 'gutenberg' ) ); + } + + $zip->addEmptyDir( 'templates' ); + $zip->addEmptyDir( 'parts' ); + + // Get path of the theme. + $theme_path = wp_normalize_path( get_stylesheet_directory() ); + + // Create recursive directory iterator. + $theme_files = new RecursiveIteratorIterator( + new RecursiveDirectoryIterator( $theme_path ), + RecursiveIteratorIterator::LEAVES_ONLY + ); + + // Make a copy of the current theme. + foreach ( $theme_files as $file ) { + // Skip directories as they are added automatically. + if ( ! $file->isDir() ) { + // Get real and relative path for current file. + $file_path = wp_normalize_path( $file ); + $relative_path = substr( $file_path, strlen( $theme_path ) + 1 ); + + if ( ! wp_is_theme_directory_ignored( $relative_path ) ) { + $zip->addFile( $file_path, $relative_path ); + } + } + } + + // Load templates into the zip file. + $templates = gutenberg_get_block_templates(); + foreach ( $templates as $template ) { + $template->content = traverse_and_serialize_blocks( + parse_blocks( $template->content ), + '_remove_theme_attribute_from_template_part_block' + ); + + $zip->addFromString( + 'templates/' . $template->slug . '.html', + $template->content + ); + } + + // Load template parts into the zip file. + $template_parts = gutenberg_get_block_templates( array(), 'wp_template_part' ); + foreach ( $template_parts as $template_part ) { + $zip->addFromString( + 'parts/' . $template_part->slug . '.html', + $template_part->content + ); + } + + // Load theme.json into the zip file. + $tree = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) ); + // Merge with user data. + $tree->merge( WP_Theme_JSON_Resolver_Gutenberg::get_user_data() ); + + $theme_json_raw = $tree->get_data(); + // If a version is defined, add a schema. + if ( $theme_json_raw['version'] ) { + $theme_json_version = 'wp/' . substr( $wp_version, 0, 3 ); + $schema = array( '$schema' => 'https://schemas.wp.org/' . $theme_json_version . '/theme.json' ); + $theme_json_raw = array_merge( $schema, $theme_json_raw ); + } + + // Convert to a string. + $theme_json_encoded = wp_json_encode( $theme_json_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); + + // Replace 4 spaces with a tab. + $theme_json_tabbed = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json_encoded ); + + // Add the theme.json file to the zip. + $zip->addFromString( + 'theme.json', + $theme_json_tabbed + ); + + // Save changes to the zip file. + $zip->close(); + + return $filename; +} diff --git a/lib/blocks.php b/lib/blocks.php index 679219cc6ff77..c3fdb26700c58 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -48,6 +48,7 @@ function gutenberg_reregister_core_block_types() { 'archives.php' => 'core/archives', 'avatar.php' => 'core/avatar', 'block.php' => 'core/block', + 'button.php' => 'core/button', 'calendar.php' => 'core/calendar', 'categories.php' => 'core/categories', 'cover.php' => 'core/cover', diff --git a/lib/class-wp-rest-edit-site-export-controller-gutenberg.php b/lib/class-wp-rest-edit-site-export-controller-gutenberg.php new file mode 100644 index 0000000000000..b05de230dd0cc --- /dev/null +++ b/lib/class-wp-rest-edit-site-export-controller-gutenberg.php @@ -0,0 +1,46 @@ +add_data( array( 'status' => 500 ) ); + + return $filename; + } + + $theme_name = basename( get_stylesheet() ); + header( 'Content-Type: application/zip' ); + header( 'Content-Disposition: attachment; filename=' . $theme_name . '.zip' ); + header( 'Content-Length: ' . filesize( $filename ) ); + flush(); + readfile( $filename ); + unlink( $filename ); + exit; + } +} diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php index 9bbca1ffcab40..aadcb2fd7de1e 100644 --- a/lib/class-wp-rest-global-styles-controller-gutenberg.php +++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php @@ -330,6 +330,25 @@ protected function prepare_item_for_database( $request ) { } elseif ( isset( $existing_config['styles'] ) ) { $config['styles'] = $existing_config['styles']; } + + /* + * If the incoming request is going to create a new variation + * that is not yet registered, we register it here. + * This is because the variations are registered on init, + * but we want this endpoint to return the new variation immediately: + * if we don't register it, it'll be stripped out of the response + * just in this request (subsequent ones will be ok). + * Take the variations defined in styles.blocks.variations from the incoming request + * that are not part of the $existing_config. + */ + if ( isset( $request['styles']['blocks']['variations'] ) ) { + $existing_variations = isset( $existing_config['styles']['blocks']['variations'] ) ? $existing_config['styles']['blocks']['variations'] : array(); + $new_variations = array_diff_key( $request['styles']['blocks']['variations'], $existing_variations ); + if ( ! empty( $new_variations ) ) { + gutenberg_register_block_style_variations_from_theme_json_data( $new_variations ); + } + } + if ( isset( $request['settings'] ) ) { $config['settings'] = $request['settings']; } elseif ( isset( $existing_config['settings'] ) ) { diff --git a/lib/class-wp-theme-json-data-gutenberg.php b/lib/class-wp-theme-json-data-gutenberg.php index 4ff7775f4b559..2c7eec9d5dbf4 100644 --- a/lib/class-wp-theme-json-data-gutenberg.php +++ b/lib/class-wp-theme-json-data-gutenberg.php @@ -72,7 +72,7 @@ public function get_data() { /** * Return theme JSON object. * - * @since 18.3.0 + * @since 18.5.0 * * @return WP_Theme_JSON */ diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b5636ad7c8dc5..b00767dbf9abd 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -123,6 +123,7 @@ class WP_Theme_JSON_Gutenberg { * @since 6.0.0 Replaced `override` with `prevent_override` and updated the * `prevent_override` value for `color.duotone` to use `color.defaultDuotone`. * @since 6.2.0 Added 'shadow' presets. + * @since 6.6.0 Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes' and spacing size presets to use `spacing.defaultSpacingSizes`. * @since 6.6.0 Added `aspectRatios`. * @var array */ @@ -187,7 +188,7 @@ class WP_Theme_JSON_Gutenberg { ), array( 'path' => array( 'spacing', 'spacingSizes' ), - 'prevent_override' => false, + 'prevent_override' => array( 'spacing', 'defaultSpacingSizes' ), 'use_default_names' => true, 'value_key' => 'size', 'css_vars' => '--wp--preset--spacing--$slug', @@ -348,6 +349,7 @@ class WP_Theme_JSON_Gutenberg { * @var string[] */ const VALID_TOP_LEVEL_KEYS = array( + 'blockTypes', 'customTemplates', 'description', 'patterns', @@ -426,13 +428,14 @@ class WP_Theme_JSON_Gutenberg { 'sticky' => null, ), 'spacing' => array( - 'customSpacingSize' => null, - 'spacingSizes' => null, - 'spacingScale' => null, - 'blockGap' => null, - 'margin' => null, - 'padding' => null, - 'units' => null, + 'customSpacingSize' => null, + 'defaultSpacingSizes' => null, + 'spacingSizes' => null, + 'spacingScale' => null, + 'blockGap' => null, + 'margin' => null, + 'padding' => null, + 'units' => null, ), 'shadow' => array( 'presets' => null, @@ -726,23 +729,25 @@ public static function get_element_class_name( $element ) { * Constructor. * * @since 5.8.0 + * @since 6.6.0 Key spacingScale by origin, and pre-generate the + * spacingSizes from spacingScale. * * @param array $theme_json A structure that follows the theme.json schema. * @param string $origin Optional. What source of data this object represents. - * One of 'default', 'theme', or 'custom'. Default 'theme'. + * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'. */ public function __construct( $theme_json = array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA ), $origin = 'theme' ) { if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) { $origin = 'theme'; } - $this->theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); + $this->theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json, $origin ); $registry = WP_Block_Type_Registry::get_instance(); $valid_block_names = array_keys( $registry->get_all_registered() ); $valid_element_names = array_keys( static::ELEMENTS ); $valid_variations = static::get_valid_block_style_variations(); - $theme_json = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations ); - $this->theme_json = static::maybe_opt_in_into_settings( $theme_json ); + $this->theme_json = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations ); + $this->theme_json = static::maybe_opt_in_into_settings( $this->theme_json ); // Internally, presets are keyed by origin. $nodes = static::get_setting_nodes( $this->theme_json ); @@ -761,6 +766,27 @@ public function __construct( $theme_json = array( 'version' => WP_Theme_JSON_Gut } } } + + // In addition to presets, spacingScale (which generates presets) is also keyed by origin. + $scale_path = array( 'settings', 'spacing', 'spacingScale' ); + $spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null ); + if ( null !== $spacing_scale ) { + // If the spacingScale is not already keyed by origin. + if ( empty( array_intersect( array_keys( $spacing_scale ), static::VALID_ORIGINS ) ) ) { + _wp_array_set( $this->theme_json, $scale_path, array( $origin => $spacing_scale ) ); + } + } + + // Pre-generate the spacingSizes from spacingScale. + $scale_path = array( 'settings', 'spacing', 'spacingScale', $origin ); + $spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null ); + if ( isset( $spacing_scale ) ) { + $sizes_path = array( 'settings', 'spacing', 'spacingSizes', $origin ); + $spacing_sizes = _wp_array_get( $this->theme_json, $sizes_path, array() ); + $spacing_scale_sizes = static::compute_spacing_sizes( $spacing_scale ); + $merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes ); + _wp_array_set( $this->theme_json, $sizes_path, $merged_spacing_sizes ); + } } /** @@ -816,6 +842,7 @@ protected static function do_opt_in_into_settings( &$context ) { * * @since 5.8.0 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters. + * @since 6.6.0 Extended schema definition to allow enhanced block style variations. * * @param array $input Structure to sanitize. * @param array $valid_block_names List of valid block names. @@ -874,6 +901,27 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n $schema_styles_blocks = array(); $schema_settings_blocks = array(); + + /* + * Generate a schema for blocks. + * - Block styles can contain `elements` & `variations` definitions. + * - Variations definitions cannot be nested. + * - Variations can contain styles for inner `blocks`. + * - Variation inner `blocks` styles can contain `elements`. + * + * As each variation needs a `blocks` schema but further nested + * inner `blocks`, the overall schema will be generated in multiple passes. + */ + foreach ( $valid_block_names as $block ) { + $schema_settings_blocks[ $block ] = static::VALID_SETTINGS; + $schema_styles_blocks[ $block ] = $styles_non_top_level; + $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements; + } + + $block_style_variation_styles = static::VALID_STYLES; + $block_style_variation_styles['blocks'] = $schema_styles_blocks; + $block_style_variation_styles['elements'] = $schema_styles_elements; + foreach ( $valid_block_names as $block ) { // Build the schema for each block style variation. $style_variation_names = array(); @@ -890,12 +938,9 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n $schema_styles_variations = array(); if ( ! empty( $style_variation_names ) ) { - $schema_styles_variations = array_fill_keys( $style_variation_names, $styles_non_top_level ); + $schema_styles_variations = array_fill_keys( $style_variation_names, $block_style_variation_styles ); } - $schema_settings_blocks[ $block ] = static::VALID_SETTINGS; - $schema_styles_blocks[ $block ] = $styles_non_top_level; - $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements; $schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations; } @@ -906,6 +951,12 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n $schema['settings']['blocks'] = $schema_settings_blocks; $schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA ); + /* + * Shared block style variations can be registered from the theme.json data so we can't + * validate them against pre-registered block style variations. + */ + $schema['styles']['blocks']['variations'] = null; + // Remove anything that's not present in the schema. foreach ( array( 'styles', 'settings' ) as $subtree ) { if ( ! isset( $input[ $subtree ] ) ) { @@ -1008,17 +1059,37 @@ protected static function prepend_to_selector( $selector, $to_prepend ) { * @since 5.8.0 * @since 5.9.0 Added `duotone` key with CSS selector. * @since 6.1.0 Added `features` key with block support feature level selectors. + * @since 6.6.0 Added non-core block style variations to generated metadata. * * @return array Block metadata. */ protected static function get_blocks_metadata() { // NOTE: the compat/6.1 version of this method in Gutenberg did not have these changes. - $registry = WP_Block_Type_Registry::get_instance(); - $blocks = $registry->get_all_registered(); + $registry = WP_Block_Type_Registry::get_instance(); + $blocks = $registry->get_all_registered(); + $style_registry = WP_Block_Styles_Registry::get_instance(); // Is there metadata for all currently registered blocks? $blocks = array_diff_key( $blocks, static::$blocks_metadata ); if ( empty( $blocks ) ) { + /* + * New block styles may have been registered within WP_Block_Styles_Registry. + * Update block metadata for any new block style variations. + */ + $registered_styles = $style_registry->get_all_registered(); + foreach ( static::$blocks_metadata as $block_name => $block_metadata ) { + if ( ! empty( $registered_styles[ $block_name ] ) ) { + $style_selectors = $block_metadata['styleVariations'] ?? array(); + + foreach ( $registered_styles[ $block_name ] as $block_style ) { + if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) { + $style_selectors[ $block_style['name'] ] = static::get_block_style_variation_selector( $block_style['name'], $block_metadata['selector'] ); + } + } + + static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors; + } + } return static::$blocks_metadata; } @@ -1051,11 +1122,20 @@ protected static function get_blocks_metadata() { } // If the block has style variations, append their selectors to the block metadata. + $style_selectors = array(); if ( ! empty( $block_type->styles ) ) { - $style_selectors = array(); foreach ( $block_type->styles as $style ) { $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] ); } + } + + // Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json. + $registered_styles = $style_registry->get_registered_styles_for_block( $block_name ); + foreach ( $registered_styles as $style ) { + $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] ); + } + + if ( ! empty( $style_selectors ) ) { static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors; } } @@ -1167,6 +1247,7 @@ public function get_settings() { * * @since 5.8.0 * @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters. + * @since 6.6.0 Added option to skip root layout styles. * * @param array $types Types of styles to load. Will load all by default. It accepts: * - `variables`: only the CSS Custom Properties for presets & custom ones. @@ -1174,8 +1255,10 @@ public function get_settings() { * - `presets`: only the classes for the presets. * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS. * @param array $options An array of options for now used for internal purposes only (may change without notice). - * The options currently supported are 'scope' that makes sure all style are scoped to a given selector, - * and root_selector which overwrites and forces a given selector to be used on the root node. + * The options currently supported are: + * - 'scope' that makes sure all style are scoped to a given selector + * - `root_selector` which overwrites and forces a given selector to be used on the root node + * - `skip_root_layout_styles` which omits root layout styles from the generated stylesheet. * @return string The resulting stylesheet. */ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) { @@ -1228,7 +1311,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' } if ( in_array( 'styles', $types, true ) ) { - if ( false !== $root_style_key ) { + if ( false !== $root_style_key && empty( $options['skip_root_layout_styles'] ) ) { $stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] ); } $stylesheet .= $this->get_block_classes( $style_nodes ); @@ -1272,6 +1355,12 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins ); } + // Load the custom CSS last so it has the highest specificity. + if ( in_array( 'custom-css', $types, true ) ) { + // Add the global styles root CSS. + $stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + } + return $stylesheet; } @@ -1316,10 +1405,12 @@ protected function process_blocks_custom_css( $css, $selector ) { * Returns the global styles custom css. * * @since 6.2.0 + * @deprecated 6.7.0 Use {@see 'get_stylesheet'} instead. * * @return string The global styles custom CSS. */ public function get_custom_css() { + _deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' ); $block_custom_css = ''; $block_nodes = $this->get_block_custom_css_nodes(); foreach ( $block_nodes as $node ) { @@ -1332,23 +1423,23 @@ public function get_custom_css() { /** * Returns the global styles base custom CSS. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @return string The global styles base custom CSS. */ public function get_base_custom_css() { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_stylesheet' ); return isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : ''; } /** * Returns the block nodes with custom CSS. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @return array The block nodes. */ public function get_block_custom_css_nodes() { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_block_nodes' ); $block_nodes = array(); // Add the global styles block CSS. @@ -1372,8 +1463,7 @@ public function get_block_custom_css_nodes() { /** * Returns the global styles custom CSS for a single block. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @param array $css The block css node. * @param string $selector The block selector. @@ -1381,6 +1471,7 @@ public function get_block_custom_css_nodes() { * @return string The global styles custom CSS for the block. */ public function get_block_custom_css( $css, $selector ) { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_styles_for_block' ); return $this->process_blocks_custom_css( $css, $selector ); } @@ -2563,6 +2654,7 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { 'selectors' => $feature_selectors, 'duotone' => $duotone_selector, 'variations' => $variation_selectors, + 'css' => $selector, ); if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) { @@ -2772,6 +2864,11 @@ static function ( $pseudo_selector ) use ( $selector ) { $block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations ); } + // 7. Generate and append any custom CSS rules. + if ( isset( $node['css'] ) && ! $is_root_selector ) { + $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector ); + } + return $block_rules; } @@ -2889,6 +2986,8 @@ protected static function get_metadata_boolean( $data, $path, $default_value = f * * @since 5.8.0 * @since 5.9.0 Duotone preset also has origins. + * @since 6.6.0 Use the spacingScale keyed by origin, and re-generate the + * spacingSizes from spacingScale. * * @param WP_Theme_JSON_Gutenberg $incoming Data to merge. */ @@ -2896,6 +2995,40 @@ public function merge( $incoming ) { $incoming_data = $incoming->get_raw_data(); $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data ); + /* + * Recompute all the spacing sizes based on the new hierarchy of data. In the constructor + * spacingScale and spacingSizes are both keyed by origin and VALID_ORIGINS is ordered, so + * we can allow partial spacingScale data to inherit missing data from earlier layers when + * computing the spacing sizes. + * + * This happens before the presets are merged to ensure that default spacing sizes can be + * removed from the theme origin if $prevent_override is true. + */ + $flattened_spacing_scale = array(); + foreach ( static::VALID_ORIGINS as $origin ) { + $scale_path = array( 'settings', 'spacing', 'spacingScale', $origin ); + + // Apply the base spacing scale to the current layer. + $base_spacing_scale = _wp_array_get( $this->theme_json, $scale_path, array() ); + $flattened_spacing_scale = array_replace( $flattened_spacing_scale, $base_spacing_scale ); + + $spacing_scale = _wp_array_get( $incoming_data, $scale_path, null ); + if ( ! isset( $spacing_scale ) ) { + continue; + } + + // Allow partial scale settings by merging with lower layers. + $flattened_spacing_scale = array_replace( $flattened_spacing_scale, $spacing_scale ); + + // Generate and merge the scales for this layer. + $sizes_path = array( 'settings', 'spacing', 'spacingSizes', $origin ); + $spacing_sizes = _wp_array_get( $incoming_data, $sizes_path, array() ); + $spacing_scale_sizes = static::compute_spacing_sizes( $flattened_spacing_scale ); + $merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes ); + + _wp_array_set( $incoming_data, $sizes_path, $merged_spacing_sizes ); + } + /* * The array_replace_recursive algorithm merges at the leaf level, * but we don't want leaf arrays to be merged, so we overwrite it. @@ -3159,14 +3292,21 @@ protected static function filter_slugs( $node, $slugs ) { * Removes insecure data from theme.json. * * @since 5.9.0 + * @since 6.6.0 Added support for block style variation element styles and $origin parameter. * * @param array $theme_json Structure to sanitize. + * @param string $origin Optional. What source of data this object represents. + * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'. * @return array Sanitized structure. */ - public static function remove_insecure_properties( $theme_json ) { + public static function remove_insecure_properties( $theme_json, $origin = 'theme' ) { + if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) { + $origin = 'theme'; + } + $sanitized = array(); - $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); + $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json, $origin ); $valid_block_names = array_keys( static::get_blocks_metadata() ); $valid_element_names = array_keys( static::ELEMENTS ); @@ -3220,6 +3360,29 @@ public static function remove_insecure_properties( $theme_json ) { } $variation_output = static::remove_insecure_styles( $variation_input ); + + // Process a variation's elements and element pseudo selector styles. + if ( isset( $variation_input['elements'] ) ) { + foreach ( $valid_element_names as $element_name ) { + $element_input = $variation_input['elements'][ $element_name ] ?? null; + if ( $element_input ) { + $element_output = static::remove_insecure_styles( $element_input ); + + if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) { + foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) { + if ( isset( $element_input[ $pseudo_selector ] ) ) { + $element_output[ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $pseudo_selector ] ); + } + } + } + + if ( ! empty( $element_output ) ) { + _wp_array_set( $variation_output, array( 'elements', $element_name ), $element_output ); + } + } + } + } + if ( ! empty( $variation_output ) ) { _wp_array_set( $sanitized, $variation['path'], $variation_output ); } @@ -3416,53 +3579,32 @@ public static function get_from_editor_settings( $settings ) { // Deprecated theme supports. if ( isset( $settings['disableCustomColors'] ) ) { - if ( ! isset( $theme_settings['settings']['color'] ) ) { - $theme_settings['settings']['color'] = array(); - } $theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors']; } if ( isset( $settings['disableCustomGradients'] ) ) { - if ( ! isset( $theme_settings['settings']['color'] ) ) { - $theme_settings['settings']['color'] = array(); - } $theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients']; } if ( isset( $settings['disableCustomFontSizes'] ) ) { - if ( ! isset( $theme_settings['settings']['typography'] ) ) { - $theme_settings['settings']['typography'] = array(); - } $theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes']; } if ( isset( $settings['enableCustomLineHeight'] ) ) { - if ( ! isset( $theme_settings['settings']['typography'] ) ) { - $theme_settings['settings']['typography'] = array(); - } $theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight']; } if ( isset( $settings['enableCustomUnits'] ) ) { - if ( ! isset( $theme_settings['settings']['spacing'] ) ) { - $theme_settings['settings']['spacing'] = array(); - } $theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ? array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) : $settings['enableCustomUnits']; } if ( isset( $settings['colors'] ) ) { - if ( ! isset( $theme_settings['settings']['color'] ) ) { - $theme_settings['settings']['color'] = array(); - } $theme_settings['settings']['color']['palette'] = $settings['colors']; } if ( isset( $settings['gradients'] ) ) { - if ( ! isset( $theme_settings['settings']['color'] ) ) { - $theme_settings['settings']['color'] = array(); - } $theme_settings['settings']['color']['gradients'] = $settings['gradients']; } @@ -3474,19 +3616,17 @@ public static function get_from_editor_settings( $settings ) { $font_sizes[ $key ]['size'] = $font_size['size'] . 'px'; } } - if ( ! isset( $theme_settings['settings']['typography'] ) ) { - $theme_settings['settings']['typography'] = array(); - } $theme_settings['settings']['typography']['fontSizes'] = $font_sizes; } if ( isset( $settings['enableCustomSpacing'] ) ) { - if ( ! isset( $theme_settings['settings']['spacing'] ) ) { - $theme_settings['settings']['spacing'] = array(); - } $theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing']; } + if ( isset( $settings['spacingSizes'] ) ) { + $theme_settings['settings']['spacing']['spacingSizes'] = $settings['spacingSizes']; + } + return $theme_settings; } @@ -3652,11 +3792,16 @@ public function get_data() { * Sets the spacingSizes array based on the spacingScale values from theme.json. * * @since 6.1.0 + * @deprecated 6.6.0 No longer used as the spacingSizes are automatically + * generated in the constructor and merge methods instead + * of manually after instantiation. * * @return null|void */ public function set_spacing_sizes() { - $spacing_scale = $this->theme_json['settings']['spacing']['spacingScale'] ?? array(); + _deprecated_function( __METHOD__, '6.6.0' ); + + $spacing_scale = $this->theme_json['settings']['spacing']['spacingScale']['default'] ?? array(); // Gutenberg didn't have the 1st isset check. if ( ! isset( $spacing_scale['steps'] ) @@ -3680,6 +3825,99 @@ public function set_spacing_sizes() { return null; } + $spacing_sizes = static::compute_spacing_sizes( $spacing_scale ); + + // If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes. + if ( $spacing_scale['steps'] <= 7 ) { + for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { + $spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 ); + } + } + + _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); + } + + /** + * Merges two sets of spacing size presets. + * + * @since 6.6.0 + * + * @param array $base The base set of spacing sizes. + * @param array $incoming The set of spacing sizes to merge with the base. Duplicate slugs will override the base values. + * @return array The merged set of spacing sizes. + */ + private static function merge_spacing_sizes( $base, $incoming ) { + // Preserve the order if there are no base (spacingScale) values. + if ( empty( $base ) ) { + return $incoming; + } + $merged = array(); + foreach ( $base as $item ) { + $merged[ $item['slug'] ] = $item; + } + foreach ( $incoming as $item ) { + $merged[ $item['slug'] ] = $item; + } + ksort( $merged, SORT_NUMERIC ); + return array_values( $merged ); + } + + /** + * Generates a set of spacing sizes by starting with a medium size and + * applying an operator with an increment value to generate the rest of the + * sizes outward from the medium size. The medium slug is '50' with the rest + * of the slugs being 10 apart. The generated names use t-shirt sizing. + * + * Example: + * + * $spacing_scale = array( + * 'steps' => 4, + * 'mediumStep' => 16, + * 'unit' => 'px', + * 'operator' => '+', + * 'increment' => 2, + * ); + * $spacing_sizes = static::compute_spacing_sizes( $spacing_scale ); + * // -> array( + * // array( 'name' => 'Small', 'slug' => '40', 'size' => '14px' ), + * // array( 'name' => 'Medium', 'slug' => '50', 'size' => '16px' ), + * // array( 'name' => 'Large', 'slug' => '60', 'size' => '18px' ), + * // array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ), + * // ) + * + * @since 6.6.0 + * + * @param array $spacing_scale { + * The spacing scale values. All are required. + * + * @type int $steps The number of steps in the scale. (up to 10 steps are supported.) + * @type float $mediumStep The middle value that gets the slug '50'. (For even number of steps, this becomes the first middle value.) + * @type string $unit The CSS unit to use for the sizes. + * @type string $operator The mathematical operator to apply to generate the other sizes. Either '+' or '*'. + * @type float $increment The value used with the operator to generate the other sizes. + * } + * @return array The spacing sizes presets or an empty array if some spacing scale values are missing or invalid. + */ + private static function compute_spacing_sizes( $spacing_scale ) { + /* + * This condition is intentionally missing some checks on ranges for the values in order to + * keep backwards compatibility with the previous implementation. + */ + if ( + ! isset( $spacing_scale['steps'] ) || + ! is_numeric( $spacing_scale['steps'] ) || + 0 === $spacing_scale['steps'] || + ! isset( $spacing_scale['mediumStep'] ) || + ! is_numeric( $spacing_scale['mediumStep'] ) || + ! isset( $spacing_scale['unit'] ) || + ! isset( $spacing_scale['operator'] ) || + ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) || + ! isset( $spacing_scale['increment'] ) || + ! is_numeric( $spacing_scale['increment'] ) + ) { + return array(); + } + $unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] ); $current_step = $spacing_scale['mediumStep']; $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 ); @@ -3762,14 +4000,7 @@ public function set_spacing_sizes() { $spacing_sizes[] = $above_sizes_item; } - // If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes. - if ( $spacing_scale['steps'] <= 7 ) { - for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { - $spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 ); - } - } - - _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); + return $spacing_sizes; } /** diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 0d6aa7bd73fd3..507876af4952a 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -220,6 +220,7 @@ protected static function has_same_registered_blocks( $origin ) { * @since 5.8.0 * @since 5.9.0 Theme supports have been inlined and the `$theme_support_data` argument removed. * @since 6.0.0 Added an `$options` parameter to allow the theme data to be returned without theme supports. + * @since 6.6.0 Add support for 'default-font-sizes' and 'default-spacing-sizes' theme supports. * * @param array $deprecated Deprecated. Not used. * @param array $options { @@ -291,35 +292,27 @@ public static function get_theme_data( $deprecated = array(), $options = array() * So we take theme supports, transform it to theme.json shape * and merge the static::$theme upon that. */ - $theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() ); + $theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_classic_theme_supports_block_editor_settings() ); if ( ! wp_theme_has_theme_json() ) { - if ( ! isset( $theme_support_data['settings']['color'] ) ) { - $theme_support_data['settings']['color'] = array(); - } - - $default_palette = false; - if ( current_theme_supports( 'default-color-palette' ) ) { - $default_palette = true; - } - if ( ! isset( $theme_support_data['settings']['color']['palette'] ) ) { - // If the theme does not have any palette, we still want to show the core one. - $default_palette = true; - } - $theme_support_data['settings']['color']['defaultPalette'] = $default_palette; - - $default_gradients = false; - if ( current_theme_supports( 'default-gradient-presets' ) ) { - $default_gradients = true; - } - if ( ! isset( $theme_support_data['settings']['color']['gradients'] ) ) { - // If the theme does not have any gradients, we still want to show the core ones. - $default_gradients = true; - } - $theme_support_data['settings']['color']['defaultGradients'] = $default_gradients; + /* + * Unlike block themes, classic themes without a theme.json disable + * default presets when custom preset theme support is added. This + * behavior can be overridden by using the corresponding default + * preset theme support. + */ + $theme_support_data['settings']['color']['defaultPalette'] = + ! isset( $theme_support_data['settings']['color']['palette'] ) || + current_theme_supports( 'default-color-palette' ); + $theme_support_data['settings']['color']['defaultGradients'] = + ! isset( $theme_support_data['settings']['color']['gradients'] ) || + current_theme_supports( 'default-gradient-presets' ); + $theme_support_data['settings']['typography']['defaultFontSizes'] = + ! isset( $theme_support_data['settings']['typography']['fontSizes'] ) || + current_theme_supports( 'default-font-sizes' ); + $theme_support_data['settings']['spacing']['defaultSpacingSizes'] = + ! isset( $theme_support_data['settings']['spacing']['spacingSizes'] ) || + current_theme_supports( 'default-spacing-sizes' ); - if ( ! isset( $theme_support_data['settings']['shadow'] ) ) { - $theme_support_data['settings']['shadow'] = array(); - } /* * Shadow presets are explicitly disabled for classic themes until a * decision is made for whether the default presets should match the @@ -541,18 +534,14 @@ public static function get_user_data() { isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) && $decoded_data['isGlobalStylesUserThemeJSON'] ) { + unset( $decoded_data['isGlobalStylesUserThemeJSON'] ); $config = $decoded_data; } } /** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */ - $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) ); - $config = $theme_json->get_data(); - - // Needs to be set for schema migrations of user data. - $config['isGlobalStylesUserThemeJSON'] = true; - - static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' ); + $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) ); + static::$user = $theme_json->get_theme_json(); return static::$user; } @@ -600,7 +589,6 @@ public static function get_merged_data( $origin = 'custom' ) { $result = new WP_Theme_JSON_Gutenberg(); $result->merge( static::get_core_data() ); if ( 'default' === $origin ) { - $result->set_spacing_sizes(); return $result; } @@ -611,12 +599,10 @@ public static function get_merged_data( $origin = 'custom' ) { $result->merge( static::get_theme_data() ); if ( 'theme' === $origin ) { - $result->set_spacing_sizes(); return $result; } $result->merge( static::get_user_data() ); - $result->set_spacing_sizes(); return $result; } @@ -716,14 +702,44 @@ private static function recursively_iterate_json( $dir ) { return $nested_json_files; } + /** + * Determines if a supplied style variation matches the provided scope. + * + * For backwards compatibility, if a variation does not define any scope + * related property, e.g. `blockTypes`, it is assumed to be a theme style + * variation. + * + * @since 6.6.0 + * + * @param array $variation Theme.json shaped style variation object. + * @param string $scope Scope to check e.g. theme, block etc. + * + * @return boolean + */ + private static function style_variation_has_scope( $variation, $scope ) { + if ( 'block' === $scope ) { + return isset( $variation['blockTypes'] ); + } + + if ( 'theme' === $scope ) { + return ! isset( $variation['blockTypes'] ); + } + + return false; + } + /** * Returns the style variations defined by the theme (parent and child). * * @since 6.2.0 Returns parent theme variations if theme is a child. + * @since 6.6.0 Added configurable scope parameter to allow filtering + * theme.json partial files by the scope to which they + * can be applied e.g. theme vs block etc. * + * @param string $scope The scope or type of style variation to retrieve e.g. theme, block etc. * @return array */ - public static function get_style_variations() { + public static function get_style_variations( $scope = 'theme' ) { $variation_files = array(); $variations = array(); $base_directory = get_stylesheet_directory() . '/styles'; @@ -746,7 +762,7 @@ public static function get_style_variations() { ksort( $variation_files ); foreach ( $variation_files as $path => $file ) { $decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) ); - if ( is_array( $decoded_file ) ) { + if ( is_array( $decoded_file ) && static::style_variation_has_scope( $decoded_file, $scope ) ) { $translated = static::translate( $decoded_file, wp_get_theme()->get( 'TextDomain' ) ); $variation = ( new WP_Theme_JSON_Gutenberg( $translated ) )->get_raw_data(); if ( empty( $variation['title'] ) ) { @@ -766,7 +782,7 @@ public static function get_style_variations() { * * @since 6.6.0 * - * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance. + * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance. * @return array An array of resolved paths. */ public static function get_resolved_theme_uris( $theme_json ) { @@ -809,7 +825,7 @@ public static function get_resolved_theme_uris( $theme_json ) { * * @since 6.6.0 * - * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance. + * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance. * @return WP_Theme_JSON_Gutenberg Theme merged with resolved paths, if any found. */ public static function resolve_theme_file_uris( $theme_json ) { diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php index 1eea7ddaa2736..af0977ada1b30 100644 --- a/lib/class-wp-theme-json-schema-gutenberg.php +++ b/lib/class-wp-theme-json-schema-gutenberg.php @@ -40,11 +40,13 @@ class WP_Theme_JSON_Schema_Gutenberg { * @since 5.9.0 * @since 6.6.0 Migrate up to v3. * - * @param array $theme_json The structure to migrate. + * @param array $theme_json The structure to migrate. + * @param string $origin Optional. What source of data this object represents. + * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'. * * @return array The structure in the last version. */ - public static function migrate( $theme_json ) { + public static function migrate( $theme_json, $origin = 'theme' ) { if ( ! isset( $theme_json['version'] ) ) { $theme_json = array( 'version' => WP_Theme_JSON::LATEST_SCHEMA, @@ -55,10 +57,9 @@ public static function migrate( $theme_json ) { switch ( $theme_json['version'] ) { case 1: $theme_json = self::migrate_v1_to_v2( $theme_json ); - // no break + // Deliberate fall through. Once migrated to v2, also migrate to v3. case 2: - $theme_json = self::migrate_v2_to_v3( $theme_json ); - // no break + $theme_json = self::migrate_v2_to_v3( $theme_json, $origin ); } return $theme_json; @@ -97,15 +98,19 @@ private static function migrate_v1_to_v2( $old ) { /** * Migrates from v2 to v3. * - * - Sets settings.typography.defaultFontSizes to false. + * - Sets settings.typography.defaultFontSizes to false if settings.typography.fontSizes are defined. + * - Sets settings.spacing.defaultSpacingSizes to false if settings.spacing.spacingSizes are defined. + * - Prevents settings.spacing.spacingSizes from merging with settings.spacing.spacingScale by + * unsetting spacingScale when spacingSizes are defined. * * @since 6.6.0 * - * @param array $old Data to migrate. - * + * @param array $old Data to migrate. + * @param string $origin What source of data this object represents. + * One of 'blocks', 'default', 'theme', or 'custom'. * @return array Data with defaultFontSizes set to false. */ - private static function migrate_v2_to_v3( $old ) { + private static function migrate_v2_to_v3( $old, $origin ) { // Copy everything. $new = $old; @@ -116,10 +121,7 @@ private static function migrate_v2_to_v3( $old ) { * Remaining changes do not need to be applied to the custom origin, * as they should take on the value of the theme origin. */ - if ( - isset( $new['isGlobalStylesUserThemeJSON'] ) && - true === $new['isGlobalStylesUserThemeJSON'] - ) { + if ( 'custom' === $origin ) { return $new; } @@ -131,16 +133,36 @@ private static function migrate_v2_to_v3( $old ) { * affect the generated CSS. And in v2 we provided default font sizes * when the theme did not provide any. */ - if ( isset( $new['settings']['typography']['fontSizes'] ) ) { - if ( ! isset( $new['settings'] ) ) { - $new['settings'] = array(); - } - if ( ! isset( $new['settings']['typography'] ) ) { - $new['settings']['typography'] = array(); - } + if ( isset( $old['settings']['typography']['fontSizes'] ) ) { $new['settings']['typography']['defaultFontSizes'] = false; } + /* + * Similarly to defaultFontSizes, we need to migrate defaultSpacingSizes + * as it controls the PRESETS_METADATA prevent_override which was + * previously hardcoded to false. This only needs to happen when the + * theme provided spacing sizes via spacingSizes or spacingScale. + */ + if ( + isset( $old['settings']['spacing']['spacingSizes'] ) || + isset( $old['settings']['spacing']['spacingScale'] ) + ) { + $new['settings']['spacing']['defaultSpacingSizes'] = false; + } + + /* + * In v3 spacingSizes is merged with the generated spacingScale sizes + * instead of completely replacing them. The v3 behavior is what was + * documented for the v2 schema, but the code never actually did work + * that way. Instead of surprising users with a behavior change two + * years after the fact at the same time as a v3 update is introduced, + * we'll continue using the "bugged" behavior for v2 themes. And treat + * the "bug fix" as a breaking change for v3. + */ + if ( isset( $old['settings']['spacing']['spacingSizes'] ) ) { + unset( $new['settings']['spacing']['spacingScale'] ); + } + return $new; } diff --git a/lib/compat/wordpress-6.5/blocks.php b/lib/compat/wordpress-6.5/blocks.php index d3a8b3f557181..b91e89103faa0 100644 --- a/lib/compat/wordpress-6.5/blocks.php +++ b/lib/compat/wordpress-6.5/blocks.php @@ -46,135 +46,179 @@ function gutenberg_register_metadata_attribute( $args ) { } add_filter( 'register_block_type_args', 'gutenberg_register_metadata_attribute' ); -/** - * Depending on the block attribute name, replace its value in the HTML based on the value provided. - * - * @param string $block_content Block Content. - * @param string $block_name The name of the block to process. - * @param string $attribute_name The attribute name to replace. - * @param mixed $source_value The value used to replace in the HTML. - * @return string The modified block content. - */ -function gutenberg_block_bindings_replace_html( $block_content, $block_name, string $attribute_name, $source_value ) { - $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name ); - if ( ! isset( $block_type->attributes[ $attribute_name ]['source'] ) ) { - return $block_content; - } +// Only process block bindings if they are not processed in core. +if ( ! class_exists( 'WP_Block_Bindings_Registry' ) ) { + /** + * Depending on the block attribute name, replace its value in the HTML based on the value provided. + * + * @param string $block_content Block Content. + * @param string $block_name The name of the block to process. + * @param string $attribute_name The attribute name to replace. + * @param mixed $source_value The value used to replace in the HTML. + * @return string The modified block content. + */ + function gutenberg_block_bindings_replace_html( $block_content, $block_name, string $attribute_name, $source_value ) { + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name ); + if ( ! isset( $block_type->attributes[ $attribute_name ]['source'] ) ) { + return $block_content; + } - // Depending on the attribute source, the processing will be different. - switch ( $block_type->attributes[ $attribute_name ]['source'] ) { - case 'html': - case 'rich-text': - // Hardcode the selectors and processing until the HTML API is able to read CSS selectors and replace inner HTML. - // TODO: Use the HTML API instead. - if ( 'core/paragraph' === $block_name && 'content' === $attribute_name ) { - $selector = 'p'; - } - if ( 'core/heading' === $block_name && 'content' === $attribute_name ) { - $selector = 'h[1-6]'; - } - if ( 'core/button' === $block_name && 'text' === $attribute_name ) { - // Check if it is a , + , + ] } + > + { blockType?.title }: + { __( 'This block can only be used once.' ) } + + ); +} diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js index d27b2e436f296..8734f6f8804f0 100644 --- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js +++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js @@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) { { __unstableMarkLastChangeAsPersistent, moveBlocksToPosition, removeBlock, + selectBlock, } = dispatch( blockEditorStore ); // Do not add new properties here, use `useDispatch` instead to avoid @@ -305,6 +307,28 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => { canInsertBlockType, } = registry.select( blockEditorStore ); + function switchToDefaultOrRemove() { + const block = getBlock( clientId ); + const defaultBlockName = getDefaultBlockName(); + if ( getBlockName( clientId ) !== defaultBlockName ) { + const replacement = switchToBlockType( + block, + defaultBlockName + ); + if ( replacement && replacement.length ) { + replaceBlocks( clientId, replacement ); + } + } else if ( isUnmodifiedDefaultBlock( block ) ) { + const nextBlockClientId = getNextBlockClientId( clientId ); + if ( nextBlockClientId ) { + registry.batch( () => { + removeBlock( clientId ); + selectBlock( nextBlockClientId ); + } ); + } + } + } + /** * Moves the block with clientId up one level. If the block type * cannot be inserted at the new location, it will be attempted to @@ -344,7 +368,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => { getDefaultBlockName() ); - if ( replacement && replacement.length ) { + if ( + replacement && + replacement.length && + replacement.every( ( block ) => + canInsertBlockType( + block.name, + targetRootClientId + ) + ) + ) { insertBlocks( replacement, getBlockIndex( _clientId ), @@ -352,6 +385,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => { changeSelection ); removeBlock( firstClientId, false ); + } else { + switchToDefaultOrRemove(); } } @@ -462,16 +497,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => { } moveFirstItemUp( rootClientId ); - } else if ( - getBlockName( clientId ) !== getDefaultBlockName() - ) { - const replacement = switchToBlockType( - getBlock( clientId ), - getDefaultBlockName() - ); - if ( replacement && replacement.length ) { - replaceBlocks( clientId, replacement ); - } + } else { + switchToDefaultOrRemove(); } } }, @@ -534,6 +561,7 @@ function BlockListBlockProvider( props ) { isFirstMultiSelectedBlock, getMultiSelectedBlockClientIds, hasSelectedInnerBlock, + getBlocksByName, getBlockIndex, isBlockMultiSelected, @@ -607,6 +635,17 @@ function BlockListBlockProvider( props ) { const movingClientId = hasBlockMovingClientId(); const blockEditingMode = getBlockEditingMode( clientId ); + const multiple = hasBlockSupport( blockName, 'multiple', true ); + + // For block types with `multiple` support, there is no "original + // block" to be found in the content, as the block itself is valid. + const blocksWithSameName = multiple + ? [] + : getBlocksByName( blockName ); + const isInvalid = + blocksWithSameName.length && + blocksWithSameName[ 0 ] !== clientId; + return { ...previewContext, mode: getBlockMode( clientId ), @@ -664,6 +703,9 @@ function BlockListBlockProvider( props ) { hasEditableOutline: blockEditingMode !== 'disabled' && getBlockEditingMode( rootClientId ) === 'disabled', + originalBlockClientId: isInvalid + ? blocksWithSameName[ 0 ] + : false, }; }, [ clientId, rootClientId ] @@ -707,6 +749,7 @@ function BlockListBlockProvider( props ) { hasEditableOutline, className, defaultClassName, + originalBlockClientId, } = selectedProps; // Users of the editor.BlockListBlock filter used to be able to @@ -754,6 +797,7 @@ function BlockListBlockProvider( props ) { defaultClassName, mayDisplayControls, mayDisplayParentControls, + originalBlockClientId, themeSupportsLayout, }; diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 03456c9fb77ae..f76021b50fc4b 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -669,8 +669,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => { } moveFirstItemUp( rootClientId ); - } else { - removeBlock( clientId ); + } else if ( + getBlockName( clientId ) !== getDefaultBlockName() + ) { + const replacement = switchToBlockType( + getBlock( clientId ), + getDefaultBlockName() + ); + if ( replacement && replacement.length ) { + replaceBlocks( clientId, replacement ); + } } } }, diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index 044e5b185a224..68fa8628c54c7 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -40,7 +40,9 @@ export function useInBetweenInserter() { } function onMouseMove( event ) { - if ( openRef.current ) { + // openRef is the reference to the insertion point between blocks. + // If the reference is not set or the insertion point is already open, return. + if ( openRef === undefined || openRef.current ) { return; } diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index 845bfc4f803a3..b2af3456be7b0 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -147,7 +147,10 @@ function BlockPattern( { /> { showTitle && ( - + { pattern.type === INSERTER_PATTERN_TYPES.user && ! pattern.syncStatus && ( diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss index d3c54a20956f3..6b23c1e844dad 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -1,6 +1,6 @@ .block-editor-block-patterns-list__list-item { cursor: pointer; - margin-bottom: $grid-unit-30; + margin-bottom: $grid-unit-20; // The list item contains absolutely positioned visually hidden text, // so make this container relative. This prevents the bug experienced in @@ -26,38 +26,41 @@ // the bottom margin set on `...__list-item` above scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30); + .block-editor-block-patterns-list__item-title { + flex-grow: 1; + font-size: $helptext-font-size; + text-align: left; + } + .block-editor-block-preview__container { display: flex; align-items: center; overflow: hidden; - border-radius: 4px; - } + border-radius: $radius-block-ui; - .block-editor-block-patterns-list__item-title { - text-align: left; - flex-grow: 1; - } - - &:hover .block-editor-block-preview__container { - box-shadow: 0 0 0 2px $gray-900; + &::after { + outline: $border-width solid rgba($black, 0.1); + outline-offset: -$border-width; + border-radius: $radius-block-ui; + } } - &:focus .block-editor-block-preview__container { - @include button-style-outset__focus($gray-900); + &:hover:not(:focus) .block-editor-block-preview__container::after { + outline-color: rgba($black, 0.3); } - &.block-editor-block-patterns-list__list-item-synced { - &:hover, - &:focus { - .block-editor-block-preview__container { - box-shadow: 0 0 0 2px var(--wp-block-synced-color); - } - } + &:focus .block-editor-block-preview__container::after { + outline-color: var(--wp-admin-theme-color); + outline-width: var(--wp-admin-border-width-focus); + outline-offset: calc((-1 * var(--wp-admin-border-width-focus))); + transition: outline 0.1s linear; + @include reduce-motion("transition"); } - .block-editor-patterns__pattern-details { + .block-editor-patterns__pattern-details:not(:empty) { align-items: center; margin-top: $grid-unit-10; + padding-bottom: $grid-unit-05; // Add more space for labels on user-created patterns. } .block-editor-patterns__pattern-icon-wrapper { diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss index bfc3d5c8783be..9bdd85f66445f 100644 --- a/packages/block-editor/src/components/block-preview/style.scss +++ b/packages/block-editor/src/components/block-preview/style.scss @@ -48,29 +48,3 @@ bottom: 0; z-index: 1; } - -// Restrict these shadows to the context of the inserter. -.editor-inserter-sidebar { - .block-editor-block-patterns-list__item { - .block-editor-block-preview__container { - box-shadow: 0 15px 25px rgb(0 0 0 / 7%); - } - &:focus, - &:hover { - .block-editor-block-preview__container { - box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%); - } - } - - &.block-editor-block-patterns-list__list-item-synced { - &:hover, - &:focus { - .block-editor-block-preview__container { - box-shadow: - 0 0 0 2px var(--wp-block-synced-color), - 0 15px 25px rgb(0 0 0 / 7%); - } - } - } - } -} diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 8b01907474d23..87970d53c19f4 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -1,12 +1,14 @@ /** * WordPress dependencies */ -import { __, _n, sprintf } from '@wordpress/i18n'; +import { __, _n, sprintf, _x } from '@wordpress/i18n'; import { DropdownMenu, ToolbarButton, ToolbarGroup, ToolbarItem, + __experimentalText as Text, + MenuGroup, } from '@wordpress/components'; import { switchToBlockType, @@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( { clientIds, hasBlockStyles, canRemove, + isUsingBindings, } ) { const { replaceBlocks, multiSelect, updateBlockAttributes } = useDispatch( blockEditorStore ); @@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {

); } + + const connectedBlockDescription = isSingleBlock + ? _x( + 'This block is connected.', + 'block toolbar button label and description' + ) + : _x( + 'These blocks are connected.', + 'block toolbar button label and description' + ); + return (
{ hasPatternTransformation && ( @@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( { onSwitch={ onClose } /> ) } + { isUsingBindings && ( + + + { connectedBlockDescription } + + + ) }
); } -export const BlockSwitcher = ( { clientIds, disabled } ) => { +export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => { const { canRemove, hasBlockStyles, @@ -303,6 +324,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => { clientIds={ clientIds } hasBlockStyles={ hasBlockStyles } canRemove={ canRemove } + isUsingBindings={ isUsingBindings } /> ) } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 2072616f7fb0f..5eaba08bf94ae 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -203,3 +203,8 @@ padding: 6px $grid-unit; margin: 0; } + +.block-editor-block-switcher__binding-indicator { + display: block; + padding: $grid-unit; +} diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index c3570c4a007f1..cffb46413c5bb 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -35,7 +35,7 @@ import { store as blockEditorStore } from '../../store'; import __unstableBlockNameContext from './block-name-context'; import NavigableToolbar from '../navigable-toolbar'; import Shuffle from './shuffle'; -import BlockBindingsIndicator from '../block-bindings-toolbar-indicator'; +import PatternOverridesToolbarIndicator from '../pattern-overrides-toolbar-indicator'; import { useHasBlockToolbar } from './use-has-block-toolbar'; import { canBindBlock } from '../../hooks/use-bindings-attributes'; /** @@ -67,11 +67,13 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar, showParentSelector, isUsingBindings, + hasParentPattern, } = useSelect( ( select ) => { const { getBlockName, getBlockMode, getBlockParents, + getBlockParentsByBlockName, getSelectedBlockClientIds, isBlockValid, getBlockRootClientId, @@ -94,8 +96,13 @@ export function PrivateBlockToolbar( { const isVisual = selectedBlockClientIds.every( ( id ) => getBlockMode( id ) === 'visual' ); - const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId ) - ?.metadata?.bindings; + const bindings = getBlockAttributes( selectedBlockClientId )?.metadata + ?.bindings; + const parentPatternClientId = getBlockParentsByBlockName( + selectedBlockClientId, + 'core/block', + true + )[ 0 ]; return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -115,7 +122,8 @@ export function PrivateBlockToolbar( { ) && selectedBlockClientIds.length === 1 && _isDefaultEditingMode, - isUsingBindings: _isUsingBindings, + isUsingBindings: !! bindings, + hasParentPattern: !! parentPatternClientId, }; }, [] ); @@ -146,6 +154,7 @@ export function PrivateBlockToolbar( { const innerClasses = clsx( 'block-editor-block-toolbar', { 'is-synced': isSynced, + 'is-connected': isUsingBindings, } ); return ( @@ -167,9 +176,13 @@ export function PrivateBlockToolbar( { { ! isMultiToolbar && isLargeViewport && isDefaultEditingMode && } - { isUsingBindings && canBindBlock( blockName ) && ( - - ) } + { isUsingBindings && + hasParentPattern && + canBindBlock( blockName ) && ( + + ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && ( isDefaultEditingMode || isSynced ) && (
{ isDefaultEditingMode && ( <> diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 1854e44032964..6314f1a1e7ffd 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -39,14 +39,17 @@ border-right: $border-width solid $gray-300; } - &.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon { - color: var(--wp-block-synced-color); - } - - &.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon { - &:disabled .block-editor-block-icon.has-colors { + &.is-synced, + &.is-connected { + .block-editor-block-switcher .components-button .block-editor-block-icon { color: var(--wp-block-synced-color); } + + .components-toolbar-button.block-editor-block-switcher__no-switcher-icon { + &:disabled .block-editor-block-icon.has-colors { + color: var(--wp-block-synced-color); + } + } } > :last-child, diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index e77654619255b..84087b262786c 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -182,8 +182,8 @@ .block-editor-block-list__block-selection-button, .block-editor-block-contextual-toolbar { pointer-events: all; - margin-top: $grid-unit-15; - margin-bottom: $grid-unit-15; + margin-top: $grid-unit-10; + margin-bottom: $grid-unit-10; } .block-editor-block-contextual-toolbar { diff --git a/packages/block-editor/src/components/block-variation-picker/content.scss b/packages/block-editor/src/components/block-variation-picker/content.scss index e4636f288078d..e7dd3e87cb1d5 100644 --- a/packages/block-editor/src/components/block-variation-picker/content.scss +++ b/packages/block-editor/src/components/block-variation-picker/content.scss @@ -13,7 +13,7 @@ font-size: $helptext-font-size; svg { - fill: $gray-400 !important; + fill: $gray-600 !important; } .components-button { diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js index 27256f03547f0..14abf3c6c2bc9 100644 --- a/packages/block-editor/src/components/border-radius-control/all-input-control.js +++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js @@ -61,7 +61,7 @@ export default function AllInputControl( { onChange={ handleOnChange } onUnitChange={ handleOnUnitChange } placeholder={ allPlaceholder } - size={ '__unstable-large' } + size="__unstable-large" /> ); } diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js index c0c5c672d6364..4529c00b997ac 100644 --- a/packages/block-editor/src/components/border-radius-control/input-controls.js +++ b/packages/block-editor/src/components/border-radius-control/input-controls.js @@ -80,7 +80,7 @@ export default function BoxInputControls( { onUnitChange={ createHandleOnUnitChange( corner ) } - size={ '__unstable-large' } + size="__unstable-large" />
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index 974f48e61bc28..cd1289c897824 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -60,6 +60,8 @@ function ButtonBlockAppender( onClick={ onToggle } aria-haspopup={ isToggleButton ? 'true' : undefined } aria-expanded={ isToggleButton ? isOpen : undefined } + // Disable reason: There shouldn't be a case where this button is disabled but not visually hidden. + // eslint-disable-next-line no-restricted-syntax disabled={ disabled } label={ label } > diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index eb2a02e5095d7..dfc4ee69437f6 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -111,7 +111,7 @@ export default function ChildLayoutControl( { > { selfStretch === 'fixed' && ( { onChange( { selfStretch, @@ -166,7 +166,7 @@ export default function ChildLayoutControl( { panelId={ panelId } > { @@ -181,7 +181,7 @@ export default function ChildLayoutControl( { min={ 1 } /> { @@ -210,7 +210,7 @@ export default function ChildLayoutControl( { > { @@ -234,7 +234,7 @@ export default function ChildLayoutControl( { { diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 88b33379e04de..d6b34876c8eaa 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -145,18 +145,14 @@ function ColorGradientControlInner( { { tabPanels.color } { tabPanels.gradient } diff --git a/packages/block-editor/src/components/contrast-checker/test/index.js b/packages/block-editor/src/components/contrast-checker/test/index.js index 26da2ac0ae8c1..9abd7d7f7e2e6 100644 --- a/packages/block-editor/src/components/contrast-checker/test/index.js +++ b/packages/block-editor/src/components/contrast-checker/test/index.js @@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => { render( { render( { test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => { const { container } = render( { { render( { test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => { render( diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js index 8c35b025bfccf..19ec0bf8c24b1 100644 --- a/packages/block-editor/src/components/date-format-picker/index.js +++ b/packages/block-editor/src/components/date-format-picker/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { _x, __ } from '@wordpress/i18n'; -import { dateI18n } from '@wordpress/date'; +import { dateI18n, humanTimeDiff } from '@wordpress/date'; import { useState, createInterpolateElement } from '@wordpress/element'; import { TextControl, @@ -13,11 +13,15 @@ import { __experimentalVStack as VStack, } from '@wordpress/components'; -// So that we can illustrate the different formats in the dropdown properly, -// show a date that has a day greater than 12 and a month with more than three -// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was -// released. -const EXAMPLE_DATE = new Date( 2022, 0, 25 ); +// So that we illustrate the different formats in the dropdown properly, show a date that is +// somwhat recent, has a day greater than 12, and a month with more than three letters. +const exampleDate = new Date(); +exampleDate.setDate( 20 ); +exampleDate.setMonth( exampleDate.getMonth() - 3 ); +if ( exampleDate.getMonth() === 4 ) { + // May has three letters, so use March. + exampleDate.setMonth( 3 ); +} /** * The `DateFormatPicker` component renders controls that let the user choose a @@ -54,7 +58,7 @@ export default function DateFormatPicker( { label={ __( 'Default format' ) } help={ `${ __( 'Example:' ) } ${ dateI18n( defaultFormat, - EXAMPLE_DATE + exampleDate ) }` } checked={ ! format } onChange={ ( checked ) => @@ -95,13 +99,19 @@ function NonDefaultControls( { format, onChange } ) { ] ), ]; - const suggestedOptions = suggestedFormats.map( - ( suggestedFormat, index ) => ( { + const suggestedOptions = [ + ...suggestedFormats.map( ( suggestedFormat, index ) => ( { key: `suggested-${ index }`, - name: dateI18n( suggestedFormat, EXAMPLE_DATE ), + name: dateI18n( suggestedFormat, exampleDate ), format: suggestedFormat, - } ) - ); + } ) ), + { + key: 'human-diff', + name: humanTimeDiff( exampleDate ), + format: 'human-diff', + }, + ]; + const customOption = { key: 'custom', name: __( 'Custom' ), @@ -111,7 +121,9 @@ function NonDefaultControls( { format, onChange } ) { }; const [ isCustom, setIsCustom ] = useState( - () => !! format && ! suggestedFormats.includes( format ) + () => + !! format && + ! suggestedOptions.some( ( option ) => option.format === format ) ); return ( diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js index e38a01e199b79..d963e71289cb0 100644 --- a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js @@ -92,7 +92,7 @@ export default function AspectRatioTool( { value={ displayValue } options={ options ?? aspectRatioOptions } onChange={ onChange } - size={ '__unstable-large' } + size="__unstable-large" __nextHasNoMarginBottom /> diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js index e3ef91745aa53..05a7d2f4d251a 100644 --- a/packages/block-editor/src/components/dimensions-tool/scale-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js @@ -110,7 +110,7 @@ export default function ScaleTool( { help={ scaleHelp[ displayValue ] } value={ displayValue } onChange={ onChange } - size={ '__unstable-large' } + size="__unstable-large" > { options.map( ( option ) => ( diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index b7cf7f2bbc493..307c742befafd 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -23,7 +23,7 @@ import { __experimentalHStack as HStack, __experimentalTruncate as Truncate, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { getFilename } from '@wordpress/url'; import { useCallback, Platform, useRef } from '@wordpress/element'; @@ -245,12 +245,22 @@ function BackgroundImageToolsPanelItem( { return; } + const sizeValue = style?.background?.backgroundSize; + const positionValue = style?.background?.backgroundPosition; + onChange( - setImmutably( style, [ 'background', 'backgroundImage' ], { - url: media.url, - id: media.id, - source: 'file', - title: media.title || undefined, + setImmutably( style, [ 'background' ], { + ...style?.background, + backgroundImage: { + url: media.url, + id: media.id, + source: 'file', + title: media.title || undefined, + }, + backgroundPosition: + ! positionValue && ( 'auto' === sizeValue || ! sizeValue ) + ? '50% 0' + : positionValue, } ) ); }; @@ -426,13 +436,16 @@ function BackgroundSizeToolsPanelItem( { const updateBackgroundSize = ( next ) => { // When switching to 'contain' toggle the repeat off. let nextRepeat = repeatValue; + let nextPosition = positionValue; if ( next === 'contain' ) { nextRepeat = 'no-repeat'; + nextPosition = undefined; } if ( next === 'cover' ) { nextRepeat = undefined; + nextPosition = undefined; } if ( @@ -441,6 +454,15 @@ function BackgroundSizeToolsPanelItem( { next === 'auto' ) { nextRepeat = undefined; + /* + * A background image uploaded and set in the editor (an image with a record id), + * receives a default background position of '50% 0', + * when the toggle switches to "Tile". This is to increase the chance that + * the image's focus point is visible. + */ + if ( !! style?.background?.backgroundImage?.id ) { + nextPosition = '50% 0'; + } } /* @@ -454,6 +476,7 @@ function BackgroundSizeToolsPanelItem( { onChange( setImmutably( style, [ 'background' ], { ...style?.background, + backgroundPosition: nextPosition, backgroundRepeat: nextRepeat, backgroundSize: next, } ) @@ -509,7 +532,7 @@ function BackgroundSizeToolsPanelItem( { onChange={ updateBackgroundPosition } /> @@ -542,9 +574,10 @@ function BackgroundSizeToolsPanelItem( { aria-label={ __( 'Background image width' ) } onChange={ updateBackgroundSize } value={ sizeValue } - size={ '__unstable-large' } + size="__unstable-large" __unstableInputWidth="100px" min={ 0 } + placeholder={ __( 'Auto' ) } /> ) : null } { currentValueForToggle !== 'cover' && ( diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 964fd1b30100e..a20bb15c044c5 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -261,7 +261,7 @@ export default function BorderPanel( { popoverPlacement="left-start" value={ border } __experimentalIsRenderedInSidebar - size={ '__unstable-large' } + size="__unstable-large" hideLabelFromVision={ ! hasShadowControl } label={ __( 'Border' ) } /> diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 26da27760aa5d..9718545795f7c 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -100,14 +100,13 @@ function useHasChildLayout( settings ) { } function useHasSpacingPresets( settings ) { - const { - custom, - theme, - default: defaultPresets, - } = settings?.spacing?.spacingSizes || {}; - const presets = custom ?? theme ?? defaultPresets ?? []; - - return presets.length > 0; + const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {}; + return ( + ( defaultSpacingSizes !== false && + spacingSizes?.default?.length > 0 ) || + spacingSizes?.theme?.length > 0 || + spacingSizes?.custom?.length > 0 + ); } function filterValuesBySides( values, sides ) { diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 5c1e87001ca84..50211db723e23 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -60,6 +60,7 @@ const VALID_SETTINGS = [ 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', + 'spacing.defaultSpacingSizes', 'spacing.spacingSizes', 'spacing.spacingScale', 'spacing.blockGap', @@ -76,6 +77,7 @@ const VALID_SETTINGS = [ 'typography.fontWeight', 'typography.letterSpacing', 'typography.lineHeight', + 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.textTransform', @@ -87,10 +89,7 @@ export const useGlobalStylesReset = () => { const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG ); return [ canReset, - useCallback( - () => setUserConfig( () => EMPTY_CONFIG ), - [ setUserConfig ] - ), + useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ), ]; }; @@ -297,6 +296,7 @@ export function useSettingsForBlockElement( 'fontStyle', 'fontWeight', 'letterSpacing', + 'textAlign', 'textTransform', 'textDecoration', 'writingMode', @@ -377,8 +377,13 @@ export function useSettingsForBlockElement( ? updatedSettings.shadow : false; + // Text alignment is only available for blocks. + if ( element ) { + updatedSettings.typography.textAlign = false; + } + return updatedSettings; - }, [ parentSettings, supportedStyles, supports ] ); + }, [ parentSettings, supportedStyles, supports, element ] ); } export function useColorsPerOrigin( settings ) { diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js index 0e9aeb4c9c84e..062df0a5606e9 100644 --- a/packages/block-editor/src/components/global-styles/index.js +++ b/packages/block-editor/src/components/global-styles/index.js @@ -8,6 +8,8 @@ export { export { getBlockCSSSelector } from './get-block-css-selector'; export { getLayoutStyles, + getBlockSelectors, + toStyles, useGlobalStylesOutput, useGlobalStylesOutputWithConfig, } from './use-global-styles-output'; diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 64a7be0443e1e..3106723945fe8 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -17,6 +17,7 @@ import FontFamilyControl from '../font-family'; import FontAppearanceControl from '../font-appearance-control'; import LineHeightControl from '../line-height-control'; import LetterSpacingControl from '../letter-spacing-control'; +import TextAlignmentControl from '../text-alignment-control'; import TextTransformControl from '../text-transform-control'; import TextDecorationControl from '../text-decoration-control'; import WritingModeControl from '../writing-mode-control'; @@ -31,6 +32,7 @@ export function useHasTypographyPanel( settings ) { const hasLineHeight = useHasLineHeightControl( settings ); const hasFontAppearance = useHasAppearanceControl( settings ); const hasLetterSpacing = useHasLetterSpacingControl( settings ); + const hasTextAlign = useHasTextAlignmentControl( settings ); const hasTextTransform = useHasTextTransformControl( settings ); const hasTextDecoration = useHasTextDecorationControl( settings ); const hasWritingMode = useHasWritingModeControl( settings ); @@ -42,6 +44,7 @@ export function useHasTypographyPanel( settings ) { hasLineHeight || hasFontAppearance || hasLetterSpacing || + hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || @@ -92,6 +95,10 @@ function useHasTextTransformControl( settings ) { return settings?.typography?.textTransform; } +function useHasTextAlignmentControl( settings ) { + return settings?.typography?.textAlign; +} + function useHasTextDecorationControl( settings ) { return settings?.typography?.textDecoration; } @@ -151,6 +158,7 @@ const DEFAULT_CONTROLS = { fontAppearance: true, lineHeight: true, letterSpacing: true, + textAlign: true, textTransform: true, textDecoration: true, writingMode: true, @@ -339,6 +347,22 @@ export default function TypographyPanel( { const hasWritingMode = () => !! value?.typography?.writingMode; const resetWritingMode = () => setWritingMode( undefined ); + // Text Alignment + const hasTextAlignmentControl = useHasTextAlignmentControl( settings ); + + const textAlign = decodeValue( inheritedValue?.typography?.textAlign ); + const setTextAlign = ( newValue ) => { + onChange( + setImmutably( + value, + [ 'typography', 'textAlign' ], + newValue || undefined + ) + ); + }; + const hasTextAlign = () => !! value?.typography?.textAlign; + const resetTextAlign = () => setTextAlign( undefined ); + const resetAllFilter = useCallback( ( previousValue ) => { return { ...previousValue, @@ -519,6 +543,22 @@ export default function TypographyPanel( { /> ) } + { hasTextAlignmentControl && ( + + + + ) } ); } diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index f2eaa50a890a9..28e1ddac9ab1d 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -21,6 +21,7 @@ import { ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR, scopeSelector, + scopeFeatureSelectors, appendToSelector, getBlockStyleVariationSelector, } from './utils'; @@ -646,14 +647,104 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => { if ( node?.variations ) { const variations = {}; - Object.keys( node.variations ).forEach( ( variation ) => { - variations[ variation ] = pickStyleKeys( - node.variations[ variation ] - ); - } ); + Object.entries( node.variations ).forEach( + ( [ variationName, variation ] ) => { + variations[ variationName ] = + pickStyleKeys( variation ); + + const variationSelector = + blockSelectors[ blockName ] + .styleVariationSelectors?.[ variationName ]; + + // Process the variation's inner element styles. + // This comes before the inner block styles so the + // element styles within the block type styles take + // precedence over these. + Object.entries( variation?.elements ?? {} ).forEach( + ( [ element, elementStyles ] ) => { + if ( elementStyles && ELEMENTS[ element ] ) { + nodes.push( { + styles: elementStyles, + selector: scopeSelector( + variationSelector, + ELEMENTS[ element ] + ), + } ); + } + } + ); + + // Process the variations inner block type styles. + Object.entries( variation?.blocks ?? {} ).forEach( + ( [ + variationBlockName, + variationBlockStyles, + ] ) => { + const variationBlockSelector = scopeSelector( + variationSelector, + blockSelectors[ variationBlockName ] + .selector + ); + const variationDuotoneSelector = scopeSelector( + variationSelector, + blockSelectors[ variationBlockName ] + .duotoneSelector + ); + const variationFeatureSelectors = + scopeFeatureSelectors( + variationSelector, + blockSelectors[ variationBlockName ] + .featureSelectors + ); + + nodes.push( { + selector: variationBlockSelector, + duotoneSelector: variationDuotoneSelector, + featureSelectors: variationFeatureSelectors, + fallbackGapValue: + blockSelectors[ variationBlockName ] + .fallbackGapValue, + hasLayoutSupport: + blockSelectors[ variationBlockName ] + .hasLayoutSupport, + styles: pickStyleKeys( + variationBlockStyles + ), + } ); + + // Process element styles for the inner blocks + // of the variation. + Object.entries( + variationBlockStyles.elements ?? {} + ).forEach( + ( [ + variationBlockElement, + variationBlockElementStyles, + ] ) => { + if ( + variationBlockElementStyles && + ELEMENTS[ variationBlockElement ] + ) { + nodes.push( { + styles: variationBlockElementStyles, + selector: scopeSelector( + variationBlockSelector, + ELEMENTS[ + variationBlockElement + ] + ), + } ); + } + } + ); + } + ); + } + ); blockStyles.variations = variations; } - if ( blockStyles && blockSelectors?.[ blockName ]?.selector ) { + + if ( blockSelectors?.[ blockName ]?.selector ) { nodes.push( { duotoneSelector: blockSelectors[ blockName ].duotoneSelector, @@ -825,7 +916,7 @@ export const toStyles = ( .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; } - .has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; } + .has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; `; } @@ -970,7 +1061,7 @@ export const toStyles = ( return; } - // `selector` maybe provided in a form + // `selector` may be provided in a form // where block level selectors have sub element // selectors appended to them as a comma separated // string. @@ -1074,7 +1165,11 @@ const getSelectorsConfig = ( blockType, rootSelector ) => { return config; }; -export const getBlockSelectors = ( blockTypes, getBlockStyles ) => { +export const getBlockSelectors = ( + blockTypes, + getBlockStyles, + variationInstanceId +) => { const result = {}; blockTypes.forEach( ( blockType ) => { const name = blockType.name; @@ -1104,16 +1199,19 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => { const blockStyleVariations = getBlockStyles( name ); const styleVariationSelectors = {}; - if ( blockStyleVariations?.length ) { - blockStyleVariations.forEach( ( variation ) => { - const styleVariationSelector = getBlockStyleVariationSelector( - variation.name, - selector - ); - styleVariationSelectors[ variation.name ] = - styleVariationSelector; - } ); - } + blockStyleVariations?.forEach( ( variation ) => { + const variationSuffix = variationInstanceId + ? `-${ variationInstanceId }` + : ''; + const variationName = `${ variation.name }${ variationSuffix }`; + const styleVariationSelector = getBlockStyleVariationSelector( + variationName, + selector + ); + + styleVariationSelectors[ variationName ] = styleVariationSelector; + } ); + // For each block support feature add any custom selectors. const featureSelectors = getSelectorsConfig( blockType, selector ); @@ -1126,8 +1224,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => { hasLayoutSupport, name, selector, - styleVariationSelectors: Object.keys( styleVariationSelectors ) - .length + styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : undefined, }; diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js index 23738378b6998..71753a67beb02 100644 --- a/packages/block-editor/src/components/height-control/index.js +++ b/packages/block-editor/src/components/height-control/index.js @@ -156,7 +156,7 @@ export default function HeightControl( { onChange={ onChange } onUnitChange={ handleUnitChange } min={ 0 } - size={ '__unstable-large' } + size="__unstable-large" label={ label } hideLabelFromVision /> diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js index e363db4961c7c..f759b0e519fd6 100644 --- a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js +++ b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js @@ -89,7 +89,7 @@ const WarningMaxDepthExceeded = ( { clientId } ) => { setShowDetails( true ) } > diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js index d1021b639a5c5..709e005b587ce 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js @@ -31,7 +31,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) { return ( { sprintf( diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 9ee57ed7950a8..3703381b23a14 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -136,7 +136,12 @@ export function PatternCategoryPreviews( { > - + { category.label } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js b/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js index 7f5abf0b8540e..9e57f00b6b466 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js @@ -113,7 +113,8 @@ export function PatternsFilter( { popoverProps={ { placement: 'right-end', } } - label="Filter patterns" + label={ __( 'Filter patterns' ) } + toggleProps={ { size: 'compact' } } icon={ } diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 57f66b6e4bb6a..50a8b46b46427 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -3,7 +3,7 @@ */ import { __, _x } from '@wordpress/i18n'; import { useMemo, useEffect, forwardRef } from '@wordpress/element'; -import { pipe, useAsyncList } from '@wordpress/compose'; +import { useAsyncList } from '@wordpress/compose'; /** * Internal dependencies @@ -27,15 +27,15 @@ const MAX_SUGGESTED_ITEMS = 6; */ const EMPTY_ARRAY = []; -export function BlockTypesTab( - { rootClientId, onInsert, onHover, showMostUsedBlocks }, - ref -) { - const [ items, categories, collections, onSelectItem ] = useBlockTypesState( - rootClientId, - onInsert - ); - +export function BlockTypesTabPanel( { + items, + collections, + categories, + onSelectItem, + onHover, + showMostUsedBlocks, + className, +} ) { const suggestedItems = useMemo( () => { return orderBy( items, 'frecency', 'desc' ).slice( 0, @@ -47,24 +47,6 @@ export function BlockTypesTab( return items.filter( ( item ) => ! item.category ); }, [ items ] ); - const itemsPerCategory = useMemo( () => { - return pipe( - ( itemList ) => - itemList.filter( - ( item ) => item.category && item.category !== 'reusable' - ), - ( itemList ) => - itemList.reduce( ( acc, item ) => { - const { category } = item; - if ( ! acc[ category ] ) { - acc[ category ] = []; - } - acc[ category ].push( item ); - return acc; - }, {} ) - )( items ); - }, [ items ] ); - const itemsPerCollection = useMemo( () => { // Create a new Object to avoid mutating collection. const result = { ...collections }; @@ -101,14 +83,13 @@ export function BlockTypesTab( didRenderAllCategories ? collectionEntries : EMPTY_ARRAY ); - if ( ! items.length ) { - return ; - } - return ( - -
- { showMostUsedBlocks && !! suggestedItems.length && ( +
+ { showMostUsedBlocks && + // Only show the most used blocks if the total amount of block + // is larger than 1 row, otherwise it is not so useful. + items.length > 3 && + !! suggestedItems.length && ( ) } - { currentlyRenderedCategories.map( ( category ) => { - const categoryItems = itemsPerCategory[ category.slug ]; - if ( ! categoryItems || ! categoryItems.length ) { + { currentlyRenderedCategories.map( ( category ) => { + const categoryItems = items.filter( + ( item ) => item.category === category.slug + ); + if ( ! categoryItems || ! categoryItems.length ) { + return null; + } + return ( + + + + ); + } ) } + + { didRenderAllCategories && uncategorizedItems.length > 0 && ( + + + + ) } + + { currentlyRenderedCollections.map( + ( [ namespace, collection ] ) => { + const collectionItems = itemsPerCollection[ namespace ]; + if ( ! collectionItems || ! collectionItems.length ) { return null; } + return ( ); - } ) } + } + ) } +
+ ); +} - { didRenderAllCategories && uncategorizedItems.length > 0 && ( - - ; + } + + const itemsForCurrentRoot = []; + const itemsRemaining = []; + + for ( const item of items ) { + // Skip reusable blocks, they moved to the patterns tab. + if ( item.category === 'reusable' ) { + continue; + } + + if ( rootClientId && item.rootClientId === rootClientId ) { + itemsForCurrentRoot.push( item ); + } else { + itemsRemaining.push( item ); + } + } + + return ( + +
+ { !! itemsForCurrentRoot.length && ( + <> + - - ) } - - { currentlyRenderedCollections.map( - ( [ namespace, collection ] ) => { - const collectionItems = itemsPerCollection[ namespace ]; - if ( ! collectionItems || ! collectionItems.length ) { - return null; - } - - return ( - - - - ); - } + ) } +
); diff --git a/packages/block-editor/src/components/inserter/block-types-tab.native.js b/packages/block-editor/src/components/inserter/block-types-tab.native.js index e6108b95d60c3..e92efde21b138 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.native.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.native.js @@ -18,7 +18,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ]; function BlockTypesTab( { onSelect, rootClientId, listProps } ) { const [ rawBlockTypes, , collections ] = useBlockTypesState( rootClientId, - onSelect + onSelect, + true ); const clipboardBlock = useClipboardBlock( rootClientId ); const filteredBlockTypes = filterInserterItems( rawBlockTypes ); diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 47c9f0e051a66..a379f4719556b 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -27,7 +27,7 @@ function CategoryTabs( { className="block-editor-inserter__category-tabs" selectOnMove={ false } selectedTabId={ selectedCategory ? selectedCategory.name : null } - orientation={ 'vertical' } + orientation="vertical" onSelect={ ( categoryId ) => { // Pass the full category object onSelectCategory( diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 566d0476fbd0f..8db23267eee8f 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -8,26 +8,35 @@ import { parse, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; /** * Internal dependencies */ import { store as blockEditorStore } from '../../../store'; +import { withRootClientIdOptionKey } from '../../../store/utils'; /** * Retrieves the block types inserter state. * * @param {string=} rootClientId Insertion's root client ID. * @param {Function} onInsert function called when inserter a list of blocks. + * @param {boolean} isQuick * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler) */ -const useBlockTypesState = ( rootClientId, onInsert ) => { +const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { + const options = useMemo( + () => ( { [ withRootClientIdOptionKey ]: ! isQuick } ), + [ isQuick ] + ); const [ items ] = useSelect( ( select ) => [ - select( blockEditorStore ).getInserterItems( rootClientId ), + select( blockEditorStore ).getInserterItems( + rootClientId, + options + ), ], - [ rootClientId ] + [ rootClientId, options ] ); const [ categories, collections ] = useSelect( ( select ) => { @@ -37,7 +46,14 @@ const useBlockTypesState = ( rootClientId, onInsert ) => { const onSelectItem = useCallback( ( - { name, initialAttributes, innerBlocks, syncStatus, content }, + { + name, + initialAttributes, + innerBlocks, + syncStatus, + content, + rootClientId: _rootClientId, + }, shouldFocusBlock ) => { const insertedBlock = @@ -51,7 +67,12 @@ const useBlockTypesState = ( rootClientId, onInsert ) => { createBlocksFromInnerBlocksTemplate( innerBlocks ) ); - onInsert( insertedBlock, undefined, shouldFocusBlock ); + onInsert( + insertedBlock, + undefined, + shouldFocusBlock, + _rootClientId + ); }, [ onInsert ] ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 0dae090578ab4..24074ec500456 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useRegistry, useSelect } from '@wordpress/data'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { _n, sprintf } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; @@ -13,6 +13,34 @@ import { useCallback } from '@wordpress/element'; import { store as blockEditorStore } from '../../../store'; import { unlock } from '../../../lock-unlock'; +function getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId, + registry, +} ) { + if ( rootClientId === destinationRootClientId ) { + return destinationIndex; + } + const parents = [ + '', + ...registry + .select( blockEditorStore ) + .getBlockParents( destinationRootClientId ), + destinationRootClientId, + ]; + const parentIndex = parents.indexOf( rootClientId ); + if ( parentIndex !== -1 ) { + return ( + registry + .select( blockEditorStore ) + .getBlockIndex( parents[ parentIndex + 1 ] ) + 1 + ); + } + return registry.select( blockEditorStore ).getBlockOrder( rootClientId ) + .length; +} + /** * @typedef WPInserterConfig * @@ -42,6 +70,7 @@ function useInsertionPoint( { shouldFocusBlock = true, selectBlockOnInsert = true, } ) { + const registry = useRegistry(); const { getSelectedBlock } = useSelect( blockEditorStore ); const { destinationRootClientId, destinationIndex } = useSelect( ( select ) => { @@ -91,7 +120,7 @@ function useInsertionPoint( { } = unlock( useDispatch( blockEditorStore ) ); const onInsertBlocks = useCallback( - ( blocks, meta, shouldForceFocusBlock = false ) => { + ( blocks, meta, shouldForceFocusBlock = false, _rootClientId ) => { // When we are trying to move focus or select a new block on insert, we also // need to clear the last focus to avoid the focus being set to the wrong block // when tabbing back into the canvas if the block was added from outside the @@ -121,8 +150,17 @@ function useInsertionPoint( { } else { insertBlocks( blocks, - destinationIndex, - destinationRootClientId, + isAppender || _rootClientId === undefined + ? destinationIndex + : getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId: _rootClientId, + registry, + } ), + isAppender || _rootClientId === undefined + ? destinationRootClientId + : _rootClientId, selectBlockOnInsert, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, meta @@ -154,9 +192,17 @@ function useInsertionPoint( { ); const onToggleInsertionPoint = useCallback( - ( show ) => { - if ( show ) { - showInsertionPoint( destinationRootClientId, destinationIndex ); + ( item ) => { + if ( item?.hasOwnProperty( 'rootClientId' ) ) { + showInsertionPoint( + item.rootClientId, + getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId: item.rootClientId, + registry, + } ) + ); } else { hideInsertionPoint(); } diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index 6be31f49b5fbe..4e10a051996a9 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -7,7 +7,7 @@ import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ -import InserterMenu from './menu'; +import { PrivateInserterMenu } from './menu'; import { store as blockEditorStore } from '../../store'; const noop = () => {}; @@ -23,7 +23,7 @@ function InserterLibrary( __experimentalInitialTab, __experimentalInitialCategory, __experimentalFilterValue, - __experimentalOnPatternCategorySelection, + onPatternCategorySelection, onSelect = noop, shouldFocusBlock = false, onClose, @@ -43,7 +43,7 @@ function InserterLibrary( ); return ( - + ); +} + +export default forwardRef( PublicInserterLibrary ); diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bda1584c22149..6a4ac798b7490 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -45,7 +45,7 @@ function InserterMenu( showMostUsedBlocks, __experimentalFilterValue = '', shouldFocusBlock = true, - __experimentalOnPatternCategorySelection = NOOP, + onPatternCategorySelection, onClose, __experimentalInitialTab, __experimentalInitialCategory, @@ -81,8 +81,13 @@ function InserterMenu( const blockTypesTabRef = useRef(); const onInsert = useCallback( - ( blocks, meta, shouldForceFocusBlock ) => { - onInsertBlocks( blocks, meta, shouldForceFocusBlock ); + ( blocks, meta, shouldForceFocusBlock, _rootClientId ) => { + onInsertBlocks( + blocks, + meta, + shouldForceFocusBlock, + _rootClientId + ); onSelect(); // Check for focus loss due to filtering blocks by selected block type @@ -111,7 +116,7 @@ function InserterMenu( const onHover = useCallback( ( item ) => { - onToggleInsertionPoint( !! item ); + onToggleInsertionPoint( item ); setHoveredItem( item ); }, [ onToggleInsertionPoint, setHoveredItem ] @@ -128,9 +133,9 @@ function InserterMenu( ( patternCategory, filter ) => { setSelectedPatternCategory( patternCategory ); setPatternFilter( filter ); - __experimentalOnPatternCategorySelection(); + onPatternCategorySelection?.(); }, - [ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ] + [ setSelectedPatternCategory, onPatternCategorySelection ] ); const showPatternPanel = @@ -341,4 +346,16 @@ function InserterMenu( ); } -export default forwardRef( InserterMenu ); +export const PrivateInserterMenu = forwardRef( InserterMenu ); + +function PublicInserterMenu( props, ref ) { + return ( + + ); +} + +export default forwardRef( PublicInserterMenu ); diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 3405ac98b881c..022957df952ce 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -44,7 +44,8 @@ export default function QuickInserter( { } ); const [ blockTypes ] = useBlockTypesState( destinationRootClientId, - onInsertBlocks + onInsertBlocks, + true ); const [ patterns ] = usePatternsState( @@ -126,6 +127,7 @@ export default function QuickInserter( { isDraggable={ false } prioritizePatterns={ prioritizePatterns } selectBlockOnInsert={ selectBlockOnInsert } + isQuick />
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index edd99609ea916..9c001823745e6 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -50,6 +50,7 @@ function InserterSearchResults( { shouldFocusBlock = true, prioritizePatterns, selectBlockOnInsert, + isQuick, } ) { const debouncedSpeak = useDebounce( speak, 500 ); @@ -80,7 +81,7 @@ function InserterSearchResults( { blockTypeCategories, blockTypeCollections, onSelectBlockType, - ] = useBlockTypesState( destinationRootClientId, onInsertBlocks ); + ] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick ); const [ patterns, , onClickPattern ] = usePatternsState( onInsertBlocks, destinationRootClientId diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 354a0fa70ffc5..d3f4e4e14335c 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -115,6 +115,19 @@ $block-inserter-tabs-height: 44px; flex-direction: column; overflow: hidden; + .block-editor-inserter__tablist-and-close-button { + border-bottom: $border-width solid $gray-300; + padding-right: $grid-unit-15; + display: flex; + justify-content: space-between; + } + + .block-editor-inserter__close-button { + /* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */ + order: 1; + align-self: center; + } + .block-editor-inserter__tablist { width: 100%; margin-bottom: -$border-width; @@ -240,6 +253,10 @@ $block-inserter-tabs-height: 44px; } } +.block-editor-inserter__insertable-blocks-at-selection { + border-bottom: $border-width solid $gray-200; +} + .block-editor-inserter__media-tabs-container, .block-editor-inserter__block-patterns-tabs-container { padding: $grid-unit-20; @@ -316,27 +333,35 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__category-panel { background: $gray-100; - border-left: $border-width solid $gray-200; - border-right: $border-width solid $gray-200; + border-top: $border-width solid $gray-200; + box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. position: absolute; - top: 0; + top: -$border-width; left: 0; - height: 100%; + height: calc(100% + #{$border-width}); width: 100%; padding: 0 $grid-unit-20; display: flex; flex-direction: column; @include break-medium { + border-left: $border-width solid $gray-200; padding: 0; left: 100%; width: 300px; } + + .block-editor-inserter__media-list, + .block-editor-block-patterns-list { + padding: 0 $grid-unit-30 $grid-unit-20; + } } .block-editor-inserter__patterns-category-panel-header { - padding: 16px $grid-unit-30; + padding: $grid-unit-10 $grid-unit-30; } + .block-editor-inserter__patterns-category-no-results { margin-top: $grid-unit-30; } @@ -346,7 +371,6 @@ $block-inserter-tabs-height: 44px; overflow-y: auto; flex-grow: 1; height: 100%; - padding: $grid-unit-20 $grid-unit-30; } .block-editor-inserter__preview-content { @@ -507,8 +531,8 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__patterns-category-panel-title { - font-size: calc(1.25 * 13px); +.components-heading.block-editor-inserter__patterns-category-panel-title { + font-weight: 500; } .block-editor-inserter__patterns-explore-button, @@ -540,7 +564,7 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__media-panel-search { - padding: $grid-unit-20 $grid-unit-30 0; + padding: $grid-unit-20 $grid-unit-30 $grid-unit-10; // TODO: Consider using the Theme component to automatically adapt to a gray background. &:not(:focus-within) { --wp-components-color-background: #{$white}; @@ -552,7 +576,6 @@ $block-inserter-tabs-height: 44px; position: relative; cursor: pointer; margin-bottom: $grid-unit-30; - box-shadow: 0 15px 25px rgb(0 0 0 / 7%); &.is-placeholder { min-height: 100px; @@ -563,8 +586,8 @@ $block-inserter-tabs-height: 44px; } &.is-hovered { - .block-editor-inserter__media-list__item-preview { - box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%); + .block-editor-inserter__media-list__item-preview > * { + outline-color: rgba($black, 0.3); } .block-editor-inserter__media-list__item-preview-options > button { @@ -611,6 +634,9 @@ $block-inserter-tabs-height: 44px; > * { margin: 0 auto; max-width: 100%; + outline: $border-width solid rgba($black, 0.1); + outline-offset: -$border-width; + border-radius: $radius-block-ui; } .block-editor-inserter__media-list__item-preview-spinner { @@ -625,11 +651,12 @@ $block-inserter-tabs-height: 44px; } } - &:focus .block-editor-inserter__media-list__item-preview { - box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; + &:focus .block-editor-inserter__media-list__item-preview > * { + outline-color: var(--wp-admin-theme-color); + outline-width: var(--wp-admin-border-width-focus); + outline-offset: calc((-1 * var(--wp-admin-border-width-focus))); + transition: outline 0.1s linear; + @include reduce-motion("transition"); } } diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index d3ce5d80993d3..b46e4bfdaf014 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -39,9 +39,9 @@ function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) { return (
-
+
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json index 1d6b817c00302..8e52c8bcfa30b 100644 --- a/packages/block-library/src/verse/block.json +++ b/packages/block-library/src/verse/block.json @@ -21,6 +21,13 @@ }, "supports": { "anchor": true, + "background": { + "backgroundImage": true, + "backgroundSize": true, + "__experimentalDefaultControls": { + "backgroundImage": true + } + }, "color": { "gradients": true, "link": true, @@ -29,6 +36,12 @@ "text": true } }, + "dimensions": { + "minHeight": true, + "__experimentalDefaultControls": { + "minHeight": false + } + }, "typography": { "fontSize": true, "__experimentalFontFamily": true, diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index d781fb31b5f3a..5ebf431ade3fc 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -74,9 +74,13 @@ const VideoSettings = ( { setAttributes, attributes } ) => { /> { if ( - newAttributes.metadata.bindings[ binding ]?.source?.name === - 'pattern_attributes' + newAttributes.metadata.bindings[ binding ]?.source === + 'core/pattern-overrides' ) { - newAttributes.metadata.bindings[ binding ].source = - 'core/pattern-overrides'; + hasPatternOverrides = true; + newAttributes.metadata = { + ...newAttributes.metadata, + bindings: { ...newAttributes.metadata.bindings }, + }; + delete newAttributes.metadata.bindings[ binding ]; } } ); + if ( hasPatternOverrides ) { + newAttributes.metadata.bindings.__default = { + source: 'core/pattern-overrides', + }; + } } } return [ name, newAttributes ]; diff --git a/packages/blocks/src/api/parser/fix-custom-classname.js b/packages/blocks/src/api/parser/fix-custom-classname.js index d72065cd59222..78f04ea4a00fa 100644 --- a/packages/blocks/src/api/parser/fix-custom-classname.js +++ b/packages/blocks/src/api/parser/fix-custom-classname.js @@ -42,27 +42,30 @@ export function getHTMLRootElementClasses( innerHTML ) { * @return {Object} Filtered block attributes. */ export function fixCustomClassname( blockAttributes, blockType, innerHTML ) { - if ( hasBlockSupport( blockType, 'customClassName', true ) ) { - // To determine difference, serialize block given the known set of - // attributes, with the exception of `className`. This will determine - // the default set of classes. From there, any difference in innerHTML - // can be considered as custom classes. - const { className: omittedClassName, ...attributesSansClassName } = - blockAttributes; - const serialized = getSaveContent( blockType, attributesSansClassName ); - const defaultClasses = getHTMLRootElementClasses( serialized ); - const actualClasses = getHTMLRootElementClasses( innerHTML ); + if ( ! hasBlockSupport( blockType, 'customClassName', true ) ) { + return blockAttributes; + } + + const modifiedBlockAttributes = { ...blockAttributes }; + // To determine difference, serialize block given the known set of + // attributes, with the exception of `className`. This will determine + // the default set of classes. From there, any difference in innerHTML + // can be considered as custom classes. + const { className: omittedClassName, ...attributesSansClassName } = + modifiedBlockAttributes; + const serialized = getSaveContent( blockType, attributesSansClassName ); + const defaultClasses = getHTMLRootElementClasses( serialized ); + const actualClasses = getHTMLRootElementClasses( innerHTML ); - const customClasses = actualClasses.filter( - ( className ) => ! defaultClasses.includes( className ) - ); + const customClasses = actualClasses.filter( + ( className ) => ! defaultClasses.includes( className ) + ); - if ( customClasses.length ) { - blockAttributes.className = customClasses.join( ' ' ); - } else if ( serialized ) { - delete blockAttributes.className; - } + if ( customClasses.length ) { + modifiedBlockAttributes.className = customClasses.join( ' ' ); + } else if ( serialized ) { + delete modifiedBlockAttributes.className; } - return blockAttributes; + return modifiedBlockAttributes; } diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js index 24faae7370463..36ea86399329e 100644 --- a/packages/blocks/src/api/parser/get-block-attributes.js +++ b/packages/blocks/src/api/parser/get-block-attributes.js @@ -7,7 +7,6 @@ import memoize from 'memize'; /** * WordPress dependencies */ -import { pipe } from '@wordpress/compose'; import { applyFilters } from '@wordpress/hooks'; import { RichTextData } from '@wordpress/rich-text'; @@ -37,24 +36,8 @@ import { normalizeBlockType, getDefault } from '../utils'; * * @return {Function} Enhanced hpq matcher. */ -export const toBooleanAttributeMatcher = ( matcher ) => - pipe( [ - matcher, - // Expected values from `attr( 'disabled' )`: - // - // - // - Value: `undefined` - // - Transformed: `false` - // - // - // - Value: `''` - // - Transformed: `true` - // - // - // - Value: `'disabled'` - // - Transformed: `true` - ( value ) => value !== undefined, - ] ); +export const toBooleanAttributeMatcher = ( matcher ) => ( value ) => + matcher( value ) !== undefined; /** * Returns true if value is of the given JSON schema type, or false otherwise. @@ -214,13 +197,13 @@ export function isValidByEnum( value, enumSet ) { */ export const matcherFromSource = memoize( ( sourceConfig ) => { switch ( sourceConfig.source ) { - case 'attribute': + case 'attribute': { let matcher = attr( sourceConfig.selector, sourceConfig.attribute ); if ( sourceConfig.type === 'boolean' ) { matcher = toBooleanAttributeMatcher( matcher ); } - return matcher; + } case 'html': return html( sourceConfig.selector, sourceConfig.multiline ); case 'text': @@ -244,12 +227,10 @@ export const matcherFromSource = memoize( ( sourceConfig ) => { ) ); return query( sourceConfig.selector, subMatchers ); - case 'tag': - return pipe( [ - prop( sourceConfig.selector, 'nodeName' ), - ( nodeName ) => - nodeName ? nodeName.toLowerCase() : undefined, - ] ); + case 'tag': { + const matcher = prop( sourceConfig.selector, 'nodeName' ); + return ( domNode ) => matcher( domNode )?.toLowerCase(); + } default: // eslint-disable-next-line no-console console.error( `Unknown source type "${ sourceConfig.source }"` ); diff --git a/packages/blocks/src/api/parser/index.js b/packages/blocks/src/api/parser/index.js index f8ff0c68964dc..14a88f602987a 100644 --- a/packages/blocks/src/api/parser/index.js +++ b/packages/blocks/src/api/parser/index.js @@ -178,7 +178,7 @@ function applyBlockValidation( unvalidatedBlock, blockType ) { ); // Attempt to validate the block once again after the built-in fixes. const [ isFixedValid, validationIssues ] = validateBlock( - unvalidatedBlock, + fixedBlock, blockType ); diff --git a/packages/blocks/src/api/parser/test/index.js b/packages/blocks/src/api/parser/test/index.js index 85e51e9d0af02..42923a7d3eeb3 100644 --- a/packages/blocks/src/api/parser/test/index.js +++ b/packages/blocks/src/api/parser/test/index.js @@ -50,6 +50,38 @@ describe( 'block parser', () => { } ); describe( 'parseRawBlock', () => { + it( 'should apply className block validation fixes', () => { + registerBlockType( 'core/test-block', { + ...defaultBlockSettings, + attributes: { + fruit: { + type: 'string', + source: 'text', + selector: 'div', + }, + }, + save: ( { attributes } ) => ( + // eslint-disable-next-line react/no-unknown-property +
+ { attributes.fruit } +
+ ), + } ); + + const block = parseRawBlock( { + blockName: 'core/test-block', + innerHTML: + '
Bananas
', + attrs: { fruit: 'Bananas' }, + } ); + + expect( block.name ).toEqual( 'core/test-block' ); + expect( block.attributes ).toEqual( { + fruit: 'Bananas', + className: 'custom-class another-custom-class', + } ); + } ); + it( 'should create the requested block if it exists', () => { registerBlockType( 'core/test-block', defaultBlockSettings ); diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js index c6a9288ede2d3..550c2e0e6e153 100644 --- a/packages/blocks/src/api/raw-handling/image-corrector.native.js +++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js @@ -10,7 +10,10 @@ export default function imageCorrector( node ) { return; } - if ( node.src.indexOf( 'file:' ) === 0 ) { + // For local files makes sure the path doesn't end with an invalid extension. + // This scenario often happens with content from MS Word and similar text apps. + // We still need to support local files pasted from the users Media library. + if ( node.src.startsWith( 'file:' ) && node.src.slice( -1 ) === '/' ) { node.setAttribute( 'src', '' ); } diff --git a/packages/blocks/src/store/private-actions.js b/packages/blocks/src/store/private-actions.js index a47d9aacab37a..dd6650338d9d1 100644 --- a/packages/blocks/src/store/private-actions.js +++ b/packages/blocks/src/store/private-actions.js @@ -55,6 +55,6 @@ export function registerBlockBindingsSource( source ) { setValue: source.setValue, setValues: source.setValues, getPlaceholder: source.getPlaceholder, - lockAttributesEditing: source.lockAttributesEditing, + canUserEditValue: source.canUserEditValue, }; } diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js index 1d0d8cb2e968f..c00810c534d55 100644 --- a/packages/blocks/src/store/reducer.js +++ b/packages/blocks/src/store/reducer.js @@ -381,10 +381,7 @@ export function blockBindingsSources( state = {}, action ) { setValue: action.setValue, setValues: action.setValues, getPlaceholder: action.getPlaceholder, - lockAttributesEditing: () => - action.lockAttributesEditing - ? action.lockAttributesEditing() - : true, + canUserEditValue: action.canUserEditValue || ( () => false ), }, }; } diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js index a69879809ab1a..e97048e92b0c0 100644 --- a/packages/blocks/src/store/selectors.js +++ b/packages/blocks/src/store/selectors.js @@ -6,13 +6,13 @@ import removeAccents from 'remove-accents'; /** * WordPress dependencies */ -import { pipe } from '@wordpress/compose'; import { createSelector } from '@wordpress/data'; +import { RichTextData } from '@wordpress/rich-text'; /** * Internal dependencies */ -import { getValueFromObjectPath } from './utils'; +import { getValueFromObjectPath, matchesAttributes } from './utils'; /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */ /** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */ @@ -238,26 +238,61 @@ export const getBlockVariations = createSelector( export function getActiveBlockVariation( state, blockName, attributes, scope ) { const variations = getBlockVariations( state, blockName, scope ); - const match = variations?.find( ( variation ) => { + if ( ! variations ) { + return variations; + } + + const blockType = getBlockType( state, blockName ); + const attributeKeys = Object.keys( blockType?.attributes || {} ); + let match; + let maxMatchedAttributes = 0; + + for ( const variation of variations ) { if ( Array.isArray( variation.isActive ) ) { - const blockType = getBlockType( state, blockName ); - const attributeKeys = Object.keys( blockType?.attributes || {} ); const definedAttributes = variation.isActive.filter( - ( attribute ) => attributeKeys.includes( attribute ) + ( attribute ) => { + // We support nested attribute paths, e.g. `layout.type`. + // In this case, we need to check if the part before the + // first dot is a known attribute. + const topLevelAttribute = attribute.split( '.' )[ 0 ]; + return attributeKeys.includes( topLevelAttribute ); + } ); - if ( definedAttributes.length === 0 ) { - return false; + const definedAttributesLength = definedAttributes.length; + if ( definedAttributesLength === 0 ) { + continue; } - return definedAttributes.every( - ( attribute ) => - attributes[ attribute ] === - variation.attributes[ attribute ] - ); + const isMatch = definedAttributes.every( ( attribute ) => { + const variationAttributeValue = getValueFromObjectPath( + variation.attributes, + attribute + ); + if ( variationAttributeValue === undefined ) { + return false; + } + let blockAttributeValue = getValueFromObjectPath( + attributes, + attribute + ); + if ( blockAttributeValue instanceof RichTextData ) { + blockAttributeValue = blockAttributeValue.toHTMLString(); + } + return matchesAttributes( + blockAttributeValue, + variationAttributeValue + ); + } ); + if ( isMatch && definedAttributesLength > maxMatchedAttributes ) { + match = variation; + maxMatchedAttributes = definedAttributesLength; + } + } else if ( variation.isActive?.( attributes, variation.attributes ) ) { + // If isActive is a function, we cannot know how many attributes it matches. + // This means that we cannot compare the specificity of our matches, + // and simply return the best match we have found. + return match || variation; } - - return variation.isActive?.( attributes, variation.attributes ); - } ); - + } return match; } @@ -645,6 +680,18 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) { return !! getBlockSupport( state, nameOrType, feature, defaultSupports ); } +/** + * Normalizes a search term string: removes accents, converts to lowercase, removes extra whitespace. + * + * @param {string|null|undefined} term Search term to normalize. + * @return {string} Normalized search term. + */ +function getNormalizedSearchTerm( term ) { + return removeAccents( term ?? '' ) + .toLowerCase() + .trim(); +} + /** * Returns true if the block type by the given name or object value matches a * search term, or false otherwise. @@ -684,30 +731,12 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) { * * @return {Object[]} Whether block type matches search term. */ -export function isMatchingSearchTerm( state, nameOrType, searchTerm ) { +export function isMatchingSearchTerm( state, nameOrType, searchTerm = '' ) { const blockType = getNormalizedBlockType( state, nameOrType ); - - const getNormalizedSearchTerm = pipe( [ - // Disregard diacritics. - // Input: "média" - ( term ) => removeAccents( term ?? '' ), - - // Lowercase. - // Input: "MEDIA" - ( term ) => term.toLowerCase(), - - // Strip leading and trailing whitespace. - // Input: " media " - ( term ) => term.trim(), - ] ); - const normalizedSearchTerm = getNormalizedSearchTerm( searchTerm ); - const isSearchMatch = pipe( [ - getNormalizedSearchTerm, - ( normalizedCandidate ) => - normalizedCandidate.includes( normalizedSearchTerm ), - ] ); + const isSearchMatch = ( candidate ) => + getNormalizedSearchTerm( candidate ).includes( normalizedSearchTerm ); return ( isSearchMatch( blockType.title ) || diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js index 1fda11d72311a..1f95809c9674b 100644 --- a/packages/blocks/src/store/test/selectors.js +++ b/packages/blocks/src/store/test/selectors.js @@ -17,6 +17,11 @@ import { getActiveBlockVariation, } from '../selectors'; +/** + * WordPress dependencies + */ +import { RichTextData } from '@wordpress/rich-text'; + const keyBlocksByName = ( blocks ) => blocks.reduce( ( result, block ) => ( { ...result, [ block.name ]: block } ), @@ -291,6 +296,7 @@ describe( 'selectors', () => { testAttribute: {}, firstTestAttribute: {}, secondTestAttribute: {}, + thirdTestAttribute: {}, }, }; const FIRST_VARIATION_TEST_ATTRIBUTE_VALUE = 1; @@ -410,6 +416,161 @@ describe( 'selectors', () => { expect( result ).toEqual( variation ); } ); } ); + it( 'should support nested attribute paths in the isActive array', () => { + const variations = [ + { + name: 'variation-1', + attributes: { + firstTestAttribute: { + nestedProperty: 1, + otherNestedProperty: 5555, + }, + }, + isActive: [ 'firstTestAttribute.nestedProperty' ], + }, + { + name: 'variation-2', + attributes: { + firstTestAttribute: { + nestedProperty: 2, + otherNestedProperty: 5555, + }, + }, + isActive: [ 'firstTestAttribute.nestedProperty' ], + }, + ]; + const state = + createBlockVariationsStateWithTestBlockType( variations ); + + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: { + nestedProperty: 1, + }, + } ) + ).toEqual( variations[ 0 ] ); + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: { + nestedProperty: 2, + }, + } ) + ).toEqual( variations[ 1 ] ); + } ); + it( 'should support RichText attributes in the isActive array', () => { + const variations = [ + { + name: 'variation-1', + attributes: { + firstTestAttribute: + 'This is a RichText attribute.', + }, + isActive: [ 'firstTestAttribute' ], + }, + { + name: 'variation-2', + attributes: { + firstTestAttribute: + 'This is a RichText attribute.', + }, + isActive: [ 'firstTestAttribute' ], + }, + ]; + const state = + createBlockVariationsStateWithTestBlockType( variations ); + + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: RichTextData.fromHTMLString( + 'This is a RichText attribute.' + ), + } ) + ).toEqual( variations[ 0 ] ); + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: RichTextData.fromHTMLString( + 'This is a RichText attribute.' + ), + } ) + ).toEqual( variations[ 1 ] ); + } ); + it( 'should compare object attributes in the isActive array based on given properties', () => { + const variations = [ + { + name: 'variation-1', + attributes: { + firstTestAttribute: { + nestedProperty: 1, + secondNestedProperty: 10, + }, + secondTestAttribute: { + nestedProperty: { + firstDeeplyNestedProperty: 'a1', + secondDeeplyNestedProperty: 'a2', + }, + }, + }, + isActive: [ + 'firstTestAttribute', + 'secondTestAttribute.nestedProperty', + ], + }, + { + name: 'variation-2', + attributes: { + firstTestAttribute: { + nestedProperty: 2, + secondNestedProperty: 20, + }, + secondTestAttribute: { + nestedProperty: { + firstDeeplyNestedProperty: 'b1', + secondDeeplyNestedProperty: 'b2', + }, + }, + }, + isActive: [ + 'firstTestAttribute', + 'secondTestAttribute.nestedProperty', + ], + }, + ]; + const state = + createBlockVariationsStateWithTestBlockType( variations ); + + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: { + nestedProperty: 1, + secondNestedProperty: 10, + otherNestedProperty: 5555, + }, + secondTestAttribute: { + nestedProperty: { + firstDeeplyNestedProperty: 'a1', + secondDeeplyNestedProperty: 'a2', + otherDeeplyNestedProperty: 'ffff', + }, + }, + } ) + ).toEqual( variations[ 0 ] ); + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: { + nestedProperty: 2, + secondNestedProperty: 20, + otherNestedProperty: 5555, + }, + secondTestAttribute: { + nestedProperty: { + firstDeeplyNestedProperty: 'b1', + secondDeeplyNestedProperty: 'b2', + otherDeeplyNestedProperty: 'ffff', + }, + }, + } ) + ).toEqual( variations[ 1 ] ); + } ); it( 'should return the active variation based on the given isActive array (multiple values)', () => { const variations = [ { @@ -469,6 +630,136 @@ describe( 'selectors', () => { } ) ).toEqual( variations[ 2 ] ); } ); + it( 'should return the active variation using the match with the highest specificity for the given isActive array (multiple values)', () => { + const variations = [ + { + name: 'variation-1', + attributes: { + firstTestAttribute: 1, + secondTestAttribute: 2, + }, + isActive: [ + 'firstTestAttribute', + 'secondTestAttribute', + ], + }, + { + name: 'variation-2', + attributes: { + firstTestAttribute: 1, + secondTestAttribute: 2, + thirdTestAttribute: 3, + }, + isActive: [ + 'firstTestAttribute', + 'secondTestAttribute', + 'thirdTestAttribute', + ], + }, + { + name: 'variation-3', + attributes: { + firstTestAttribute: 1, + thirdTestAttribute: 3, + }, + isActive: [ + 'firstTestAttribute', + 'thirdTestAttribute', + ], + }, + ]; + + const state = + createBlockVariationsStateWithTestBlockType( variations ); + + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: 1, + secondTestAttribute: 2, + } ) + ).toEqual( variations[ 0 ] ); + // All variations match the following attributes. Since all matches have an array for their isActive + // fields, we can compare the specificity of each match and return the most specific match. + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: 1, + secondTestAttribute: 2, + thirdTestAttribute: 3, + } ) + ).toEqual( variations[ 1 ] ); + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: 1, + thirdTestAttribute: 3, + } ) + ).toEqual( variations[ 2 ] ); + } ); + it( 'should return the active variation using the first match given the isActive array (multiple values) and function', () => { + const variations = [ + { + name: 'variation-1', + attributes: { + firstTestAttribute: 1, + secondTestAttribute: 2, + }, + isActive: [ + 'firstTestAttribute', + 'secondTestAttribute', + ], + }, + { + name: 'variation-2', + attributes: { + firstTestAttribute: 1, + secondTestAttribute: 2, + thirdTestAttribute: 3, + }, + isActive: [ + 'firstTestAttribute', + 'secondTestAttribute', + 'thirdTestAttribute', + ], + }, + { + name: 'variation-3', + attributes: { + firstTestAttribute: 1, + thirdTestAttribute: 3, + }, + isActive: ( blockAttributes, variationAttributes ) => + blockAttributes.firstTestAttribute === + variationAttributes.firstTestAttribute && + blockAttributes.thirdTestAttribute === + variationAttributes.thirdTestAttribute, + }, + ]; + + const state = + createBlockVariationsStateWithTestBlockType( variations ); + + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: 1, + secondTestAttribute: 2, + } ) + ).toEqual( variations[ 0 ] ); + // All variations match the following attributes. However, since the third variation has a function + // for its isActive field, we cannot compare the specificity of each match, so instead we return the + // best match we've found. + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: 1, + secondTestAttribute: 2, + thirdTestAttribute: 3, + } ) + ).toEqual( variations[ 1 ] ); + expect( + getActiveBlockVariation( state, blockName, { + firstTestAttribute: 1, + thirdTestAttribute: 3, + } ) + ).toEqual( variations[ 2 ] ); + } ); it( 'should ignore attributes that are not defined in the block type', () => { const variations = [ { diff --git a/packages/blocks/src/store/utils.js b/packages/blocks/src/store/utils.js index 64974bd8000b2..ce9b9f9ab3be9 100644 --- a/packages/blocks/src/store/utils.js +++ b/packages/blocks/src/store/utils.js @@ -18,3 +18,33 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => { } ); return value ?? defaultValue; }; + +function isObject( candidate ) { + return ( + typeof candidate === 'object' && + candidate.constructor === Object && + candidate !== null + ); +} + +/** + * Determine whether a set of object properties matches a given object. + * + * Given an object of block attributes and an object of variation attributes, + * this function checks recursively whether all the variation attributes are + * present in the block attributes object. + * + * @param {Object} blockAttributes The object to inspect. + * @param {Object} variationAttributes The object of property values to match. + * @return {boolean} Whether the block attributes match the variation attributes. + */ +export function matchesAttributes( blockAttributes, variationAttributes ) { + if ( isObject( blockAttributes ) && isObject( variationAttributes ) ) { + return Object.entries( variationAttributes ).every( + ( [ key, value ] ) => + matchesAttributes( blockAttributes?.[ key ], value ) + ); + } + + return blockAttributes === variationAttributes; +} diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md index 51aa52e81c2b4..6737bb003c193 100644 --- a/packages/browserslist-config/CHANGELOG.md +++ b/packages/browserslist-config/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 6.0.0 (2024-05-31) + ### Breaking Changes - Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json index e78bf84269cb3..4f5a1773c25f9 100644 --- a/packages/browserslist-config/package.json +++ b/packages/browserslist-config/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/browserslist-config", - "version": "5.41.0", + "version": "6.0.0", "description": "WordPress Browserslist shared configuration.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md index a9f5a29306182..17a55cbf221de 100644 --- a/packages/commands/CHANGELOG.md +++ b/packages/commands/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 1.0.0 (2024-05-31) + ### Breaking Changes - Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). diff --git a/packages/commands/package.json b/packages/commands/package.json index fc89c6dd2508c..a4a8e952f3ef1 100644 --- a/packages/commands/package.json +++ b/packages/commands/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/commands", - "version": "0.29.0", + "version": "1.0.0", "description": "Handles the commands menu.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 34c1a6ca410c3..16244f291a0c7 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,17 @@ ## Unreleased +### Enhancements + +- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233)) +- Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696)) + +### Bug Fixes + +- `Tabs`: Prevent accidental overflow in indicator ([#61979](https://github.com/WordPress/gutenberg/pull/61979)). + +## 28.0.0 (2024-05-31) + ### Breaking Changes - Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). @@ -11,11 +22,14 @@ - `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)). - `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). +- `ProgressBar`: Expose as public API ([#61062](https://github.com/WordPress/gutenberg/pull/61062)). +- `ProgressBar`: Simplify default width implementation and make it more easily overridable ([#61976](https://github.com/WordPress/gutenberg/pull/61976)). ### Bug Fixes - `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)). - `TabPanel`: Make the the focus styles consistent with `Tabs`. ([#61317](https://github.com/WordPress/gutenberg/pull/61317)). +- `InputControl`: Fixed z-index issue where slider dots appeared in front of the Appearance dropdown. ([#61937](https://github.com/WordPress/gutenberg/pull/61937)) ### Internal diff --git a/packages/components/package.json b/packages/components/package.json index 79b01e5f020ee..89ed60367d88e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/components", - "version": "27.6.0", + "version": "28.0.0", "description": "UI components for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/components/src/animate/stories/index.story.tsx b/packages/components/src/animate/stories/index.story.tsx index be076b4e6976c..de28495a97fc5 100644 --- a/packages/components/src/animate/stories/index.story.tsx +++ b/packages/components/src/animate/stories/index.story.tsx @@ -27,7 +27,12 @@ export const Default = Template.bind( {} ); Default.args = { children: ( { className } ) => ( -

{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }

+

+ { /* eslint-disable react/no-unescaped-entities */ } + No default animation. Use one of type = "appear", "slide-in", or + "loading". + { /* eslint-enable react/no-unescaped-entities */ } +

), }; diff --git a/packages/components/src/autocomplete/test/index.tsx b/packages/components/src/autocomplete/test/index.tsx index 7a31680b3dd5e..0df784f8367cd 100644 --- a/packages/components/src/autocomplete/test/index.tsx +++ b/packages/components/src/autocomplete/test/index.tsx @@ -67,10 +67,10 @@ describe( 'AutocompleterUI', () => { return (
{} } onSelect={ () => {} } diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index f093502a750fd..063a2cc191eae 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -183,7 +183,7 @@ export function Button( props ) { accessible accessibilityLabel={ label } accessibilityStates={ states } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ hint } onPress={ onClick } style={ containerStyle } diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index b60f6af039e59..e2ef34f35712e 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -174,14 +174,16 @@ export function UnforwardedButton( const anchorProps: ComponentPropsWithoutRef< 'a' > = Tag === 'a' ? { href, target } : {}; + const disableEventProps: { + [ key: string ]: ( event: MouseEvent ) => void; + } = {}; if ( disabled && isFocusable ) { // In this case, the button will be disabled, but still focusable and // perceivable by screen reader users. buttonProps[ 'aria-disabled' ] = true; anchorProps[ 'aria-disabled' ] = true; - for ( const disabledEvent of disabledEventsOnDisabledButton ) { - additionalProps[ disabledEvent ] = ( event: MouseEvent ) => { + disableEventProps[ disabledEvent ] = ( event: MouseEvent ) => { if ( event ) { event.stopPropagation(); event.preventDefault(); @@ -234,6 +236,7 @@ export function UnforwardedButton( ) } + { ...disableEventProps } { ...commonProps } > { elementChildren } @@ -242,6 +245,7 @@ export function UnforwardedButton(