diff --git a/.eslintrc.js b/.eslintrc.js index 2e92b495691873..211ddd9bc35860 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -322,6 +322,7 @@ module.exports = { 'BorderBoxControl', 'BorderControl', 'BoxControl', + 'Button', 'ComboboxControl', 'CustomSelectControl', 'DimensionControl', @@ -343,7 +344,7 @@ module.exports = { selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="size"][value.value!="default"]))`, message: componentName + - ' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.', + ' should have the `__next40pxDefaultSize` prop when using the default size.', } ) ), { // Falsy `__next40pxDefaultSize` without a `render` prop. @@ -352,14 +353,6 @@ module.exports = { message: 'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.', }, - // Temporary rules until all existing components have the `__next40pxDefaultSize` prop. - ...[ 'Button' ].map( ( componentName ) => ( { - // Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated. - selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`, - message: - componentName + - ' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.', - } ) ), ], }, }, diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index 0f813267b586bd..9a3a9abb84963d 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.github/workflows/build-plugin-zip.yml @@ -72,7 +72,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: token: ${{ secrets.GUTENBERG_TOKEN }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -168,7 +168,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: ref: ${{ needs.bump-version.outputs.release_branch || github.ref }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -225,7 +225,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: fetch-depth: 2 ref: ${{ needs.bump-version.outputs.release_branch }} @@ -314,14 +314,14 @@ jobs: if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }} steps: - name: Checkout (for CLI) - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: path: main ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Checkout (for publishing) - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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 e24b30eea7ba7c..4b0b93ac959ed8 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: fetch-depth: 1 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -49,7 +49,7 @@ jobs: check-latest: true cache: npm - - uses: preactjs/compressed-size-action@f780fd104362cfce9e118f9198df2ee37d12946c # v2.6.0 + - uses: preactjs/compressed-size-action@6fa0e7ca017120c754863b31123c5ee2860fd434 # v2.7.0 with: repo-token: '${{ secrets.GITHUB_TOKEN }}' pattern: '{build/**/*.min.js,build/**/*.css,build-module/**/*.min.js}' diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml index cf07b1a3936b97..889e1cfb477256 100644 --- a/.github/workflows/check-backport-changelog.yml +++ b/.github/workflows/check-backport-changelog.yml @@ -22,7 +22,7 @@ jobs: runs-on: ubuntu-latest if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }} steps: - - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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 40fbfe22bea568..2c0d52c77ea4e2 100644 --- a/.github/workflows/check-components-changelog.yml +++ b/.github/workflows/check-components-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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: ref: ${{ github.event.pull_request.head.ref }} repository: ${{ github.event.pull_request.head.repo.full_name }} diff --git a/.github/workflows/cherry-pick-wp-release.yml b/.github/workflows/cherry-pick-wp-release.yml index 11688a7cfba980..5771a21d5b068b 100644 --- a/.github/workflows/cherry-pick-wp-release.yml +++ b/.github/workflows/cherry-pick-wp-release.yml @@ -70,7 +70,7 @@ jobs: - name: Checkout repository if: env.cherry_pick == 'true' - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: token: ${{ secrets.GUTENBERG_TOKEN }} fetch-depth: 0 diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index d20b3e353c31e4..4d99d396996c59 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -24,7 +24,7 @@ jobs: os: ['macos-latest', 'ubuntu-latest', 'windows-latest'] steps: - - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index bbf033222a4b31..2ea5949d20946c 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -27,7 +27,7 @@ jobs: totalParts: [8] steps: - - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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 4715e1e09c2b83..f268ac7183ee21 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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 9c4bee3af473c8..b947f4ff08c602 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -47,9 +47,9 @@ jobs: [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" nvm -v - - name: Compare performance with trunk + - name: Compare performance with base branch if: github.event_name == 'pull_request' - run: ./bin/plugin/cli.js perf $GITHUB_SHA trunk --tests-branch $GITHUB_SHA + run: ./bin/plugin/cli.js perf $GITHUB_SHA ${{ github.base_ref }} --tests-branch $GITHUB_SHA - name: Compare performance with current WordPress Core and previous Gutenberg versions if: github.event_name == 'release' diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml index 66f8130ece2f06..b95a4baaf5075a 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: path: cli ref: trunk @@ -39,7 +39,7 @@ jobs: - name: Checkout (for publishing) if: ${{ github.event.inputs.release_type != 'wp' }} - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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 2006eafd81cc7d..9aecafc2009e7f 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -24,7 +24,7 @@ jobs: check-latest: true - name: Cache NPM packages - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 with: # npm cache files are stored in `~/.npm` on Linux/macOS path: ~/.npm diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 917ee6144087e6..a1e332be783030 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -23,12 +23,12 @@ jobs: steps: - name: checkout - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Use desired version of Java - uses: actions/setup-java@2dfa2011c5b2a0f1489bf9e433881c92c1631f88 # v4.3.0 + uses: actions/setup-java@b36c23c0d998641eff861008f374ee103c25ac73 # v4.4.0 with: distribution: 'corretto' java-version: '17' @@ -37,7 +37,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 with: path: | ~/.appium @@ -50,7 +50,7 @@ jobs: uses: gradle/actions/setup-gradle@d156388eb19639ec20ade50009f3d199ce1e2808 # v4.1.0 - name: AVD cache - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 id: avd-cache with: path: | diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index cf065ad1cdf7db..a5c5dfd3f96f93 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - - uses: ruby/setup-ruby@c04af2bb7258bb6a03df1d3c1865998ac9390972 # v1.194.0 + - uses: ruby/setup-ruby@f26937343756480a8cb3ae1f623b9c8d89ed6984 # v1.196.0 with: # `.ruby-version` file location working-directory: packages/react-native-editor/ios @@ -42,7 +42,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 with: path: | ~/.appium @@ -55,7 +55,7 @@ jobs: run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt - name: Restore build cache - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 with: path: | packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app @@ -63,7 +63,7 @@ jobs: key: ${{ runner.os }}-ios-build-${{ matrix.xcode }}-${{ matrix.device }}-${{ hashFiles('ios-checksums.txt') }} - name: Restore pods cache - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 with: path: | packages/react-native-editor/ios/Pods diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index 1af2bb0ec79275..bf1a70d3adefc2 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 83f7fdb96f9262..a0a7d0f12db1e5 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -12,7 +12,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/sync-backport-changelog.yml b/.github/workflows/sync-backport-changelog.yml index b71d9440c38a1f..31b00459c24c6c 100644 --- a/.github/workflows/sync-backport-changelog.yml +++ b/.github/workflows/sync-backport-changelog.yml @@ -20,7 +20,7 @@ jobs: ) steps: - name: Checkout - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: fetch-depth: 2 # Fetch the last two commits to compare changes - name: Check for changes in backport-changelog diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index bfa35492589a48..272d7e12d7193a 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -32,7 +32,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -70,7 +70,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -173,7 +173,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -278,7 +278,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -296,7 +296,7 @@ jobs: run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> $GITHUB_OUTPUT - name: Cache PHPCS scan cache - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2 + uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 with: path: .cache/phpcs.json key: ${{ runner.os }}-date-${{ steps.get-date.outputs.date }}-phpcs-cache-${{ hashFiles('**/composer.json', 'phpcs.xml.dist') }} @@ -348,7 +348,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 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 d09e2af3dd2135..e8d3e3e245abd0 100644 --- a/.github/workflows/upload-release-to-plugin-repo.yml +++ b/.github/workflows/upload-release-to-plugin-repo.yml @@ -96,7 +96,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: ref: ${{ matrix.branch }} token: ${{ secrets.GUTENBERG_TOKEN }} diff --git a/.npmrc b/.npmrc index 7a346f877b9319..84662ee5b78b78 100644 --- a/.npmrc +++ b/.npmrc @@ -2,3 +2,4 @@ save-exact = true engine-strict = true legacy-peer-deps = true prefer-dedupe = true +lockfile-version = 3 diff --git a/backport-changelog/6.7/7543.md b/backport-changelog/6.7/7543.md new file mode 100644 index 00000000000000..7dcb74354ac813 --- /dev/null +++ b/backport-changelog/6.7/7543.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7543 + +* https://github.com/WordPress/gutenberg/pull/65958 diff --git a/backport-changelog/6.7/7552.md b/backport-changelog/6.7/7552.md new file mode 100644 index 00000000000000..d304162b3cae67 --- /dev/null +++ b/backport-changelog/6.7/7552.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7552 + +* https://github.com/WordPress/gutenberg/pull/66058 diff --git a/backport-changelog/6.7/7561.md b/backport-changelog/6.7/7561.md new file mode 100644 index 00000000000000..43fcffa41c02a5 --- /dev/null +++ b/backport-changelog/6.7/7561.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7561 + +* https://github.com/WordPress/gutenberg/pull/66084 diff --git a/backport-changelog/6.8/7575.md b/backport-changelog/6.8/7575.md new file mode 100644 index 00000000000000..f1c6a84da1368e --- /dev/null +++ b/backport-changelog/6.8/7575.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7575 + +* https://github.com/WordPress/gutenberg/pull/66154 diff --git a/backport-changelog/6.8/7604.md b/backport-changelog/6.8/7604.md new file mode 100644 index 00000000000000..8c7d80994ae605 --- /dev/null +++ b/backport-changelog/6.8/7604.md @@ -0,0 +1,4 @@ +https://github.com/WordPress/wordpress-develop/pull/7604 + +* https://github.com/WordPress/gutenberg/pull/66285 +* https://github.com/WordPress/gutenberg/pull/66302 diff --git a/bin/api-docs/gen-components-docs/index.mjs b/bin/api-docs/gen-components-docs/index.mjs new file mode 100644 index 00000000000000..e036995b4c4f74 --- /dev/null +++ b/bin/api-docs/gen-components-docs/index.mjs @@ -0,0 +1,112 @@ +/** + * External dependencies + */ +import docgen from 'react-docgen-typescript'; +import glob from 'glob'; +import fs from 'node:fs/promises'; +import path from 'path'; + +/** + * Internal dependencies + */ +import { generateMarkdownDocs } from './markdown/index.mjs'; + +const MANIFEST_GLOB = 'packages/components/src/**/docs-manifest.json'; + +// For consistency, options should generally match the options used in Storybook. +const OPTIONS = { + shouldExtractLiteralValuesFromEnum: true, + shouldRemoveUndefinedFromOptional: true, + propFilter: ( prop ) => + prop.parent ? ! /node_modules/.test( prop.parent.fileName ) : true, + savePropValueAsString: true, +}; + +function getTypeDocsForComponent( { + manifestPath, + componentFilePath, + displayName, +} ) { + const resolvedPath = path.resolve( + path.dirname( manifestPath ), + componentFilePath + ); + + const typeDocs = docgen.parse( resolvedPath, OPTIONS ); + + if ( typeDocs.length === 0 ) { + throw new Error( + `react-docgen-typescript could not generate any type docs from ${ resolvedPath }` + ); + } + + const matchingTypeDoc = typeDocs.find( + ( obj ) => obj.displayName === displayName + ); + + if ( typeof matchingTypeDoc === 'undefined' ) { + const unmatchedTypeDocs = typeDocs + .map( ( obj ) => `\`${ obj.displayName }\`` ) + .join( ', ' ); + + throw new Error( + `react-docgen-typescript could not find type docs for ${ displayName } in ${ resolvedPath }. (Found ${ unmatchedTypeDocs })` + ); + } + + return matchingTypeDoc; +} + +async function parseManifest( manifestPath ) { + try { + return JSON.parse( await fs.readFile( manifestPath, 'utf8' ) ); + } catch ( e ) { + throw new Error( + `Error parsing docs manifest at ${ manifestPath }: ${ e.message }` + ); + } +} + +const manifests = glob.sync( MANIFEST_GLOB ); + +await Promise.all( + manifests.map( async ( manifestPath ) => { + const manifest = await parseManifest( manifestPath ); + + const typeDocs = getTypeDocsForComponent( { + manifestPath, + componentFilePath: manifest.filePath, + displayName: manifest.displayName, + } ); + + const subcomponentTypeDocs = manifest.subcomponents?.map( + ( subcomponent ) => { + const docs = getTypeDocsForComponent( { + manifestPath, + componentFilePath: subcomponent.filePath, + displayName: subcomponent.displayName, + } ); + + if ( subcomponent.preferredDisplayName ) { + docs.displayName = subcomponent.preferredDisplayName; + } + + return docs; + } + ); + const docs = generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ); + const outputFile = path.resolve( + path.dirname( manifestPath ), + './README.md' + ); + + try { + console.log( `Writing docs to ${ outputFile }` ); + return fs.writeFile( outputFile, docs ); + } catch ( e ) { + throw new Error( + `Error writing docs to ${ outputFile }: ${ e.message }` + ); + } + } ) +); diff --git a/bin/api-docs/gen-components-docs/markdown/index.mjs b/bin/api-docs/gen-components-docs/markdown/index.mjs new file mode 100644 index 00000000000000..126fdf0057b6e5 --- /dev/null +++ b/bin/api-docs/gen-components-docs/markdown/index.mjs @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import json2md from 'json2md'; + +/** + * Internal dependencies + */ +import { generateMarkdownPropsJson } from './props.mjs'; + +export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) { + const mainDocsJson = [ + { h1: typeDocs.displayName }, + '', + { + p: `

