Add blockEditor settings on the widget screen; Required to make legac…

…y widgets work.

lib/widgets-page.php

@@ -29,9 +29,14 @@ function gutenberg_widgets_init( $hook ) {
 			return;
 	}
 
+	$block_editor_settings = apply_filters( 'block_editor_settings', $editor_settings, $post );
+
 	wp_add_inline_script(
 		'wp-edit-widgets',
-		'wp.editWidgets.initialize( "widgets-editor" );'
+		sprintf(
+			'wp.editWidgets.initialize( "widgets-editor", %s );',
+			wp_json_encode( $block_editor_settings )
+		)
 	);
 	// Preload server-registered block schemas.
 	wp_add_inline_script(

packages/edit-widgets/src/components/edit-widgets-initializer/index.js

@@ -1,20 +1,53 @@
+/**
+ * External dependencies
+ */
+import { pick } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Layout from '../layout';
+import WidgetBlockEditorSettings from '../widget-block-editor-settings';
 
-function EditWidgetsInitializer( { setupWidgetAreas } ) {
+function EditWidgetsInitializer( { setupWidgetAreas, settings } ) {
 	useEffect( () => {
 		setupWidgetAreas();
 	}, [] );
-	return <Layout />;
+	const blockEditorSettings = useMemo(
+		() => (
+			pick( settings, [
+				'allowedBlockTypes',
+				'availableLegacyWidgets',
+				'bodyPlaceholder',
+				'colors',
+				'disableCustomColors',
+				'disableCustomFontSizes',
+				'focusMode',
+				'fontSizes',
+				'hasFixedToolbar',
+				'hasPermissionsToManageWidgets',
+				'imageSizes',
+				'isRTL',
+				'maxWidth',
+				'styles',
+			] )
+		),
+		[ settings ]
+	);
+	return (
+		<WidgetBlockEditorSettings.Provider
+			value={ blockEditorSettings }
+		>
+			<Layout />
+		</WidgetBlockEditorSettings.Provider>
+	);
 }
 
 export default compose( [

packages/edit-widgets/src/components/widget-area/index.js

@@ -9,6 +9,11 @@ import {
 } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import WidgetBlockEditorSettings from '../widget-block-editor-settings';
+
 function WidgetArea( {
 	blocks,
 	initialOpen,
@@ -21,13 +26,21 @@ function WidgetArea( {
 				title={ widgetAreaName }
 				initialOpen={ initialOpen }
 			>
-				<BlockEditorProvider
-					value={ blocks }
-					onInput={ updateBlocks }
-					onChange={ updateBlocks }
-				>
-					<BlockList />
-				</BlockEditorProvider>
+				<WidgetBlockEditorSettings.Consumer>
+					{
+						( value ) => (
+							<BlockEditorProvider
+								value={ blocks }
+								onInput={ updateBlocks }
+								onChange={ updateBlocks }
+								settings={ value }
+							>
+								<BlockList />
+							</BlockEditorProvider>
+						)
+					}
+				</WidgetBlockEditorSettings.Consumer>
+
 			</PanelBody>
 		</Panel>
 	);

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

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Reference to an empty object
+ */
+const EMPTY_OBJECT = {};
+const WidgetBlockEditorSettings = createContext( EMPTY_OBJECT );
+export default WidgetBlockEditorSettings;

packages/edit-widgets/src/index.js

@@ -13,12 +13,15 @@ import EditWidgetsInitializer from './components/edit-widgets-initializer';
 /**
  * Initilizes the widgets screen
  *
- * @param {string} id Id of the root element to render the screen.
+ * @param {string} id       Id of the root element to render the screen.
+ * @param {Object} settings Id of the root element to render the screen.
  */
-export function initialize( id ) {
+export function initialize( id, settings ) {
 	registerCoreBlocks();
 	render(
-		<EditWidgetsInitializer />,
+		<EditWidgetsInitializer
+			settings={ settings }
+		/>,
 		document.getElementById( id )
 	);
 }