Block Editor: Fix the issue with block style preview when example missing

[gziolo]

Description

Fixes #29876.

The issue was described as follows:

Step-by-step reproduction instructions

1. Create a simple block, eg by using create-guten-block
2. Modify the block to add block styles/variations with the registerBlockStyle filter (code snippet example given below)
3. The style switcher in the block inspector works fine (green arrow in screenshot below), but the inline style switcher (red arrow in screenshot below) will not load a preview, instead it crash the editor with an error when the desired style is hovered over.
4. The way to stop the issue is to pass an empty (supposedly optional) example object in the block registration object (code snippet workaround is given below)

Editor crashes with error

How has this been tested?

I applied the following diff in the Gutenberg repository to reproduce the issue for the Query block:

diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
index 95aba9a267..dc30ca4473 100644
--- a/packages/block-library/src/quote/index.js
+++ b/packages/block-library/src/quote/index.js
@@ -24,14 +24,14 @@ export const settings = {
 	),
 	icon,
 	keywords: [ __( 'blockquote' ), __( 'cite' ) ],
-	example: {
+	/*example: {
 		attributes: {
 			value:
 				'<p>' + __( 'In quoting others, we cite ourselves.' ) + '</p>',
 			citation: 'Julio Cortázar',
 			className: 'is-style-large',
 		},
-	},
+	},*/
 	styles: [
 		{
 			name: 'default',

Then I tested with this branch:

1. Insert the Query block
2. Click the block icon in the toolbar.
3. Hover over the block style variations for the block.
4. You should see the preview without the error.

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue).

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: -4 B (0%)

Total Size: 1.4 MB

Filename	Size	Change
build/block-editor/index.js	125 kB	-4 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.78 kB	0 B
build/api-fetch/index.js	3.4 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	664 B	0 B
build/block-directory/index.js	8.63 kB	0 B
build/block-directory/style-rtl.css	1 kB	0 B
build/block-directory/style.css	1.01 kB	0 B
build/block-editor/style-rtl.css	12.3 kB	0 B
build/block-editor/style.css	12.3 kB	0 B
build/block-library/blocks/archives/editor-rtl.css	61 B	0 B
build/block-library/blocks/archives/editor.css	60 B	0 B
build/block-library/blocks/audio/editor-rtl.css	58 B	0 B
build/block-library/blocks/audio/editor.css	58 B	0 B
build/block-library/blocks/audio/style-rtl.css	112 B	0 B
build/block-library/blocks/audio/style.css	112 B	0 B
build/block-library/blocks/block/editor-rtl.css	161 B	0 B
build/block-library/blocks/block/editor.css	161 B	0 B
build/block-library/blocks/button/editor-rtl.css	475 B	0 B
build/block-library/blocks/button/editor.css	474 B	0 B
build/block-library/blocks/button/style-rtl.css	479 B	0 B
build/block-library/blocks/button/style.css	479 B	0 B
build/block-library/blocks/buttons/editor-rtl.css	315 B	0 B
build/block-library/blocks/buttons/editor.css	315 B	0 B
build/block-library/blocks/buttons/style-rtl.css	364 B	0 B
build/block-library/blocks/buttons/style.css	363 B	0 B
build/block-library/blocks/calendar/style-rtl.css	208 B	0 B
build/block-library/blocks/calendar/style.css	208 B	0 B
build/block-library/blocks/categories/editor-rtl.css	84 B	0 B
build/block-library/blocks/categories/editor.css	83 B	0 B
build/block-library/blocks/categories/style-rtl.css	79 B	0 B
build/block-library/blocks/categories/style.css	79 B	0 B
build/block-library/blocks/code/style-rtl.css	90 B	0 B
build/block-library/blocks/code/style.css	90 B	0 B
build/block-library/blocks/columns/editor-rtl.css	190 B	0 B
build/block-library/blocks/columns/editor.css	190 B	0 B
build/block-library/blocks/columns/style-rtl.css	421 B	0 B
build/block-library/blocks/columns/style.css	421 B	0 B
build/block-library/blocks/cover/editor-rtl.css	599 B	0 B
build/block-library/blocks/cover/editor.css	599 B	0 B
build/block-library/blocks/cover/style-rtl.css	1.24 kB	0 B
build/block-library/blocks/cover/style.css	1.24 kB	0 B
build/block-library/blocks/embed/editor-rtl.css	486 B	0 B
build/block-library/blocks/embed/editor.css	486 B	0 B
build/block-library/blocks/embed/style-rtl.css	401 B	0 B
build/block-library/blocks/embed/style.css	400 B	0 B
build/block-library/blocks/file/editor-rtl.css	199 B	0 B
build/block-library/blocks/file/editor.css	198 B	0 B
build/block-library/blocks/file/style-rtl.css	248 B	0 B
build/block-library/blocks/file/style.css	248 B	0 B
build/block-library/blocks/freeform/editor-rtl.css	2.45 kB	0 B
build/block-library/blocks/freeform/editor.css	2.45 kB	0 B
build/block-library/blocks/gallery/editor-rtl.css	689 B	0 B
build/block-library/blocks/gallery/editor.css	690 B	0 B
build/block-library/blocks/gallery/style-rtl.css	1.11 kB	0 B
build/block-library/blocks/gallery/style.css	1.1 kB	0 B
build/block-library/blocks/group/editor-rtl.css	318 B	0 B
build/block-library/blocks/group/editor.css	317 B	0 B
build/block-library/blocks/group/style-rtl.css	57 B	0 B
build/block-library/blocks/group/style.css	57 B	0 B
build/block-library/blocks/heading/editor-rtl.css	129 B	0 B
build/block-library/blocks/heading/editor.css	129 B	0 B
build/block-library/blocks/heading/style-rtl.css	76 B	0 B
build/block-library/blocks/heading/style.css	76 B	0 B
build/block-library/blocks/html/editor-rtl.css	281 B	0 B
build/block-library/blocks/html/editor.css	281 B	0 B
build/block-library/blocks/image/editor-rtl.css	717 B	0 B
build/block-library/blocks/image/editor.css	716 B	0 B
build/block-library/blocks/image/style-rtl.css	476 B	0 B
build/block-library/blocks/image/style.css	478 B	0 B
build/block-library/blocks/latest-comments/editor-rtl.css	159 B	0 B
build/block-library/blocks/latest-comments/editor.css	158 B	0 B
build/block-library/blocks/latest-comments/style-rtl.css	269 B	0 B
build/block-library/blocks/latest-comments/style.css	269 B	0 B
build/block-library/blocks/latest-posts/editor-rtl.css	137 B	0 B
build/block-library/blocks/latest-posts/editor.css	137 B	0 B
build/block-library/blocks/latest-posts/style-rtl.css	523 B	0 B
build/block-library/blocks/latest-posts/style.css	522 B	0 B
build/block-library/blocks/list/editor-rtl.css	65 B	0 B
build/block-library/blocks/list/editor.css	65 B	0 B
build/block-library/blocks/list/style-rtl.css	63 B	0 B
build/block-library/blocks/list/style.css	63 B	0 B
build/block-library/blocks/media-text/editor-rtl.css	191 B	0 B
build/block-library/blocks/media-text/editor.css	191 B	0 B
build/block-library/blocks/media-text/style-rtl.css	535 B	0 B
build/block-library/blocks/media-text/style.css	532 B	0 B
build/block-library/blocks/more/editor-rtl.css	434 B	0 B
build/block-library/blocks/more/editor.css	434 B	0 B
build/block-library/blocks/navigation-link/editor-rtl.css	620 B	0 B
build/block-library/blocks/navigation-link/editor.css	621 B	0 B
build/block-library/blocks/navigation-link/style-rtl.css	671 B	0 B
build/block-library/blocks/navigation-link/style.css	668 B	0 B
build/block-library/blocks/navigation/editor-rtl.css	1.09 kB	0 B
build/block-library/blocks/navigation/editor.css	1.09 kB	0 B
build/block-library/blocks/navigation/style-rtl.css	204 B	0 B
build/block-library/blocks/navigation/style.css	205 B	0 B
build/block-library/blocks/nextpage/editor-rtl.css	395 B	0 B
build/block-library/blocks/nextpage/editor.css	395 B	0 B
build/block-library/blocks/page-list/editor-rtl.css	215 B	0 B
build/block-library/blocks/page-list/editor.css	215 B	0 B
build/block-library/blocks/page-list/style-rtl.css	527 B	0 B
build/block-library/blocks/page-list/style.css	526 B	0 B
build/block-library/blocks/paragraph/editor-rtl.css	157 B	0 B
build/block-library/blocks/paragraph/editor.css	157 B	0 B
build/block-library/blocks/paragraph/style-rtl.css	247 B	0 B
build/block-library/blocks/paragraph/style.css	248 B	0 B
build/block-library/blocks/post-author/editor-rtl.css	209 B	0 B
build/block-library/blocks/post-author/editor.css	209 B	0 B
build/block-library/blocks/post-author/style-rtl.css	183 B	0 B
build/block-library/blocks/post-author/style.css	184 B	0 B
build/block-library/blocks/post-comments-form/style-rtl.css	250 B	0 B
build/block-library/blocks/post-comments-form/style.css	250 B	0 B
build/block-library/blocks/post-content/editor-rtl.css	139 B	0 B
build/block-library/blocks/post-content/editor.css	139 B	0 B
build/block-library/blocks/post-excerpt/editor-rtl.css	73 B	0 B
build/block-library/blocks/post-excerpt/editor.css	73 B	0 B
build/block-library/blocks/post-featured-image/editor-rtl.css	338 B	0 B
build/block-library/blocks/post-featured-image/editor.css	338 B	0 B
build/block-library/blocks/post-featured-image/style-rtl.css	100 B	0 B
build/block-library/blocks/post-featured-image/style.css	100 B	0 B
build/block-library/blocks/preformatted/style-rtl.css	63 B	0 B
build/block-library/blocks/preformatted/style.css	63 B	0 B
build/block-library/blocks/pullquote/editor-rtl.css	183 B	0 B
build/block-library/blocks/pullquote/editor.css	183 B	0 B
build/block-library/blocks/pullquote/style-rtl.css	318 B	0 B
build/block-library/blocks/pullquote/style.css	318 B	0 B
build/block-library/blocks/query-loop/editor-rtl.css	90 B	0 B
build/block-library/blocks/query-loop/editor.css	89 B	0 B
build/block-library/blocks/query-loop/style-rtl.css	315 B	0 B
build/block-library/blocks/query-loop/style.css	317 B	0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B	0 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B	0 B
build/block-library/blocks/query-pagination/editor-rtl.css	270 B	0 B
build/block-library/blocks/query-pagination/editor.css	262 B	0 B
build/block-library/blocks/query-pagination/style-rtl.css	168 B	0 B
build/block-library/blocks/query-pagination/style.css	168 B	0 B
build/block-library/blocks/query-title/editor-rtl.css	86 B	0 B
build/block-library/blocks/query-title/editor.css	86 B	0 B
build/block-library/blocks/query/editor-rtl.css	814 B	0 B
build/block-library/blocks/query/editor.css	812 B	0 B
build/block-library/blocks/quote/editor-rtl.css	61 B	0 B
build/block-library/blocks/quote/editor.css	61 B	0 B
build/block-library/blocks/quote/style-rtl.css	169 B	0 B
build/block-library/blocks/quote/style.css	169 B	0 B
build/block-library/blocks/rss/editor-rtl.css	201 B	0 B
build/block-library/blocks/rss/editor.css	202 B	0 B
build/block-library/blocks/rss/style-rtl.css	290 B	0 B
build/block-library/blocks/rss/style.css	290 B	0 B
build/block-library/blocks/search/editor-rtl.css	165 B	0 B
build/block-library/blocks/search/editor.css	165 B	0 B
build/block-library/blocks/search/style-rtl.css	342 B	0 B
build/block-library/blocks/search/style.css	344 B	0 B
build/block-library/blocks/separator/editor-rtl.css	99 B	0 B
build/block-library/blocks/separator/editor.css	99 B	0 B
build/block-library/blocks/separator/style-rtl.css	236 B	0 B
build/block-library/blocks/separator/style.css	236 B	0 B
build/block-library/blocks/shortcode/editor-rtl.css	504 B	0 B
build/block-library/blocks/shortcode/editor.css	504 B	0 B
build/block-library/blocks/site-logo/editor-rtl.css	201 B	0 B
build/block-library/blocks/site-logo/editor.css	201 B	0 B
build/block-library/blocks/site-logo/style-rtl.css	115 B	0 B
build/block-library/blocks/site-logo/style.css	115 B	0 B
build/block-library/blocks/social-link/editor-rtl.css	164 B	0 B
build/block-library/blocks/social-link/editor.css	165 B	0 B
build/block-library/blocks/social-links/editor-rtl.css	769 B	0 B
build/block-library/blocks/social-links/editor.css	769 B	0 B
build/block-library/blocks/social-links/style-rtl.css	1.32 kB	0 B
build/block-library/blocks/social-links/style.css	1.32 kB	0 B
build/block-library/blocks/spacer/editor-rtl.css	317 B	0 B
build/block-library/blocks/spacer/editor.css	317 B	0 B
build/block-library/blocks/spacer/style-rtl.css	48 B	0 B
build/block-library/blocks/spacer/style.css	48 B	0 B
build/block-library/blocks/table/editor-rtl.css	478 B	0 B
build/block-library/blocks/table/editor.css	478 B	0 B
build/block-library/blocks/table/style-rtl.css	402 B	0 B
build/block-library/blocks/table/style.css	402 B	0 B
build/block-library/blocks/tag-cloud/editor-rtl.css	118 B	0 B
build/block-library/blocks/tag-cloud/editor.css	118 B	0 B
build/block-library/blocks/tag-cloud/style-rtl.css	94 B	0 B
build/block-library/blocks/tag-cloud/style.css	94 B	0 B
build/block-library/blocks/template-part/editor-rtl.css	557 B	0 B
build/block-library/blocks/template-part/editor.css	556 B	0 B
build/block-library/blocks/term-description/editor-rtl.css	90 B	0 B
build/block-library/blocks/term-description/editor.css	90 B	0 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B	0 B
build/block-library/blocks/text-columns/editor.css	95 B	0 B
build/block-library/blocks/text-columns/style-rtl.css	166 B	0 B
build/block-library/blocks/text-columns/style.css	166 B	0 B
build/block-library/blocks/verse/editor-rtl.css	50 B	0 B
build/block-library/blocks/verse/editor.css	50 B	0 B
build/block-library/blocks/verse/style-rtl.css	87 B	0 B
build/block-library/blocks/verse/style.css	87 B	0 B
build/block-library/blocks/video/editor-rtl.css	504 B	0 B
build/block-library/blocks/video/editor.css	503 B	0 B
build/block-library/blocks/video/style-rtl.css	187 B	0 B
build/block-library/blocks/video/style.css	187 B	0 B
build/block-library/common-rtl.css	1.1 kB	0 B
build/block-library/common.css	1.1 kB	0 B
build/block-library/editor-rtl.css	9.57 kB	0 B
build/block-library/editor.css	9.58 kB	0 B
build/block-library/index.js	147 kB	0 B
build/block-library/style-rtl.css	8.85 kB	0 B
build/block-library/style.css	8.85 kB	0 B
build/block-library/theme-rtl.css	700 B	0 B
build/block-library/theme.css	701 B	0 B
build/block-serialization-default-parser/index.js	1.87 kB	0 B
build/block-serialization-spec-parser/index.js	3.06 kB	0 B
build/blocks/index.js	48.3 kB	0 B
build/components/index.js	283 kB	0 B
build/components/style-rtl.css	16.2 kB	0 B
build/components/style.css	16.2 kB	0 B
build/compose/index.js	11.1 kB	0 B
build/core-data/index.js	16.7 kB	0 B
build/customize-widgets/index.js	3.95 kB	0 B
build/customize-widgets/style-rtl.css	168 B	0 B
build/customize-widgets/style.css	168 B	0 B
build/data-controls/index.js	829 B	0 B
build/data/index.js	8.87 kB	0 B
build/date/index.js	31.8 kB	0 B
build/deprecated/index.js	769 B	0 B
build/dom-ready/index.js	576 B	0 B
build/dom/index.js	4.93 kB	0 B
build/edit-navigation/index.js	11.9 kB	0 B
build/edit-navigation/style-rtl.css	1.31 kB	0 B
build/edit-navigation/style.css	1.31 kB	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.86 kB	0 B
build/edit-post/style.css	6.85 kB	0 B
build/edit-site/index.js	27.1 kB	0 B
build/edit-site/style-rtl.css	4.5 kB	0 B
build/edit-site/style.css	4.49 kB	0 B
build/edit-widgets/index.js	20.1 kB	0 B
build/edit-widgets/style-rtl.css	3.2 kB	0 B
build/edit-widgets/style.css	3.2 kB	0 B
build/editor/editor-styles-rtl.css	347 B	0 B
build/editor/editor-styles.css	347 B	0 B
build/editor/index.js	41.8 kB	0 B
build/editor/style-rtl.css	3.9 kB	0 B
build/editor/style.css	3.9 kB	0 B
build/element/index.js	4.61 kB	0 B
build/escape-html/index.js	735 B	0 B
build/format-library/index.js	6.75 kB	0 B
build/format-library/style-rtl.css	637 B	0 B
build/format-library/style.css	639 B	0 B
build/hooks/index.js	2.28 kB	0 B
build/html-entities/index.js	623 B	0 B
build/i18n/index.js	4.01 kB	0 B
build/is-shallow-equal/index.js	698 B	0 B
build/keyboard-shortcuts/index.js	2.53 kB	0 B
build/keycodes/index.js	1.95 kB	0 B
build/list-reusable-blocks/index.js	3.14 kB	0 B
build/list-reusable-blocks/style-rtl.css	629 B	0 B
build/list-reusable-blocks/style.css	628 B	0 B
build/media-utils/index.js	5.34 kB	0 B
build/notices/index.js	1.85 kB	0 B
build/nux/index.js	3.41 kB	0 B
build/nux/style-rtl.css	731 B	0 B
build/nux/style.css	727 B	0 B
build/plugins/index.js	2.89 kB	0 B
build/primitives/index.js	1.42 kB	0 B
build/priority-queue/index.js	791 B	0 B
build/react-i18n/index.js	1.46 kB	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/reusable-blocks/index.js	3.78 kB	0 B
build/reusable-blocks/style-rtl.css	225 B	0 B
build/reusable-blocks/style.css	225 B	0 B
build/rich-text/index.js	13.4 kB	0 B
build/server-side-render/index.js	2.58 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	3.02 kB	0 B
build/viewport/index.js	1.86 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.22 kB	0 B

_{compressed-size-action}

[ntsekouras]

Makes sense. Thanks!

I'm wondering if we should always preview the hovered block instead of the provided example.

[gziolo]

I'm wondering if we should always preview the hovered block instead of the provided example.

If there is no content or too much content then an example seems to be a better choice. I think this how we ended up with the current approach.