Block Theme – Modal Click Event in Inspector?

  • Julian

    (@juliangk)


    1 year ago

    Hello there,

    I have come across a problem that was confirmed on a windows and mac system, in different browsers.

    With the latest version of wordpress, when working on the menu and opening the modal (.is-menu-open.has-modal-open), when clicking anywhere within the inspector, the click is registered by wordpress and the modal closes.

    It has become impossible to inspect anything when the modal is opened.

    First off, I do not even understand how this is possible, as the inspector is not part of the website.

    Is there any fix for this?

    Best regards
    Julian

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Julian

    (@juliangk)

    Hello,

    It happens on any block themed site, also with standard wp-themes, like Twenty Twenty-Four. As can bee seen here: https://sloho.at/.

    Best regards
    Julian

    Thread Starter Julian

    (@juliangk)

    Even when using chrome inspector tools and removing the click event, it’s fired.

    mrtom414

    (@mrtom414)

    You can check in the console for messages. All blocks in the editor are React components. They are javascript objects and run in your browser not on the server. When you make changes to a block it converts that code to html and stores it in a database. You can see this if you change from visual view in the editor to code editor. Since javascript requires different attributes to set up the blocks the attributes are stored in a comment <!– -> block and stripped out when viewed on the front end. Every thing in the editor runs in your browser not on the server. Some of these actions can be changed via the theme.json file. If you want to see the code being run you can go to the gutenberg git repository and view it. Just keep in mind that every block in the editor is run in your browser not on the server.

    onetrev

    (@onetrev)

    Hey @mrtom414, I think what the OP @juliangk was asking for was a way to inspect the generated HTML & CSS with something like Firefox Developer Tools.

    There has to be a way to keep the menu open so you can inspect it, in order to be able to adjust things like padding, margins, etc, in Developer Tools. That way you can see what the changes will look like in real time and then adjust the settings in your theme accordingly. This is common web dev practice.

    I have the same issue though, I can’t keep the menu active no matter what I do, the menu closes as soon as you try to inspect any aspect of it. It’s very frustrating.

    • This reply was modified 8 months ago by onetrev. Reason: Tag original poster
    onetrev

    (@onetrev)

    One quick workaround that I just found to be able to inspect your navigation block overlay is to do this:

    • Open your Developer Tools and inspect the HTML
    • Find the Event Listener for the modal (it’s the div right below the open menu button element)
    • In that Event Listener uncheck the “focusout” event
    • Once you do that if you then click the menu button it will stay open until you refresh/reload the page. Hooray!

    Hey!

    This is indeed anoying. Trying to figure out how this navigation block is made.

    But no way.

    Did you find any solution?

    Thread Starter Julian

    (@juliangk)

    @davouid

    Either you use the option @onetrev posted above, deactivate the focusout event and further click events (I use firefox for this).

    Or, the other option is, you deregister all menu block styles and scripts, and add your own. That’s what I have been doing.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.