search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.56k stars 4.22k forks source link

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

Open renatho opened 1 month ago

renatho commented 1 month ago

Description

It's a follow-up issue from https://github.com/WordPress/gutenberg/pull/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.

https://github.com/user-attachments/assets/6447c736-ce10-4871-aa96-8d528bf22219

Environment info

Issue reproduced with:

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

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

renatho commented 1 month ago

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