Navigation justification is broken

[DeoThemes]

Description

After the recent update 11.9.0 navigation alignment is broken. No matter what alignment option is selected, the CSS variables are undefined

Step-by-step reproduction instructions

1. Go to Editor (beta)
2. Add navigation block
3. Select justification option

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.8.2, Gutenberg 11.9.0
• Chrome latest version
• Ona WordPress theme

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

[annezazu]

This seems to be an issue with the Tove theme specifically as I just tested with both TT1 block and Tove:

TT1 Blocks:

TT1.blocks.11.9.mov

Tove:

tove.nav.block.11.9.mov

I tried testing once more with Tove where there was more space for the navigation block to have but still found the same issue.

cc @andersnoren as a heads up and for your thoughts. Going to close this out for now but am happy to re-open if it's determined to be something with Gutenberg itself over theme implementation.

[DeoThemes]

Apparently, it works only with TT1 Blocks now, all other themes are broken.

[annezazu]

@tellthemachines In digging through the changelog for 11.9, it seems the likely cause is adding in flex layout: #36169 Would this change require updates on the theme side? Would love your thoughts here!

[tellthemachines]

I can't reproduce it when adding a new menu, but it's a known issue for existing menus, and there's a fix waiting for review in #36432.

[DeoThemes]

If I remove width: 100%, it works as intended

Fix for Gutenberg 11.9 justify content bug.

@media (min-width: 600px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    width: auto;
  }
}

[tellthemachines]

Hmm, we need that width set to 100% otherwise space-between justification doesn't work.