Skip to content

Error on multiple clicks in the navigation modal when having a cover block after this #66066

Closed
Closed
Error on multiple clicks in the navigation modal when having a cover block after this#66066
Labels
[Type] BugAn existing feature does not function as intended

Description

@renatho
renatho
opened on Oct 11, 2024

Description

It's a follow-up issue from #65626, where @aaronrobertshaw noticed some other related issues.

If we have a navigation block and some cover blocks after this, we can select the cover blocks with the navigation modal open on small screens by clicking multiple times in the blank area.

Step-by-step reproduction instructions

  1. Create a page and include the following blocks:
See blocks to test 
<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg","id":13,"dimRatio":50,"customOverlayColor":"#8f897e","isUserOverlayColor":false,"minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8f897e"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"dimRatio":90,"overlayColor":"accent-4","isUserOverlayColor":true,"minHeight":240,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-accent-4-background-color has-background-dim-90 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Nested Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /--></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4","id":16,"dimRatio":90,"overlayColor":"accent-6","isUserOverlayColor":true,"backgroundType":"video","minHeight":240,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-accent-6-background-color has-background-dim-90 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg","id":13,"dimRatio":50,"customOverlayColor":"#8f897e","isUserOverlayColor":false,"minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8f897e"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Nested Cover Block</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:cover -->

<!-- wp:navigation {"ref":4} /-->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg","id":13,"dimRatio":50,"customOverlayColor":"#8f897e","isUserOverlayColor":false,"minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8f897e"></span><img class="wp-block-cover__image-background wp-image-13" alt="" src="http://wp-build.test/wp-content/uploads/2024/10/1067-3931-CoreyArnold-UnitedStates-Professional-WildlifeNature-2023.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /--></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"dimRatio":80,"overlayColor":"accent-3","isUserOverlayColor":true,"minHeight":240,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-accent-3-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"ref":4} /--></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4","id":16,"dimRatio":50,"customOverlayColor":"#FFF","isUserOverlayColor":false,"backgroundType":"video","minHeight":240,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:240px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#FFF"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://wp-build.test/wp-content/uploads/2024/10/file_example_MP4_480_1_5MG.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover Block</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:navigation {"ref":4} /-->
  1. Add some navigation items to the navigations.
  2. Resize the window to a small size.
  3. Open the navigation.
  4. Click multiple times quickly where the cover blocks are behind the modal.
  5. See that the cover block is selected.
  6. Scroll the page, and check that it's scrolling behind the modal.

Screenshots, screen recording, code snippet

In the following video you will see that single click doesn't trigger the behavior. But if we click multiple times quickly (like a double-click), yes. And (only) when the issue happens we can also scroll behind the modal.

Screen.Recording.2024-10-09.at.11.30.26.1.mp4

Environment info

Issue reproduced with:

  • WordPress 6.6, Gutenberg 19.3.0-rc.2, TT4, Chrome on OSX.

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Activity

  1. renatho
    added
    [Type] BugAn existing feature does not function as intended
    on Oct 11, 2024

  2. renatho commented on Oct 11, 2024

    @renatho
    renatho
    on Oct 11, 2024
    ContributorAuthor

    The original solution for the z-index issue is being changed here and here, but the issue reported here continues the same.

  3. youknowriad commented on Oct 19, 2026

    @youknowriad
    youknowriad
    on Oct 19, 2026
    Contributor

    I tested this on WordPress 7.1.2 with Gutenberg trunk (built 2026-10-16), using the markup from the description with TT4 at a narrow window width. With the navigation overlay open, repeated quick clicks over the cover blocks behind it keep the Navigation block selected and the overlay open; the Cover block only gets selected once the overlay is closed. This looks resolved, possibly by the Cover z-index rework in #66249, so I'm closing it. If you can still reproduce it, please reopen with your steps.

  4. youknowriad
    closed this as completedon Oct 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions