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,35 @@
+<?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';
+
+	/**
+	 * 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,63 @@
+<?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(
+				'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,17 @@
+# Customize Widgets
+
+Widgets blocks in Customizer Module for WordPress.
+
+> This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/customize-widgets
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+<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,33 @@
+{
+	"name": "@wordpress/customize-widgets",
+	"private": true,
+	"version": "1.0.0-prerelease",
+	"description": "Widgets blocks in Customizer Module for WordPress.",
+	"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 SidebarBlockEditor( { 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>
+	);
+}