Skip to content

Style Book: Fix crash when previewing variations for blocks without examples#79131

Merged
t-hamano merged 3 commits into
WordPress:trunkfrom
SainathPoojary:fix/style-book-variation-crash
Jun 16, 2026
Merged

Style Book: Fix crash when previewing variations for blocks without examples#79131
t-hamano merged 3 commits into
WordPress:trunkfrom
SainathPoojary:fix/style-book-variation-crash

Conversation

@SainathPoojary

@SainathPoojary SainathPoojary commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

What?

Closes #79130

Adds a protective guard to applyBlockVariationsToExamples to prevent a TypeError crash when attempting to apply style variations to an undefined list of examples.

Why?

When opening the style variation detail screen for a block that does not have standalone Style Book examples (like core/column), the editor crashes.

How?

Added an early return inside applyBlockVariationsToExamples (in packages/editor/src/components/style-book/index.js) to check if ( ! variation || ! examples ). If examples evaluates to undefined, it safely returns early without calling .map(). This prevents the crash and allows the UI to gracefully render an empty/fallback preview state instead.

Testing Instructions

  1. Go to Appearance > Editor to open the Site Editor.
  2. Open the Styles panel (the half-black/half-white circle icon).
  3. Click the Eye icon at the top right of the Styles sidebar to toggle the Style Book ON.
  4. Go to Blocks and search for the Column block.
  5. Click on the Column block, then click on any of its listed style variations (e.g., "Style 1").
  6. Verify that the editor does not crash and the console is free of TypeError: Cannot read properties of undefined (reading 'map') errors.

Screenshots or screencast

Before After
image image

@github-actions github-actions Bot added the [Package] Editor /packages/editor label Jun 11, 2026
@im3dabasia im3dabasia added the Storybook Storybook and its stories for components label Jun 12, 2026
@im3dabasia

Copy link
Copy Markdown
Contributor

The changes look good to me, Let me know once the PR is ready for review!

@im3dabasia im3dabasia added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Style Book and removed Storybook Storybook and its stories for components labels Jun 12, 2026
@SainathPoojary SainathPoojary marked this pull request as ready for review June 12, 2026 10:01
@github-actions

github-actions Bot commented Jun 12, 2026

Copy link
Copy Markdown

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: SainathPoojary <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: aaronjorbin <[email protected]>

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

@SainathPoojary

Copy link
Copy Markdown
Contributor Author

Thanks @im3dabasia! This PR is ready for review from my side.

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank for the PR.

if ( ! variation || ! examples ) {
	return examples;
}

This logic seems strange. Why would it return an example when there is no example provided?

This seems to be an issue that should be addressed upstream.

if ( blockVariation && filteredExamples?.examples?.length ) {
	return {
		examples: applyBlockVariationsToExamples(
			filteredExamples.examples,
			blockVariation
		),
	};
}

The advantage of this approach is that the stylebook does not become empty.

Image

@t-hamano t-hamano added the [Type] Bug An existing feature does not function as intended label Jun 13, 2026
@SainathPoojary

Copy link
Copy Markdown
Contributor Author

Thanks for the review and the great suggestion @t-hamano! I've moved the check upstream to displayedExamples as you suggested. Just pushed the update!

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@t-hamano t-hamano merged commit a9d38c6 into WordPress:trunk Jun 16, 2026
40 checks passed
@github-actions github-actions Bot added this to the Gutenberg 23.5 milestone Jun 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Style Book Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Site Editor crashes on block style variation detail route for blocks without standalone examples

3 participants