From 46e57deec6e42e1e11b808fdefb445520b9432a1 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Wed, 22 May 2019 22:30:22 +0100
Subject: [PATCH] Add blockEditor settings on the widget screen; Required to
 make legacy widgets work.

---
 lib/widgets-page.php                          |  7 +++-
 .../edit-widgets-initializer/index.js         | 39 +++++++++++++++++--
 .../src/components/widget-area/index.js       | 27 +++++++++----
 .../widget-block-editor-settings/index.js     | 11 ++++++
 packages/edit-widgets/src/index.js            |  9 +++--
 5 files changed, 79 insertions(+), 14 deletions(-)
 create mode 100644 packages/edit-widgets/src/components/widget-block-editor-settings/index.js

diff --git a/lib/widgets-page.php b/lib/widgets-page.php
index cc63e767cea90..f13440e9c8217 100644
--- a/lib/widgets-page.php
+++ b/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(
diff --git a/packages/edit-widgets/src/components/edit-widgets-initializer/index.js b/packages/edit-widgets/src/components/edit-widgets-initializer/index.js
index 025488a050299..f49729dc9e047 100644
--- a/packages/edit-widgets/src/components/edit-widgets-initializer/index.js
+++ b/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( [
diff --git a/packages/edit-widgets/src/components/widget-area/index.js b/packages/edit-widgets/src/components/widget-area/index.js
index 7914a4b6ea13a..bbcebb6f70758 100644
--- a/packages/edit-widgets/src/components/widget-area/index.js
+++ b/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>
 	);
diff --git a/packages/edit-widgets/src/components/widget-block-editor-settings/index.js b/packages/edit-widgets/src/components/widget-block-editor-settings/index.js
new file mode 100644
index 0000000000000..2011e23a3bc3f
--- /dev/null
+++ b/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;
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index ede34168d9cb0..c61d4c2f9bb78 100644
--- a/packages/edit-widgets/src/index.js
+++ b/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 )
 	);
 }