Quick inserter breaks in block-editor package since addition of patterns

[johnstonphilip]

Describe the bug
When using the block-editor package, the quick inserter breaks the page when you click on it with this error:

TypeError: Cannot read property 'length' of undefined and points to this line in quick-inserter.js:
https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inserter/quick-inserter.js#L141

To reproduce
Steps to reproduce the behavior:

1. Set up a project which uses the block-editor as described in the readme here:
   https://github.com/WordPress/gutenberg/tree/master/packages/block-editor

2. View the page containing your custom block-editor, and attempt to click on the quick inserter button to add another block.

3. Notice the page crashes with the above error.

Expected behavior
The page does not crash.

To confirm this is a new issue, I rolled back my WordPress install to 5.4 and the inserter works fine, so it appears to be due to the addition of patterns.

Editor version (please complete the following information):

• WordPress version: 5.5
• Gutenberg Plugin installed on master` branch at current latest.

Desktop (please complete the following information):

• OS: Apple OSx Catalina 0.15.6 (19G73)
• Browser: Chrome Version 84.0.4147.105 (Official Build) (64-bit)

[johnstonphilip]

I made some progress on this.

I was able to determine that my settings for the BlockEditorProvider were different from WordPress core's, and that they were missing the __experimentalBlockPatterns value, while core's had it. I found this by adding this to the usePatternsState hook:

console.log( select( 'core/block-editor' ).getSettings() );

Core's value when clicking the inserter:

alignWide: true
allowedBlockTypes: true
allowedMimeTypes: null
availableLegacyWidgets: {WP_Widget_Pages: {…}, WP_Widget_Calendar: {…}, WP_Widget_Archives: {…}, WP_Widget_Media_Audio: {…}, WP_Widget_Media_Image: {…}, …}
bodyPlaceholder: "Start writing or type / to choose a block"
colors: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
disableCustomColors: false
disableCustomFontSizes: false
disableCustomGradients: false
enableCustomLineHeight: false
enableCustomUnits: false
focusMode: false
fontSizes: (5) [{…}, {…}, {…}, {…}, {…}]
gradients: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
hasFixedToolbar: false
hasPermissionsToManageWidgets: true
imageDimensions: {thumbnail: {…}, medium: {…}, large: {…}}
imageEditing: true
imageSizes: (4) [{…}, {…}, {…}, {…}]
isRTL: false
keepCaretInsideBlock: false
maxUploadFileSize: 0
maxWidth: 580
mediaUpload: ƒ mediaUpload(_ref)
styles: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
titlePlaceholder: "Add title"
__experimentalBlockDirectory: false
__experimentalBlockPatternCategories: (5) [{…}, {…}, {…}, {…}, {…}]
__experimentalBlockPatterns: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__experimentalCanUserUseUnfilteredHTML: true
__experimentalEnableCustomSpacing: false
__experimentalEnableFullSiteEditing: false
__experimentalEnableFullSiteEditingDemo: false
__experimentalEnableLegacyWidgetBlock: false
__experimentalEnableLinkColor: false
__experimentalFeatures: {typography: {…}}
__experimentalFetchLinkSuggestions: ƒ fetchLinkSuggestions(_x)
__experimentalFetchReusableBlocks: ƒ ()
__experimentalPreferredStyleVariations: {value: {…}, onChange: ƒ}
__experimentalReusableBlocks: []
__experimentalSetIsInserterOpened: ƒ ()
__experimentalShouldInsertAtTheTop: undefined
__experimentalUndo: ƒ ()
__mobileEnablePageTemplates: false
__proto__: Object

My BlockEditorProvider value when clicking the inserter:

alignWide: false
allowedBlockTypes: true
allowedMimeTypes: null
availableLegacyWidgets: {}
colors: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
fontSizes: (5) [{…}, {…}, {…}, {…}, {…}]
gradients: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
hasPermissionsToManageWidgets: false
imageEditing: true
imageSizes: (4) [{…}, {…}, {…}, {…}]
maxUploadFileSize: 0
maxWidth: 580
__experimentalBlockDirectory: false
__experimentalCanUserUseUnfilteredHTML: false
__experimentalEnableFullSiteEditing: false
__experimentalEnableFullSiteEditingDemo: false
__experimentalEnableLegacyWidgetBlock: false
__mobileEnablePageTemplates: false

I made sure that my block-editor npm was updated to 4.3.6, which is where I believe __experimentalBlockPatterns was added to the settings:

gutenberg/packages/block-editor/src/store/defaults.js

Line 161 in 90a0eb3

__experimentalBlockPatterns: [],

Regardless of the reasons these are out of sync, I was able to resolve the issue by passing core's settings to my blockEditorProvider like this:

<DropZoneProvider>
	<BlockEditorProvider
		value={ blocks }
		onChange={ updateBlocks }
		onInput={ updateBlocks }
		settings={ {wp.data.select( 'core/block-editor' ).getSettings()} }
	>
	<BlockEditorKeyboardShortcuts />
		<ObserveTyping>
			<BlockList />
		</ObserveTyping>
	</BlockEditorProvider>
</DropZoneProvider>

I just wanted to leave this here for anyone else having a similar issue! I'm not certain if this issue should be closed because of that out-of-sync-ness of the settings by default though. That seems like it's still a real problem, but I am not 100% sure.

[talldan]

@johnstonphilip I think this may have been fixed by #24554. Does that look right to you? Possibly the fix hasn't been published yet.

[johnstonphilip]

@talldan Yes that looks right! We can close this issue. Thanks 😊