Style Book: Restore live global styles updates on the styles route

[ramonjd]

What

Passes the live user global styles config into StyleBookPreview on the /styles route, so the Style Book reflects unsaved global styles edits again.

Why

Since #80035, the Style Book stopped live-updating while editing global styles. Changing a paragraph or body style in the sidebar had no effect on the Style Book preview until reload.

What changed

• packages/edit-site/src/components/site-editor-routes/styles.js: unlock useGlobalStyles from the editor private APIs and pass its user config as the userConfig prop to StyleBookPreview.

Manual testing

1. With a block theme active, open the Site Editor and go to Styles, then open the Style Book preview (site-editor.php?p=%2Fstyles&preview=stylebook).
2. In the sidebar, change a body style, for example the background or text colour. The Style Book examples should update immediately, without saving.
3. Change a block-level style, for example Typography for the Paragraph block. The paragraph examples should update immediately.
4. Reload without saving, then repeat an edit and save. Saved styles should persist and the preview should stay in sync throughout.
5. In DevTools, run wp.data.select( 'core/block-editor' ).getSettings().__experimentalDiscussionSettings and confirm it is still defined (the Style Book: Pass site editor settings to StyleBookPreview on the styles route #80035 fix). Also visit wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks&preview=stylebook and make sure there are no console errors (see Style Book: Errors when viewing the blocks #73869)

Kapture.2026-07-20.at.11.32.37.mp4

[Copilot]

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Restores live Style Book preview updates on the /styles route by passing the current (unsaved) global styles user config into StyleBookPreview, while keeping the server-bootstrapped settings snapshot needed for other editor settings.

Changes:

• Unlocks and uses useGlobalStyles from editorPrivateApis on the /styles route.
• Passes useGlobalStyles().user as userConfig to StyleBookPreview when rendering the stylebook preview.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Size Change: +57 B (0%)

Total Size: 7.73 MB

📦 View Changed

Filename	Size	Change
build/scripts/edit-site/index.min.js	303 kB	+57 B (+0.02%)

_{compressed-size-action}

[andrewserong]

This is testing well for me, and the latest commits ensure we only subscribe to the user global styles when we need them (when the stylebook is rendered).

LGTM! 🎉

The only question I had is whether we should add an e2e test to cover it since I think we've run into this category of bug before. Not a blocker to landing, though, as the important thing is to fix it.

Take the following with a grain of salt as it's just something spat out by my local Claude session, but here's an example of how an e2e test for it might look:

A potentially hallucinatory e2e test

test.describe( 'Style Book live global styles updates', () => {
        test.beforeAll( async ( { requestUtils } ) => {
                await requestUtils.activateTheme( 'emptytheme' );
        } );

        test.afterEach( async ( { requestUtils } ) => {
                // Global styles edits are unsaved, but reset anyway so a failed
                // assertion mid-test can't leak into the next one.
                await requestUtils.deleteAllGlobalStyles?.();
        } );

        test.afterAll( async ( { requestUtils } ) => {
                await requestUtils.activateTheme( 'twentytwentyone' );
        } );

        test( 'reflects unsaved global styles edits', async ( { admin, page } ) => {
                // Go straight to the route the fix touches.
                await admin.visitAdminPage(
                        'site-editor.php',
                        'p=%2Fstyles&preview=stylebook'
                );

                const styleBookCanvas = page.frameLocator(
                        '[name="style-book-canvas"]'
                );
                await expect(
                        styleBookCanvas.getByRole( 'grid', { name: 'Examples of blocks' } )
                ).toBeVisible();

                // Edit user global styles without saving.
                await page.evaluate( async () => {
                        const { dispatch, select } = window.wp.data;
                        const id =
                                select( 'core' ).__experimentalGetCurrentGlobalStylesId();
                        const record = select( 'core' ).getEditedEntityRecord(
                                'root',
                                'globalStyles',
                                id
                        );
                        await dispatch( 'core' ).editEntityRecord(
                                'root',
                                'globalStyles',
                                id,
                                {
                                        styles: {
                                                ...record.styles,
                                                color: {
                                                        ...record.styles?.color,
                                                        background: '#ff0000',
                                                },
                                        },
                                }
                        );
                } );

                // The preview should pick the edit up with no save and no reload.
                await expect( styleBookCanvas.locator( 'body' ) ).toHaveCSS(
                        'background-color',
                        'rgb(255, 0, 0)'
                );
        } );
  } );

[andrewserong]

Updates look good. Cheers!

[github-actions]

Flaky tests detected in d6b39fe.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29714100710
📝 Reported issues:

• [Flaky Test] should cut and paste individual blocks with collapsed selection #80248 in /test/e2e/specs/editor/various/copy-cut-paste.spec.js

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: d4d44ae

[t-hamano]

Thanks for the fix!

[t-hamano]

I just cherry-picked this PR to the release/23.6 branch to get it included in the next release: 5e67aa4