Disabling a block causes editor to crash if preview contains disabled block

[simonhammes]

Description

Disabling the core/image block causes the editor to crash when trying to insert a columns block using the inserter.
I'm guessing this happens because the core/columns block's example contains an image:

gutenberg/packages/block-library/src/columns/index.js

Line 41 in bfd3bb7

name: 'core/image',

The editor should check that all necessary blocks are enabled before trying to render a preview.

---

Possible workaround: Can the core/columns block`s preview somehow be overriden/disabled?

Step-by-step reproduction instructions

The bug is reproducible using https://developer.wordpress.org/playground.

1. Load the post editor
2. Disable the core/image block by executing wp.blocks.unregisterBlockType('core/image') in the browser console
3. Try to insert a core/columns block using the block inserter
4. The editor will crash when hovering over the columns block

Screenshots, screen recording, code snippet

Browser console (with SCRIPT_DEBUG=true)

Uncaught Error: Block type 'core/image' is not registered.
    at __experimentalSanitizeBlockAttributes (blocks.js?ver=6307ec40356a2e0670e0:8293:11)
    at createBlock (blocks.js?ver=6307ec40356a2e0670e0:7647:31)
    at getBlockFromExample (blocks.js?ver=6307ec40356a2e0670e0:8066:10)
    at blocks.js?ver=6307ec40356a2e0670e0:8066:185
    at Array.map (<anonymous>)
    at getBlockFromExample (blocks.js?ver=6307ec40356a2e0670e0:8066:167)
    at blocks.js?ver=6307ec40356a2e0670e0:8066:185
    at Array.map (<anonymous>)
    at getBlockFromExample (blocks.js?ver=6307ec40356a2e0670e0:8066:167)
    at InserterPreviewPanel (block-editor.js?ver=87e92f80c4626dbe1274:27065:81)
    at renderWithHooks (react-dom.js?ver=18.2.0:16315:20)
    at mountIndeterminateComponent (react-dom.js?ver=18.2.0:20084:15)
    at beginWork (react-dom.js?ver=18.2.0:21597:18)
    at HTMLUnknownElement.callCallback (react-dom.js?ver=18.2.0:4151:16)
    at Object.invokeGuardedCallbackDev (react-dom.js?ver=18.2.0:4200:18)
    at invokeGuardedCallback (react-dom.js?ver=18.2.0:4264:33)
    at beginWork$1 (react-dom.js?ver=18.2.0:27461:9)
    at performUnitOfWork (react-dom.js?ver=18.2.0:26567:14)
    at workLoopSync (react-dom.js?ver=18.2.0:26476:7)
    at renderRootSync (react-dom.js?ver=18.2.0:26444:9)
    at performConcurrentWorkOnRoot (react-dom.js?ver=18.2.0:25748:76)
    at workLoop (react.js?ver=18.2.0:2653:36)
    at flushWork (react.js?ver=18.2.0:2626:16)
    at MessagePort.performWorkUntilDeadline (react.js?ver=18.2.0:2920:23)

react-dom.js?ver=18.2.0:18697 The above error occurred in the <InserterPreviewPanel> component:

    at InserterPreviewPanel (https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:27045:3)
    at div
    at InserterMenu (https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:29938:3)
    at InserterLibrary (https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:60641:3)
    at div
    at div
    at InserterSidebar (https://wprelaunch.local/wp-includes/js/dist/edit-post.js?ver=953fe4dbc39c83291315:6362:53)
    at div
    at NavigableRegion (https://wprelaunch.local/wp-includes/js/dist/edit-post.js?ver=953fe4dbc39c83291315:1428:3)
    at div
    at div
    at div
    at InterfaceSkeleton (https://wprelaunch.local/wp-includes/js/dist/edit-post.js?ver=953fe4dbc39c83291315:1500:3)
    at Layout (https://wprelaunch.local/wp-includes/js/dist/edit-post.js?ver=953fe4dbc39c83291315:9006:84)
    at ErrorBoundary (https://wprelaunch.local/wp-includes/js/dist/editor.js?ver=a8b90ee878cbbbb021a9:6115:5)
    at BlockRefsProvider (https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:22307:3)
    at https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:23657:5
    at https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:23319:5
    at WithRegistryProvider(Component)
    at BlockContextProvider (https://wprelaunch.local/wp-includes/js/dist/block-editor.js?ver=87e92f80c4626dbe1274:16628:3)
    at EntityProvider (https://wprelaunch.local/wp-includes/js/dist/core-data.js?ver=419176f02b850abf99ea:6200:3)
    at EntityProvider (https://wprelaunch.local/wp-includes/js/dist/core-data.js?ver=419176f02b850abf99ea:6200:3)
    at https://wprelaunch.local/wp-includes/js/dist/editor.js?ver=a8b90ee878cbbbb021a9:13229:3
    at https://wprelaunch.local/wp-includes/js/dist/editor.js?ver=a8b90ee878cbbbb021a9:12782:5
    at WithRegistryProvider(Component)
    at SlotFillProvider (https://wprelaunch.local/wp-includes/js/dist/components.js?ver=32407b70de56366bfd74:21134:3)
    at provider_SlotFillProvider (https://wprelaunch.local/wp-includes/js/dist/components.js?ver=32407b70de56366bfd74:21157:5)
    at Provider (https://wprelaunch.local/wp-includes/js/dist/components.js?ver=32407b70de56366bfd74:21302:3)
    at div
    at ShortcutProvider (https://wprelaunch.local/wp-includes/js/dist/keyboard-shortcuts.js?ver=0dd9d7a2fc055546ac02:749:75)
    at Editor (https://wprelaunch.local/wp-includes/js/dist/edit-post.js?ver=953fe4dbc39c83291315:9528:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Environment info

WP 6.3, Gutenberg plugin is not installed
Browser: Google Chrome 117.0.5938.92
OS: Linux x64

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

[simonhammes]

Workaround:

import { addFilter } from '@wordpress/hooks';

// ....

addFilter(
    'blocks.registerBlockType',
    '<NAMESPACE>',
    ( settings, name ) => {
		if ( name === 'core/columns' ) {
			delete settings.example;
		}

		return settings;
	}
);

[Mamaduka]

@kevin940726, do you remember the reason for throwing an error in __experimentalSanitizeBlockAttributes instead of silently failing?

[kevin940726]

do you remember the reason for throwing an error in __experimentalSanitizeBlockAttributes instead of silently failing?

I believe I merely moved it from the original createBlock function in https://github.com/WordPress/gutenberg/pull/28379/files#diff-3fbd4c0db6cff0321f313fd5d26d509a897408e2af0d95b488e3fa8c2fb66e8bL50.

I don't know about the details sorry 😅.

[Mamaduka]

Thanks for the context, @kevin940726!

[t-hamano]

This code appears to have been added intentionally to prevent errors that occur when attempting to register a block that was not originally registered with create-block 🤔

• Bug/24286 create block error #24287

[simonhammes]

This was fixed in #55686 (GitHub did not automatically close this issue due to a typo in the PR description)

@t-hamano Thank you!