Add experimental flag and enable widgets screen in customizer

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

@@ -0,0 +1,19 @@
+<?php
+
+class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
+	public function enqueue() {
+		gutenberg_widgets_init( 'gutenberg_customizer' );
+	}
+
+	public function render_content() {
+		?>
+		<input
+			id="_customize-input-gutenberg_widget_blocks"
+			type="hidden"
+			value="<?php echo esc_attr( $this->value() ); ?>"
+			<?php $this->link(); ?>
+		/>
+		<?php
+		the_gutenberg_widgets( 'gutenberg_customizer' );
+	}
+}

lib/class-wp-widget-block.php

@@ -39,6 +39,7 @@ public function __construct() {
 		);
 		parent::__construct( 'block', __( 'Block', 'gutenberg' ), $widget_ops, $control_ops );
 		add_action( 'is_wide_widget_in_customizer', array( $this, 'set_is_wide_widget_in_customizer' ), 10, 2 );
+		add_action( 'customize_controls_print_footer_scripts', array( $this, 'output_widget_control_templates' ) );
 	}
 
 	/**
@@ -127,4 +128,12 @@ public function set_is_wide_widget_in_customizer( $is_wide, $widget_id ) {
 		return $is_wide;
 	}
 
+	/**
+	 * Renders the widget form control templates into the DOM.
+	 */
+	public function output_widget_control_templates() {
+		?>
+		<div id="widgets-left"><!-- compatibility with JS which looks for widget templates here --></div>
+		<?php
+	}
 }

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,95 @@
+<?php
+
+/**
+ * The sanitization function for incoming values for the `gutenberg_widget_blocks` setting.
+ * It's a JSON string, so it decodes it and encodes it again to make sure it's valid.
+ *
+ * @param string $value The incoming value.
+ */
+function gutenberg_customize_sanitize( $value ) {
+	return json_encode( json_decode( $value ) );
+}
+
+/**
+ * Gutenberg's Customize Register.
+ *
+ * Adds a section to the Customizer for editing widgets with Gutenberg.
+ *
+ * @param \WP_Customize_Manager $wp_customize 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 ) {
+	require_once __DIR__ . '/class-wp-sidebar-block-editor-control.php';
+
+	$manager->add_setting(
+		'gutenberg_widget_blocks',
+		array(
+			'default'           => '{}',
+			'type'              => 'gutenberg_widget_blocks',
+			'capability'        => 'edit_theme_options',
+			'transport'         => 'postMessage',
+			'sanitize_callback' => 'gutenberg_customize_sanitize',
+		)
+	);
+
+	$manager->add_section(
+		'gutenberg_widget_blocks',
+		array( 'title' => __( 'Widget Blocks', 'gutenberg' ) )
+	);
+	$manager->add_control(
+		new WP_Sidebar_Block_Editor_Control(
+			$manager,
+			'gutenberg_widget_blocks',
+			array(
+				'section'  => 'gutenberg_widget_blocks',
+				'settings' => 'gutenberg_widget_blocks',
+			)
+		)
+	);
+}
+
+/**
+ * Removes the core 'Widgets' panel from the Customizer if block based widgets are enabled.
+ *
+ * @param array $components Core Customizer components list.
+ * @return array (Maybe) modified components list.
+ */
+function gutenberg_remove_widgets_panel( $components ) {
+	if ( ! gutenberg_use_widgets_block_editor() ) {
+		return $components;
+	}
+
+	$i = array_search( 'widgets', $components, true );
+	if ( false !== $i ) {
+		unset( $components[ $i ] );
+	}
+	return $components;
+}
+
+/**
+ * Filters the Customizer widget settings arguments.
+ * This is needed because the Customizer registers settings for the raw registered widgets, without going through the `sidebars_widgets` filter.
+ * The `WP_Customize_Widgets` class expects sidebars to have an array of widgets registered, not a post ID.
+ * This results in the value passed to `sanitize_js_callback` being `null` and throwing an error.
+ *
+ * TODO: Figure out why core is not running the `sidebars_widgets` filter for the relevant part of the code.
+ * Then, either fix it or change this filter to parse the post IDs and then pass them to the original `sanitize_js_callback`.
+ *
+ * @param  array  $args Array of Customizer setting arguments.
+ * @param  string $id Widget setting ID.
+ * @return array  Maybe modified array of Customizer setting arguments.
+ */
+function filter_widget_customizer_setting_args( $args, $id = null ) {
+	// Posts won't have a settings ID like widgets. We can use that to remove the sanitization callback.
+	if ( ! isset( $id ) ) {
+		unset( $args['sanitize_js_callback'] );
+	}
+
+	return $args;
+}
+
+if (gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' )) {
+	add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
+	add_filter( 'customize_loaded_components', 'gutenberg_remove_widgets_panel' );
+	add_filter( 'widget_customizer_setting_args', 'filter_widget_customizer_setting_args' );
+}
+

lib/widgets-page.php

@@ -37,11 +37,11 @@ function gutenberg_widgets_init( $hook ) {
 		);
 		return;
 	}
-	if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets' ), true ) ) {
+	if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets', 'gutenberg_customizer' ), true ) ) {
 		return;
 	}
 
