Add blockEditor settings on the widget screen (#15788)

The block editor settings are required to ensure legacy widgets work as expected on the widgets block editor screen.

This commit is related to #15521 given that in both changes we add block editor settings support to the widget screen.

lib/widgets-page.php

@@ -29,9 +29,38 @@ function gutenberg_widgets_init( $hook ) {
 			return;
 	}
 
+	// Media settings.
+	$max_upload_size = wp_max_upload_size();
+	if ( ! $max_upload_size ) {
+		$max_upload_size = 0;
+	}
+
+	$settings = array_merge(
+		array(
+			'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
+			'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
+			'maxUploadFileSize'      => $max_upload_size,
+		),
+		gutenberg_get_legacy_widget_settings()
+	);
+
+	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
+	list( $font_sizes, )    = (array) get_theme_support( 'editor-font-sizes' );
+
+	if ( false !== $color_palette ) {
+		$settings['colors'] = $color_palette;
+	}
+
+	if ( false !== $font_sizes ) {
+		$settings['fontSizes'] = $font_sizes;
+	}
+
 	wp_add_inline_script(
 		'wp-edit-widgets',
-		'wp.editWidgets.initialize( "widgets-editor" );'
+		sprintf(
+			'wp.editWidgets.initialize( "widgets-editor", %s );',
+			wp_json_encode( $settings )
+		)
 	);
 	// Preload server-registered block schemas.
 	wp_add_inline_script(

lib/widgets.php

@@ -65,14 +65,14 @@ function gutenberg_block_editor_admin_footer() {
 }
 add_action( 'admin_footer', 'gutenberg_block_editor_admin_footer' );
 
+
 /**
- * Extends default editor settings with values supporting legacy widgets.
- *
- * @param array $settings Default editor settings.
+ * Returns the settings required by legacy widgets blocks.
  *
- * @return array Filtered editor settings.
+ * @return array Legacy widget settings.
  */
-function gutenberg_legacy_widget_settings( $settings ) {
+function gutenberg_get_legacy_widget_settings() {
+	$settings = array();
 	/**
 	 * TODO: The hardcoded array should be replaced with a mechanism to allow
 	 * core and third party blocks to specify they already have equivalent
@@ -135,6 +135,17 @@ function gutenberg_legacy_widget_settings( $settings ) {
 
 	return $settings;
 }
+
+/**
+ * Extends default editor settings with values supporting legacy widgets.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_legacy_widget_settings( $settings ) {
+	return array_merge( $settings, gutenberg_get_legacy_widget_settings() );
+}
 add_filter( 'block_editor_settings', 'gutenberg_legacy_widget_settings' );
 
 /**

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

@@ -10,11 +10,15 @@ import { withDispatch } from '@wordpress/data';
  */
 import Layout from '../layout';
 
-function EditWidgetsInitializer( { setupWidgetAreas } ) {
+function EditWidgetsInitializer( { setupWidgetAreas, settings } ) {
 	useEffect( () => {
 		setupWidgetAreas();
 	}, [] );
-	return <Layout />;
+	return (
+		<Layout
+			blockEditorSettings={ settings }
+		/>
+	);
 }
 
 export default compose( [

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

@@ -11,7 +11,7 @@ import Header from '../header';
 import Sidebar from '../sidebar';
 import WidgetAreas from '../widget-areas';
 
-function Layout() {
+function Layout( { blockEditorSettings } ) {
 	return (
 		<>
 			<Header />
@@ -22,7 +22,9 @@ function Layout() {
 				aria-label={ __( 'Widgets screen content' ) }
 				tabIndex="-1"
 			>
-				<WidgetAreas />
+				<WidgetAreas
+					blockEditorSettings={ blockEditorSettings }
+				/>
 			</div>
 		</>
 	);

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

@@ -10,6 +10,7 @@ import {
 import { withDispatch, withSelect } from '@wordpress/data';
 
 function WidgetArea( {
+	blockEditorSettings,
 	blocks,
 	initialOpen,
 	updateBlocks,
@@ -25,6 +26,7 @@ function WidgetArea( {
 					value={ blocks }
 					onInput={ updateBlocks }
 					onChange={ updateBlocks }
+					settings={ blockEditorSettings }
 				>
 					<BlockList />
 				</BlockEditorProvider>

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

@@ -9,9 +9,10 @@ import { withSelect } from '@wordpress/data';
  */
 import WidgetArea from '../widget-area';
 
-function WidgetAreas( { areas } ) {
+function WidgetAreas( { areas, blockEditorSettings } ) {
 	return areas.map( ( { id }, index ) => (
 		<WidgetArea
+			blockEditorSettings={ blockEditorSettings }
 			key={ id }
 			id={ id }
 			initialOpen={ index === 0 }

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 )
 	);
 }