Widgets editor: Add basic options for extensibility

[noisysocks]

Closes #18068.

Adds some really basic options for extending the widgets editor.

• Adds a WidgetAreas.Sidebar Fill component so that third party plugins can add custom UI to the widget editor's sidebar.

• Sets the widget editor's BlockEditorProvider to not use a sub-registry, so that third party plugins can add custom blocks (including custom UI) to the block editor used in this screen.

How to test

Paste this into your DevTools console:

Expand

var el = wp.element.createElement;

wp.plugins.registerPlugin( 'test-plugin', {
	render() {
		return el(
			wp.components.Fill,
			{ name: 'WidgetAreas.Sidebar' },
			el(
				'p',
				{},
				'Hello there!'
			)
		);
	},
} );

wp.blocks.registerBlockType( 'test-plugin/hello', {
	title: 'Hello',
	edit() {
		return el(
			'p',
			{},
			'Hello there!'
		);
	},
} );

var existingBlocks = wp.data.select( 'core/block-editor' ).getBlocks();
wp.data.dispatch( 'core/block-editor' ).resetBlocks( [
	wp.blocks.createBlock( 'test-plugin/hello' ),
	...existingBlocks,
	wp.blocks.createBlock( 'test-plugin/hello' ),
] );

[github-actions]

Size Change: -557 B (0%)

Total Size: 1.18 MB

Filename	Size	Change
build/block-directory/index.js	8.55 kB	-57 B (0%)
build/block-editor/index.js	129 kB	-91 B (0%)
build/block-library/index.js	135 kB	-98 B (0%)
build/block-serialization-default-parser/index.js	1.78 kB	+1 B
build/components/index.js	169 kB	-8 B (0%)
build/compose/index.js	9.42 kB	+2 B (0%)
build/data-controls/index.js	685 B	-585 B (85%)	🏆
build/data/index.js	8.6 kB	+189 B (2%)
build/edit-navigation/index.js	10.7 kB	-2 B (0%)
build/edit-site/index.js	20.4 kB	-4 B (0%)
build/edit-site/style-rtl.css	3.83 kB	+50 B (1%)
build/edit-site/style.css	3.83 kB	+51 B (1%)
build/edit-widgets/index.js	21.1 kB	-6 B (0%)
build/editor/index.js	45.5 kB	+2 B (0%)
build/element/index.js	4.44 kB	+1 B
build/escape-html/index.js	734 B	+1 B
build/format-library/index.js	7.49 kB	-3 B (0%)
build/is-shallow-equal/index.js	710 B	+1 B
build/media-utils/index.js	5.12 kB	-1 B
build/plugins/index.js	2.44 kB	-1 B
build/priority-queue/index.js	790 B	+1 B
build/server-side-render/index.js	2.6 kB	-2 B (0%)
build/shortcode/index.js	1.7 kB	+1 B
build/url/index.js	4.06 kB	+2 B (0%)
build/warning/index.js	1.13 kB	-1 B

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.52 kB	0 B
build/api-fetch/index.js	3.35 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/style-rtl.css	11 kB	0 B
build/block-editor/style.css	11 kB	0 B
build/block-library/editor-rtl.css	8.6 kB	0 B
build/block-library/editor.css	8.6 kB	0 B
build/block-library/style-rtl.css	7.65 kB	0 B
build/block-library/style.css	7.65 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.5 kB	0 B
build/components/style-rtl.css	15.4 kB	0 B
build/components/style.css	15.4 kB	0 B
build/core-data/index.js	12 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.25 kB	0 B
build/edit-post/style.css	6.24 kB	0 B
build/edit-widgets/style-rtl.css	3 kB	0 B
build/edit-widgets/style.css	3 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/style-rtl.css	3.83 kB	0 B
build/editor/style.css	3.82 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.54 kB	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/primitives/index.js	1.34 kB	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[noisysocks]

We will need to document this for it to be useful. I've created #25759 to track all of the technical documentation that needs to be written for this screen ahead of 5.6.

[youknowriad]

Do we have a clear idea of what kind of use-cases these slots will serve? In the PostEditor we've took the approach of generally avoiding extensibility APIs unless the use-case is clear enough and the API semantic enough. A slot to add something to a sidebar is "position based" and not semantic for me.

[mtias]

A good example that comes to mind is Jetpack's visibility settings — I believe they exist per widget, so it would be more about extending each block wrapper when used in the context of the widget-editor.

[noisysocks]

Do we have a clear idea of what kind of use-cases these slots will serve?

@ryanwelcher: Did you have anything concrete in mind when opening #18068?

[noisysocks]

I removed the WidgetAreas.Sidebar slot for now. We can revisit when we have a clearer idea of potential use cases.

This PR now just makes it so that you can customise the widgets editor using typical @wordpress/block-editor APIs.

[adamziel]

Sets the widget editor's BlockEditorProvider to not use a sub-registry, so that third party plugins can add custom blocks (including custom UI) to the block editor used in this screen.

Just noting this requires more work as noted in #15644