UCSS breaks Navigation block on mobile

  • Hi,

    Activating the UCSS options will break the standard Navigation block experience for mobile visitors. The block depends on some CSS for the hamburger menu that is by default active for small screens. The CSS rules that are needed to show the menu after clicking the hamburger icon, is stripped by UCSS as unneeded styling and the mobile visitor will not get to see the menu at all…

    We currently have (simply) added wp-includes/blocks/navigation/style.min.css to the UCSS exception list to make it work again, but it would be great if this would not be needed by default.

    I did not do further testing but is seems to me that everything involving the classes .is-menu-open, .has-modal-open and .wp-block-navigation__responsive-container-open should be excluded from UCSS stripping.

    Thanks for considering ??

Viewing 7 replies - 1 through 7 (of 7 total)

  • it would be great if this would not be needed by default.

    The UCSS function has no default parameters that exludes any default CSS from being excluded, so you have to specify which CSS has to be excluded manually.

    Anything else would be dangerous and would provoke uncontrolled behavior. An automated exclusion would be good, but that assumes that every WordPress installation uses the same CSS. You certainly can’t imagine that, can you?

    I don’t understand that argument. There are other fields that do have default settings. Take the lazy load class name exclusion for example…

    Lazy load is not UCSS. Each function is different, so please follow my advice to specifiy which CSS has to be excluded.

    … so please follow my advice to specifiy which CSS has to be excluded.

    Yes, like I said, we already did that. No worries ??

    It’s just that the native Navigation block has been around for a while now and is used in the latest 3 default themes. Many others will be using it in sidebar, footer or custom header or even just in page content while not being aware that it (in combination with UCSS) is broken for mobile visitors… And excluding the file remains sub-optimal.

    Apparently, the UCSS filter process does not “see” the use of these CSS classes and filters them out. It’s probably because these classes are set through javascript? But however you would like to spin that or lay blame, it remains “not good” in my view. That’s all ??

    It’s probably because these classes are set through javascript?

    The UCSS generator is PHP driven and doesn’t understand Javascript, so if your theme uses JS to define CSS then it should be clear why the UCSS function doesn’t work as you expect.

    It’s not the theme, it’s the WordPress core Navigation block. Hence my suggestion to add the navigation block css to the UCSS exclusion field by default…

    Login to LiteSpeed Slack and make a feature suggestion:

    https://www.litespeedtech.com/slack

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘UCSS breaks Navigation block on mobile’ is closed to new replies.