See the WordPress Storybook for more detailed, interactive documentation.

`, + }, + typeDocs.description, + ...generateMarkdownPropsJson( typeDocs.props ), + ]; + + const subcomponentDocsJson = subcomponentTypeDocs?.length + ? [ + { h2: 'Subcomponents' }, + ...subcomponentTypeDocs.flatMap( ( subcomponentTypeDoc ) => [ + { + h3: subcomponentTypeDoc.displayName, + }, + subcomponentTypeDoc.description, + ...generateMarkdownPropsJson( subcomponentTypeDoc.props, { + headingLevel: 4, + } ), + ] ), + ] + : []; + + return json2md( + [ ...mainDocsJson, ...subcomponentDocsJson ].filter( Boolean ) + ); +} diff --git a/bin/api-docs/gen-components-docs/markdown/props.mjs b/bin/api-docs/gen-components-docs/markdown/props.mjs new file mode 100644 index 00000000000000..9d019c4240f008 --- /dev/null +++ b/bin/api-docs/gen-components-docs/markdown/props.mjs @@ -0,0 +1,51 @@ +function renderPropType( type ) { + const MAX_ENUM_VALUES = 10; + + switch ( type.name ) { + case 'enum': { + const string = type.value + .slice( 0, MAX_ENUM_VALUES ) + .map( ( { value } ) => value ) + .join( ' | ' ); + + if ( type.value.length > MAX_ENUM_VALUES ) { + return `${ string } | ...`; + } + return string; + } + default: + return type.name; + } +} + +export function generateMarkdownPropsJson( props, { headingLevel = 2 } = {} ) { + const sortedKeys = Object.keys( props ).sort( ( [ a ], [ b ] ) => + a.localeCompare( b ) + ); + + const propsJson = sortedKeys + .flatMap( ( key ) => { + const prop = props[ key ]; + + if ( prop.description?.includes( '@ignore' ) ) { + return null; + } + + return [ + { [ `h${ headingLevel + 1 }` ]: `\`${ key }\`` }, + prop.description, + { + ul: [ + `Type: \`${ renderPropType( prop.type ) }\``, + `Required: ${ prop.required ? 'Yes' : 'No' }`, + prop.defaultValue && + `Default: \`${ prop.defaultValue.value }\``, + ].filter( Boolean ), + }, + ]; + } ) + .filter( Boolean ); + + return [ { [ `h${ headingLevel }` ]: 'Props' }, ...propsJson ]; +} + diff --git a/changelog.txt b/changelog.txt index b802a88a14202c..77ee60f980c53a 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,576 @@ == Changelog == += 19.5.0-rc.1 = + + +## Changelog + +### Enhancements + +- Remove the verb Toggle from the Block Inserter button. ([65983](https://github.com/WordPress/gutenberg/pull/65983)) +- Update jsdom to 25.0.1. ([65879](https://github.com/WordPress/gutenberg/pull/65879)) +- Write/Design tool: Persist as a user preference. ([65945](https://github.com/WordPress/gutenberg/pull/65945)) + +#### Zoom Out +- Make zoom transition smoother. ([66017](https://github.com/WordPress/gutenberg/pull/66017)) +- Try zooming out when selecting the patterns tab in the inserter. ([65785](https://github.com/WordPress/gutenberg/pull/65785)) +- Update/replace edit button with enter on selection. ([65760](https://github.com/WordPress/gutenberg/pull/65760)) + +#### Block Editor +- Cleanup `AutoBlockPreview` render memoization of `BlockList`. ([66060](https://github.com/WordPress/gutenberg/pull/66060)) +- Use shallow memo for prioritized inserter blocks. ([65737](https://github.com/WordPress/gutenberg/pull/65737)) + +#### Components +- Add type tokens to storybook. ([65993](https://github.com/WordPress/gutenberg/pull/65993)) +- Storybook: Add stub doc on existing colors. ([65982](https://github.com/WordPress/gutenberg/pull/65982)) + +#### Icons +- Update "hidden" icon to be clearer, and invert logic as used in Data Views. ([65914](https://github.com/WordPress/gutenberg/pull/65914)) +- Update cloud upload and add cloud download icon. ([65906](https://github.com/WordPress/gutenberg/pull/65906)) + +#### Global Styles +- Improve navigation logic for revisions screen. ([65946](https://github.com/WordPress/gutenberg/pull/65946)) + +#### Block bindings +- Register bindings sources in widgets screens. ([65937](https://github.com/WordPress/gutenberg/pull/65937)) + +#### Block Library +- Cover Block: Refactor setting panel. ([65432](https://github.com/WordPress/gutenberg/pull/65432)) + + +### Bug Fixes + +- Add argument with post ID to the editor.savePost hook. ([66165](https://github.com/WordPress/gutenberg/pull/66165)) +- Backport from WordPress Core: improve performance of WP_Theme_JSON::Merge when merging background styles. ([66002](https://github.com/WordPress/gutenberg/pull/66002)) +- BlockCanvas: Fix the height prop and width of the block editor. ([65977](https://github.com/WordPress/gutenberg/pull/65977)) +- Correct capability for the Experiments page. ([66118](https://github.com/WordPress/gutenberg/pull/66118)) +- Fix rich text toolbar corners. ([66163](https://github.com/WordPress/gutenberg/pull/66163)) +- Fix: Add missing `post.slug` dependency to `useMemo`. ([66125](https://github.com/WordPress/gutenberg/pull/66125)) +- Fix: Return result from wp_register_block_template function. ([66102](https://github.com/WordPress/gutenberg/pull/66102)) +- List all active fonts in the typography section. ([65806](https://github.com/WordPress/gutenberg/pull/65806)) + +#### Zoom Out +- Exit zoom out when mode is changed. ([65975](https://github.com/WordPress/gutenberg/pull/65975)) +- Fix scaling issues. ([65998](https://github.com/WordPress/gutenberg/pull/65998)) +- Fix zoom reflow by replacing border with padding. ([66012](https://github.com/WordPress/gutenberg/pull/66012)) +- Focus first section root block if no selected block and tabbing to zoom out canvas. ([65843](https://github.com/WordPress/gutenberg/pull/65843)) +- Make zoom out vertical toolbar consistent. ([65627](https://github.com/WordPress/gutenberg/pull/65627)) +- Polish zoom out inserter. ([66110](https://github.com/WordPress/gutenberg/pull/66110)) +- Position scaled html within available container space. ([66034](https://github.com/WordPress/gutenberg/pull/66034)) +- Restores setting zoom out mode to useZoomOut hook. ([65999](https://github.com/WordPress/gutenberg/pull/65999)) +- Use consistent canvas frame spacing on device preview and zoom out. ([66018](https://github.com/WordPress/gutenberg/pull/66018)) +- Zoom layout shift: Second alternate fix. ([66041](https://github.com/WordPress/gutenberg/pull/66041)) + +#### Block Library +- Code block: Set LTR direction for RTL languages. ([65891](https://github.com/WordPress/gutenberg/pull/65891)) +- Fix duotone on parallax/repeated featured image cover blocks. ([65929](https://github.com/WordPress/gutenberg/pull/65929)) +- Fix: Embed Block: Match HTML in the editor and frontend. ([65478](https://github.com/WordPress/gutenberg/pull/65478)) +- Hide grid visualizer when grid is template locked or block editing mode is not default. ([66065](https://github.com/WordPress/gutenberg/pull/66065)) +- Post Content Block: Fix conflict between clearFix and focus ring in the editor. ([65364](https://github.com/WordPress/gutenberg/pull/65364)) +- Post Content: Fix display of block support styles. ([66003](https://github.com/WordPress/gutenberg/pull/66003)) +- Post Terms: Fix fatal error when 'get_the_term_list' returns 'WP_Error'. ([65848](https://github.com/WordPress/gutenberg/pull/65848)) +- Query Loop: Fix isControlAllowed and isTemplate combined logic. ([65984](https://github.com/WordPress/gutenberg/pull/65984)) +- Query Loop: Fix query type indicator. ([65877](https://github.com/WordPress/gutenberg/pull/65877)) +- Revert "Update z-index hierarchy". ([66074](https://github.com/WordPress/gutenberg/pull/66074)) + +#### Block bindings +- Accept client ID as parameter for `useBlockBindingsUtils`. ([65818](https://github.com/WordPress/gutenberg/pull/65818)) +- Allow label override when it is defined in client registration. ([66160](https://github.com/WordPress/gutenberg/pull/66160)) +- Bootstrap server sources earlier. ([66058](https://github.com/WordPress/gutenberg/pull/66058)) +- Fix: Don't render image when `src` attribute is empty. ([66004](https://github.com/WordPress/gutenberg/pull/66004)) + +#### Global Styles +- Always preview style variations using desktop device type. ([66023](https://github.com/WordPress/gutenberg/pull/66023)) +- Improve Navigator usage in typography panel. ([65942](https://github.com/WordPress/gutenberg/pull/65942)) +- Leave screen if current shadow entry gets deleted. ([65935](https://github.com/WordPress/gutenberg/pull/65935)) +- `PaletteEdit`: Dedupe palette element slugs. ([65772](https://github.com/WordPress/gutenberg/pull/65772)) + +#### Block Editor +- Fix DropZone class names on drop. ([65798](https://github.com/WordPress/gutenberg/pull/65798)) +- Fix padding appender hook. ([66143](https://github.com/WordPress/gutenberg/pull/66143)) +- Memoize pattern objects returned from getAllowedPatterns. ([66159](https://github.com/WordPress/gutenberg/pull/66159)) + +#### Components +- Fix : Secondary Button Transition. ([66045](https://github.com/WordPress/gutenberg/pull/66045)) +- Global Styles: Fix overflow caused by RangeControl tooltip. ([65875](https://github.com/WordPress/gutenberg/pull/65875)) +- ToggleGroupControl: Don't set value on focus after a reset. ([66151](https://github.com/WordPress/gutenberg/pull/66151)) + +#### Interactivity API +- Allow "default" suffix values. ([65815](https://github.com/WordPress/gutenberg/pull/65815)) +- Correctly handle lazily added, deeply nested properties with `deepMerge()`. ([65465](https://github.com/WordPress/gutenberg/pull/65465)) +- Improvements to the experimental full-page navigation. ([64067](https://github.com/WordPress/gutenberg/pull/64067)) + +#### Site Editor +- Fix site editor back button visual regressions. ([66166](https://github.com/WordPress/gutenberg/pull/66166)) +- Zoom Out: When double clicking a template while zoomed out , reset zoom level instead of showing dialog. ([65963](https://github.com/WordPress/gutenberg/pull/65963)) + +#### CSS & Styling +- Editor: Prevent wrapping text when showing icon labels in header. ([66038](https://github.com/WordPress/gutenberg/pull/66038)) +- Update z-index hierarchy. ([65626](https://github.com/WordPress/gutenberg/pull/65626)) + +#### Data Views +- Data Views list layout: Revise for improved text truncation. ([65376](https://github.com/WordPress/gutenberg/pull/65376)) +- Fix: Pattern rendering issue. ([66022](https://github.com/WordPress/gutenberg/pull/66022)) + +#### Extensibility +- Rename wp_register_block_template() to register_block_template(). ([65958](https://github.com/WordPress/gutenberg/pull/65958)) + +#### Post Editor +- Fix "typewriter" spacing style application. ([65885](https://github.com/WordPress/gutenberg/pull/65885)) + +#### Synced Patterns +- Pattern block: Ensure consistent editing of overrides in Write Mode. ([65408](https://github.com/WordPress/gutenberg/pull/65408)) + + +### Accessibility + +#### Post Editor +- Fix meta boxes accessibility. ([65466](https://github.com/WordPress/gutenberg/pull/65466)) +- Fix navigate regions shortcuts on the back button WP logo slot. ([63611](https://github.com/WordPress/gutenberg/pull/63611)) +- Improve PostURL terminology and accessibility. ([63669](https://github.com/WordPress/gutenberg/pull/63669)) +- Match visible label of search inputs with their actual label. ([65458](https://github.com/WordPress/gutenberg/pull/65458)) + +#### Components +- Fixed : Modal dialog: Small improvement for elementShouldBeHidden. ([65941](https://github.com/WordPress/gutenberg/pull/65941)) +- ToggleGroupControl: Don't autoselect option on first group focus. ([65892](https://github.com/WordPress/gutenberg/pull/65892)) +- Tooltip: Add aria-describedby to anchor only if not redundant. ([65989](https://github.com/WordPress/gutenberg/pull/65989)) + +#### Typography +- Revert the "Manage fonts" button in Global Styles. ([66107](https://github.com/WordPress/gutenberg/pull/66107)) + + +### Performance + +#### Interactivity API +- Leverage scheduler.yield in splitTask when available. ([66001](https://github.com/WordPress/gutenberg/pull/66001)) + + +### Documentation + +- Add heading level curation documentation. ([66076](https://github.com/WordPress/gutenberg/pull/66076)) +- Components: Set up README auto-generator. ([66035](https://github.com/WordPress/gutenberg/pull/66035)) +- Contrast notes: Update 4.6:1 note with further context. ([66168](https://github.com/WordPress/gutenberg/pull/66168)) +- Data-basics/4-building-a-create-page-form is ready now. ([66100](https://github.com/WordPress/gutenberg/pull/66100)) +- Docs: env: Expand examples of path syntax. ([65972](https://github.com/WordPress/gutenberg/pull/65972)) +- Updated several typos in client-assets.php file. ([66084](https://github.com/WordPress/gutenberg/pull/66084)) +- Use correct label in PHP Backport documentation. ([65908](https://github.com/WordPress/gutenberg/pull/65908)) +- add: Usage examples in core editor documentation. ([63768](https://github.com/WordPress/gutenberg/pull/63768)) + + +### Code Quality + +- .screen-reader-text CSS update for responsive-block-control style.scss. ([66145](https://github.com/WordPress/gutenberg/pull/66145)) +- Add missing CHANGELOG entries for #64067. ([66120](https://github.com/WordPress/gutenberg/pull/66120)) +- Button: Move to stricter lint rule for 40px size adherence. ([65840](https://github.com/WordPress/gutenberg/pull/65840)) +- Private APIs: Remove obsolete try/catch block. ([65898](https://github.com/WordPress/gutenberg/pull/65898)) +- Remove clip and -webkit-clip for block-library common.scss. ([66144](https://github.com/WordPress/gutenberg/pull/66144)) +- Remove unused select toolbar code. ([65834](https://github.com/WordPress/gutenberg/pull/65834)) +- Simplify logical expression in `InitPatternModal`. ([65922](https://github.com/WordPress/gutenberg/pull/65922)) +- Theme JSON: Remove redundant check and relocate $selectors assignment. ([66154](https://github.com/WordPress/gutenberg/pull/66154)) +- Type the router package. ([65854](https://github.com/WordPress/gutenberg/pull/65854)) + +#### Global Styles +- Edit Site: Avoid recomputing variations when no theme variations. ([66137](https://github.com/WordPress/gutenberg/pull/66137)) +- Edit Site: Remove redundant state in `StyleVariationsContainer`. ([66130](https://github.com/WordPress/gutenberg/pull/66130)) + +#### Block Library +- Post Terms: Remove unnecessary 'get_the_terms' call. ([65867](https://github.com/WordPress/gutenberg/pull/65867)) +- Query Loop Block: Remove redundant sticky state. ([66126](https://github.com/WordPress/gutenberg/pull/66126)) + +#### Components +- Clean up Tabs animation logic. ([65878](https://github.com/WordPress/gutenberg/pull/65878)) +- SearchControl: Deprecate onClose prop. ([65988](https://github.com/WordPress/gutenberg/pull/65988)) + +#### Post Editor +- Block Visibility: Add end-to-end test. ([65880](https://github.com/WordPress/gutenberg/pull/65880)) + +#### Zoom Out +- Fix components coding standards in Zoom Out Toolbar. ([65858](https://github.com/WordPress/gutenberg/pull/65858)) + + +### Tools + +#### Testing +- Add an end-to-end test to check the interactions in write mode. ([65819](https://github.com/WordPress/gutenberg/pull/65819)) +- Composite: Add legacy unit tests to stable version. ([65952](https://github.com/WordPress/gutenberg/pull/65952)) +- Fix end-to-end Storybook configuration. ([66089](https://github.com/WordPress/gutenberg/pull/66089)) +- Tests: Add unit tests for image rendering. ([66010](https://github.com/WordPress/gutenberg/pull/66010)) +- Zoom out: End-to-end test - zoomed out mode zooms the canvas. ([65943](https://github.com/WordPress/gutenberg/pull/65943)) +- e2e: Fix Block Visibility test. ([65939](https://github.com/WordPress/gutenberg/pull/65939)) + +#### Build Tooling +- Dedupe npm packages. ([65913](https://github.com/WordPress/gutenberg/pull/65913)) +- Update and align babel dependencies version. ([65949](https://github.com/WordPress/gutenberg/pull/65949)) +- Update node-fetch to 2.7.0. ([65957](https://github.com/WordPress/gutenberg/pull/65957)) +- Update npm lockfile to version 3. ([65923](https://github.com/WordPress/gutenberg/pull/65923)) +- Upgrade browserslist and webcompat data packages. ([65926](https://github.com/WordPress/gutenberg/pull/65926)) + + +### Various + +- Consistent with block-development-examples data-basics-59c8f8. ([65995](https://github.com/WordPress/gutenberg/pull/65995)) +- Interactivity: Update preact packages. ([66008](https://github.com/WordPress/gutenberg/pull/66008)) + +#### Patterns +- Revert "Pattern block: Ensure consistent editing of overrides in Write Mode (#65408)". ([65953](https://github.com/WordPress/gutenberg/pull/65953)) + + +## First-time contributors + +The following PRs were merged by first-time contributors: + +- @AnmolVerma404: Fix: Return result from wp_register_block_template function. ([66102](https://github.com/WordPress/gutenberg/pull/66102)) +- @leemyongpakva: Consistent with block-development-examples data-basics-59c8f8. ([65995](https://github.com/WordPress/gutenberg/pull/65995)) +- @matt-west: Icons: Update cloud upload and add cloud download icon. ([65906](https://github.com/WordPress/gutenberg/pull/65906)) +- @mediaformat: .screen-reader-text CSS update for responsive-block-control style.scss. ([66145](https://github.com/WordPress/gutenberg/pull/66145)) +- @vk17-starlord: Fixed : Modal dialog: Small improvement for elementShouldBeHidden. ([65941](https://github.com/WordPress/gutenberg/pull/65941)) +- @Vrishabhsk: SearchControl: Deprecate onClose prop. ([65988](https://github.com/WordPress/gutenberg/pull/65988)) + + +## Contributors + +The following contributors merged PRs in this release: + +@aaronrobertshaw @afercia @ajlende @akasunil @Aljullu @andrewserong @AnmolVerma404 @ciampo @DaniGuardiola @dhruvang21 @draganescu @getdave @hbhalodia @jameskoster @jasmussen @jeryj @jsnajdr @leemyongpakva @MaggieCabrera @Mamaduka @matiasbenedetto @matt-west @mcsf @mediaformat @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @ramonjd @renatho @richtabor @rmccue @sabernhardt @SantosGuillamot @shail-mehta @sirreal @stokesman @t-hamano @talldan @troychaplin @tyxla @up1512001 @vk17-starlord @Vrishabhsk @westonruter @youknowriad + + += 19.4.0 = + +## Changelog + +### Enhancements + +#### Block Library +- Added keywords to query loop block. ([65515](https://github.com/WordPress/gutenberg/pull/65515)) +- Added: DropZone when sitelogo is present. ([65596](https://github.com/WordPress/gutenberg/pull/65596)) +- Avatar: Add block example. ([65509](https://github.com/WordPress/gutenberg/pull/65509)) +- Buttons: add box-sizing:Border-box rule. ([65716](https://github.com/WordPress/gutenberg/pull/65716)) +- Comment Author Name: Add block example. ([65558](https://github.com/WordPress/gutenberg/pull/65558)) +- Comment Content: Add block example. ([65559](https://github.com/WordPress/gutenberg/pull/65559)) +- Comment Date: Add block example. ([65632](https://github.com/WordPress/gutenberg/pull/65632)) +- Comment Edit/Reply Links: Add block examples. ([65601](https://github.com/WordPress/gutenberg/pull/65601)) +- Comment Pagination: Add previous and next link block examples. ([65633](https://github.com/WordPress/gutenberg/pull/65633)) +- Comments Pagination Numbers: Add block example. ([65635](https://github.com/WordPress/gutenberg/pull/65635)) +- Comments Title: Add block example. ([65557](https://github.com/WordPress/gutenberg/pull/65557)) +- File block: Allow content only editing. ([65787](https://github.com/WordPress/gutenberg/pull/65787)) +- Navigation block: Use `apply_block_hooks_to_content()`. ([65703](https://github.com/WordPress/gutenberg/pull/65703)) +- Post Navigation Link: Add block examples. ([65552](https://github.com/WordPress/gutenberg/pull/65552)) +- Query No Results: Add block example. ([65555](https://github.com/WordPress/gutenberg/pull/65555)) +- Query Pagination Numbers: Add block example. ([65636](https://github.com/WordPress/gutenberg/pull/65636)) +- Query Pagination: Add block example. ([65556](https://github.com/WordPress/gutenberg/pull/65556)) +- Query Title: Add block example. ([65554](https://github.com/WordPress/gutenberg/pull/65554)) +- Revert: Time To Read: Add block example. ([65510](https://github.com/WordPress/gutenberg/pull/65510)) +- Table of Contents: Try maintaining block example attributes. ([65549](https://github.com/WordPress/gutenberg/pull/65549)) +- Term Description: Add block example. ([65553](https://github.com/WordPress/gutenberg/pull/65553)) +- Time To Read: Add block example. ([65512](https://github.com/WordPress/gutenberg/pull/65512)) + +#### Components +- Light branding for the reference site. ([65764](https://github.com/WordPress/gutenberg/pull/65764)) +- BorderControl: Use `__next40pxDefaultSize` prop for Reset button. ([65682](https://github.com/WordPress/gutenberg/pull/65682)) +- Composite: Always await initial render setup in unit tests. ([65823](https://github.com/WordPress/gutenberg/pull/65823)) +- DatePicker: Use compact button size. ([65653](https://github.com/WordPress/gutenberg/pull/65653)) +- Guide: Update finish button to use the new default size. ([65680](https://github.com/WordPress/gutenberg/pull/65680)) +- Navigator: Add support for exit animation. ([64777](https://github.com/WordPress/gutenberg/pull/64777)) +- Remove `useEvent` from components package. ([65388](https://github.com/WordPress/gutenberg/pull/65388)) +- Simplify MenuGroup component styles. ([65561](https://github.com/WordPress/gutenberg/pull/65561)) +- Storybook: Allow for case-agnostic filtering of icons. ([65780](https://github.com/WordPress/gutenberg/pull/65780)) +- ToggleGroupControl: Improve animation. ([65175](https://github.com/WordPress/gutenberg/pull/65175)) +- Tabs: Tweak sizing and overflow behavior of TabList. ([64371](https://github.com/WordPress/gutenberg/pull/64371)) +- Tabs: Unify vertical tabs styles. ([65387](https://github.com/WordPress/gutenberg/pull/65387)) + +#### Zoom Out +- Add prompt to zoom out separator. ([65392](https://github.com/WordPress/gutenberg/pull/65392)) +- Make sections `contentOnly` in Zoom Out. ([65396](https://github.com/WordPress/gutenberg/pull/65396)) +- Move the toggle button to before the device preview dropdown. ([65446](https://github.com/WordPress/gutenberg/pull/65446)) +- Only show zoom out inserters on block selection. ([65759](https://github.com/WordPress/gutenberg/pull/65759)) + +#### Block Editor +- Hide block transforms in contentOnly mode for non-content blocks. ([65394](https://github.com/WordPress/gutenberg/pull/65394)) +- Inserter: Always show the list of all patterns in the inserter. ([65611](https://github.com/WordPress/gutenberg/pull/65611)) +- MediaPlaceholder: Use InputControl in URL popover. ([65656](https://github.com/WordPress/gutenberg/pull/65656)) +- Use proper named `File` when uploading external images. ([65693](https://github.com/WordPress/gutenberg/pull/65693)) + +#### Data Views +- DataForm - Add combined fields support. ([65399](https://github.com/WordPress/gutenberg/pull/65399)) +- Filter UI: Remove popover max height. ([65835](https://github.com/WordPress/gutenberg/pull/65835)) +- Dataviews configuration dropdown: Remove style overrides. ([65373](https://github.com/WordPress/gutenberg/pull/65373)) + +#### Post Editor +- Edit Post: Remove unnecessary effect in `InitPatternModal`. ([65734](https://github.com/WordPress/gutenberg/pull/65734)) +- Editor: Consistent external media pre-publish image/button sizes. ([65668](https://github.com/WordPress/gutenberg/pull/65668)) + +#### Global Styles +- Editor Canvas: Tweak close button. ([65694](https://github.com/WordPress/gutenberg/pull/65694)) +- Style book: Create static categories. ([65430](https://github.com/WordPress/gutenberg/pull/65430)) + +#### Edit Mode +- Update tools menus with Write / Design order. ([65721](https://github.com/WordPress/gutenberg/pull/65721)) + +#### Select Mode +- Select Mode: Updates to the block toolbar. ([65485](https://github.com/WordPress/gutenberg/pull/65485)) +- Select Mode: Use the content-only behavior in select mode. ([65204](https://github.com/WordPress/gutenberg/pull/65204)) + +#### Icons +- Adds envelope icon. ([65638](https://github.com/WordPress/gutenberg/pull/65638)) + +#### Site Editor +- Global Styles: Remove navigator screen overrides. ([65522](https://github.com/WordPress/gutenberg/pull/65522)) +- Command Palette: "Add new page" within the site editor creates new page in site editor. ([65476](https://github.com/WordPress/gutenberg/pull/65476)) +- Update elevation in the site editor. ([65410](https://github.com/WordPress/gutenberg/pull/65410)) + +#### Block bindings +- Connected blocks, add backdrop-color. ([65233](https://github.com/WordPress/gutenberg/pull/65233)) + +#### Extensibility +- Stabilize the PreSavePost and SavePost filters. ([64198](https://github.com/WordPress/gutenberg/pull/64198)) + +#### Base Styles +- Base styles: Add type tokens. ([65418](https://github.com/WordPress/gutenberg/pull/65418)) + +#### Tools +- Composer: Allow composer/installers 2.x. ([65356](https://github.com/WordPress/gutenberg/pull/65356)) + +#### Block hooks +- Hooks: Add support for async filters and actions. ([64204](https://github.com/WordPress/gutenberg/pull/64204)) + +### New APIs + +- Revert "Make `wordpress/fields` a private package". ([65477](https://github.com/WordPress/gutenberg/pull/65477)) +- Stabilise role attribute property. ([65484](https://github.com/WordPress/gutenberg/pull/65484)) + +#### Block bindings +- Open the stable editor APIs. ([65713](https://github.com/WordPress/gutenberg/pull/65713)) + +#### Components +- Navigator: Stabilize and export APIs. ([64613](https://github.com/WordPress/gutenberg/pull/64613)) + +### Bug Fixes + +#### Components +- Block Editor: Validate options for the 'HeadingLevelDropdown' component. ([65425](https://github.com/WordPress/gutenberg/pull/65425)) +- Composite: Fix legacy implementation passing store prop. ([65821](https://github.com/WordPress/gutenberg/pull/65821)) +- Composite: Make items tabbable if active element gets removed. ([65720](https://github.com/WordPress/gutenberg/pull/65720)) +- Navigator: Fix isInitial logic. ([65527](https://github.com/WordPress/gutenberg/pull/65527)) +- Restore accidentally removed entries in changelog (components package). ([65804](https://github.com/WordPress/gutenberg/pull/65804)) +- useToolsPanel: Calculate derived state in reducer to prevent too many renders. ([65564](https://github.com/WordPress/gutenberg/pull/65564)) +- useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state. ([65494](https://github.com/WordPress/gutenberg/pull/65494)) + +#### Zoom Out +- Fix focus loss when deleting selected block in zoom out mode. ([65761](https://github.com/WordPress/gutenberg/pull/65761)) +- Handle zoom out when changing device preview. ([65444](https://github.com/WordPress/gutenberg/pull/65444)) +- Hide Zoom Out Inserters when dragging into canvas. ([65789](https://github.com/WordPress/gutenberg/pull/65789)) +- Makes spacing consistent in zoom out vertical toolbar. ([63994](https://github.com/WordPress/gutenberg/pull/63994)) +- Remove one occurrence of the verb Toggle from Zoom out control. ([65609](https://github.com/WordPress/gutenberg/pull/65609)) +- Reset zoom out level when device type is changed. ([65652](https://github.com/WordPress/gutenberg/pull/65652)) +- Resize cover block only in normal mode. ([65731](https://github.com/WordPress/gutenberg/pull/65731)) + +#### Block Editor +- Fix unable to remove empty blocks on merge. ([65262](https://github.com/WordPress/gutenberg/pull/65262)) +- Inserter: Fix Block visibility manager. ([65700](https://github.com/WordPress/gutenberg/pull/65700)) +- Link autocompleter: Decode post title HTML entities. ([65589](https://github.com/WordPress/gutenberg/pull/65589)) +- Openverse: Prevent multiple insertions during upload. ([65719](https://github.com/WordPress/gutenberg/pull/65719)) +- Paste Handler: Try to fix pasting text with formatting. ([63779](https://github.com/WordPress/gutenberg/pull/63779)) +- Remove user-select:Text. ([65662](https://github.com/WordPress/gutenberg/pull/65662)) +- Editor: Remove edit template menu item from block settings menu in blocks outside template. ([65560](https://github.com/WordPress/gutenberg/pull/65560)) +- Top Toolbar: Show document bar when no block is selected even if block tools are expanded. ([65839](https://github.com/WordPress/gutenberg/pull/65839)) +- Revert "Allow multi-select on iOS Safari/touch devices". ([65414](https://github.com/WordPress/gutenberg/pull/65414)) + +#### Global Styles +- Avoid errors when a fontSize preset is not available. ([65791](https://github.com/WordPress/gutenberg/pull/65791)) +- Fix: Shadow/Font size preset panel crashes the editor. ([65765](https://github.com/WordPress/gutenberg/pull/65765)) +- Revert "Font Library: Group fonts by source (#63211)". ([65590](https://github.com/WordPress/gutenberg/pull/65590)) +- Tweak entity save panel button. ([65695](https://github.com/WordPress/gutenberg/pull/65695)) + +#### Block bindings +- Fix editing protected custom fields in block bindings. ([65658](https://github.com/WordPress/gutenberg/pull/65658)) +- Fix showing bindings field values in theme templates. ([65639](https://github.com/WordPress/gutenberg/pull/65639)) +- Only pass context included in `usesContext` from rich text component. ([65618](https://github.com/WordPress/gutenberg/pull/65618)) +- Use `registry` instead of `select` in `canUserEditValue`. ([65659](https://github.com/WordPress/gutenberg/pull/65659)) + +#### Block Library +- Categories block: Escape label. ([65540](https://github.com/WordPress/gutenberg/pull/65540)) +- Search block: Reset size correctly when clearing unit control. ([65468](https://github.com/WordPress/gutenberg/pull/65468)) +- Social Links: Fix block appender size. ([65769](https://github.com/WordPress/gutenberg/pull/65769)) + +#### Site Editor +- Fix: Makes edit mode selector persistent in top toolbar mode. ([65511](https://github.com/WordPress/gutenberg/pull/65511)) +- Global styles: Do not navigate twice to home screen when opening the sidebar. ([65523](https://github.com/WordPress/gutenberg/pull/65523)) +- Make resizable frame compatible with RTL languages. ([65545](https://github.com/WordPress/gutenberg/pull/65545)) +- Command Palette: Fix "Add new page" command for hybrid theme. ([65534](https://github.com/WordPress/gutenberg/pull/65534)) +- Export `useResizeObserver` React Native version directly. ([65588](https://github.com/WordPress/gutenberg/pull/65588)) +- Fix `useResizeObserver` bugs. ([65389](https://github.com/WordPress/gutenberg/pull/65389)) +- Fix aria-checked attribute not set for plugin settings buttons in Options dropdown. ([65667](https://github.com/WordPress/gutenberg/pull/65667)) +- Revert "useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state". ([65533](https://github.com/WordPress/gutenberg/pull/65533)) + +#### Focus Mode +- Limit zoom out toggle to specific post types. ([65732](https://github.com/WordPress/gutenberg/pull/65732)) + +#### List View +- Fix miscolored icons. ([65707](https://github.com/WordPress/gutenberg/pull/65707)) + +#### Media +- Fix output buffering for cross-origin isolation. ([65701](https://github.com/WordPress/gutenberg/pull/65701)) + +#### Block Directory +- Fix downloadable block item alignment. ([65677](https://github.com/WordPress/gutenberg/pull/65677)) + +#### Typography +- Remove additional Typeset screen and surface typesets in the typography panel. ([65579](https://github.com/WordPress/gutenberg/pull/65579)) + +#### Widgets Editor +- Fixed the focus cutoff of the editor buttons in the widgets editor. ([65395](https://github.com/WordPress/gutenberg/pull/65395)) + +#### Post Editor +- Omit meta boxes on “design” type posts. ([64990](https://github.com/WordPress/gutenberg/pull/64990)) + +#### Data Views +- Fix grid layout padding on small screens. ([64878](https://github.com/WordPress/gutenberg/pull/64878)) + +#### Build Tools +- Babel preset: Add missing pkg files. ([65481](https://github.com/WordPress/gutenberg/pull/65481)) +- Temp disable test for Classic Block Media issue. ([65793](https://github.com/WordPress/gutenberg/pull/65793)) + +#### Select Mode +- Select Mode: Blocks outside the main sections root should be disabled. ([65518](https://github.com/WordPress/gutenberg/pull/65518)) +- Select Mode: Prevent the inbetween inserter from triggering within sections. ([65529](https://github.com/WordPress/gutenberg/pull/65529)) + +### Accessibility + +#### Post Editor +- Make the Settings panel toggle button show its keyboard shortcut in its tooltip. ([65322](https://github.com/WordPress/gutenberg/pull/65322)) +- Resizable Editor: Make the editor resizable with arrow keys. ([65546](https://github.com/WordPress/gutenberg/pull/65546)) + +#### Components +- ToggleGroupControl: Fix arrow key navigation in RTL. ([65735](https://github.com/WordPress/gutenberg/pull/65735)) + +#### Zoom Out +- Don't show tooltip in zoom out toggle button when showIconLabels is true. ([65573](https://github.com/WordPress/gutenberg/pull/65573)) + +#### Block Library +- Improve the Query Loop block display settings labels. ([65524](https://github.com/WordPress/gutenberg/pull/65524)) + +#### Block Editor +- Updates LayoutTypeSwitcher to use ToggleGroupControl. ([65498](https://github.com/WordPress/gutenberg/pull/65498)) + +#### Code Quality +- A11y: Move script module HTML printing to 6.7 compat. ([65620](https://github.com/WordPress/gutenberg/pull/65620)) +- Update to use a11y script module package in Core. ([65539](https://github.com/WordPress/gutenberg/pull/65539)) + +#### Site Editor +- Update icon in home button. ([65497](https://github.com/WordPress/gutenberg/pull/65497)) + +### Performance + +#### Block Library +- Script Modules: Centralize (re)registration. ([65460](https://github.com/WordPress/gutenberg/pull/65460)) + +#### Block Editor +- Remove editorMode from blockProps. ([65326](https://github.com/WordPress/gutenberg/pull/65326)) +- Move insertionPoint state to block-editor store/rename existing insertionPoint to insertionCue. ([65098](https://github.com/WordPress/gutenberg/pull/65098)) + + +### Documentation + +- Block Bindings: Add `@since` tag in bindings apis JSDocs. ([65796](https://github.com/WordPress/gutenberg/pull/65796)) +- Block Editor: Fix README for FontFamilyControl component. ([65660](https://github.com/WordPress/gutenberg/pull/65660)) +- Composite: Add "With Tooltip" storybook example. ([65817](https://github.com/WordPress/gutenberg/pull/65817)) +- DataViews documentation: Add high-level graph explaining DataViews and data sources interaction. ([65457](https://github.com/WordPress/gutenberg/pull/65457)) +- Docs/interactivity api router package readme. ([62062](https://github.com/WordPress/gutenberg/pull/62062)) +- Docs: Remove PHPDoc for non-existing parameter. ([65640](https://github.com/WordPress/gutenberg/pull/65640)) +- Navigator: Fix README heading hierarchy. ([65763](https://github.com/WordPress/gutenberg/pull/65763)) +- Packages documentation: Minor typo corrections. ([65664](https://github.com/WordPress/gutenberg/pull/65664)) +- Plugin: Fix small typo in readme.txt file. ([65634](https://github.com/WordPress/gutenberg/pull/65634)) +- RichText: Fix JSDoc block typos. ([65607](https://github.com/WordPress/gutenberg/pull/65607)) +- SelectControl: Add story for `prefix` slot. ([65730](https://github.com/WordPress/gutenberg/pull/65730)) +- Update JSDoc block for RichText package to-html-string. ([65688](https://github.com/WordPress/gutenberg/pull/65688)) +- Update block-filters.md. ([64959](https://github.com/WordPress/gutenberg/pull/64959)) +- iAPI: Refactor types and add a "Core Concepts - Using TypeScript" guide. ([64577](https://github.com/WordPress/gutenberg/pull/64577)) + +### Code Quality + +#### Components +- BorderBoxControl: Promote to stable. ([65586](https://github.com/WordPress/gutenberg/pull/65586)) +- BorderControl: Promote to stable. ([65475](https://github.com/WordPress/gutenberg/pull/65475)) +- BoxControl: Promote to stable. ([65469](https://github.com/WordPress/gutenberg/pull/65469)) +- Cleanup unused `ToggleGroupControl` configuration values. ([65456](https://github.com/WordPress/gutenberg/pull/65456)) +- Fix `useInstanceId` hook references. ([65733](https://github.com/WordPress/gutenberg/pull/65733)) +- Navigator: Internal refactor in preparation for stabilization. ([65671](https://github.com/WordPress/gutenberg/pull/65671)) +- Navigator: Mark experimental exports as deprecated. ([65802](https://github.com/WordPress/gutenberg/pull/65802)) +- SearchControl: Fix rest props mutation. ([65740](https://github.com/WordPress/gutenberg/pull/65740)) +- `ToggleGroupControl`: Clean up animation logic. ([65808](https://github.com/WordPress/gutenberg/pull/65808)) + +#### Block Editor +- Button: Add `__next40pxDefaultSize` in block-editor 6. ([65742](https://github.com/WordPress/gutenberg/pull/65742)) +- Decouple "zoom/scaling the canvas" from zoom out mode (without mode rename). ([65482](https://github.com/WordPress/gutenberg/pull/65482)) +- Don't memoize 'getContentLockingParent' and 'getParentSectionBlock' selectors. ([65649](https://github.com/WordPress/gutenberg/pull/65649)) +- Inserter: Update how we compute the actual insertion point for blocks. ([65490](https://github.com/WordPress/gutenberg/pull/65490)) +- LinkControl: Fix unneeded `props` prop. ([65650](https://github.com/WordPress/gutenberg/pull/65650)) +- Navigator: Use stable export instead of experimental export. ([65753](https://github.com/WordPress/gutenberg/pull/65753)) +- Button: Add `__next40pxDefaultSize` in dataviews, reusable-blocks, etc. ([65715](https://github.com/WordPress/gutenberg/pull/65715)) +- Fix: Button Replace remaining 40px default size violations [Block Directory]. ([65467](https://github.com/WordPress/gutenberg/pull/65467)) +- Fix: Button Replace remaining 40px default size violations [Block Editor 2]. ([65308](https://github.com/WordPress/gutenberg/pull/65308)) +- Fix: Button Replace remaining 40px default size violations [Block Editor 3]. ([65225](https://github.com/WordPress/gutenberg/pull/65225)) +- Fix: Button Replace remaining 40px default size violations [Block Editor 5]. ([65361](https://github.com/WordPress/gutenberg/pull/65361)) +- Fix: Button: Replace remaining 40px default size violation [Edit Site 1]. ([65226](https://github.com/WordPress/gutenberg/pull/65226)) +- Fix: Button: Replace remaining 40px default size violation [Edit Site 3]. ([65309](https://github.com/WordPress/gutenberg/pull/65309)) + +#### Block bindings +- Only pass `usesContext` properties to editor APIs. ([65661](https://github.com/WordPress/gutenberg/pull/65661)) +- Refactor passing select and dispatch instead of full Registry. ([65710](https://github.com/WordPress/gutenberg/pull/65710)) +- Unify logic in `getPostMetaFields` function. ([65462](https://github.com/WordPress/gutenberg/pull/65462)) + +#### Post Editor +- Customize widgets, edit post: Refactor Button to new sizes. ([65807](https://github.com/WordPress/gutenberg/pull/65807)) +- Header: Remove unused property `isZoomedOutView` in `useSelect()`. ([65628](https://github.com/WordPress/gutenberg/pull/65628)) + +#### Block Library +- Blocks: Don't memoize 'hasContentRoleAttribute' selector. ([65617](https://github.com/WordPress/gutenberg/pull/65617)) +- Blocks: Update '__experimentalHasContentRoleAttribute' deprecation. ([65616](https://github.com/WordPress/gutenberg/pull/65616)) + +#### Global Styles +- Global style revisions: Remove unnecessary `goTo` navigation call. ([65810](https://github.com/WordPress/gutenberg/pull/65810)) + +#### Site Editor +- Edit Site: Fix `useLink` prop mutation. ([65739](https://github.com/WordPress/gutenberg/pull/65739)) + +#### Data Views +- Migrate store/actions from editor package to fields package. ([65289](https://github.com/WordPress/gutenberg/pull/65289)) + + +### Tools + +#### Testing +- Block Bindings: Refactor end-to-end tests. ([65526](https://github.com/WordPress/gutenberg/pull/65526)) +- GH Actions: Run the tests against PHP 8.3. ([65357](https://github.com/WordPress/gutenberg/pull/65357)) +- Revert "Temp disable test for Classic Block Media issue.". ([65809](https://github.com/WordPress/gutenberg/pull/65809)) + +#### Build Tooling +- Composer: Prevent a lock file from being created. ([65359](https://github.com/WordPress/gutenberg/pull/65359)) +- Composer: Update minimum required PHPUnit Polyfills. ([65355](https://github.com/WordPress/gutenberg/pull/65355)) +- PHP unit tests: Remove WP_RUN_CORE_TESTS const. ([65631](https://github.com/WordPress/gutenberg/pull/65631)) +- DEWP: Check for magic comments before minification. ([65582](https://github.com/WordPress/gutenberg/pull/65582)) +- DEWP: Handle cyclical module dependencies. ([65291](https://github.com/WordPress/gutenberg/pull/65291)) +- Label enforcer: Add `Gutenberg plugin` to the list of single required labels. ([65253](https://github.com/WordPress/gutenberg/pull/65253)) + +## First-time contributors + +The following PRs were merged by first-time contributors: + +- @auareyou: Light branding for the reference site. ([65764](https://github.com/WordPress/gutenberg/pull/65764)) +- @crisbusquets: Adds envelope icon. ([65638](https://github.com/WordPress/gutenberg/pull/65638)) +- @davy440: Update block-filters.md. ([64959](https://github.com/WordPress/gutenberg/pull/64959)) +- @dhruvang21: Fix: Button Replace remaining 40px default size violations [Block Editor 2]. ([65308](https://github.com/WordPress/gutenberg/pull/65308)) +- @PARTHVATALIYA: Fix: Button Replace remaining 40px default size violations [Block Editor 5]. ([65361](https://github.com/WordPress/gutenberg/pull/65361)) +- @spadeshoe: Updates LayoutTypeSwitcher to use ToggleGroupControl. ([65498](https://github.com/WordPress/gutenberg/pull/65498)) + + +## Contributors + +The following contributors merged PRs in this release: + +@aaronrobertshaw @afercia @amitraj2203 @anomiex @auareyou @carolinan @cbravobernal @ciampo @crisbusquets @DaniGuardiola @davy440 @dhruvang21 @djcowan @draganescu @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @jrfnl @jsnajdr @juanmaguitar @keoshi @kevin940726 @louwie17 @luisherranz @Mamaduka @manzoorwanijk @matiasbenedetto @michalczaplinski @mirka @mtias @noisysocks @oandregal @ockham @PARTHVATALIYA @peterwilsoncc @philwp @priethor @ramonjd @SantosGuillamot @shail-mehta @sirreal @Soean @spadeshoe @stokesman @swissspidy @t-hamano @talldan @tyxla @vcanales @vipul0425 @youknowriad + + = 19.3.0 = ## Changelog diff --git a/docs/contributors/code/back-merging-to-wp-core.md b/docs/contributors/code/back-merging-to-wp-core.md index d6c283629e1938..2ae1efb1727415 100644 --- a/docs/contributors/code/back-merging-to-wp-core.md +++ b/docs/contributors/code/back-merging-to-wp-core.md @@ -31,7 +31,7 @@ There are however certain exceptions to that rule. PRs with the following criter - Does not contain changes to PHP code. - Has label `Backport from WordPress Core` - this code is already in WP Core and is being synchronized back to Gutenberg. -- Has label `Backport to WordPress Core` - this code has already been synchronized to WP Core. +- Has label `Backported to WordPress Core` - this code has already been synchronized to WP Core. ## Further Reading diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index 952c6c49caad23..68f09f04d21d32 100644 --- a/docs/explanations/architecture/styles.md +++ b/docs/explanations/architecture/styles.md @@ -510,7 +510,7 @@ When a block that opts in to layout support is rendered, two things are processe There are currently four layout types in use: -- Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins. +- Default/Flow: Items are stacked vertically. The parent container block's display value isn't specified, so that it may use the default value for that HTML element. For most elements that will usually be `block`. The spacing between children is handled via vertical margins. - Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`. - Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property. - Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property. diff --git a/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md b/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md index ce8478f0241319..a20d2cf9d8b8a7 100644 --- a/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md +++ b/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md @@ -6,6 +6,37 @@ This page is dedicated to the many ways you can disable specific functionality i There might be times when you don’t want access to a block at all to be available for users. To control what’s available in the inserter, you can take two approaches: [an allow list](/docs/reference-guides/filters/block-filters.md#using-an-allow-list) that disables all blocks except those on the list or a [deny list that unregisters specific blocks](/docs/reference-guides/filters/block-filters.md#using-a-deny-list). +## Curate heading levels + +Core WordPress blocks with a heading level dropdown include support for the `levelOptions` attribute. This applies to the Heading, Site Title, Site Tagline, Query Title, Post Title, and Comments Title blocks. The `levelOptions` attribute accepts an array of numbers corresponding to heading levels, where `1` represents H1, `2` represents H2, and so on. + +This attribute allows you to specify which heading levels should appear in the dropdown UI, providing a lightweight curation method that does not require block deprecations. Any existing heading levels are preserved in the markup, while `levelOptions` only affects the UI display. + +You can apply this attribute directly in the block markup, a technique that will be commonly used in block templates, template parts, and patterns. For example, the following markup disables H1, H2, and H6 in the Heading block by setting `"levelOptions":[3,4,5]`. + +```html + +

