Refactor pass widget are by id, have a save action.

WordPress · May 21, 2019 · 56b91da · 56b91da
1 parent 44206b9
commit 56b91da
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 30 deletions.
diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
@@ -5,9 +5,7 @@ import { compose } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
-import {
-	serialize,
-} from '@wordpress/blocks';
+
 
 function Header( { saveWidgetAreas } ) {
 	return (
@@ -31,22 +29,10 @@ function Header( { saveWidgetAreas } ) {
 }
 
 export default compose( [
-	withDispatch( ( dispatch, props, { select } ) => {
+	withDispatch( ( dispatch ) => {
+		const { saveWidgetAreas } = dispatch( 'core/edit-widgets' );
 		return {
-			saveWidgetAreas() {
-				const {
-					getWidgetAreas,
-					getBlocksFromWidgetArea,
-				} = select( 'core/edit-widgets' );
-				const widgetAreas = getWidgetAreas();
-				const { saveWidgetArea } = dispatch( 'core' );
-				widgetAreas.forEach( ( { id } ) => {
-					saveWidgetArea( {
-						id,
-						content: serialize( getBlocksFromWidgetArea( id ) ),
-					} );
-				} );
-			},
+			saveWidgetAreas,
 		};
 	} ),
 ] )( Header );

diff --git a/packages/edit-widgets/src/components/widget-area/index.js b/packages/edit-widgets/src/components/widget-area/index.js
@@ -9,11 +9,16 @@ import {
 } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 
-function WidgetArea( { area, initialOpen, blocks, updateBlocks } ) {
+function WidgetArea( {
+	blocks,
+	initialOpen,
+	updateBlocks,
+	widgetAreaName,
+} ) {
 	return (
 		<Panel className="edit-widgets-widget-area">
 			<PanelBody
-				title={ area.name }
+				title={ widgetAreaName }
 				initialOpen={ initialOpen }
 			>
 				<BlockEditorProvider
@@ -29,18 +34,23 @@ function WidgetArea( { area, initialOpen, blocks, updateBlocks } ) {
 }
 
 export default compose( [
-	withSelect( ( select, { area } ) => {
-		const { getBlocksFromWidgetArea } = select( 'core/edit-widgets' );
-		const blocks = getBlocksFromWidgetArea( area.id );
+	withSelect( ( select, { widgetAreaId } ) => {
+		const {
+			getBlocksFromWidgetArea,
+			getWidgetArea,
+		} = select( 'core/edit-widgets' );
+		const blocks = getBlocksFromWidgetArea( widgetAreaId );
+		const widgetAreaName = ( getWidgetArea( widgetAreaId ) || {} ).name;
 		return {
 			blocks,
+			widgetAreaName,
 		};
 	} ),
-	withDispatch( ( dispatch, { area } ) => {
+	withDispatch( ( dispatch, { widgetAreaId } ) => {
 		return {
 			updateBlocks( blocks ) {
 				const { updateBlocksInWidgetArea } = dispatch( 'core/edit-widgets' );
-				updateBlocksInWidgetArea( area.id, blocks );
+				updateBlocksInWidgetArea( widgetAreaId, blocks );
 			},
 		};
 	} ),

diff --git a/packages/edit-widgets/src/components/widget-areas/index.js b/packages/edit-widgets/src/components/widget-areas/index.js
@@ -10,8 +10,12 @@ import { withSelect } from '@wordpress/data';
 import WidgetArea from '../widget-area';
 
 function WidgetAreas( { areas } ) {
-	return areas.map( ( area, index ) => (
-		<WidgetArea key={ area.id } area={ area } initialOpen={ index === 0 } />
+	return areas.map( ( { id }, index ) => (
+		<WidgetArea
+			key={ id }
+			widgetAreaId={ id }
+			initialOpen={ index === 0 }
+		/>
 	) );
 }
 

diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js
@@ -6,8 +6,8 @@ import { get, map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { parse } from '@wordpress/blocks';
-import { select } from '@wordpress/data-controls';
+import { parse, serialize } from '@wordpress/blocks';
+import { dispatch, select } from '@wordpress/data-controls';
 
 /**
  * Yields an action object that setups the widget areas.
@@ -47,3 +47,30 @@ export function updateBlocksInWidgetArea( widgetAreaId, blocks = [] ) {
 		blocks,
 	};
 }
+
+/**
+ * Action that performs the logic to save widget areas.
+ *
+ * @yields {Object} Action object.
+ */
+export function* saveWidgetAreas() {
+	const widgetAreas = yield select(
+		'core/edit-widgets',
+		'getWidgetAreas',
+	);
+	for ( const { id } of widgetAreas ) {
+		const blocks = yield select(
+			'core/edit-widgets',
+			'getBlocksFromWidgetArea',
+			id
+		);
+		yield dispatch(
+			'core',
+			'saveWidgetArea',
+			{
+				id,
+				content: serialize( blocks ),
+			}
+		);
+	}
+}
diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js
@@ -15,6 +15,17 @@ export const getWidgetAreas = createSelector(
 	( state ) => [ state.widgetAreas ]
 );
 
+/**
+ * Returns a widget area object.
+ *
+ * @param {Object} state        Widget editor state.
+ * @param {string} widgetAreaId Id of the widget area.
+ * @return {Object} Array of widget areas.
+ */
+export function getWidgetArea( state, widgetAreaId ) {
+	return state.widgetAreas[ widgetAreaId ];
+}
+
 /**
  * Returns an array of blocks part of a widget area.
  *

diff --git a/packages/edit-widgets/src/store/test/actions.js b/packages/edit-widgets/src/store/test/actions.js
@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
+import { createBlock, serialize } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
  */
 import {
+	saveWidgetAreas,
 	setupWidgetAreas,
 	updateBlocksInWidgetArea,
 } from '../actions';
@@ -17,7 +19,7 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'setupWidgetAreas', () => {
-		it( 'should return SETUP_WIDGET_AREAS action', () => {
+		it( 'should yield SETUP_WIDGET_AREAS action', () => {
 			const setupWidgetAreasGen = setupWidgetAreas();
 			setupWidgetAreasGen.next();
 			expect(
@@ -83,4 +85,105 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'saveWidgetAreas', () => {
+		it( 'should yield the actions to save a widget area', () => {
+			const saveWidgetAreasGen = saveWidgetAreas();
+
+			expect(
+				saveWidgetAreasGen.next()
+			).toEqual( {
+				done: false,
+				value: {
+					type: 'SELECT',
+					storeKey: 'core/edit-widgets',
+					selectorName: 'getWidgetAreas',
+					args: [],
+				},
+			} );
+
+			expect(
+				saveWidgetAreasGen.next( [
+					{
+						id: 'sidebar-1',
+						blocks: [ {
+							name: 'core/paragraph',
+							attributes: {
+								content: 'Test block',
+							},
+						} ],
+					},
+					{
+						id: 'footer-1',
+						blocks: [],
+					},
+				] )
+			).toEqual( {
+				done: false,
+				value: {
+					type: 'SELECT',
+					storeKey: 'core/edit-widgets',
+					selectorName: 'getBlocksFromWidgetArea',
+					args: [ 'sidebar-1' ],
+				},
+			} );
+
+			expect(
+				saveWidgetAreasGen.next( [
+					createBlock( 'core/paragraph', { content: 'Content' } ),
+				] )
+			).toEqual( {
+				done: false,
+				value: {
+					type: 'DISPATCH',
+					storeKey: 'core',
+					actionName: 'saveWidgetArea',
+					args: [ {
+						id: 'sidebar-1',
+						content: serialize(
+							createBlock( 'core/paragraph', { content: 'Content' } )
+						),
+					} ],
+				},
+			} );
+
+			expect(
+				saveWidgetAreasGen.next()
+			).toEqual( {
+				done: false,
+				value: {
+					type: 'SELECT',
+					storeKey: 'core/edit-widgets',
+					selectorName: 'getBlocksFromWidgetArea',
+					args: [ 'footer-1' ],
+				},
+			} );
+
+			expect(
+				saveWidgetAreasGen.next( [
+					createBlock( 'core/button', { text: 'My Button' } ),
+				] )
+			).toEqual( {
+				done: false,
+				value: {
+					type: 'DISPATCH',
+					storeKey: 'core',
+					actionName: 'saveWidgetArea',
+					args: [ {
+						id: 'footer-1',
+						content: serialize(
+							createBlock( 'core/button', { text: 'My Button' } )
+						),
+					} ],
+				},
+			} );
+
+			expect(
+				saveWidgetAreasGen.next()
+			).toEqual( {
+				done: true,
+				value: undefined,
+			} );
+		} );
+	} );
 } );
diff --git a/packages/edit-widgets/src/store/test/selectors.js b/packages/edit-widgets/src/store/test/selectors.js
@@ -3,6 +3,7 @@
  */
 import {
 	getBlocksFromWidgetArea,
+	getWidgetArea,
 	getWidgetAreas,
 } from '../selectors';
 
@@ -31,6 +32,35 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getWidgetArea', () => {
+		it( 'should return an object with the widget area', () => {
+			const state = {
+				widgetAreas: {
+					'sidebar-1': {
+						id: 'sidebar-1',
+						name: 'Sidebar',
+					},
+					'footer-1': {
+						id: 'footer-1',
+						description: 'a footer',
+					},
+				},
+			};
+
+			expect( getWidgetArea( state, 'sidebar-1' ) ).toEqual( {
+				id: 'sidebar-1',
+				name: 'Sidebar',
+			} );
+
+			expect( getWidgetArea( state, 'footer-1' ) ).toEqual( {
+				id: 'footer-1',
+				description: 'a footer',
+			} );
+
+			expect( getWidgetArea( state, 'footer-3' ) ).toEqual( undefined );
+		} );
+	} );
+
 	describe( 'getBlocksFromWidgetArea', () => {
 		it( 'should return the blocks in a widget area', () => {
 			const state = {