Blocks in Customizer: Make the block editor talk to the Customizer API

[noisysocks]

Here's very roughly what I imagine...

There's a React component in the @wordpress namespace called e.g. BlockWidgetsEditor, which:

• Accepts a list of widget area (sidebar) objects containing widget objects.
• Renders a BlockEditor that allows the user to edit the provided widget areas.
• Internally handles all translation of widget objects ↔ block objects.

<BlockWidgetsEditor
	widgetAreas={ ... }
	onChange={ ( widgetAreas, changes ) => {} }
/>

Then, there's a React component in the @wordpress namespace called e.g. BlockWidgetsScreen, which:

• Renders BlockWidgetsEditor and hooks it up to the REST API.
• Renders the necessary UI for saving the user's changes, etc.

BlockWidgetsScreen can then be mounted into the standalone widgets.php WP Admin screen in the normal way.

render(
	<WidgetsScreen />,
	document.getElementById( 'widgets-screen' )
);

Lastly, there's a class in the @wordpress namespace called e.g. BlockWidgetsSection, which:

• Extends wp.customize.Section.
• Renders BlockWidgetsEditor and hooks it up to Customize settings using the Customize JavaScript API.

render(
	<WidgetsEditor
		widgetAreas={ buildWidgetAreasFromFormData( wp.customize.get() ) }
		onChange={ ( widgetAreas, changes ) => {
			for ( const widgetArea of changes.widgetAreas ) {
				wp.customize( `sidebars_widgets[${ widgetArea.slug }]` ).set( widgetArea.widgets );
			}
			for ( const widget of changes.widgets ) {
				wp.customize( `widget_[${ widget.slug }]` ).set( widget.instance );
			}
		} }
	/>,
	this.container
);

[noisysocks]

@kevin940726: I think a lot of this is already implemented? Leaving it up to you on whether to close the issue or not.

[draganescu]

Um is it? Right now adding a widget in the block editor doesn't really create anything in the preview and when it does add a block editing it creates multiple copies of the widget in the preview, without an actual preview.

I think this issue should be closed when we can:

• add any block (including a legacy widget block) to the block editor embedded in the customizer
• that block is previewed immediately in the preview pane
• the edits to the block are previewed
• previewing and sharing changesets work

This is more like an overview issue for the above imo, although more because we don't have one. But there is no PR that handles everything above now, it just will result when successively we make the embedded editor function perfectly in the customizer.

[noisysocks]

#30221 and #30321 were the final pieces here 🙂