Widgets screen: getBlocks() doesn't return innerBlocks

[tomusborne]

Description

When on the Widget screen, using wp.data.select( 'core/block-editor' ).getBlocks() only returns the top-level widget areas. innerBlocks is an empty array even when inner blocks (widgets) exist.

Step-by-step reproduction instructions

1. Go to the Widgets area in WP 5.8
2. Add a few widgets to a widget area.
3. In the console, run wp.data.select( 'core/block-editor' ).getBlocks()

Expected behaviour

I expect the innerBlocks to be available like they are in the editor: https://www.screencast.com/t/o9LFmZv8El

Actual behaviour

innerBlocks is empty even though there are widgets inside the area: https://www.screencast.com/t/WZgm8RXGv

WordPress information

• WordPress version: 5.8-beta1-51137
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: macOS 11.3.1
• Browser: Chrome 91.0.4472.101

[noisysocks]

Hey @tomusborne. This is an unfortunate side effect of how widget areas are implemented. Each widget area is a block that connects its InnerBlocks directly to the widgets area entity's blocks which sits entirely outside of the @wordpress/block-editor store.

I'd like us to revisit the architecture of this after 5.8 (I think that Widget Area possibly shouldn't be a block) but for now a workaround is to use something like:

const widgetAreas = wp.data.select( 'core' ).getWidgetAreas();
const firstWidgetAreasBlocks = wp.data.select( 'core' ).getEditedEntityRecord( 'root', 'postType', `widget-area-${ widgetAreas[0].id }` ).blocks;

[tomusborne]

@noisysocks Thanks for letting me know. Really appreciate the workaround as well, I'll play around with it.

[htmgarcia]

@noisysocks tried your code suggestion, however returned getWidgetAreas is not a function.
Did something changed recently?

[talldan]

The issue seems to be that the getBlocks function uses the blocks api (wp.blocks.getBlock) to retrieve the deserialized inner blocks, but widget areas use entities for their inner blocks and so they're not serialized.

The block editor store does actually have all the data needed, but it's not exposed by the getBlocks selector.

An alternative workaround would be something like:

const widgetAreas = wp.data.select('core/block-editor').getBlocks();
const blocks = widgetAreas.map( ( widgetArea ) => {
    const innerBlocks = wp.data.select('core/block-editor').getBlocks( widgetArea.clientId );
    return {
        ...widgetArea,
        innerBlocks
    };
} );

[noisysocks]

I'll close this as it's a quirk of how widget areas are implemented and there's no "bug" per se. It's definitely an argument against using blocks to implement widget areas, though, which I'll note in #33254.