Widgets editor: Add basic options for extensibility (#25758)

* Widgets editor: Add basic options for extensibility

- 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 block editor provider 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.

* Remove the WidgetAreas.Sidebar slot for now

packages/edit-widgets/src/components/sidebar/block-areas.js

@@ -7,34 +7,25 @@ import { BlockIcon } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function BlockArea( { clientId } ) {
-	const { name, selectedBlock } = useSelect(
-		( select ) => {
-			const { getBlockAttributes, getBlockSelectionStart } = select(
-				'core/block-editor'
-			);
-			return {
-				name: getBlockAttributes( clientId ).name,
-				selectedBlock: getBlockSelectionStart(),
-			};
-		},
-		[ clientId ]
+function BlockArea( { block } ) {
+	const selectedBlock = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlockSelectionStart(),
+		[]
 	);
+
 	const { selectBlock } = useDispatch( 'core/block-editor' );
-	const isSelected = selectedBlock === clientId;
+
+	if ( block.name !== 'core/widget-area' ) {
+		return null;
+	}
+
 	return (
 		<li>
 			<Button
-				aria-expanded={ isSelected }
-				onClick={
-					isSelected
-						? undefined
-						: () => {
-								selectBlock( clientId );
-						  }
-				}
+				aria-expanded={ selectedBlock === block.clientId }
+				onClick={ () => selectBlock( block.clientId ) }
 			>
-				{ name }
+				{ block.attributes.name }
 				<span className="edit-widgets-block-areas__edit">
 					{ __( 'Edit' ) }
 				</span>
@@ -44,10 +35,13 @@ function BlockArea( { clientId } ) {
 }
 
 export default function BlockAreas() {
-	const blockOrder = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getBlockOrder();
-	} );
-	const hasBlockAreas = blockOrder.length > 0;
+	const blocks = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlocks(),
+		[]
+	);
+
+	const hasBlockAreas = blocks.length > 0;
+
 	return (
 		<>
 			<div className="edit-widgets-block-areas">
@@ -68,10 +62,11 @@ export default function BlockAreas() {
 						) }
 					</div>
 				</div>
+
 				{ hasBlockAreas && (
 					<ul>
-						{ blockOrder.map( ( clientId ) => (
-							<BlockArea key={ clientId } clientId={ clientId } />
+						{ blocks.map( ( block ) => (
+							<BlockArea key={ block.clientId } block={ block } />
 						) ) }
 					</ul>
 				) }

packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js

@@ -76,6 +76,7 @@ export default function WidgetAreasBlockEditorProvider( {
 							onInput={ onInput }
 							onChange={ onChange }
 							settings={ settings }
+							useSubRegistry={ false }
 							{ ...props }
 						/>
 					</FocusReturnProvider>