Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Navigation Block has an Inline Style Without Declarations. #62358

Closed
convolutedkdlkf opened this issue Jun 6, 2024 · 0 comments · Fixed by #62600
Closed

The Navigation Block has an Inline Style Without Declarations. #62358

convolutedkdlkf opened this issue Jun 6, 2024 · 0 comments · Fixed by #62600
Labels
[Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended

Comments

@convolutedkdlkf
Copy link

Description

The bug is an inline style attribute without declarations.
The Bug is in the Navigation Block. And the issue lies within the Overlay Menu. Furthermore, the bug appears with the Overlay Menu options:
• Mobile
• Always
The bug appears in the page's (rendered) HTML. The HTML with the empty style attribute is below.
<div class="wp-block-navigation__responsive-container" style="" id="modal-1" data-wp-class--has-modal-open="state.isMenuOpen" data-wp-class--is-menu-open="state.isMenuOpen" data-wp-watch="callbacks.initMenu" data-wp-on--keydown="actions.handleMenuKeydown" data-wp-on--focusout="actions.handleMenuFocusout" tabindex="-1">

Step-by-step reproduction instructions

You can see the following steps in the screen recording below.

Steps

Log Into WordPress and activate Theme Twenty Twenty-Four.

Edit The Navigation Block

Edit the Navigation Block via the Home Page.
• Home Page
• Edit site
• Edit Blog Home
• In the Header area, select the Navigation Block.
• Go to the Navigation Block Settings

Change The Overlay Menu Settings

The bug is in the Overlay Menu settings Mobile or Always.
• Overlay Menu = Always
• Save
• View Site

View The Bug In (Rendered) HTML

Open your browser Developer Tools and find the webpage's HTML DOM Tree.
The empty inline style attribute is in a div element containing the class wp-block-navigation__responsive-container. (See below.)

<div class="wp-block-navigation__responsive-container" style="" id="modal-1" data-wp-class--has-modal-open="state.isMenuOpen" data-wp-class--is-menu-open="state.isMenuOpen" data-wp-watch="callbacks.initMenu" data-wp-on--keydown="actions.handleMenuKeydown" data-wp-on--focusout="actions.handleMenuFocusout" tabindex="-1">

Screenshots, screen recording, code snippet

inline-block-inline-style

Environment info

• WordPress 6.5.3 (No plug-ins).
• I have not installed the Gutenberg plug-in.
• Theme Twenty Twenty-Four
• Google Chrome browser Version 125.0.6422.142 (Official Build) (64-bit)
• Desktop with Windows 10

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

@convolutedkdlkf convolutedkdlkf added the [Type] Bug An existing feature does not function as intended label Jun 6, 2024
@jordesign jordesign added the [Block] Navigation Affects the Navigation Block label Jun 7, 2024
@talldan talldan linked a pull request Jun 17, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants