Customizer: Integrate widget blocks live preview and saving.

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

@@ -9,10 +9,19 @@ import { withDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import Layout from '../layout';
+import { withWPCustomize } from '../../utils';
 
-function EditWidgetsInitializer( { setupWidgetAreas, settings } ) {
+function EditWidgetsInitializer( { setupWidgetAreas, saveWidgetAreas, settings } ) {
 	useEffect( () => {
 		setupWidgetAreas();
+		return withWPCustomize( ( { customize, saveButton } ) => {
+			const listener = () => {
+				saveWidgetAreas();
+				customize.previewer.refresh();
+			};
+			saveButton.addEventListener( 'click', listener );
+			return () => saveButton.removeEventListener( 'click', listener );
+		} );
 	}, [] );
 	return (
 		<Layout
@@ -23,9 +32,10 @@ function EditWidgetsInitializer( { setupWidgetAreas, settings } ) {
 
 export default compose( [
 	withDispatch( ( dispatch ) => {
-		const { setupWidgetAreas } = dispatch( 'core/edit-widgets' );
+		const { setupWidgetAreas, saveWidgetAreas } = dispatch( 'core/edit-widgets' );
 		return {
 			setupWidgetAreas,
+			saveWidgetAreas,
 		};
 	} ),
 ] )( EditWidgetsInitializer );

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

@@ -25,13 +25,7 @@
 	}
 
 	#sub-accordion-section-gutenberg_widget_blocks & {
-		top: 0;
-		right: 0;
-		left: initial;
-		border-bottom: none;
-		border-left: 1px solid $light-gray-500;
-		height: 88px;
-		width: 280px;
+		display: none;
 	}
 }
 @include editor-left(".edit-widgets-header");

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

@@ -43,4 +43,8 @@
 	.block-editor-block-inspector__card {
 		margin: 0;
 	}
+
+	#sub-accordion-section-gutenberg_widget_blocks & {
+		top: 0;
+	}
 }

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

@@ -24,6 +24,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
  */
 import Sidebar from '../sidebar';
 import SelectionObserver from './selection-observer';
+import { withWPCustomize } from '../../utils';
 
 function getBlockEditorSettings( blockEditorSettings, hasUploadPermissions ) {
 	if ( ! hasUploadPermissions ) {
@@ -108,6 +109,10 @@ export default compose( [
 					updateBlocksInWidgetArea,
 				} = dispatch( 'core/edit-widgets' );
 				updateBlocksInWidgetArea( id, blocks );
+				withWPCustomize( ( { previewBlocksInWidgetArea, saveButton } ) => {
+					previewBlocksInWidgetArea( id, blocks );
+					saveButton.disabled = false;
+				} );
 			},
 		};
 	} ),

packages/edit-widgets/src/utils/index.js

@@ -0,0 +1 @@
+export { default as withWPCustomize } from './with-wp-customize';

packages/edit-widgets/src/utils/with-wp-customize.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { serialize } from '@wordpress/blocks';
+
+/* global wp */
+
+function previewBlocksInWidgetArea( id, blocks ) {
+	const customizePreviewIframe = document.querySelector(
+		'#customize-preview > iframe'
+	);
+
+	if ( customizePreviewIframe && customizePreviewIframe.contentDocument ) {
+		const widgetArea = customizePreviewIframe.contentDocument.querySelector(
+			`[data-customize-partial-placement-context*='"sidebar_id":"${ id }"']`
+		);
+
+		if ( widgetArea ) {
+			widgetArea.innerHTML = serialize( blocks );
+		}
+	}
+}
+
+export default function withWPCustomize( func ) {
+	const saveButton = document.querySelector(
+		'#customize-save-button-wrapper > #save'
+	);
+
+	if ( wp && wp.customize && saveButton ) {
+		return func( {
+			customize: wp.customize,
+			previewBlocksInWidgetArea,
+			saveButton,
+		} );
+	}
+}