Outline button variation in patterns not rendering in site editor

[bgardner]

Description

Patterns which include the Outline button variation are not rendering in the site editor.

Step-by-step reproduction instructions

1. Activate TT5 theme
2. Go to Editor > Patterns
3. Select Call to action
4. View patterns

Screenshots, screen recording, code snippet

Patterns with WordPress 6.9.1 installed:

Patterns with WordPress 7.0 Beta 2 installed:

Environment info

WordPress 6.9.1 and WordPress 7.0 Beta 2 installed
Gutenberg not installed.

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

[bgardner]

Worth noting that the Outline button variation renders properly in the + block inserter.

[bgardner]

Confirming with Ollie theme (cc: @mikemcalister)

Patterns with WordPress 6.9.1 installed:

Patterns with WordPress 7.0 Beta 2 installed:

[Mamaduka]

I can confirm the issue. It appears to affect only the Site Editor > Patterns page. The styles are correctly rendered when previewing the pattern in the inserter.

Screenshot

[Mustafabharmal]

I was able to reproduced this issue also I've identified the root cause.

The useBlockStyleVariation hook reads settings[globalStylesDataKey] (a private Symbol key) to generate per-block variation CSS. This key is only set in the main editor's useBlockEditorSettings provider. usePatternSettings builds a separate settings object for the pattern preview's ExperimentalBlockEditorProvider by spreading raw storedSettings from the edit-site store, so settings[globalStylesDataKey] is always undefined, meaning no block style variation CSS is ever generated in pattern previews.

Fix: pass mergedConfig.styles (already available via useGlobalStyles()) as [globalStylesDataKey] in the pattern settings.

Will be raising PR shortly.