Markup example

+ +``` + +You can also use [block filters](/docs/reference-guides/filters/block-filters.md) to set the default value of this attribute globally or for specific blocks. The example below disables H1, H2, and H6 for all Heading blocks. You can further customize this by restricting certain heading levels based on conditions like user capabilities. + +```php +function example_modify_heading_levels_globally( $args, $block_type ) { + + if ( 'core/heading' !== $block_type ) { + return $args; + } + + // Remove H1, H2, and H6. + $args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ]; + + return $args; +} +add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 ); +``` + ## Disable the Pattern Directory To fully remove patterns bundled with WordPress core from being accessed in the Inserter, the following can be added to your `functions.php` file: diff --git a/docs/how-to-guides/data-basics/1-data-basics-setup.md b/docs/how-to-guides/data-basics/1-data-basics-setup.md index e61db83c4ecbd5..d3208ceb352b4b 100644 --- a/docs/how-to-guides/data-basics/1-data-basics-setup.md +++ b/docs/how-to-guides/data-basics/1-data-basics-setup.md @@ -10,7 +10,7 @@ We'll do all the development inside of a WordPress plugin. Let's start by creati - my-first-gutenberg-app.php – to create a new admin page - src/index.js – for our JavaScript application -- style.css – for the minimal stylesheet +- src/style.css – for the minimal stylesheet - package.json – for the build process Go ahead and create these files using the following snippets: @@ -36,7 +36,7 @@ window.addEventListener( ); ``` -**style.css:** +**src/style.css:** ```css .toplevel_page_my-first-gutenberg-app #wpcontent { @@ -149,7 +149,7 @@ function load_custom_wp_admin_scripts( $hook ) { // Load our style.css. wp_register_style( 'my-first-gutenberg-app', - plugins_url( 'style.css', __FILE__ ), + plugins_url( 'build/style-index.css', __FILE__ ), array(), $asset_file['version'] ); 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 65c4d0a5486a0d..5f4e30357798d5 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 @@ -539,5 +539,5 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) { ## What's next? * **Previous part:** [Building a list of pages](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md) -* **Next part:** Building a *New Page* form (coming soon) +* **Next part:** [Building a Create Page form](/docs/how-to-guides/data-basics/4-building-a-create-page-form.md) * (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository diff --git a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md index 33c6e9a5ccff5b..9011596e0feddd 100644 --- a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md +++ b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md @@ -1,4 +1,4 @@ -# Part 4: Building a Create page form +# Building a Create page form In the [previous part](/docs/how-to-guides/data-basics/3-building-an-edit-form.md) we created an *Edit page* feature, and in this part we will add a *Create page* feature. Here's a glimpse of what we're going to build: diff --git a/docs/manifest.json b/docs/manifest.json index 8387b9079694c0..5e94c6b83b70d2 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -198,7 +198,7 @@ "parent": "data-basics" }, { - "title": "Part 4: Building a Create page form", + "title": "Building a Create page form", "slug": "4-building-a-create-page-form", "markdown_source": "../docs/how-to-guides/data-basics/4-building-a-create-page-form.md", "parent": "data-basics" diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 66f713b3aa40fc..dd49d156857249 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -246,7 +246,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media - **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage +- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, sizeSlug, tagName, templateLock, url, useFeaturedImage ## Details diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 956e8dd010581a..437f7be20f7705 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -738,6 +738,39 @@ _Returns_ Returns the currently selected block, or null if there is no selected block. +_Usage_ + +```js +import { select } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +// Set initial active block client ID +let activeBlockClientId = null; + +const getActiveBlockData = () => { + const activeBlock = select( blockEditorStore ).getSelectedBlock(); + + if ( activeBlock && activeBlock.clientId !== activeBlockClientId ) { + activeBlockClientId = activeBlock.clientId; + + // Get active block name and attributes + const activeBlockName = activeBlock.name; + const activeBlockAttributes = activeBlock.attributes; + + // Log active block name and attributes + console.log( activeBlockName, activeBlockAttributes ); + } +}; + +// Subscribe to changes in the editor +// wp.data.subscribe(() => { +// getActiveBlockData() +// }) + +// Update active block data on click +// onclick="getActiveBlockData()" +``` + _Parameters_ - _state_ `Object`: Global application state. diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index a4c1a59f0c4231..ac3413e694877b 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -248,6 +248,12 @@ _Returns_ Returns the post type of the post currently being edited. +_Usage_ + +```js +const currentPostType = wp.data.select( 'core/editor' ).getCurrentPostType(); +``` + _Parameters_ - _state_ `Object`: Global application state. @@ -284,6 +290,24 @@ _Returns_ Returns a single attribute of the post being edited, preferring the unsaved edit if one exists, but falling back to the attribute for the last known saved state of the post. +_Usage_ + +```js +// Get specific media size based on the featured media ID +// Note: change sizes?.large for any registered size +const getFeaturedMediaUrl = useSelect( ( select ) => { + const getFeaturedMediaId = + select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ); + const getMedia = select( 'core' ).getMedia( getFeaturedMediaId ); + + return ( + getMedia?.media_details?.sizes?.large?.source_url || + getMedia?.source_url || + '' + ); +}, [] ); +``` + _Parameters_ - _state_ `Object`: Global application state. @@ -1154,11 +1178,38 @@ Disables the publish sidebar. Returns an action object used in signalling that attributes of the post have been edited. +_Usage_ + +```js +// Update the post title +wp.data.dispatch( 'core/editor' ).editPost( { title: `${ newTitle }` } ); +``` + +```js +// Get specific media size based on the featured media ID +// Note: change sizes?.large for any registered size +const getFeaturedMediaUrl = useSelect( ( select ) => { + const getFeaturedMediaId = + select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ); + const getMedia = select( 'core' ).getMedia( getFeaturedMediaId ); + + return ( + getMedia?.media_details?.sizes?.large?.source_url || + getMedia?.source_url || + '' + ); +}, [] ); +``` + _Parameters_ - _edits_ `Object`: Post attributes to edit. - _options_ `Object`: Options for the edit. +_Returns_ + +- `Object`: Action object + ### enablePublishSidebar Enable the publish sidebar. diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md index 25498d10bde2ef..bbbb565684c578 100644 --- a/docs/reference-guides/interactivity-api/api-reference.md +++ b/docs/reference-guides/interactivity-api/api-reference.md @@ -6,8 +6,8 @@ Interactivity API is only available for WordPress 6.5 and above. To add interactions to blocks using the Interactivity API, developers can use: -- **Directives:** Added to the markup to add specific behavior to the DOM elements of the block -- **Store:** Contains the logic and data (state, actions, side effects, etc.) needed for the behavior +- **Directives:** Added to the markup to add specific behavior to the DOM elements of the block +- **Store:** Contains the logic and data (state, actions, side effects, etc.) needed for the behavior DOM elements are connected to data stored in the state and context through directives. If data in the state or context change directives will react to those changes, updating the DOM accordingly (see [diagram](https://excalidraw.com/#json=T4meh6lltJh6TCX51NTIu,DmIhxYSGFTL_ywZFbsmuSw)). @@ -21,21 +21,21 @@ Interactivity API directives use the `data-` prefix. Here's an example of direct ```html
- - -

- This element is now visible! -

+ + +

+ This element is now visible! +

``` @@ -52,24 +52,44 @@ The `wp-interactive` directive "activates" the interactivity for the DOM element ```html
-

I'm interactive now, and I can use directives!

-
-

I'm also interactive, and I can also use directives!

-
+

+ I'm interactive now, + and I can use directives! +

+
+

+ I'm also interactive, + and I can also use directives! +

+
-

I'm interactive now, and I can use directives!

-
-

I'm also interactive, and I can also use directives!

-
+

+ I'm interactive now, + and I can use directives! +

+
+

+ I'm also interactive, + and I can also use directives! +

+
``` @@ -96,31 +116,31 @@ The `wp-context` directive accepts a stringified JSON as a value. See store used with the directive above ```js -store( "myPlugin", { - actions: { - logId: () => { - const { post } = getContext(); - console.log( post.id ); - }, - }, +store( 'myPlugin', { + actions: { + logId: () => { + const { post } = getContext(); + console.log( post.id ); + }, + }, } ); ``` + Different contexts can be defined at different levels, and deeper levels will merge their own context with any parent one: ```html
- + -
- +
+ -
- -
- -
+
+ +
+
``` @@ -130,18 +150,18 @@ This directive allows setting HTML attributes on elements based on a boolean or ```html
  • - -
    - Title - -
    + +
    + Title + +
  • ``` @@ -149,33 +169,34 @@ This directive allows setting HTML attributes on elements based on a boolean or See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleMenu: () => { - const context = getContext(); - context.isMenuOpen = !context.isMenuOpen; - }, - }, +store( 'myPlugin', { + actions: { + toggleMenu: () => { + const context = getContext(); + context.isMenuOpen = ! context.isMenuOpen; + }, + }, } ); ``` + The `wp-bind` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) When `wp-bind` directive references a callback to get its final value: -- The `wp-bind` directive will be executed each time there's a change on any of the properties of the `state` or `context` used inside this callback. -- The returned value in the callback function is used to change the value of the associated attribute. +- The `wp-bind` directive will be executed each time there's a change on any of the properties of the `state` or `context` used inside this callback. +- The returned value in the callback function is used to change the value of the associated attribute. The `wp-bind` will do different things when the DOM element is applied, depending on its value: - - If the value is `true`, the attribute is added: `
    ` - - If the value is `false`, the attribute is removed: `
    ` - - If the value is a string, the attribute is added with its value assigned: `
    ` +- If the value is `true`, the attribute is added: `
    ` +- If the value is `false`, the attribute is removed: `
    ` +- If the value is a string, the attribute is added with its value assigned: `
    ` ### `wp-class` @@ -183,20 +204,20 @@ This directive adds or removes a class to an HTML element, depending on a boolea ```html
    -
  • - Option 1 -
  • -
  • - Option 2 -
  • +
  • + Option 1 +
  • +
  • + Option 2 +
  • ``` @@ -204,21 +225,22 @@ This directive adds or removes a class to an HTML element, depending on a boolea See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleSelection: () => { - const context = getContext(); - context.isSelected = !context.isSelected - } - } +store( 'myPlugin', { + actions: { + toggleSelection: () => { + const context = getContext(); + context.isSelected = ! context.isSelected; + }, + }, } ); ``` + The `wp-class` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) The boolean value received by the directive is used to toggle (add when `true` or remove when `false`) the associated class name from the `class` attribute. @@ -229,24 +251,24 @@ So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-c ```html
    - +
    - +
    ``` ```css /* Recommended */ .is-dark { - /* ... */ + /* ... */ } /* Not recommended */ .isDark { - /* ... */ + /* ... */ } ``` @@ -255,9 +277,11 @@ So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-c This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`. ```html -
    - -

    Hello World!

    +
    + +

    Hello World!

    > ``` @@ -266,26 +290,27 @@ This directive adds or removes inline style to an HTML element, depending on its See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleContextColor: () => { - const context = getContext(); - context.color = context.color === 'red' ? 'blue' : 'red'; - }, - }, +store( 'myPlugin', { + actions: { + toggleContextColor: () => { + const context = getContext(); + context.color = context.color === 'red' ? 'blue' : 'red'; + }, + }, } ); ``` + The `wp-style` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) The value received by the directive is used to add or remove the style attribute with the associated CSS property: -- If the value is `false`, the style attribute is removed: `
    ` -- If the value is a string, the attribute is added with its value assigned: `
    ` +- If the value is `false`, the style attribute is removed: `
    ` +- If the value is a string, the attribute is added with its value assigned: `
    ` ### `wp-text` @@ -293,10 +318,10 @@ It sets the inner text of an HTML element. ```html
    - - + +
    ``` @@ -304,21 +329,22 @@ It sets the inner text of an HTML element. See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleContextText: () => { - const context = getContext(); - context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1'; - }, - }, +store( 'myPlugin', { + actions: { + toggleContextText: () => { + const context = getContext(); + context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1'; + }, + }, } ); ``` + The `wp-text` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) The returned value is used to change the inner content of the element: `
    value
    `. @@ -340,14 +366,15 @@ This directive runs code on dispatched DOM events like `click` or `keyup`. The s See store used with the directive above ```js -store( "myPlugin", { - actions: { - logTime: ( event ) => { - console.log( new Date() ) - }, - }, +store( 'myPlugin', { + actions: { + logTime: ( event ) => { + console.log( new Date() ); + }, + }, } ); ``` + The `wp-on` directive is executed each time the associated event is triggered. @@ -378,7 +405,7 @@ The syntax of this directive is `data-wp-on-window--[window-event]` (like `data- See store used with the directive above ```js -store( "myPlugin", { +store( 'myPlugin', { callbacks: { logWidth() { console.log( 'Window width: ', window.innerWidth ); @@ -386,6 +413,7 @@ store( "myPlugin", { }, } ); ``` + The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed. @@ -414,14 +442,15 @@ The syntax of this directive is `data-wp-on-document--[document-event]` (like `d See store used with the directive above ```js -store( "myPlugin", { +store( 'myPlugin', { callbacks: { - logKeydown(event) { + logKeydown( event ) { console.log( 'Key pressed: ', event.key ); }, - }, + }, } ); ``` + The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed. @@ -439,13 +468,10 @@ You can attach several side effects to the same DOM element by using the syntax The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-watch` directives of that DOM element. ```html -
    -

    Counter:

    - - +
    +

    Counter:

    + +
    ``` @@ -453,40 +479,41 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen See store used with the directive above ```js -store( "myPlugin", { - actions: { - increaseCounter: () => { - const context = getContext(); - context.counter++; - }, - decreaseCounter: () => { - const context = getContext(); - context.counter--; - }, - }, - callbacks: { - logCounter: () => { - const { counter } = getContext(); - console.log("Counter is " + counter + " at " + new Date() ); - }, - }, +store( 'myPlugin', { + actions: { + increaseCounter: () => { + const context = getContext(); + context.counter++; + }, + decreaseCounter: () => { + const context = getContext(); + context.counter--; + }, + }, + callbacks: { + logCounter: () => { + const { counter } = getContext(); + console.log( 'Counter is ' + counter + ' at ' + new Date() ); + }, + }, } ); ``` + The `wp-watch` directive is executed: -- When the element is created -- Each time that any of the properties of the `state` or `context` used inside the callback changes +- When the element is created +- Each time that any of the properties of the `state` or `context` used inside the callback changes The `wp-watch` directive can return a function. If it does, the returned function is used as cleanup logic, i.e., it will run just before the callback runs again, and it will run again when the element is removed from the DOM. As a reference, some use cases for this directive may be: -- Logging -- Changing the title of the page -- Setting the focus on an element with `.focus()`. -- Changing the state or context when certain conditions are met +- Logging +- Changing the title of the page +- Setting the focus on an element with `.focus()`. +- Changing the state or context when certain conditions are met ### `wp-init` @@ -498,7 +525,7 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen ```html
    -

    Hi!

    +

    Hi!

    ``` @@ -506,10 +533,10 @@ Here's another example with several `wp-init` directives on the same DOM element ```html
    - +
    ``` @@ -546,7 +573,7 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen ```html
    -

    Hi!

    +

    Hi!

    ``` @@ -554,38 +581,44 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen See store used with the directive above ```js -import { getElement, store, useState, useEffect } from '@wordpress/interactivity'; +import { + getElement, + store, + useState, + useEffect, +} from '@wordpress/interactivity'; // Unlike `data-wp-init` and `data-wp-watch`, you can use any hooks inside // `data-wp-run` callbacks. const useInView = () => { - const [ inView, setInView ] = useState( false ); - useEffect( () => { - const { ref } = getElement(); - const observer = new IntersectionObserver( ( [ entry ] ) => { - setInView( entry.isIntersecting ); - } ); - observer.observe( ref ); - return () => ref && observer.unobserve( ref ); - }, []); - return inView; + const [ inView, setInView ] = useState( false ); + useEffect( () => { + const { ref } = getElement(); + const observer = new IntersectionObserver( ( [ entry ] ) => { + setInView( entry.isIntersecting ); + } ); + observer.observe( ref ); + return () => ref && observer.unobserve( ref ); + }, [] ); + return inView; }; store( 'myPlugin', { - callbacks: { - logInView: () => { - const isInView = useInView(); - useEffect( () => { - if ( isInView ) { - console.log( 'Inside' ); - } else { - console.log( 'Outside' ); - } - }); - } - }, + callbacks: { + logInView: () => { + const isInView = useInView(); + useEffect( () => { + if ( isInView ) { + console.log( 'Inside' ); + } else { + console.log( 'Outside' ); + } + } ); + }, + }, } ); ``` + It's important to note that, similar to (P)React components, the `ref` from `getElement()` is `null` during the first render. To properly access the DOM element reference, you typically need to use an effect-like hook such as `useEffect`, `useInit`, or `useWatch`. This ensures that the `getElement()` runs after the component has been mounted and the `ref` is available. @@ -598,8 +631,8 @@ The key should be a string that uniquely identifies the element among its siblin ```html
      -
    • Item 1
    • -
    • Item 2
    • +
    • Item 1
    • +
    • Item 2
    ``` @@ -607,8 +640,8 @@ But it can also be used on other elements: ```html ``` @@ -624,9 +657,9 @@ For example, let's consider the following HTML. ```html
      - +
    ``` @@ -634,9 +667,9 @@ It would generate the following output: ```html
      -
    • hello
    • -
    • hola
    • -
    • olá
    • +
    • hello
    • +
    • hola
    • +
    • olá
    ``` @@ -644,9 +677,9 @@ The prop that holds the item in the context can be changed by passing a suffix t ```html
      - +
    ``` @@ -655,19 +688,21 @@ By default, it uses each element as the key for the rendered nodes, but you can For that, you must use `data-wp-each-key` in the `