-	$initializer_name = 'initialize';
+	$initializer_name = $hook === 'gutenberg_customizer' ? 'initializeCustomizer' : 'initialize';
 
 	$settings = array_merge(
 		gutenberg_get_common_block_editor_settings(),

packages/edit-widgets/src/blocks/legacy-widget/edit/widget-preview.js

@@ -15,7 +15,7 @@ function WidgetPreview( { widgetAreaId, attributes, hidden, ...props } ) {
 	const HEIGHT_MARGIN = 20;
 	const [ height, setHeight ] = useState( DEFAULT_HEIGHT );
 	const iframeRef = useRef();
-	const currentUrl = document.location.href;
+	const currentUrl = `${ document.location.protocol }//${ document.location.host }/wp-admin/themes.php?page=gutenberg-widgets`;
 	const iframeUrl = addQueryArgs( currentUrl, {
 		'widget-preview': {
 			...attributes,

packages/edit-widgets/src/components/header/style.scss

@@ -21,6 +21,10 @@
 	font-size: 20px;
 	padding: 0;
 	margin: 0 20px 0 0;
+
+	#customize-theme-controls & {
+		display: none;
+	}
 }
 
 .edit-widgets-header__actions {

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

@@ -12,13 +12,16 @@ import Sidebar from '../sidebar';
 import Interface from './interface';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 
-function Layout( { blockEditorSettings } ) {
+function Layout( { blockEditorSettings, isInCustomizer } ) {
 	return (
 		<WidgetAreasBlockEditorProvider
 			blockEditorSettings={ blockEditorSettings }
 		>
-			<Interface blockEditorSettings={ blockEditorSettings } />
-			<Sidebar />
+			<Interface
+				blockEditorSettings={ blockEditorSettings }
+				isInCustomizer={ isInCustomizer }
+			/>
+			<Sidebar isInCustomizer={ isInCustomizer } />
 			<Popover.Slot />
 			<PluginArea />
 			<UnsavedChangesWarning />

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

@@ -37,20 +37,24 @@ const interfaceLabels = {
 	sidebar: __( 'Widgets settings' ),
 };
 
-function Interface( { blockEditorSettings } ) {
+function Interface( { blockEditorSettings, isInCustomizer } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const { setIsInserterOpened, closeGeneralSidebar } = useDispatch(
 		editWidgetsStore
 	);
 	const { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();
 
-	const { hasSidebarEnabled, isInserterOpened } = useSelect( ( select ) => ( {
-		hasSidebarEnabled: !! select(
-			interfaceStore
-		).getActiveComplementaryArea( editWidgetsStore ),
-		isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
-	} ) );
+	const { hasSidebarEnabled, isInserterOpened } = useSelect(
+		( select ) => ( {
+			hasSidebarEnabled:
+				!! select( interfaceStore ).getActiveComplementaryArea(
+					editWidgetsStore
+				) && ! isInCustomizer,
+			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
+		} ),
+		[ isInCustomizer ]
+	);
 	const editorStylesRef = useEditorStyles( blockEditorSettings.styles );
 
 	// Inserter and Sidebars are mutually exclusive

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

@@ -57,7 +57,10 @@ function ComplementaryAreaTab( { identifier, label, isActive } ) {
 	);
 }
 
-export default function Sidebar() {
+export default function Sidebar( { isInCustomizer } ) {
+	const isSideBarActiveByDefault =
+		SIDEBAR_ACTIVE_BY_DEFAULT && ! isInCustomizer;
+
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const {
 		currentArea,
@@ -168,7 +171,7 @@ export default function Sidebar() {
 			scope="core/edit-widgets"
 			identifier={ currentArea }
 			icon={ cog }
-			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+			isActiveByDefault={ isSideBarActiveByDefault }
 		>
 			{ currentArea === WIDGET_AREAS_IDENTIFIER && (
 				<WidgetAreas

packages/edit-widgets/src/index.js

@@ -44,6 +44,27 @@ export function initialize( id, settings ) {
 	);
 }
 
+export function initializeCustomizer( id, settings ) {
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( block ) => ! [ 'core/more' ].includes( block.name )
+	);
+	registerCoreBlocks( coreBlocks );
+
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		__experimentalRegisterExperimentalCoreBlocks();
+	}
+	registerBlock( createLegacyWidget( settings ) );
+	registerBlock( widgetArea );
+
+	// The code executes before the target DOM has been attached, so we use a hacky timeout to delay the render
+	setTimeout( () => {
+		render(
+			<Layout blockEditorSettings={ settings } isInCustomizer />,
+			document.getElementById( id )
+		);
+	}, 0 );
+}
+
 /**
  * Function to register an individual block.
  *

packages/edit-widgets/src/style.scss

@@ -46,6 +46,12 @@ body.widgets-php {
 	.interface-interface-skeleton__content {
 		background-color: #f1f1f1;
 	}
+
+	#customize-theme-controls & {
+		min-height: unset;
+		position: unset;
+		margin: -12px;
+	}
 }
 
 .blocks-widgets-container .editor-style-wrapper {
@@ -57,5 +63,40 @@ body.widgets-php {
 	display: none;
 }
 
+// stylelint-disable-next-line selector-id-pattern
+#customize-theme-controls #sub-accordion-section-gutenberg_widget_blocks.customize-pane-child.open {
+	overflow: visible;
+}
+
+#customize-theme-controls {
+	.interface-interface-skeleton {
+		top: 0;
+		left: 0;
+		position: relative;
+	}
+
+	.interface-interface-skeleton__sidebar {
+		position: absolute !important;
+	}
+}
+
+#widgets-left#widgets-left {
+	padding: 0;
+
+	.block-editor-inserter__menu {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.block-editor-inserter__main-area {
+		background: #fff;
+	}
+}
+
+// stylelint-disable-next-line selector-id-pattern
+#sub-accordion-section-gutenberg_widget_blocks {
+	.customize-section-title {
+		z-index: 35 !important;
+	}
+}
 
 @include wordpress-admin-schemes();