Block Styles don't work with navigation overlays Group wrapper

[369work]

Description

Test results from https://make.wordpress.org/test/2026/01/27/call-for-testing-customizable-navigation-mobile-overlays/.

Selecting Styles from the Blocks menu doesn't change anything.

Is this a bug?

The overlay controls were easy to find and simple to operate.

Step-by-step reproduction instructions

1. Select Navigation from the Blocks menu.
2. Select the Settings tab from the Blocks menu on the right, select Overlay from the OVERLAY TEMPLATE menu at the bottom, and click the edit button.
3. Select a design.
4. Selecting Styles from the Blocks menu doesn't change anything.

Screenshots, screen recording, code snippet

No response

Environment info

Using the playground
WordPress：6.9
Browser：Chrome
Theme：Twenty Twenty-Five

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[getdave]

@369work Thank you for reporting. Very much appreciated.

@MaggieCabrera I tested and validated. This is broken. Might this be Theme related? Or do you think we have manually set a background (in CSS) that isn't possible to be overriden?

[MaggieCabrera]

@369work Thank you for reporting. Very much appreciated.

@MaggieCabrera I tested and validated. This is broken. Might this be Theme related? Or do you think we have manually set a background (in CSS) that isn't possible to be overriden?

I think it could be that, and I don't think we can do much about it. Block styles are never going to be overriding user selected colors, which is what we are doing in the patterns. And we need to do that because we are making patterns that need to work on any theme, regardless of how each theme decides to define colors. @mikachan I would love your opinion on this too, but I don't see an easy solution

[mikachan]

Block styles are never going to be overriding user selected colors, which is what we are doing in the patterns.

Yeah, I think this is the problem, and I'm also not sure of an easy solution. Just thinking this through, maybe we could introduce something in the useStylesForBlock hook or block styles that automatically clears any existing user styles, and then any further user customisations would be applied instead.

[MaggieCabrera]

Block styles are never going to be overriding user selected colors, which is what we are doing in the patterns.

Yeah, I think this is the problem, and I'm also not sure of an easy solution. Just thinking this through, maybe we could introduce something in the useStylesForBlock hook or block styles that automatically clears any existing user styles, and then any further user customisations would be applied instead.

It's hard because the block styles could be anything, not just colors! It could be font changes or spacing. And could we return to those if we unselect one of the preset styles?

[getdave]

Could you explain the problem for me a bit? Is it that if I've already selected Backgeound/Text colors...etc then clicking a style from Style won't produce any noticable changes because it won't allow overriding user picked styles?

I guess if the default overlay has styles already applied then it might not work. Am I right?

Could we apply a default Style Variation as the default then? That way it's not a user-picked style but rather one of the variations which should allow toggling to different Style Variations.

I may be way off the mark here as my Theming knowledge is not as expert as yourselves 🙇

[MaggieCabrera]

Could we apply a default Style Variation as the default then? That way it's not a user-picked style but rather one of the variations which should allow toggling to different Style Variations.

We can't do this in a pattern. We could if this were a theme, but patterns can only force colors by doing it so directly in the attributes

[getdave]

Block styles are never going to be overriding user selected colors, which is what we are doing in the patterns.

In the patterns we are setting colours - am I correct?

And we need to do that because we are making patterns that need to work on any theme

I assume setting background colours is what is needed to make it "work" on any theme?

[MaggieCabrera]

Block styles are never going to be overriding user selected colors, which is what we are doing in the patterns.

In the patterns we are setting colours - am I correct?

And we need to do that because we are making patterns that need to work on any theme

I assume setting background colours is what is needed to make it "work" on any theme?

Background colors are needed because the overlay by default is transparent (we used to do this in CSS in the default overlay before). Text color is needed because some themes will have text color as white (because they use a darker bg) and it will inherit to the overlay and become invisible unless explicitly changed