diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index 0f813267b586b..9a3a9abb84963 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 2de66f77e3918..4b0b93ac959ed 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' }} diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml index cf07b1a3936b9..889e1cfb47725 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 40fbfe22bea56..2c0d52c77ea4e 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 11688a7cfba98..5771a21d5b068 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 d20b3e353c31e..4d99d396996c5 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 bbf033222a4b3..2ea5949d20946 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 4715e1e09c2b8..f268ac7183ee2 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 9c4bee3af473c..a79f2eee9315a 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' }} diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml index 66f8130ece2f0..b95a4baaf5075 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 f85b851006756..9aecafc2009e7 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@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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 729d1d20fd7e7..a1e332be78303 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@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 + uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1 with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} @@ -37,7 +37,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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 475937eb58f5f..a5c5dfd3f96f9 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@086ffb1a2090c870a3f881cc91ea83aa4243d408 # v1.195.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@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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 1af2bb0ec7927..bf1a70d3adefc 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 83f7fdb96f926..a0a7d0f12db1e 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 b71d9440c38a1..31b00459c24c6 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 47b5e9f76ea7b..272d7e12d7193 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@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0 + 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 d09e2af3dd213..e8d3e3e245abd 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/packages/block-editor/README.md b/packages/block-editor/README.md index 36f3dc0ba73fa..7fc44c2ead943 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -1077,11 +1077,11 @@ _Parameters_ ### useZoomOut -A hook used to set the zoomed out view, invoking the hook sets the mode. +A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. _Parameters_ -- _zoomOut_ `boolean`: If we should zoom out or not. +- _zoomOut_ `boolean`: If we should enter into zoomOut mode or not ### Warning diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 206f1adf32946..069274e66bdfd 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -1,5 +1,6 @@ .block-editor-iframe__body { position: relative; + border: 0.01px solid transparent; } .block-editor-iframe__html { @@ -32,8 +33,6 @@ body { min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale}); - display: flex; - flex-direction: column; > .is-root-container:not(.wp-block-post-content) { flex: 1; diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js index 44102208c4d1d..26650c85ea509 100644 --- a/packages/block-editor/src/hooks/grid-visualizer.js +++ b/packages/block-editor/src/hooks/grid-visualizer.js @@ -16,20 +16,34 @@ function GridLayoutSync( props ) { } function GridTools( { clientId, layout } ) { - const { isSelected, isDragging } = useSelect( ( select ) => { - const { isBlockSelected, isDraggingBlocks } = - select( blockEditorStore ); + const isVisible = useSelect( + ( select ) => { + const { + isBlockSelected, + isDraggingBlocks, + getTemplateLock, + getBlockEditingMode, + } = select( blockEditorStore ); - return { - isSelected: isBlockSelected( clientId ), - isDragging: isDraggingBlocks(), - }; - } ); + // These calls are purposely ordered from least expensive to most expensive. + // Hides the visualizer in cases where the user is not or cannot interact with it. + if ( + ( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) || + getTemplateLock( clientId ) || + getBlockEditingMode( clientId ) !== 'default' + ) { + return false; + } + + return true; + }, + [ clientId ] + ); return ( <> - { ( isSelected || isDragging ) && ( + { isVisible && ( ) } diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js index 558d5e2cc626b..7a8e039c68969 100644 --- a/packages/block-editor/src/hooks/layout-child.js +++ b/packages/block-editor/src/hooks/layout-child.js @@ -175,9 +175,54 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) { isManualPlacement, } = parentLayout; - const rootClientId = useSelect( + if ( parentLayoutType !== 'grid' ) { + return null; + } + + return ( + + ); +} + +function GridTools( { + clientId, + style, + setAttributes, + allowSizingOnChildren, + isManualPlacement, + parentLayout, +} ) { + const { rootClientId, isVisible } = useSelect( ( select ) => { - return select( blockEditorStore ).getBlockRootClientId( clientId ); + const { + getBlockRootClientId, + getBlockEditingMode, + getTemplateLock, + } = select( blockEditorStore ); + + const _rootClientId = getBlockRootClientId( clientId ); + + if ( + getTemplateLock( _rootClientId ) || + getBlockEditingMode( _rootClientId ) !== 'default' + ) { + return { + rootClientId: _rootClientId, + isVisible: false, + }; + } + + return { + rootClientId: _rootClientId, + isVisible: true, + }; }, [ clientId ] ); @@ -185,7 +230,7 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) { // Use useState() instead of useRef() so that GridItemResizer updates when ref is set. const [ resizerBounds, setResizerBounds ] = useState(); - if ( parentLayoutType !== 'grid' ) { + if ( ! isVisible ) { return null; } diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 2a1b43060c00a..23511487a54bf 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -9,39 +9,55 @@ import { useEffect, useRef } from '@wordpress/element'; */ import { store as blockEditorStore } from '../store'; import { unlock } from '../lock-unlock'; - /** - * A hook used to set the zoomed out view, invoking the hook sets the mode. + * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. * - * @param {boolean} zoomOut If we should zoom out or not. + * @param {boolean} zoomOut If we should enter into zoomOut mode or not */ export function useZoomOut( zoomOut = true ) { - const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) ); - const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); + const { __unstableSetEditorMode, setZoomLevel } = unlock( + useDispatch( blockEditorStore ) + ); + const { __unstableGetEditorMode } = unlock( useSelect( blockEditorStore ) ); - const originalIsZoomOutRef = useRef( null ); + const originalEditingModeRef = useRef( null ); + const mode = __unstableGetEditorMode(); useEffect( () => { // Only set this on mount so we know what to return to when we unmount. - if ( ! originalIsZoomOutRef.current ) { - originalIsZoomOutRef.current = isZoomOut(); + if ( ! originalEditingModeRef.current ) { + originalEditingModeRef.current = mode; } - // The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out. - if ( zoomOut && isZoomOut() === false ) { + return () => { + // We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount + if ( + __unstableGetEditorMode() === 'zoom-out' && + __unstableGetEditorMode() !== originalEditingModeRef.current + ) { + __unstableSetEditorMode( originalEditingModeRef.current ); + setZoomLevel( 100 ); + } + }; + }, [] ); + + // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. + useEffect( () => { + if ( zoomOut && mode !== 'zoom-out' ) { + __unstableSetEditorMode( 'zoom-out' ); setZoomLevel( 50 ); } else if ( ! zoomOut && - isZoomOut() && - originalIsZoomOutRef.current !== isZoomOut() + __unstableGetEditorMode() === 'zoom-out' && + originalEditingModeRef.current !== mode ) { - setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 ); + __unstableSetEditorMode( originalEditingModeRef.current ); + setZoomLevel( 100 ); } - - return () => { - if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) { - setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 ); - } - }; - }, [ isZoomOut, setZoomLevel, zoomOut ] ); + }, [ + __unstableGetEditorMode, + __unstableSetEditorMode, + zoomOut, + setZoomLevel, + ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes. } diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index ee11838395ec5..d92f8bc08569d 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -21,6 +21,7 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { create, insert, remove, toHTMLString } from '@wordpress/rich-text'; import deprecated from '@wordpress/deprecated'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -1668,7 +1669,7 @@ export const setNavigationMode = */ export const __unstableSetEditorMode = ( mode ) => - ( { dispatch, select } ) => { + ( { dispatch, select, registry } ) => { // When switching to zoom-out mode, we need to select the parent section if ( mode === 'zoom-out' ) { const firstSelectedClientId = select.getBlockSelectionStart(); @@ -1708,7 +1709,7 @@ export const __unstableSetEditorMode = } } - dispatch( { type: 'SET_EDITOR_MODE', mode } ); + registry.dispatch( preferencesStore ).set( 'core', 'editorTool', mode ); if ( mode === 'navigation' ) { speak( diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index f6445f8a3681c..1435e815813c4 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1786,22 +1786,6 @@ export const blockListSettings = ( state = {}, action ) => { return state; }; -/** - * Reducer returning which mode is enabled. - * - * @param {string} state Current state. - * @param {Object} action Dispatched action. - * - * @return {string} Updated state. - */ -export function editorMode( state = 'edit', action ) { - if ( action.type === 'SET_EDITOR_MODE' ) { - return action.mode; - } - - return state; -} - /** * Reducer return an updated state representing the most recent block attribute * update. The state is structured as an object where the keys represent the @@ -2117,7 +2101,6 @@ const combinedReducers = combineReducers( { preferences, lastBlockAttributesChange, lastFocus, - editorMode, expandedBlock, highlightedBlock, lastBlockInserted, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 6cf6aae296141..a81d88de33466 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -16,6 +16,7 @@ import { symbol } from '@wordpress/icons'; import { create, remove, toHTMLString } from '@wordpress/rich-text'; import deprecated from '@wordpress/deprecated'; import { createSelector, createRegistrySelector } from '@wordpress/data'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -2691,7 +2692,7 @@ export function __experimentalGetLastBlockAttributeChanges( state ) { * @return {boolean} Is navigation mode enabled. */ export function isNavigationMode( state ) { - return state.editorMode === 'navigation'; + return __unstableGetEditorMode( state ) === 'navigation'; } /** @@ -2701,9 +2702,11 @@ export function isNavigationMode( state ) { * * @return {string} the editor mode. */ -export function __unstableGetEditorMode( state ) { - return state.editorMode; -} +export const __unstableGetEditorMode = createRegistrySelector( + ( select ) => () => { + return select( preferencesStore ).get( 'core', 'editorTool' ); + } +); /** * Returns whether block moving mode is enabled. diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index cbb75daa4baaa..73c14faa6fd06 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -11,7 +11,7 @@ import { isDragging, getBlockStyles, } from '../private-selectors'; -import { getBlockEditingMode } from '../selectors'; +import { getBlockEditingMode, __unstableGetEditorMode } from '../selectors'; describe( 'private selectors', () => { describe( 'isBlockInterfaceHidden', () => { @@ -125,11 +125,17 @@ describe( 'private selectors', () => { }; const hasContentRoleAttribute = jest.fn( () => false ); + const get = jest.fn( () => 'edit' ); getBlockEditingMode.registry = { select: jest.fn( () => ( { hasContentRoleAttribute, } ) ), }; + __unstableGetEditorMode.registry = { + select: jest.fn( () => ( { + get, + } ) ), + }; it( 'should return false when top level block is not disabled', () => { const state = { diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index a08c2e0dde150..00aa085f66709 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -9,6 +9,7 @@ import { import { RawHTML } from '@wordpress/element'; import { symbol } from '@wordpress/icons'; import { select, dispatch } from '@wordpress/data'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -4470,7 +4471,6 @@ describe( 'getBlockEditingMode', () => { const navigationModeStateWithRootSection = { ...baseState, - editorMode: 'navigation', settings: { [ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container }, @@ -4480,12 +4480,18 @@ describe( 'getBlockEditingMode', () => { const fauxPrivateAPIs = {}; - lock( fauxPrivateAPIs, { hasContentRoleAttribute } ); + lock( fauxPrivateAPIs, { + hasContentRoleAttribute, + } ); getBlockEditingMode.registry = { select: jest.fn( () => fauxPrivateAPIs ), }; + afterEach( () => { + dispatch( preferencesStore ).set( 'core', 'editorTool', undefined ); + } ); + it( 'should return default by default', () => { expect( getBlockEditingMode( @@ -4610,6 +4616,7 @@ describe( 'getBlockEditingMode', () => { } ); it( 'in navigation mode, the root section container is default', () => { + dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' ); expect( getBlockEditingMode( navigationModeStateWithRootSection, @@ -4619,6 +4626,7 @@ describe( 'getBlockEditingMode', () => { } ); it( 'in navigation mode, anything outside the section container is disabled', () => { + dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' ); expect( getBlockEditingMode( navigationModeStateWithRootSection, @@ -4628,6 +4636,7 @@ describe( 'getBlockEditingMode', () => { } ); it( 'in navigation mode, sections are contentOnly', () => { + dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' ); expect( getBlockEditingMode( navigationModeStateWithRootSection, @@ -4643,6 +4652,7 @@ describe( 'getBlockEditingMode', () => { } ); it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => { + dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' ); hasContentRoleAttribute.mockReturnValueOnce( true ); expect( getBlockEditingMode( @@ -4661,6 +4671,7 @@ describe( 'getBlockEditingMode', () => { } ); it( 'in navigation mode, blocks without content attributes within sections are disabled', () => { + dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' ); expect( getBlockEditingMode( navigationModeStateWithRootSection, diff --git a/packages/block-library/src/code/style.scss b/packages/block-library/src/code/style.scss index 670a4f7f1ef4c..ccc950d19b552 100644 --- a/packages/block-library/src/code/style.scss +++ b/packages/block-library/src/code/style.scss @@ -9,5 +9,10 @@ font-family: inherit; overflow-wrap: break-word; white-space: pre-wrap; + // Set direction and avoid inheriting alignment from a parent element. + /*!rtl:begin:ignore*/ + direction: ltr; + text-align: initial; + /*!rtl:end:ignore*/ } } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 870f96308aa46..48113f874af3a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,7 @@ - `RangeControl`: do not tooltip contents to the DOM when not shown ([#65875](https://github.com/WordPress/gutenberg/pull/65875)). - `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)). - `ToggleGroupControl`: Don't autoselect option on first group focus ([#65892](https://github.com/WordPress/gutenberg/pull/65892)). +- `Button`: fix `box-shadow` transition for secondary variation ([#66045](https://github.com/WordPress/gutenberg/pull/66045)). ### Deprecations @@ -16,6 +17,7 @@ ### Enhancements +- `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)). - `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)). ## 28.9.0 (2024-10-03) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 444e4d397b3ef..61455a54e26f6 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -133,7 +133,7 @@ */ &.is-secondary { - box-shadow: inset 0 0 0 $border-width $components-color-accent; + box-shadow: inset 0 0 0 $border-width $components-color-accent, 0 0 0 currentColor; outline: 1px solid transparent; // Shown in high contrast mode. white-space: nowrap; color: $components-color-accent; @@ -148,6 +148,10 @@ &[aria-disabled="true"]:hover:not(:focus) { box-shadow: inset 0 0 0 $border-width $gray-300; } + + &:focus:not(:disabled) { + box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent; + } } /** diff --git a/packages/components/src/modal/aria-helper.ts b/packages/components/src/modal/aria-helper.ts index 6a1d39c0a4ed3..bd11fb71253e1 100644 --- a/packages/components/src/modal/aria-helper.ts +++ b/packages/components/src/modal/aria-helper.ts @@ -47,6 +47,7 @@ export function elementShouldBeHidden( element: Element ) { const role = element.getAttribute( 'role' ); return ! ( element.tagName === 'SCRIPT' || + element.hasAttribute( 'hidden' ) || element.hasAttribute( 'aria-hidden' ) || element.hasAttribute( 'aria-live' ) || ( role && LIVE_REGION_ARIA_ROLES.has( role ) ) diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index 37164690ed7fc..94bcc490b6fd6 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -19,9 +19,6 @@ export const setCanvasMode = registry.batch( () => { registry.dispatch( blockEditorStore ).clearSelectedBlock(); registry.dispatch( editorStore ).setDeviceType( 'Desktop' ); - registry - .dispatch( blockEditorStore ) - .__unstableSetEditorMode( 'edit' ); const isPublishSidebarOpened = registry .select( editorStore ) .isPublishSidebarOpened(); diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 8712121fff3ea..4259ef4b8a208 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -130,6 +130,7 @@ // ... and display labels. &::after { content: attr(aria-label); + white-space: nowrap; } &[aria-disabled="true"] { background-color: transparent; diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index 8d072fa2eeb5d..c7dc5712dcac4 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -17,7 +17,7 @@ import { import { store as noticesStore } from '@wordpress/notices'; import { copySmall } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; -import { useCopyToClipboard } from '@wordpress/compose'; +import { useCopyToClipboard, useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -70,25 +70,29 @@ export default function PostURL( { onClose } ) { const { createNotice } = useDispatch( noticesStore ); const [ forceEmptyField, setForceEmptyField ] = useState( false ); const copyButtonRef = useCopyToClipboard( permalink, () => { - createNotice( 'info', __( 'Copied URL to clipboard.' ), { + createNotice( 'info', __( 'Copied Permalink to clipboard.' ), { isDismissible: true, type: 'snackbar', } ); } ); + const postUrlSlugDescriptionId = + 'editor-post-url__slug-descriotion-' + useInstanceId( PostURL ); + return (
{ isEditable && ( -
+

{ createInterpolateElement( __( - 'Customize the last part of the URL. Learn more.' + 'Customize the last part of the Permalink. Learn more.' ), { + span: , a: ( +

) }
{ isEditable && ( - - / - - } - suffix={ - - ); } + +function FrontPageLink() { + const { postLink } = useSelect( ( select ) => { + const { getCurrentPost } = select( editorStore ); + return { + postLink: getCurrentPost()?.link, + }; + }, [] ); + + return ( + + { postLink } + + ); +} diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index c815f89682cb2..f8a70f5fdf760 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -9,14 +9,19 @@ } /* rtl:begin:ignore */ -.editor-post-url__link { +.editor-post-url__link, +.editor-post-url__front-page-link { direction: ltr; word-break: break-word; - margin-top: $grid-unit-05; - color: $gray-700; } /* rtl:end:ignore */ +.editor-post-url__front-page-link { + // Match padding on tertiary buttons for alignment. + padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15; +} + + .editor-post-url__link-slug { font-weight: 600; } @@ -30,3 +35,16 @@ .editor-post-url__panel-toggle { word-break: break-word; } + +.editor-post-url__intro { + margin: 0; +} + +.editor-post-url__permalink { + margin-top: $grid-unit-10; + margin-bottom: 0; + + &-visual-label { + display: block; + } +} diff --git a/packages/reusable-blocks/src/store/test/actions.js b/packages/reusable-blocks/src/store/test/actions.js index b2feae1195ee1..debd656868389 100644 --- a/packages/reusable-blocks/src/store/test/actions.js +++ b/packages/reusable-blocks/src/store/test/actions.js @@ -12,6 +12,7 @@ import { import { store as coreStore } from '@wordpress/core-data'; import apiFetch from '@wordpress/api-fetch'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -31,6 +32,7 @@ function createRegistryWithStores() { registry.register( blockEditorStore ); registry.register( reusableBlocksStore ); registry.register( blocksStore ); + registry.register( preferencesStore ); // Register entity here instead of mocking API handlers for loadPostTypeEntities() registry.dispatch( coreStore ).addEntities( [ diff --git a/test/e2e/specs/editor/various/parsing-patterns.spec.js b/test/e2e/specs/editor/various/parsing-patterns.spec.js index 62c8ba2de2410..fd9305d0db786 100644 --- a/test/e2e/specs/editor/various/parsing-patterns.spec.js +++ b/test/e2e/specs/editor/various/parsing-patterns.spec.js @@ -36,6 +36,14 @@ test.describe( 'Parsing patterns', () => { ], } ); } ); + + // Exit zoom out mode and select the inner buttons block to ensure + // the correct insertion point is selected. + await page.getByRole( 'button', { name: 'Zoom Out' } ).click(); + await editor.selectBlocks( + editor.canvas.locator( 'role=document[name="Block: Button"i]' ) + ); + await page.fill( 'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]', 'whitespace' @@ -43,7 +51,7 @@ test.describe( 'Parsing patterns', () => { await page .locator( 'role=option[name="Pattern with top-level whitespace"i]' ) .click(); - expect( await editor.getBlocks() ).toMatchObject( [ + await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/buttons', innerBlocks: [ diff --git a/test/storybook-playwright/storybook/main.js b/test/storybook-playwright/storybook/main.js index e3023f844da2d..b80833ca725f9 100644 --- a/test/storybook-playwright/storybook/main.js +++ b/test/storybook-playwright/storybook/main.js @@ -7,6 +7,7 @@ const config = { ...baseConfig, addons: [ '@storybook/addon-toolbars' ], docs: undefined, + staticDirs: undefined, stories: [ '../../../packages/components/src/**/stories/e2e/*.story.@(js|tsx|mdx)', ],