diff --git a/.eslintrc.js b/.eslintrc.js index 0b0c71c39a2664..32021810d93f4b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -83,6 +83,21 @@ const restrictedImports = [ }, ]; +const restrictedGlobals = [ + { + name: 'SCRIPT_DEBUG', + message: 'Use globalThis.SCRIPT_DEBUG', + }, + { + name: 'IS_GUTENBERG_PLUGIN', + message: 'Use globalThis.IS_GUTENBERG_PLUGIN', + }, + { + name: 'IS_WORDPRESS_CORE', + message: 'Use globalThis.IS_WORDPRESS_CORE', + }, +]; + module.exports = { root: true, extends: [ @@ -92,6 +107,7 @@ module.exports = { ], globals: { wp: 'off', + globalThis: 'readonly', }, settings: { jsdoc: { @@ -122,6 +138,7 @@ module.exports = { paths: restrictedImports, }, ], + 'no-restricted-globals': [ 'error', ...restrictedGlobals ], '@typescript-eslint/no-restricted-imports': [ 'error', { diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index d1621ed5106aab..149faee274206e 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.github/workflows/build-plugin-zip.yml @@ -69,7 +69,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: token: ${{ secrets.GUTENBERG_TOKEN }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -165,7 +165,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: ${{ needs.bump-version.outputs.release_branch || github.ref }} show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -222,7 +222,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: fetch-depth: 2 ref: ${{ needs.bump-version.outputs.release_branch }} @@ -311,14 +311,14 @@ jobs: if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }} steps: - name: Checkout (for CLI) - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: main ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - name: Checkout (for publishing) - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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 8eafe4267bc433..1065421044373b 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: fetch-depth: 1 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml index 77fdf4759f7de3..d995d641fae57d 100644 --- a/.github/workflows/check-components-changelog.yml +++ b/.github/workflows/check-components-changelog.yml @@ -20,7 +20,7 @@ jobs: - name: 'Get PR commit count' run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}" - name: Checkout code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: ${{ github.event.pull_request.head.ref }} repository: ${{ github.event.pull_request.head.repo.full_name }} diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index 2b935469264800..7c26cb6e14e760 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index 9e9c22e81fc3f6..16680038e0db64 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -27,7 +27,7 @@ jobs: totalParts: [8] steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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 bcd0fee6453fdb..633f62d5ed28c9 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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 b78ff9532c22d3..c5c8848026d986 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -32,7 +32,7 @@ jobs: WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/php-changes-detection.yml b/.github/workflows/php-changes-detection.yml index ba34e0d806185e..3b813c8f8d48fb 100644 --- a/.github/workflows/php-changes-detection.yml +++ b/.github/workflows/php-changes-detection.yml @@ -10,7 +10,7 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} steps: - name: Check out code - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: fetch-depth: 0 show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml index 11dfdb878ef289..94397afd7b4bca 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: path: cli ref: trunk @@ -39,7 +39,7 @@ jobs: - name: Checkout (for publishing) if: ${{ github.event.inputs.release_type != 'wp' }} - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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 05d28f888d0ae0..099203bbffe720 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 5d1d476226b12f..a4dce407d1c0ff 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -23,7 +23,7 @@ jobs: steps: - name: checkout - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index 5056527d097bd9..516f783c11e401 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -23,7 +23,7 @@ jobs: native-test-name: [gutenberg-editor-rendering] steps: - - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index 12c8931efca066..ff3fe96d505f6f 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 56b7471f06d9b3..7486ea32533e6a 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -12,7 +12,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 22bca2dc78186b..a4a639e183d5bf 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -70,7 +70,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -170,7 +170,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -281,7 +281,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -351,7 +351,7 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 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 8a92d0443d577a..8f57a749b0601d 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4 + uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 with: ref: ${{ matrix.branch }} token: ${{ secrets.GUTENBERG_TOKEN }} diff --git a/package-lock.json b/package-lock.json index 8b53ef4d93a070..8120fc5a8d9441 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4210,15 +4210,6 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, - "node_modules/@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "optional": true, - "dependencies": { - "@emotion/memoize": "0.7.4" - } - }, "node_modules/@emotion/jest": { "version": "11.7.1", "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz", @@ -16828,22 +16819,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/@use-gesture/core": { - "version": "10.2.24", - "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.24.tgz", - "integrity": "sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q==" - }, - "node_modules/@use-gesture/react": { - "version": "10.2.24", - "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.24.tgz", - "integrity": "sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg==", - "dependencies": { - "@use-gesture/core": "10.2.24" - }, - "peerDependencies": { - "react": ">= 16.8.0" - } - }, "node_modules/@wdio/config": { "version": "8.16.20", "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.16.20.tgz", @@ -28601,6 +28576,30 @@ "node": ">=0.10.0" } }, + "node_modules/framer-motion": { + "version": "11.1.9", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.9.tgz", + "integrity": "sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -53481,7 +53480,7 @@ "@floating-ui/react-dom": "^2.0.8", "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", - "@use-gesture/react": "^10.2.24", + "@use-gesture/react": "^10.3.1", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", "@wordpress/date": "file:../date", @@ -53506,7 +53505,7 @@ "deepmerge": "^4.3.0", "downshift": "^6.0.15", "fast-deep-equal": "^3.1.3", - "framer-motion": "^10.13.0", + "framer-motion": "^11.1.9", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "is-plain-object": "^5.0.0", @@ -53543,15 +53542,20 @@ "resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz", "integrity": "sha512-XDbrTSBlQV9nxE1GiDL3FaOPy4G/KaJkhDutBX48Kg8CYZMBARyyDFGCWfWJn4pobmInmwud1xxH7VJMAr0CKQ==" }, - "packages/components/node_modules/framer-motion": { - "version": "10.13.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.13.0.tgz", - "integrity": "sha512-xKhw9VCizmwEHbopOfluaoVunGHSZyMztGbTvsgOYqCjaKu6qtlwWY1J+6GhL41NY1P157JgEikjDm67XCFnvQ==", + "packages/components/node_modules/@use-gesture/core": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz", + "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==" + }, + "packages/components/node_modules/@use-gesture/react": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz", + "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==", "dependencies": { - "tslib": "^2.4.0" + "@use-gesture/core": "10.3.1" }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" + "peerDependencies": { + "react": ">= 16.8.0" } }, "packages/components/node_modules/path-to-regexp": { @@ -58661,15 +58665,6 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, - "@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "optional": true, - "requires": { - "@emotion/memoize": "0.7.4" - } - }, "@emotion/jest": { "version": "11.7.1", "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz", @@ -67561,19 +67556,6 @@ } } }, - "@use-gesture/core": { - "version": "10.2.24", - "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.24.tgz", - "integrity": "sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q==" - }, - "@use-gesture/react": { - "version": "10.2.24", - "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.24.tgz", - "integrity": "sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg==", - "requires": { - "@use-gesture/core": "10.2.24" - } - }, "@wdio/config": { "version": "8.16.20", "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.16.20.tgz", @@ -68753,7 +68735,7 @@ "@floating-ui/react-dom": "^2.0.8", "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", - "@use-gesture/react": "^10.2.24", + "@use-gesture/react": "^10.3.1", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", "@wordpress/date": "file:../date", @@ -68778,7 +68760,7 @@ "deepmerge": "^4.3.0", "downshift": "^6.0.15", "fast-deep-equal": "^3.1.3", - "framer-motion": "^10.13.0", + "framer-motion": "^11.1.9", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "is-plain-object": "^5.0.0", @@ -68803,13 +68785,17 @@ "resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz", "integrity": "sha512-XDbrTSBlQV9nxE1GiDL3FaOPy4G/KaJkhDutBX48Kg8CYZMBARyyDFGCWfWJn4pobmInmwud1xxH7VJMAr0CKQ==" }, - "framer-motion": { - "version": "10.13.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.13.0.tgz", - "integrity": "sha512-xKhw9VCizmwEHbopOfluaoVunGHSZyMztGbTvsgOYqCjaKu6qtlwWY1J+6GhL41NY1P157JgEikjDm67XCFnvQ==", + "@use-gesture/core": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz", + "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==" + }, + "@use-gesture/react": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz", + "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==", "requires": { - "@emotion/is-prop-valid": "^0.8.2", - "tslib": "^2.4.0" + "@use-gesture/core": "10.3.1" } }, "path-to-regexp": { @@ -78170,6 +78156,14 @@ "map-cache": "^0.2.2" } }, + "framer-motion": { + "version": "11.1.9", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.9.tgz", + "integrity": "sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==", + "requires": { + "tslib": "^2.4.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", diff --git a/package.json b/package.json index 81b467ff1e990b..76668f689f9049 100644 --- a/package.json +++ b/package.json @@ -268,7 +268,7 @@ "scripts": { "build": "npm run build:packages && wp-scripts build", "build:analyze-bundles": "npm run build -- --webpack-bundle-analyzer", - "build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build && node ./bin/packages/check-build-type-declaration-files.js", + "build:package-types": "node ./bin/packages/validate-typescript-version.js && ( tsc --build || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js", "prebuild:packages": "npm run clean:packages && lerna run build", "build:packages": "npm run build:package-types && node ./bin/packages/build.js", "build:plugin-zip": "bash ./bin/build-plugin-zip.sh", diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index a1de82c2081cc5..730fc6e9b4a8cb 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -317,10 +317,14 @@ border-radius: $radius-round; width: $radio-input-size-sm; height: $radio-input-size-sm; + min-width: $radio-input-size-sm; + max-width: $radio-input-size-sm; @include break-small() { height: $radio-input-size; width: $radio-input-size; + min-width: $radio-input-size; + max-width: $radio-input-size; } &:checked::before { diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js index 57e53979142d66..300c108a70cf1a 100644 --- a/packages/block-editor/src/components/provider/use-block-sync.js +++ b/packages/block-editor/src/components/provider/use-block-sync.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useEffect, useRef } from '@wordpress/element'; -import { useRegistry } from '@wordpress/data'; +import { useRegistry, useSelect } from '@wordpress/data'; import { cloneBlock } from '@wordpress/blocks'; /** @@ -82,6 +82,15 @@ export default function useBlockSync( { } = registry.dispatch( blockEditorStore ); const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } = registry.select( blockEditorStore ); + const isControlled = useSelect( + ( select ) => { + return ( + ! clientId || + select( blockEditorStore ).areInnerBlocksControlled( clientId ) + ); + }, + [ clientId ] + ); const pendingChanges = useRef( { incoming: null, outgoing: [] } ); const subscribed = useRef( false ); @@ -177,6 +186,23 @@ export default function useBlockSync( { } }, [ controlledBlocks, clientId ] ); + const isMounted = useRef( false ); + + useEffect( () => { + // On mount, controlled blocks are already set in the effect above. + if ( ! isMounted.current ) { + isMounted.current = true; + return; + } + + // When the block becomes uncontrolled, it means its inner state has been reset + // we need to take the blocks again from the external value property. + if ( ! isControlled ) { + pendingChanges.current.outgoing = []; + setControlledBlocks(); + } + }, [ isControlled ] ); + useEffect( () => { const { getSelectedBlocksInitialCaretPosition, diff --git a/packages/components/package.json b/packages/components/package.json index 308765f08a6948..cfe046003d945a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -41,7 +41,7 @@ "@floating-ui/react-dom": "^2.0.8", "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", - "@use-gesture/react": "^10.2.24", + "@use-gesture/react": "^10.3.1", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", "@wordpress/date": "file:../date", @@ -66,7 +66,7 @@ "deepmerge": "^4.3.0", "downshift": "^6.0.15", "fast-deep-equal": "^3.1.3", - "framer-motion": "^10.13.0", + "framer-motion": "^11.1.9", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "is-plain-object": "^5.0.0", diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 81045d05c21fc5..2033a6f43fede6 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -9,10 +9,7 @@ "gutenberg-test-env", "jest", "@testing-library/jest-dom" - ], - // TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable - // between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`. - "skipLibCheck": true + ] }, "references": [ { "path": "../a11y" }, diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json index 60122ee152c80e..83c47d8320d838 100644 --- a/packages/dataviews/tsconfig.json +++ b/packages/dataviews/tsconfig.json @@ -4,7 +4,6 @@ "compilerOptions": { "rootDir": "src", "declarationDir": "build-types", - "skipLibCheck": true, "checkJs": false }, "references": [ diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts index bf4b240a3fd619..81451cd516f0ed 100644 --- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts +++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts @@ -16,7 +16,7 @@ export async function publishPost( this: Editor ) { .getByRole( 'button', { name: 'Save', exact: true } ); const publishButton = this.page .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Publish' } ); + .getByRole( 'button', { name: 'Publish', exact: true } ); const buttonToClick = ( await saveButton.isVisible() ) ? saveButton : publishButton; diff --git a/packages/e2e-test-utils/src/ensure-sidebar-opened.js b/packages/e2e-test-utils/src/ensure-sidebar-opened.js index 5ea99c629c15ef..95c674e980643a 100644 --- a/packages/e2e-test-utils/src/ensure-sidebar-opened.js +++ b/packages/e2e-test-utils/src/ensure-sidebar-opened.js @@ -8,7 +8,8 @@ export async function ensureSidebarOpened() { '.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"],' + '.edit-site-header__actions [aria-label="Settings"][aria-expanded="false"],' + '.edit-widgets-header__actions [aria-label="Settings"][aria-expanded="false"],' + - '.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"]' + '.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"],' + + '.editor-header__settings [aria-label="Settings"][aria-expanded="false"]' ); if ( toggleSidebarButton ) { diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index cf5d7c48c9dfdd..5beab3c6205b6e 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -53,7 +53,8 @@ async function isGlobalInserterOpen() { '.edit-site-header [aria-label="Toggle block inserter"].is-pressed,' + '.edit-widgets-header [aria-label="Toggle block inserter"].is-pressed,' + '.edit-widgets-header [aria-label="Add block"].is-pressed,' + - '.edit-site-header-edit-mode__inserter-toggle.is-pressed' + '.edit-site-header-edit-mode__inserter-toggle.is-pressed,' + + '.editor-header [aria-label="Toggle block inserter"].is-pressed' ); } ); } diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index 4f6cf1773134fb..98ba34f7db4f51 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/packages/e2e-test-utils/src/site-editor.js @@ -97,9 +97,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) { * Toggles the global styles sidebar (opens it if closed and closes it if open). */ export async function toggleGlobalStyles() { - await page.click( - '.edit-site-header-edit-mode__actions button[aria-label="Styles"]' - ); + await page.click( '.editor-header__settings button[aria-label="Styles"]' ); } /** diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 86c928ff157662..311279292d8f6a 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -1,24 +1,9 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ -import { - DocumentBar, - PostSavedState, - PostPreviewButton, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; -import { useViewportMatch } from '@wordpress/compose'; import { __unstableMotion as motion } from '@wordpress/components'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { useState } from '@wordpress/element'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -29,21 +14,7 @@ import MainDashboardButton from './main-dashboard-button'; import { store as editPostStore } from '../../store'; import { unlock } from '../../lock-unlock'; -const { - CollapsableBlockToolbar, - DocumentTools, - PostViewLink, - PreviewDropdown, - PinnedItems, - MoreMenu, - PostPublishButtonOrToggle, -} = unlock( editorPrivateApis ); - -const slideY = { - hidden: { y: '-50px' }, - distractionFreeInactive: { y: 0 }, - hover: { y: 0, transition: { type: 'tween', delay: 0.2 } }, -}; +const { Header: EditorHeader } = unlock( editorPrivateApis ); const slideX = { hidden: { x: '-100%' }, @@ -52,42 +23,17 @@ const slideX = { }; function Header( { setEntitiesSavedStatesCallback, initialPost } ) { - const isWideViewport = useViewportMatch( 'large' ); - const isLargeViewport = useViewportMatch( 'medium' ); - const { - isTextEditor, - hasActiveMetaboxes, - isPublishSidebarOpened, - showIconLabels, - hasHistory, - hasFixedToolbar, - isZoomedOutView, - } = useSelect( ( select ) => { - const { get: getPreference } = select( preferencesStore ); - const { getEditorMode } = select( editorStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - + const { hasActiveMetaboxes } = useSelect( ( select ) => { return { - isTextEditor: getEditorMode() === 'text', hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - hasHistory: - !! select( editorStore ).getEditorSettings() - .onNavigateToPreviousEntityRecord, - isPublishSidebarOpened: - select( editorStore ).isPublishSidebarOpened(), - showIconLabels: getPreference( 'core', 'showIconLabels' ), - hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), - isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); - const hasTopToolbar = isLargeViewport && hasFixedToolbar; - - const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = - useState( true ); - return ( -
+ - - - { hasTopToolbar && ( - - ) } -
- { hasHistory && } -
- - - { ! isPublishSidebarOpened && ( - // This button isn't completely hidden by the publish sidebar. - // We can't hide the whole toolbar when the publish sidebar is open because - // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. - // We track that DOM node to return focus to the PostPublishButtonOrToggle - // when the publish sidebar has been closed. - - ) } - - - - - { ( isWideViewport || ! showIconLabels ) && ( - - ) } - - - -
+ + ); } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 93c1461774cbd0..53672eb09e701f 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -1,251 +1,14 @@ -.edit-post-header { - height: $header-height; - background: $white; - display: flex; - flex-wrap: wrap; - align-items: center; - // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. - max-width: 100vw; - justify-content: space-between; - - // Make toolbar sticky on larger breakpoints - @include break-zoomed-in { - flex-wrap: nowrap; - } -} - -.edit-post-header__toolbar { - display: flex; - // Allow this area to shrink to fit the toolbar buttons. - flex-shrink: 8; - // Take up the space of the toolbar so it can be justified to the left side of the toolbar. - flex-grow: 3; - // Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar. - overflow: hidden; - // Leave enough room for the focus ring to show. - padding: 2px 0; - align-items: center; - // Allow focus ring to be fully visible on furthest right button. - @include break-medium() { - padding-right: var(--wp-admin-border-width-focus); - } - - .table-of-contents { - display: none; - - @include break-small() { - display: block; - } - } -} - -.edit-post-header__center { - flex-grow: 1; - display: flex; - justify-content: center; - - &.is-collapsed { - display: none; - } -} - /** - * Buttons on the right side + * Show icon label overrides. */ - -.edit-post-header__settings { - display: inline-flex; - align-items: center; - flex-wrap: nowrap; - padding-right: $grid-unit-05; - - @include break-small () { - padding-right: $grid-unit-10; - } - - gap: $grid-unit-10; -} - -/** - * Show icon labels. - */ - -.show-icon-labels.interface-pinned-items, -.show-icon-labels .edit-post-header, -.edit-post-header__dropdown { - .components-button.has-icon { - width: auto; - - // Hide the button icons when labels are set to display... - svg { - display: none; - } - // ... and display labels. - &::after { - content: attr(aria-label); - } - &[aria-disabled="true"] { - background-color: transparent; - } - } - .is-tertiary { - &:active { - box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); - background-color: transparent; - } - } - // Exception for drodpdown toggle buttons. - // Exception for the fullscreen mode button. - .edit-post-fullscreen-mode-close.has-icon, - .components-button.has-icon.button-toggle { - svg { - display: block; - } - &::after { - content: none; - } - } - // Undo the width override for fullscreen mode button. +.show-icon-labels .editor-header { .edit-post-fullscreen-mode-close.has-icon { width: $header-height; - } - // Don't hide MenuItemsChoice check icons - .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon { - display: block; - } - .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, - .interface-pinned-items .components-button { - padding-left: $grid-unit; - padding-right: $grid-unit; - - @include break-small { - padding-left: $grid-unit-15; - padding-right: $grid-unit-15; + svg { + display: block; } - } - - .editor-post-save-draft.editor-post-save-draft, - .editor-post-saved-state.editor-post-saved-state { &::after { content: none; } } } - -.show-icon-labels { - .edit-post-header__toolbar .block-editor-block-mover { - // Modified group borders. - border-left: none; - - &::before { - content: ""; - width: $border-width; - height: $grid-unit-30; - background-color: $gray-300; - margin-top: $grid-unit-05; - margin-left: $grid-unit; - } - - // Modified block movers horizontal separator. - .block-editor-block-mover__move-button-container { - &::before { - width: calc(100% - #{$grid-unit-30}); - background: $gray-300; - left: calc(50% + 1px); - } - } - } -} - -.edit-post-header__dropdown { - .components-menu-item__button.components-menu-item__button, - .components-button.editor-history__undo, - .components-button.editor-history__redo, - .table-of-contents .components-button, - .components-button.block-editor-list-view { - margin: 0; - padding: 6px 6px 6px $grid-unit-50; - width: 14.625rem; - text-align: left; - justify-content: flex-start; - } -} - -.show-icon-labels.interface-pinned-items { - padding: 6px $grid-unit-15 $grid-unit-15; - margin-top: 0; - margin-bottom: 0; - margin-left: -$grid-unit-15; - margin-right: -$grid-unit-15; - border-bottom: 1px solid $gray-400; - display: block; - - > .components-button.has-icon { - margin: 0; - padding: 6px 6px 6px $grid-unit; - width: 14.625rem; - justify-content: flex-start; - - &[aria-expanded="true"] svg { - display: block; - max-width: $grid-unit-30; - } - &[aria-expanded="false"] { - padding-left: $grid-unit-50; - } - svg { - margin-right: 8px; - } - } -} - -.edit-post-header__post-preview-button { - @include break-small { - display: none; - } -} - -.is-distraction-free { - .interface-interface-skeleton__header { - border-bottom: none; - } - - .edit-post-header { - background-color: $white; - border-bottom: 1px solid #e0e0e0; - position: absolute; - width: 100%; - - - // hide some parts - & > .edit-post-header__settings > .edit-post-header__post-preview-button { - visibility: hidden; - } - - & > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle, - & > .edit-post-header__settings > .editor-preview-dropdown, - & > .edit-post-header__settings > .interface-pinned-items { - display: none; - } - - } - - // We need ! important because we override inline styles - // set by the motion component. - .interface-interface-skeleton__header:focus-within { - opacity: 1 !important; - div { - transform: translateX(0) translateZ(0) !important; - } - - } - - .components-editor-notices__dismissible { - position: absolute; - z-index: 35; - } -} - -.components-popover.more-menu-dropdown__content { - z-index: z-index(".components-popover.more-menu__content"); -} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index d780f4257f25ab..f477bef7bbffd3 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -39,7 +39,7 @@ body.js.block-editor-page { } // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas. -.edit-post-header, +.editor-header, .edit-post-text-editor, .editor-sidebar, .editor-post-publish-panel { diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 8803c0c59ff5a6..000c64fd8ae03d 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -6,10 +6,6 @@ &.is-loading { opacity: 0; } - - .interface-interface-skeleton__header { - border: 0; - } } .edit-site-editor__toggle-save-panel { diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 921ff61dd23a1e..fcd4ea1b388028 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -1,188 +1,51 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ -import { useViewportMatch, useReducedMotion } from '@wordpress/compose'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __unstableMotion as motion } from '@wordpress/components'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { - DocumentBar, - PostSavedState, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import SiteEditorMoreMenuItems from './more-menu'; +import SiteEditorMoreMenu from './more-menu'; +import { unlock } from '../../lock-unlock'; import SaveButton from '../save-button'; -import { store as editSiteStore } from '../../store'; +import { isPreviewingTheme } from '../../utils/is-previewing-theme'; import { getEditorCanvasContainerTitle, useHasEditorCanvasContainer, } from '../editor-canvas-container'; -import { unlock } from '../../lock-unlock'; -import { FOCUSABLE_ENTITIES } from '../../utils/constants'; -import { isPreviewingTheme } from '../../utils/is-previewing-theme'; - -const { - CollapsableBlockToolbar, - DocumentTools, - MoreMenu, - PostViewLink, - PreviewDropdown, - PinnedItems, - PostPublishButtonOrToggle, -} = unlock( editorPrivateApis ); +import { store as editSiteStore } from '../../store'; -export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) { - const { - templateType, - isDistractionFree, - blockEditorMode, - showIconLabels, - editorCanvasView, - isFixedToolbar, - isPublishSidebarOpened, - isVisualMode, - } = useSelect( ( select ) => { - const { getEditedPostType } = select( editSiteStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - const { get: getPreference } = select( preferencesStore ); - const { getDeviceType, getEditorMode } = select( editorStore ); +const { Header: EditorHeader } = unlock( editorPrivateApis ); +function Header( { setEntitiesSavedStatesCallback } ) { + const _isPreviewingTheme = isPreviewingTheme(); + const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); + const { editorCanvasView } = useSelect( ( select ) => { return { - deviceType: getDeviceType(), - templateType: getEditedPostType(), - blockEditorMode: __unstableGetEditorMode(), - showIconLabels: getPreference( 'core', 'showIconLabels' ), editorCanvasView: unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), - isDistractionFree: getPreference( 'core', 'distractionFree' ), - isFixedToolbar: getPreference( 'core', 'fixedToolbar' ), - isPublishSidebarOpened: - select( editorStore ).isPublishSidebarOpened(), - isVisualMode: getEditorMode() === 'visual', }; }, [] ); - const isLargeViewport = useViewportMatch( 'medium' ); - const showTopToolbar = - isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out'; - const disableMotion = useReducedMotion(); - - const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); - - const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType ); - - const isZoomedOutView = blockEditorMode === 'zoom-out'; - - const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = - useState( true ); - - const toolbarVariants = { - isDistractionFree: { y: '-50px' }, - isDistractionFreeHovering: { y: 0 }, - view: { y: 0 }, - edit: { y: 0 }, - }; - - const toolbarTransition = { - type: 'tween', - duration: disableMotion ? 0 : 0.2, - ease: 'easeOut', - }; - - const _isPreviewingTheme = isPreviewingTheme(); return ( -
+ } + forceDisableBlockTools={ ! hasDefaultEditorCanvasView } + title={ + ! hasDefaultEditorCanvasView + ? getEditorCanvasContainerTitle( editorCanvasView ) + : undefined + } > - { hasDefaultEditorCanvasView && ( - - - { showTopToolbar && ( - - ) } - - ) } - - { ! isDistractionFree && ( -
- { ! hasDefaultEditorCanvasView ? ( - getEditorCanvasContainerTitle( editorCanvasView ) - ) : ( - - ) } -
- ) } - -
- - { isLargeViewport && ( - - ) } - - { - // TODO: For now we conditionally render the Save/Publish buttons based on - // some specific site editor extra handling. Examples are when we're previewing - // a theme, handling of global styles changes or when we're in 'view' mode, - // which opens the save panel in a Modal. - } - { ! _isPreviewingTheme && ! isPublishSidebarOpened && ( - // This button isn't completely hidden by the publish sidebar. - // We can't hide the whole toolbar when the publish sidebar is open because - // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. - // We track that DOM node to return focus to the PostPublishButtonOrToggle - // when the publish sidebar has been closed. - - ) } - { ! _isPreviewingTheme && ( - - ) } - { _isPreviewingTheme && } - { ! isDistractionFree && } - - - -
-
+ + ); } + +export default Header; diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss index 39a1a3418395a3..69b1e9dff38492 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -1,192 +1,3 @@ -.edit-site-header-edit-mode { - height: $header-height; - align-items: center; - background-color: $white; - color: $gray-900; - display: flex; - box-sizing: border-box; - width: 100%; - justify-content: space-between; - border-bottom: $border-width solid $gray-200; +.editor-header { padding-left: $header-height; - - // When top toolbar is engaged and should expand fully. - &.show-block-toolbar { - - .edit-site-header-edit-mode__start, - .edit-site-header-edit-mode__end { - flex-basis: auto; - } - - .edit-site-header-edit-mode__center { - display: none; - } - } - - .edit-site-header-edit-mode__start { - display: flex; - border: none; - align-items: center; - flex-grow: 1; - flex-shrink: 2; - // Take up the full height of the header so the border focus - // is visible on toolbar buttons. - height: 100%; - // Allow focus ring to be fully visible on furthest right button. - @include break-medium() { - padding-right: var(--wp-admin-border-width-focus); - // Account for the site hub, which is 60x60px. - flex-basis: calc(37.5% - 60px); - // We need this to be overflow hidden so the block toolbar can - // overflow scroll. If the overflow is visible, flexbox allows - // the toolbar to grow outside of the allowed container space. - overflow: hidden; - } - } - - .edit-site-header-edit-mode__end { - display: flex; - justify-content: flex-end; - height: 100%; - flex-grow: 1; - flex-shrink: 1; - - @include break-medium() { - flex-basis: 37.5%; - } - } - - .edit-site-header-edit-mode__center { - align-items: center; - display: flex; - flex-basis: 100%; - flex-grow: 1; - flex-shrink: 2; - height: 100%; - justify-content: center; - - // Flex items will, by default, refuse to shrink below a minimum - // intrinsic width. In order to shrink this flexbox item, and - // subsequently truncate child text, we set an explicit min-width. - // See https://dev.w3.org/csswg/css-flexbox/#min-size-auto - min-width: 0; - - @include break-medium() { - flex-basis: 25%; - } - } - -} - -.edit-site-header-edit-mode__toolbar { - align-items: center; - display: flex; - gap: $grid-unit-10; - padding-left: $grid-unit-20; - - @include break-medium() { - padding-left: $grid-unit-50 * 0.5; - } - - @include break-wide() { - padding-right: $grid-unit-10; - } - - .edit-site-header-edit-mode__inserter-toggle { - svg { - transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; - @include reduce-motion("transition"); - } - - &.is-pressed { - svg { - transform: rotate(45deg); - } - } - } -} - -/** - * Buttons on the right side - */ - -.edit-site-header-edit-mode__actions { - display: inline-flex; - align-items: center; - flex-wrap: nowrap; - // Ensure actions do not press against .edit-site-header-edit-mode__center. - padding-left: $grid-unit-10; - padding-right: $grid-unit-10; - gap: $grid-unit-10; -} - -// Button text label styles - -.edit-site-header-edit-mode.show-icon-labels { - .components-button.has-icon { - width: auto; - - // Hide the button icons when labels are set to display... - svg { - display: none; - } - // ... and display labels. - &::after { - content: attr(aria-label); - } - &[aria-disabled="true"] { - background-color: transparent; - } - } - .is-tertiary { - &:active { - box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); - background-color: transparent; - } - } - // Some margins and padding have to be adjusted so the buttons can still fit on smaller screens. - .edit-site-save-button__button { - padding-left: 6px; - padding-right: 6px; - } - - // The template details toggle has a custom label, different from its aria-label, so we don't want to display both. - .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { - &::after { - content: none; - } - } - - .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle, - .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { - height: 36px; - padding: 0 $grid-unit-10; - } - - .block-editor-block-mover { - // Modified group borders. - border-left: none; - - &::before { - content: ""; - width: $border-width; - height: $grid-unit-30; - background-color: $gray-300; - margin-top: $grid-unit-05; - margin-left: $grid-unit; - } - - // Modified block movers horizontal separator. - .block-editor-block-mover__move-button-container { - &::before { - width: calc(100% - #{$grid-unit-30}); - background: $gray-300; - left: calc(50% + 1px); - } - } - } -} - -.components-popover.more-menu-dropdown__content { - z-index: z-index(".components-popover.more-menu__content"); } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 00b67f00f6f23d..55a071caacac41 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -165,8 +165,9 @@ position: relative; color: $white; border-radius: 0; - height: $header-height; + height: $header-height + $border-width; width: $header-height; + margin-bottom: - $border-width; overflow: hidden; padding: 0; display: flex; diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index c799e9eae30de6..434b55a7e0fe20 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/packages/editor/src/components/document-tools/index.js @@ -204,6 +204,7 @@ function DocumentTools( { ); } } size="compact" + disabled={ disableBlockTools } /> ) } diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js new file mode 100644 index 00000000000000..98501386434b69 --- /dev/null +++ b/packages/editor/src/components/header/index.js @@ -0,0 +1,154 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { useViewportMatch } from '@wordpress/compose'; +import { __unstableMotion as motion } from '@wordpress/components'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { useState } from '@wordpress/element'; +import { PinnedItems } from '@wordpress/interface'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import CollapsableBlockToolbar from '../collapsible-block-toolbar'; +import DocumentBar from '../document-bar'; +import DocumentTools from '../document-tools'; +import MoreMenu from '../more-menu'; +import PostPreviewButton from '../post-preview-button'; +import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle'; +import PostSavedState from '../post-saved-state'; +import PostTypeSupportCheck from '../post-type-support-check'; +import PostViewLink from '../post-view-link'; +import PreviewDropdown from '../preview-dropdown'; +import { store as editorStore } from '../../store'; + +const slideY = { + hidden: { y: '-50px' }, + distractionFreeInactive: { y: 0 }, + hover: { y: 0, transition: { type: 'tween', delay: 0.2 } }, +}; + +function Header( { + customSaveButton, + forceIsDirty, + forceDisableBlockTools, + setEntitiesSavedStatesCallback, + title, + children, +} ) { + const isWideViewport = useViewportMatch( 'large' ); + const isLargeViewport = useViewportMatch( 'medium' ); + const { + isTextEditor, + isPublishSidebarOpened, + showIconLabels, + hasFixedToolbar, + isNestedEntity, + isZoomedOutView, + } = useSelect( ( select ) => { + const { get: getPreference } = select( preferencesStore ); + const { + getEditorMode, + getEditorSettings, + isPublishSidebarOpened: _isPublishSidebarOpened, + } = select( editorStore ); + const { __unstableGetEditorMode } = select( blockEditorStore ); + + return { + isTextEditor: getEditorMode() === 'text', + isPublishSidebarOpened: _isPublishSidebarOpened(), + showIconLabels: getPreference( 'core', 'showIconLabels' ), + hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), + isNestedEntity: + !! getEditorSettings().onNavigateToPreviousEntityRecord, + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', + }; + }, [] ); + + const hasTopToolbar = isLargeViewport && hasFixedToolbar; + + const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = + useState( true ); + + // The edit-post-header classname is only kept for backward compatibilty + // as some plugins might be relying on its presence. + return ( +
+ { children } + + + { hasTopToolbar && ( + + ) } +
+ { ! title ? ( + + + + ) : ( + title + ) } +
+ + + { ! customSaveButton && ! isPublishSidebarOpened && ( + // This button isn't completely hidden by the publish sidebar. + // We can't hide the whole toolbar when the publish sidebar is open because + // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. + // We track that DOM node to return focus to the PostPublishButtonOrToggle + // when the publish sidebar has been closed. + + ) } + + + + { ! customSaveButton && ( + + ) } + { customSaveButton } + { ( isWideViewport || ! showIconLabels ) && ( + + ) } + + +
+ ); +} + +export default Header; diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss new file mode 100644 index 00000000000000..3040362a7bd575 --- /dev/null +++ b/packages/editor/src/components/header/style.scss @@ -0,0 +1,231 @@ +.editor-header { + height: $header-height; + background: $white; + display: flex; + flex-wrap: wrap; + align-items: center; + // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. + max-width: 100vw; + justify-content: space-between; + + // Make toolbar sticky on larger breakpoints + @include break-zoomed-in { + flex-wrap: nowrap; + } +} + +.editor-header__toolbar { + display: flex; + // Allow this area to shrink to fit the toolbar buttons. + flex-shrink: 8; + // Take up the space of the toolbar so it can be justified to the left side of the toolbar. + flex-grow: 3; + // Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar. + overflow: hidden; + // Leave enough room for the focus ring to show. + padding: 2px 0; + align-items: center; + // Allow focus ring to be fully visible on furthest right button. + @include break-medium() { + padding-right: var(--wp-admin-border-width-focus); + } + + .table-of-contents { + display: none; + + @include break-small() { + display: block; + } + } +} + +.editor-header__center { + flex-grow: 1; + display: flex; + justify-content: center; + + &.is-collapsed { + display: none; + } +} + +/** + * Buttons on the right side + */ + +.editor-header__settings { + display: inline-flex; + align-items: center; + flex-wrap: nowrap; + padding-right: $grid-unit-05; + + @include break-small () { + padding-right: $grid-unit-10; + } + + gap: $grid-unit-10; +} + +/** + * Show icon labels. + */ + +.show-icon-labels.interface-pinned-items, +.show-icon-labels .editor-header { + .components-button.has-icon { + width: auto; + + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + } + &[aria-disabled="true"] { + background-color: transparent; + } + } + .is-tertiary { + &:active { + box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); + background-color: transparent; + } + } + // Exception for drodpdown toggle buttons. + .components-button.has-icon.button-toggle { + svg { + display: block; + } + &::after { + content: none; + } + } + + // Don't hide MenuItemsChoice check icons + .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon { + display: block; + } + .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, + .interface-pinned-items .components-button { + padding-left: $grid-unit; + padding-right: $grid-unit; + + @include break-small { + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; + } + } + + .editor-post-save-draft.editor-post-save-draft, + .editor-post-saved-state.editor-post-saved-state { + &::after { + content: none; + } + } +} + +.show-icon-labels { + .editor-header__toolbar .block-editor-block-mover { + // Modified group borders. + border-left: none; + + &::before { + content: ""; + width: $border-width; + height: $grid-unit-30; + background-color: $gray-300; + margin-top: $grid-unit-05; + margin-left: $grid-unit; + } + + // Modified block movers horizontal separator. + .block-editor-block-mover__move-button-container { + &::before { + width: calc(100% - #{$grid-unit-30}); + background: $gray-300; + left: calc(50% + 1px); + } + } + } +} + +.show-icon-labels.interface-pinned-items { + padding: 6px $grid-unit-15 $grid-unit-15; + margin-top: 0; + margin-bottom: 0; + margin-left: -$grid-unit-15; + margin-right: -$grid-unit-15; + border-bottom: 1px solid $gray-400; + display: block; + + > .components-button.has-icon { + margin: 0; + padding: 6px 6px 6px $grid-unit; + width: 14.625rem; + justify-content: flex-start; + + &[aria-expanded="true"] svg { + display: block; + max-width: $grid-unit-30; + } + &[aria-expanded="false"] { + padding-left: $grid-unit-50; + } + svg { + margin-right: 8px; + } + } +} + +.editor-header__post-preview-button { + @include break-small { + display: none; + } +} + +.is-distraction-free { + .interface-interface-skeleton__header { + border-bottom: none; + } + + .editor-header { + background-color: $white; + border-bottom: 1px solid #e0e0e0; + position: absolute; + width: 100%; + + + // hide some parts + & > .edit-post-header__settings > .edit-post-header__post-preview-button { + visibility: hidden; + } + + & > .editor-header__toolbar .editor-document-tools__document-overview-toggle, + & > .editor-header__settings > .editor-preview-dropdown, + & > .editor-header__settings > .interface-pinned-items { + display: none; + } + + } + + // We need ! important because we override inline styles + // set by the motion component. + .interface-interface-skeleton__header:focus-within { + opacity: 1 !important; + div { + transform: translateX(0) translateZ(0) !important; + } + + } + + .components-editor-notices__dismissible { + position: absolute; + z-index: 35; + } +} + +.components-popover.more-menu-dropdown__content { + z-index: z-index(".components-popover.more-menu__content"); +} diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 762c6bec89c883..cee1a734ca34c5 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -6,22 +6,18 @@ import * as interfaceApis from '@wordpress/interface'; /** * Internal dependencies */ -import CollapsableBlockToolbar from './components/collapsible-block-toolbar'; import EditorCanvas from './components/editor-canvas'; import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; -import DocumentTools from './components/document-tools'; +import Header from './components/header'; import InserterSidebar from './components/inserter-sidebar'; import ListViewSidebar from './components/list-view-sidebar'; -import MoreMenu from './components/more-menu'; import PatternOverridesPanel from './components/pattern-overrides-panel'; import PluginPostExcerpt from './components/post-excerpt/plugin'; import PostPanelRow from './components/post-panel-row'; -import PostViewLink from './components/post-view-link'; -import PreviewDropdown from './components/preview-dropdown'; import PreferencesModal from './components/preferences-modal'; import PostActions from './components/post-actions'; import { usePostActions } from './components/post-actions/actions'; @@ -30,7 +26,6 @@ import PostStatus from './components/post-status'; import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; -import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle'; import SavePublishPanels from './components/save-publish-panels'; import PostContentInformation from './components/post-content-information'; import PostLastEditedPanel from './components/post-last-edited-panel'; @@ -39,20 +34,16 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; export const privateApis = {}; lock( privateApis, { - CollapsableBlockToolbar, - DocumentTools, EditorCanvas, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, + Header, InserterSidebar, ListViewSidebar, - MoreMenu, PatternOverridesPanel, PluginPostExcerpt, PostActions, PostPanelRow, - PostViewLink, - PreviewDropdown, PreferencesModal, usePostActions, PostCardPanel, @@ -60,7 +51,6 @@ lock( privateApis, { ToolsMoreMenuGroup, ViewMoreMenuGroup, PrivatePostExcerptPanel, - PostPublishButtonOrToggle, SavePublishPanels, PostContentInformation, PostLastEditedPanel, diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js new file mode 100644 index 00000000000000..78ef82c327f8fd --- /dev/null +++ b/packages/editor/src/private-apis.native.js @@ -0,0 +1,61 @@ +/** + * WordPress dependencies + */ +import * as interfaceApis from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import EditorCanvas from './components/editor-canvas'; +import { ExperimentalEditorProvider } from './components/provider'; +import { lock } from './lock-unlock'; +import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; +import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; +import useBlockEditorSettings from './components/provider/use-block-editor-settings'; +import InserterSidebar from './components/inserter-sidebar'; +import ListViewSidebar from './components/list-view-sidebar'; +import PatternOverridesPanel from './components/pattern-overrides-panel'; +import PluginPostExcerpt from './components/post-excerpt/plugin'; +import PostPanelRow from './components/post-panel-row'; +import PreferencesModal from './components/preferences-modal'; +import PostActions from './components/post-actions'; +import { usePostActions } from './components/post-actions/actions'; +import PostCardPanel from './components/post-card-panel'; +import PostStatus from './components/post-status'; +import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; +import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; +import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; +import SavePublishPanels from './components/save-publish-panels'; +import PostContentInformation from './components/post-content-information'; +import PostLastEditedPanel from './components/post-last-edited-panel'; + +const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; + +export const privateApis = {}; +lock( privateApis, { + EditorCanvas, + ExperimentalEditorProvider, + EntitiesSavedStatesExtensible, + InserterSidebar, + ListViewSidebar, + PatternOverridesPanel, + PluginPostExcerpt, + PostActions, + PostPanelRow, + PreferencesModal, + usePostActions, + PostCardPanel, + PostStatus, + ToolsMoreMenuGroup, + ViewMoreMenuGroup, + PrivatePostExcerptPanel, + SavePublishPanels, + PostContentInformation, + PostLastEditedPanel, + + // This is a temporary private API while we're updating the site editor to use EditorProvider. + useAutoSwitchEditorSidebars, + useBlockEditorSettings, + interfaceStore, + ...remainingInterfaceApis, +} ); diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index ed61638ffb7ef6..e869bf2d68b363 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -9,6 +9,7 @@ @import "./components/editor-notices/style.scss"; @import "./components/entities-saved-states/style.scss"; @import "./components/error-boundary/style.scss"; +@import "./components/header/style.scss"; @import "./components/inserter-sidebar/style.scss"; @import "./components/keyboard-shortcut-help-modal/style.scss"; @import "./components/list-view-sidebar/style.scss"; diff --git a/packages/plugins/tsconfig.json b/packages/plugins/tsconfig.json index d20dcecf0d613b..9a0da807348b21 100644 --- a/packages/plugins/tsconfig.json +++ b/packages/plugins/tsconfig.json @@ -4,8 +4,7 @@ "compilerOptions": { "rootDir": "src", "declarationDir": "build-types", - "types": [ "gutenberg-env" ], - "skipLibCheck": true + "types": [ "gutenberg-env" ] }, "references": [ { "path": "../components" }, diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js index a31fd91ce094dd..bea820226fe332 100644 --- a/packages/private-apis/src/implementation.js +++ b/packages/private-apis/src/implementation.js @@ -66,7 +66,7 @@ let allowReRegistration; // Let's default to true, then. Try/catch will fall back to "true" even if the // environment variable is not explicitly defined. try { - allowReRegistration = process.env.IS_WORDPRESS_CORE ? false : true; + allowReRegistration = globalThis.IS_WORDPRESS_CORE ? false : true; } catch ( error ) { allowReRegistration = true; } diff --git a/patches/react-autosize-textarea+7.1.0.patch b/patches/react-autosize-textarea+7.1.0.patch new file mode 100644 index 00000000000000..7d67e58fd5fab6 --- /dev/null +++ b/patches/react-autosize-textarea+7.1.0.patch @@ -0,0 +1,13 @@ +diff --git a/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts b/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts +index ad6ff3f..e0a6d51 100644 +--- a/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts ++++ b/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts +@@ -22,7 +22,7 @@ export declare namespace TextareaAutosize { + lineHeight: number | null; + }; + } +-export declare const TextareaAutosize: React.ForwardRefExoticComponent, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "className" | "height" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "kind" | "src" | "srcLang" | "value" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster"> & { ++export declare const TextareaAutosize: React.ForwardRefExoticComponent, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "className" | "height" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "kind" | "src" | "srcLang" | "value" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster"> & { + /** Called whenever the textarea resizes */ + onResize?: ((e: Event) => void) | undefined; + /** Minimum number of visible rows */ diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js index 2b149bcc69bf3e..7d656fbd2774ff 100644 --- a/test/e2e/specs/site-editor/block-removal.spec.js +++ b/test/e2e/specs/site-editor/block-removal.spec.js @@ -25,7 +25,9 @@ test.describe( 'Site editor block removal prompt', () => { } ) => { // Open and focus List View const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); - await topBar.getByRole( 'button', { name: 'List View' } ).click(); + await topBar + .getByRole( 'button', { name: 'Document Overview' } ) + .click(); // Select and try to remove Query Loop block const listView = page.getByRole( 'region', { name: 'List View' } ); @@ -45,7 +47,9 @@ test.describe( 'Site editor block removal prompt', () => { } ) => { // Open and focus List View const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); - await topBar.getByRole( 'button', { name: 'List View' } ).click(); + await topBar + .getByRole( 'button', { name: 'Document Overview' } ) + .click(); // Select and open child blocks of Query Loop block const listView = page.getByRole( 'region', { name: 'List View' } ); @@ -70,7 +74,9 @@ test.describe( 'Site editor block removal prompt', () => { } ) => { // Open and focus List View const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); - await topBar.getByRole( 'button', { name: 'List View' } ).click(); + await topBar + .getByRole( 'button', { name: 'Document Overview' } ) + .click(); // Select Query Loop list item const listView = page.getByRole( 'region', { name: 'List View' } ); diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js index 9b7a1c17a9ce1d..9bccc7c56446a6 100644 --- a/test/e2e/specs/site-editor/list-view.spec.js +++ b/test/e2e/specs/site-editor/list-view.spec.js @@ -106,7 +106,7 @@ test.describe( 'Site Editor List View', () => { // Focus should now be on the list view toggle button. await expect( - page.getByRole( 'button', { name: 'List View' } ) + page.getByRole( 'button', { name: 'Document Overview' } ) ).toBeFocused(); // Open List View. @@ -129,7 +129,7 @@ test.describe( 'Site Editor List View', () => { await pageUtils.pressKeys( 'access+o' ); await expect( listView ).toBeHidden(); await expect( - page.getByRole( 'button', { name: 'List View' } ) + page.getByRole( 'button', { name: 'Document Overview' } ) ).toBeFocused(); } ); } ); diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js index 4a5864755614b4..087013607be2f2 100644 --- a/test/e2e/specs/site-editor/style-book.spec.js +++ b/test/e2e/specs/site-editor/style-book.spec.js @@ -30,18 +30,12 @@ test.describe( 'Style Book', () => { test( 'should disable toolbar buttons when open', async ( { page } ) => { await expect( page.locator( 'role=button[name="Toggle block inserter"i]' ) - ).toBeHidden(); + ).toBeDisabled(); await expect( page.locator( 'role=button[name="Tools"i]' ) - ).toBeHidden(); - await expect( - page.locator( 'role=button[name="Undo"i]' ) - ).toBeHidden(); - await expect( - page.locator( 'role=button[name="Redo"i]' ) - ).toBeHidden(); + ).toBeDisabled(); await expect( - page.locator( 'role=button[name="View"i]' ) + page.locator( 'role=button[name="Document Overview"i]' ) ).toBeDisabled(); } ); diff --git a/test/e2e/specs/site-editor/undo.spec.js b/test/e2e/specs/site-editor/undo.spec.js new file mode 100644 index 00000000000000..17c4e4ada6e61b --- /dev/null +++ b/test/e2e/specs/site-editor/undo.spec.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'undo', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'emptytheme' ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); + + test( 'does not empty header', async ( { admin, page, editor } ) => { + await admin.visitSiteEditor( { canvas: 'edit' } ); + + // Check if there's a valid child block with a type (not appender). + await expect( + editor.canvas.locator( + '[data-type="core/template-part"] [data-type]' + ) + ).not.toHaveCount( 0 ); + + // insert a block + await editor.insertBlock( { name: 'core/paragraph' } ); + + // undo + await page + .getByRole( 'button', { + name: 'Undo', + } ) + .click(); + + // Check if there's a valid child block with a type (not appender). + await expect( + editor.canvas.locator( + '[data-type="core/template-part"] [data-type]' + ) + ).not.toHaveCount( 0 ); + } ); +} ); diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js index debd3fc93f6f6d..3e6225aaebb12f 100644 --- a/tools/webpack/shared.js +++ b/tools/webpack/shared.js @@ -64,13 +64,13 @@ const plugins = [ process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), new DefinePlugin( { // Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging. - 'process.env.IS_GUTENBERG_PLUGIN': + 'globalThis.IS_GUTENBERG_PLUGIN': process.env.npm_package_config_IS_GUTENBERG_PLUGIN, // Inject the `IS_WORDPRESS_CORE` global, used for feature flagging. - 'process.env.IS_WORDPRESS_CORE': + 'globalThis.IS_WORDPRESS_CORE': process.env.npm_package_config_IS_WORDPRESS_CORE, // Inject the `SCRIPT_DEBUG` global, used for dev versions of JavaScript. - SCRIPT_DEBUG: mode === 'development', + 'globalThis.SCRIPT_DEBUG': mode === 'development', } ), mode === 'production' && new ReadableJsAssetsWebpackPlugin(), ]; diff --git a/typings/gutenberg-env/index.d.ts b/typings/gutenberg-env/index.d.ts index ecf60a7ca094f9..0239ee2ecded8d 100644 --- a/typings/gutenberg-env/index.d.ts +++ b/typings/gutenberg-env/index.d.ts @@ -1,11 +1,14 @@ -interface Environment { - NODE_ENV: unknown; - IS_GUTENBERG_PLUGIN?: boolean; - IS_WORDPRESS_CORE?: boolean; +declare namespace NodeJS { + interface ProcessEnv { + readonly NODE_ENV?: 'production' | 'development' | 'test'; + } + interface Process { + env: NodeJS.ProcessEnv; + } } -interface Process { - env: Environment; -} -declare var process: Process; -declare var SCRIPT_DEBUG: boolean; +declare var process: NodeJS.Process; + +declare var SCRIPT_DEBUG: undefined | boolean; +declare var IS_GUTENBERG_PLUGIN: undefined | boolean; +declare var IS_WORDPRESS_CORE: undefined | boolean;