Add experimental flag and enable widgets screen in customizer

docs/manifest.json

@@ -1481,6 +1481,12 @@
 		"markdown_source": "../packages/custom-templated-path-webpack-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/customize-widgets",
+		"slug": "packages-customize-widgets",
+		"markdown_source": "../packages/customize-widgets/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/data-controls",
 		"slug": "packages-data-controls",

lib/class-wp-sidebar-block-editor-control.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Widget API: WP_Sidebar_Block_Editor_Control class.
+ *
+ * @package Gutenberg
+ */
+
+/**
+ * Core class used to implement the widgets block editor control in the customizer.
+ *
+ * @see WP_Customize_Control
+ */
+class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
+	/**
+	 * The control type.
+	 *
+	 * @var string
+	 */
+	public $type = 'sidebar_block_editor';
+
+	/**
+	 * The current sidebar ID.
+	 *
+	 * @var string
+	 */
+	public $sidebar_id;
+
+	/**
+	 * Enqueue the scripts and styles.
+	 */
+	public function enqueue() {
+		wp_enqueue_script( 'wp-customize-widgets' );
+		wp_enqueue_style( 'wp-customize-widgets' );
+	}
+
+	/**
+	 * Render the widgets block editor container.
+	 */
+	public function render_content() {
+		// Render nothing.
+	}
+}

lib/class-wp-widget-block.php

@@ -126,5 +126,4 @@ public function set_is_wide_widget_in_customizer( $is_wide, $widget_id ) {
 
 		return $is_wide;
 	}
-
 }

lib/client-assets.php

@@ -444,6 +444,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		filemtime( gutenberg_dir_path() . 'build/block-directory/style.css' )
 	);
 	$styles->add_data( 'wp-block-directory', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-customize-widgets',
+		gutenberg_url( 'build/customize-widgets/style.css' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
+		filemtime( gutenberg_dir_path() . 'build/customize-widgets/style.css' )
+	);
+	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 

lib/experiments-page.php

@@ -51,6 +51,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-navigation',
 		)
 	);
+	add_settings_field(
+		'gutenberg-widgets-in-customizer',
+		__( 'Widgets', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable Widgets screen in Customizer', 'gutenberg' ),
+			'id'    => 'gutenberg-widgets-in-customizer',
+		)
+	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

lib/load.php

@@ -106,6 +106,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
 require __DIR__ . '/widgets.php';
+require __DIR__ . '/widgets-customize.php';
 require __DIR__ . '/navigation.php';
 require __DIR__ . '/navigation-page.php';
 require __DIR__ . '/experiments-page.php';

lib/widgets-customize.php

@@ -0,0 +1,64 @@
+<?php
+/**
+ * Bootstrapping the Gutenberg widgets editor in the customizer.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Gutenberg's Customize Register.
+ *
+ * Adds a section to the Customizer for editing widgets with Gutenberg.
+ *
+ * @param \WP_Customize_Manager $manager An instance of the class that controls most of the Theme Customization API for WordPress 3.4 and newer.
+ */
+function gutenberg_widgets_customize_register( $manager ) {
+	global $wp_registered_sidebars;
+
+	if ( ! gutenberg_use_widgets_block_editor() ) {
+		return;
+	}
+
+	require_once __DIR__ . '/class-wp-sidebar-block-editor-control.php';
+
+	foreach ( $manager->sections() as $section ) {
+		if ( $section instanceof WP_Customize_Sidebar_Section ) {
+			$section->description = '';
+		}
+	}
+	foreach ( $manager->controls() as $control ) {
+		if (
+			$control instanceof WP_Widget_Area_Customize_Control ||
+			$control instanceof WP_Widget_Form_Customize_Control
+		) {
+			$manager->remove_control( $control->id );
+		}
+	}
+
+	foreach ( $wp_registered_sidebars as $sidebar_id => $sidebar ) {
+		$manager->add_setting(
+			"sidebars_widgets[$sidebar_id]",
+			array(
+				'type'       => 'gutenberg_widget_blocks',
+				'capability' => 'edit_theme_options',
+				'transport'  => 'postMessage',
+			)
+		);
+
+		$manager->add_control(
+			new WP_Sidebar_Block_Editor_Control(
+				$manager,
+				"sidebars_widgets[$sidebar_id]",
+				array(
+					'section'    => "sidebar-widgets-$sidebar_id",
+					'settings'   => "sidebars_widgets[$sidebar_id]",
+					'sidebar_id' => $sidebar_id,
+				)
+			)
+		);
+	}
+}
+
+if ( gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' ) ) {
+	add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
+}

lib/widgets-page.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Bootstraping the Gutenberg widgets page.
+ * Bootstrapping the Gutenberg widgets page.
  *
  * @package gutenberg
  */

package.json

@@ -37,6 +37,7 @@
 		"@wordpress/components": "file:packages/components",
 		"@wordpress/compose": "file:packages/compose",
 		"@wordpress/core-data": "file:packages/core-data",
+		"@wordpress/customize-widgets": "file:packages/customize-widgets",
 		"@wordpress/data": "file:packages/data",
 		"@wordpress/data-controls": "file:packages/data-controls",
 		"@wordpress/date": "file:packages/date",

packages/customize-widgets/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/customize-widgets/CHANGELOG.md

@@ -0,0 +1,5 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/master/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+Initial release.

packages/customize-widgets/README.md

@@ -0,0 +1,6 @@
+- Package name
+- Package description
+- Installation details
+- Usage example
+- API documentation, if applicable ([more info](#maintaining-api-documentation))
+- `Code is Poetry` logo (`<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>`)

packages/customize-widgets/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@wordpress/customize-widgets",
+	"version": "1.0.0-prerelease",
+	"description": "Package description.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [ "wordpress" ],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/customize-widgets/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/customize-widgets"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.11.2",
+		"@wordpress/block-editor": "file:../block-editor",
+		"@wordpress/block-library": "file:../block-library",
+		"@wordpress/blocks": "file:../blocks",
+		"@wordpress/components": "file:../components",
+		"@wordpress/element": "file:../element",
+		"lodash": "^4.17.19"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/customize-widgets/src/components/sidebar-block-editor/index.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockEditorProvider,
+	BlockList,
+	BlockSelectionClearer,
+	ObserveTyping,
+	WritingFlow,
+} from '@wordpress/block-editor';
+import {
+	DropZoneProvider,
+	FocusReturnProvider,
+	SlotFillProvider,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useSidebarBlockEditor from './use-sidebar-block-editor';
+
+export default function CustomizeSidebarBlockEditor( { sidebar } ) {
+	const [ blocks, onInput, onChange ] = useSidebarBlockEditor( sidebar );
+
+	return (
+		<SlotFillProvider>
+			<DropZoneProvider>
+				<FocusReturnProvider>
+					<BlockEditorProvider
+						value={ blocks }
+						onInput={ onInput }
+						onChange={ onChange }
+					>
+						<BlockSelectionClearer>
+							<WritingFlow>
+								<ObserveTyping>
+									<BlockList />
+								</ObserveTyping>
+							</WritingFlow>
+						</BlockSelectionClearer>
+					</BlockEditorProvider>
+				</FocusReturnProvider>
+			</DropZoneProvider>
+		</SlotFillProvider>
+	);
+}