Navigation Block stops being clickable, if custom Gutenberg Block is present

[samreciter]

The new Navigation Gutenberg Block stops being clickable on the front end, if a custom Gutenberg Block is present on the same page. Tried with different of working custom Blocks of my own. Seems somehow there must be Javascript in the background that hinders the link execution. No Javascript errors are shown in the console. No custom Javascript is included via the custom blocks - thus the link blocking Javascript must be contained in the WordPress core code.

[samreciter]

Replying to samreciter:

The new Navigation Gutenberg Block stops being clickable on the front end, if a custom Gutenberg Block is present on the same page. Tried with different of working custom Blocks of my own. Seems somehow there must be Javascript in the background that hinders the link execution. No Javascript errors are shown in the console. No custom Javascript is included via the custom blocks - thus the link blocking Javascript must be contained in the WordPress core code.

Seems to have something to do with the styling:

@media (min-width: 600px)
.wp-block-navigation__responsive-close {
  pointer-events: none;
}

I'll try to find out more first.

[desrosj]

@samreciter was closing this intentional? Reopening to confirm. If you've solved the issue, please share a brief description in case others find this ticket in the future.

[samreciter]

Replying to desrosj:

@samreciter was closing this intentional? Reopening to confirm. If you've solved the issue, please share a brief description in case others find this ticket in the future.

Thanks for the reply.
I closed the issue intentionally, as i solved the issue and haven't had the time to investigate further.

My new theme is using the new full site editor and theme.json
The problem occured with the new theme and older custom Gutenberg blocks.
The problem was solved with changing the custom blocks to the new block registration via block.json

I would assume the problem was created by an improper inclusion of the stylesheets of the older custom blocks into the theme and basic gutenberg stylesheets - resulting in a broken CSS.

Thus CSS rules were executed that shouldn't be active - in this specific case it was the rule:

@media (min-width: 600px)
.wp-block-navigation__responsive-close {
  pointer-events: none;
}

that somehow now was applied to the links in the navigation block and blocking their function.

After updating the old Gutenberg blocks to the new block registraition via block.json everything worked again without any problems.

[desrosj]

Great! Thank you for the confirmation!