@wordpress/edit-widgets 4.5.0 → 4.8.0

package/src/store/actions.js

@@ -30,19 +30,21 @@ import { STORE_NAME as editWidgetsStoreName } from './constants';
  * @param {Array}  blocks Blocks the post should consist of.
  * @return {Object} The post object.
  */
-export const persistStubPost = ( id, blocks ) => ( { registry } ) => {
-	const stubPost = createStubPost( id, blocks );
-	registry
-		.dispatch( coreStore )
-		.receiveEntityRecords(
-			KIND,
-			POST_TYPE,
-			stubPost,
-			{ id: stubPost.id },
-			false
-		);
-	return stubPost;
-};
+export const persistStubPost =
+	( id, blocks ) =>
+	( { registry } ) => {
+		const stubPost = createStubPost( id, blocks );
+		registry
+			.dispatch( coreStore )
+			.receiveEntityRecords(
+				KIND,
+				POST_TYPE,
+				stubPost,
+				{ id: stubPost.id },
+				false
+			);
+		return stubPost;
+	};
 
 /**
  * Converts all the blocks from edited widget areas into widgets,
@@ -52,32 +54,30 @@ export const persistStubPost = ( id, blocks ) => ( { registry } ) => {
  *
  * @return {Function} An action creator.
  */
-export const saveEditedWidgetAreas = () => async ( {
-	select,
-	dispatch,
-	registry,
-} ) => {
-	const editedWidgetAreas = select.getEditedWidgetAreas();
-	if ( ! editedWidgetAreas?.length ) {
-		return;
-	}
-	try {
-		await dispatch.saveWidgetAreas( editedWidgetAreas );
-		registry
-			.dispatch( noticesStore )
-			.createSuccessNotice( __( 'Widgets saved.' ), {
-				type: 'snackbar',
-			} );
-	} catch ( e ) {
-		registry.dispatch( noticesStore ).createErrorNotice(
-			/* translators: %s: The error message. */
-			sprintf( __( 'There was an error. %s' ), e.message ),
-			{
-				type: 'snackbar',
-			}
-		);
-	}
-};
+export const saveEditedWidgetAreas =
+	() =>
+	async ( { select, dispatch, registry } ) => {
+		const editedWidgetAreas = select.getEditedWidgetAreas();
+		if ( ! editedWidgetAreas?.length ) {
+			return;
+		}
+		try {
+			await dispatch.saveWidgetAreas( editedWidgetAreas );
+			registry
+				.dispatch( noticesStore )
+				.createSuccessNotice( __( 'Widgets saved.' ), {
+					type: 'snackbar',
+				} );
+		} catch ( e ) {
+			registry.dispatch( noticesStore ).createErrorNotice(
+				/* translators: %s: The error message. */
+				sprintf( __( 'There was an error. %s' ), e.message ),
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
 
 /**
  * Converts all the blocks from specified widget areas into widgets,
@@ -86,26 +86,25 @@ export const saveEditedWidgetAreas = () => async ( {
  * @param {Object[]} widgetAreas Widget areas to save.
  * @return {Function} An action creator.
  */
-export const saveWidgetAreas = ( widgetAreas ) => async ( {
-	dispatch,
-	registry,
-} ) => {
-	try {
-		for ( const widgetArea of widgetAreas ) {
-			await dispatch.saveWidgetArea( widgetArea.id );
+export const saveWidgetAreas =
+	( widgetAreas ) =>
+	async ( { dispatch, registry } ) => {
+		try {
+			for ( const widgetArea of widgetAreas ) {
+				await dispatch.saveWidgetArea( widgetArea.id );
+			}
+		} finally {
+			// saveEditedEntityRecord resets the resolution status, let's fix it manually.
+			await registry
+				.dispatch( coreStore )
+				.finishResolution(
+					'getEntityRecord',
+					KIND,
+					WIDGET_AREA_ENTITY_TYPE,
+					buildWidgetAreasQuery()
+				);
 		}
-	} finally {
-		// saveEditedEntityRecord resets the resolution status, let's fix it manually.
-		await registry
-			.dispatch( coreStore )
-			.finishResolution(
-				'getEntityRecord',
-				KIND,
-				WIDGET_AREA_ENTITY_TYPE,
-				buildWidgetAreasQuery()
-			);
-	}
-};
+	};
 
 /**
  * Converts all the blocks from a widget area specified by ID into widgets,
@@ -114,180 +113,185 @@ export const saveWidgetAreas = ( widgetAreas ) => async ( {
  * @param {string} widgetAreaId ID of the widget area to process.
  * @return {Function} An action creator.
  */
-export const saveWidgetArea = ( widgetAreaId ) => async ( {
-	dispatch,
-	select,
-	registry,
-} ) => {
-	const widgets = select.getWidgets();
-
-	const post = registry
-		.select( coreStore )
-		.getEditedEntityRecord(
-			KIND,
-			POST_TYPE,
-			buildWidgetAreaPostId( widgetAreaId )
+export const saveWidgetArea =
+	( widgetAreaId ) =>
+	async ( { dispatch, select, registry } ) => {
+		const widgets = select.getWidgets();
+
+		const post = registry
+			.select( coreStore )
+			.getEditedEntityRecord(
+				KIND,
+				POST_TYPE,
+				buildWidgetAreaPostId( widgetAreaId )
+			);
+
+		// Get all widgets from this area
+		const areaWidgets = Object.values( widgets ).filter(
+			( { sidebar } ) => sidebar === widgetAreaId
 		);
 
-	// Get all widgets from this area
-	const areaWidgets = Object.values( widgets ).filter(
-		( { sidebar } ) => sidebar === widgetAreaId
-	);
-
-	// Remove all duplicate reference widget instances for legacy widgets.
-	// Why? We filter out the widgets with duplicate IDs to prevent adding more than one instance of a widget
-	// implemented using a function. WordPress doesn't support having more than one instance of these, if you try to
-	// save multiple instances of these in different sidebars you will run into undefined behaviors.
-	const usedReferenceWidgets = [];
-	const widgetsBlocks = post.blocks.filter( ( block ) => {
-		const { id } = block.attributes;
-
-		if ( block.name === 'core/legacy-widget' && id ) {
-			if ( usedReferenceWidgets.includes( id ) ) {
-				return false;
+		// Remove all duplicate reference widget instances for legacy widgets.
+		// Why? We filter out the widgets with duplicate IDs to prevent adding more than one instance of a widget
+		// implemented using a function. WordPress doesn't support having more than one instance of these, if you try to
+		// save multiple instances of these in different sidebars you will run into undefined behaviors.
+		const usedReferenceWidgets = [];
+		const widgetsBlocks = post.blocks.filter( ( block ) => {
+			const { id } = block.attributes;
+
+			if ( block.name === 'core/legacy-widget' && id ) {
+				if ( usedReferenceWidgets.includes( id ) ) {
+					return false;
+				}
+				usedReferenceWidgets.push( id );
 			}
-			usedReferenceWidgets.push( id );
-		}
-		return true;
-	} );
-
-	// Determine which widgets have been deleted. We can tell if a widget is
-	// deleted and not just moved to a different area by looking to see if
-	// getWidgetAreaForWidgetId() finds something.
-	const deletedWidgets = [];
-	for ( const widget of areaWidgets ) {
-		const widgetsNewArea = select.getWidgetAreaForWidgetId( widget.id );
-		if ( ! widgetsNewArea ) {
-			deletedWidgets.push( widget );
-		}
-	}
-
-	const batchMeta = [];
-	const batchTasks = [];
-	const sidebarWidgetsIds = [];
-	for ( let i = 0; i < widgetsBlocks.length; i++ ) {
-		const block = widgetsBlocks[ i ];
-		const widgetId = getWidgetIdFromBlock( block );
-		const oldWidget = widgets[ widgetId ];
-		const widget = transformBlockToWidget( block, oldWidget );
-
-		// We'll replace the null widgetId after save, but we track it here
-		// since order is important.
-		sidebarWidgetsIds.push( widgetId );
-
-		// Check oldWidget as widgetId might refer to an ID which has been
-		// deleted, e.g. if a deleted block is restored via undo after saving.
-		if ( oldWidget ) {
-			// Update an existing widget.
-			registry.dispatch( coreStore ).editEntityRecord(
-				'root',
-				'widget',
-				widgetId,
-				{
-					...widget,
-					sidebar: widgetAreaId,
-				},
-				{ undoIgnore: true }
-			);
+			return true;
+		} );
 
-			const hasEdits = registry
-				.select( coreStore )
-				.hasEditsForEntityRecord( 'root', 'widget', widgetId );
+		// Determine which widgets have been deleted. We can tell if a widget is
+		// deleted and not just moved to a different area by looking to see if
+		// getWidgetAreaForWidgetId() finds something.
+		const deletedWidgets = [];
+		for ( const widget of areaWidgets ) {
+			const widgetsNewArea = select.getWidgetAreaForWidgetId( widget.id );
+			if ( ! widgetsNewArea ) {
+				deletedWidgets.push( widget );
+			}
+		}
 
-			if ( ! hasEdits ) {
-				continue;
+		const batchMeta = [];
+		const batchTasks = [];
+		const sidebarWidgetsIds = [];
+		for ( let i = 0; i < widgetsBlocks.length; i++ ) {
+			const block = widgetsBlocks[ i ];
+			const widgetId = getWidgetIdFromBlock( block );
+			const oldWidget = widgets[ widgetId ];
+			const widget = transformBlockToWidget( block, oldWidget );
+
+			// We'll replace the null widgetId after save, but we track it here
+			// since order is important.
+			sidebarWidgetsIds.push( widgetId );
+
+			// Check oldWidget as widgetId might refer to an ID which has been
+			// deleted, e.g. if a deleted block is restored via undo after saving.
+			if ( oldWidget ) {
+				// Update an existing widget.
+				registry.dispatch( coreStore ).editEntityRecord(
+					'root',
+					'widget',
+					widgetId,
+					{
+						...widget,
+						sidebar: widgetAreaId,
+					},
+					{ undoIgnore: true }
+				);
+
+				const hasEdits = registry
+					.select( coreStore )
+					.hasEditsForEntityRecord( 'root', 'widget', widgetId );
+
+				if ( ! hasEdits ) {
+					continue;
+				}
+
+				batchTasks.push( ( { saveEditedEntityRecord } ) =>
+					saveEditedEntityRecord( 'root', 'widget', widgetId )
+				);
+			} else {
+				// Create a new widget.
+				batchTasks.push( ( { saveEntityRecord } ) =>
+					saveEntityRecord( 'root', 'widget', {
+						...widget,
+						sidebar: widgetAreaId,
+					} )
+				);
 			}
 
-			batchTasks.push( ( { saveEditedEntityRecord } ) =>
-				saveEditedEntityRecord( 'root', 'widget', widgetId )
-			);
-		} else {
-			// Create a new widget.
-			batchTasks.push( ( { saveEntityRecord } ) =>
-				saveEntityRecord( 'root', 'widget', {
-					...widget,
-					sidebar: widgetAreaId,
+			batchMeta.push( {
+				block,
+				position: i,
+				clientId: block.clientId,
+			} );
+		}
+		for ( const widget of deletedWidgets ) {
+			batchTasks.push( ( { deleteEntityRecord } ) =>
+				deleteEntityRecord( 'root', 'widget', widget.id, {
+					force: true,
 				} )
 			);
 		}
 
-		batchMeta.push( {
-			block,
-			position: i,
-			clientId: block.clientId,
-		} );
-	}
-	for ( const widget of deletedWidgets ) {
-		batchTasks.push( ( { deleteEntityRecord } ) =>
-			deleteEntityRecord( 'root', 'widget', widget.id, {
-				force: true,
-			} )
+		const records = await registry
+			.dispatch( coreStore )
+			.__experimentalBatch( batchTasks );
+		const preservedRecords = records.filter(
+			( record ) => ! record.hasOwnProperty( 'deleted' )
 		);
-	}
 
-	const records = await registry
-		.dispatch( coreStore )
-		.__experimentalBatch( batchTasks );
-	const preservedRecords = records.filter(
-		( record ) => ! record.hasOwnProperty( 'deleted' )
-	);
+		const failedWidgetNames = [];
 
-	const failedWidgetNames = [];
+		for ( let i = 0; i < preservedRecords.length; i++ ) {
+			const widget = preservedRecords[ i ];
+			const { block, position } = batchMeta[ i ];
 
-	for ( let i = 0; i < preservedRecords.length; i++ ) {
-		const widget = preservedRecords[ i ];
-		const { block, position } = batchMeta[ i ];
+			// Set __internalWidgetId on the block. This will be persisted to the
+			// store when we dispatch receiveEntityRecords( post ) below.
+			post.blocks[ position ].attributes.__internalWidgetId = widget.id;
 
-		// Set __internalWidgetId on the block. This will be persisted to the
-		// store when we dispatch receiveEntityRecords( post ) below.
-		post.blocks[ position ].attributes.__internalWidgetId = widget.id;
+			const error = registry
+				.select( coreStore )
+				.getLastEntitySaveError( 'root', 'widget', widget.id );
+			if ( error ) {
+				failedWidgetNames.push( block.attributes?.name || block?.name );
+			}
 
-		const error = registry
-			.select( coreStore )
-			.getLastEntitySaveError( 'root', 'widget', widget.id );
-		if ( error ) {
-			failedWidgetNames.push( block.attributes?.name || block?.name );
+			if ( ! sidebarWidgetsIds[ position ] ) {
+				sidebarWidgetsIds[ position ] = widget.id;
+			}
 		}
 
-		if ( ! sidebarWidgetsIds[ position ] ) {
-			sidebarWidgetsIds[ position ] = widget.id;
+		if ( failedWidgetNames.length ) {
+			throw new Error(
+				sprintf(
+					/* translators: %s: List of widget names */
+					__( 'Could not save the following widgets: %s.' ),
+					failedWidgetNames.join( ', ' )
+				)
+			);
 		}
-	}
-
-	if ( failedWidgetNames.length ) {
-		throw new Error(
-			sprintf(
-				/* translators: %s: List of widget names */
-				__( 'Could not save the following widgets: %s.' ),
-				failedWidgetNames.join( ', ' )
-			)
+
+		registry.dispatch( coreStore ).editEntityRecord(
+			KIND,
+			WIDGET_AREA_ENTITY_TYPE,
+			widgetAreaId,
+			{
+				widgets: sidebarWidgetsIds,
+			},
+			{ undoIgnore: true }
 		);
-	}
-
-	registry.dispatch( coreStore ).editEntityRecord(
-		KIND,
-		WIDGET_AREA_ENTITY_TYPE,
-		widgetAreaId,
-		{
-			widgets: sidebarWidgetsIds,
-		},
-		{ undoIgnore: true }
-	);
-
-	dispatch( trySaveWidgetArea( widgetAreaId ) );
-
-	registry
-		.dispatch( coreStore )
-		.receiveEntityRecords( KIND, POST_TYPE, post, undefined );
-};
-
-const trySaveWidgetArea = ( widgetAreaId ) => ( { registry } ) => {
-	registry
-		.dispatch( coreStore )
-		.saveEditedEntityRecord( KIND, WIDGET_AREA_ENTITY_TYPE, widgetAreaId, {
-			throwOnError: true,
-		} );
-};
+
+		dispatch( trySaveWidgetArea( widgetAreaId ) );
+
+		registry
+			.dispatch( coreStore )
+			.receiveEntityRecords( KIND, POST_TYPE, post, undefined );
+	};
+
+const trySaveWidgetArea =
+	( widgetAreaId ) =>
+	( { registry } ) => {
+		registry
+			.dispatch( coreStore )
+			.saveEditedEntityRecord(
+				KIND,
+				WIDGET_AREA_ENTITY_TYPE,
+				widgetAreaId,
+				{
+					throwOnError: true,
+				}
+			);
+	};
 
 /**
  * Sets the clientId stored for a particular widgetId.
@@ -372,11 +376,13 @@ export function setIsListViewOpened( isOpen ) {
  *
  * @return {Object} Action creator.
  */
-export const closeGeneralSidebar = () => ( { registry } ) => {
-	registry
-		.dispatch( interfaceStore )
-		.disableComplementaryArea( editWidgetsStoreName );
-};
+export const closeGeneralSidebar =
+	() =>
+	( { registry } ) => {
+		registry
+			.dispatch( interfaceStore )
+			.disableComplementaryArea( editWidgetsStoreName );
+	};
 
 /**
  * Action that handles moving a block between widget areas
@@ -384,46 +390,44 @@ export const closeGeneralSidebar = () => ( { registry } ) => {
  * @param {string} clientId     The clientId of the block to move.
  * @param {string} widgetAreaId The id of the widget area to move the block to.
  */
-export const moveBlockToWidgetArea = ( clientId, widgetAreaId ) => async ( {
-	dispatch,
-	select,
-	registry,
-} ) => {
-	const sourceRootClientId = registry
-		.select( blockEditorStore )
-		.getBlockRootClientId( [ clientId ] );
-
-	// Search the top level blocks (widget areas) for the one with the matching
-	// id attribute. Makes the assumption that all top-level blocks are widget
-	// areas.
-	const widgetAreas = registry.select( blockEditorStore ).getBlocks();
-	const destinationWidgetAreaBlock = widgetAreas.find(
-		( { attributes } ) => attributes.id === widgetAreaId
-	);
-	const destinationRootClientId = destinationWidgetAreaBlock.clientId;
-
-	// Get the index for moving to the end of the the destination widget area.
-	const destinationInnerBlocksClientIds = registry
-		.select( blockEditorStore )
-		.getBlockOrder( destinationRootClientId );
-	const destinationIndex = destinationInnerBlocksClientIds.length;
-
-	// Reveal the widget area, if it's not open.
-	const isDestinationWidgetAreaOpen = select.getIsWidgetAreaOpen(
-		destinationRootClientId
-	);
-
-	if ( ! isDestinationWidgetAreaOpen ) {
-		dispatch.setIsWidgetAreaOpen( destinationRootClientId, true );
-	}
-
-	// Move the block.
-	registry
-		.dispatch( blockEditorStore )
-		.moveBlocksToPosition(
-			[ clientId ],
-			sourceRootClientId,
-			destinationRootClientId,
-			destinationIndex
+export const moveBlockToWidgetArea =
+	( clientId, widgetAreaId ) =>
+	async ( { dispatch, select, registry } ) => {
+		const sourceRootClientId = registry
+			.select( blockEditorStore )
+			.getBlockRootClientId( [ clientId ] );
+
+		// Search the top level blocks (widget areas) for the one with the matching
+		// id attribute. Makes the assumption that all top-level blocks are widget
+		// areas.
+		const widgetAreas = registry.select( blockEditorStore ).getBlocks();
+		const destinationWidgetAreaBlock = widgetAreas.find(
+			( { attributes } ) => attributes.id === widgetAreaId
 		);
-};
+		const destinationRootClientId = destinationWidgetAreaBlock.clientId;
+
+		// Get the index for moving to the end of the the destination widget area.
+		const destinationInnerBlocksClientIds = registry
+			.select( blockEditorStore )
+			.getBlockOrder( destinationRootClientId );
+		const destinationIndex = destinationInnerBlocksClientIds.length;
+
+		// Reveal the widget area, if it's not open.
+		const isDestinationWidgetAreaOpen = select.getIsWidgetAreaOpen(
+			destinationRootClientId
+		);
+
+		if ( ! isDestinationWidgetAreaOpen ) {
+			dispatch.setIsWidgetAreaOpen( destinationRootClientId, true );
+		}
+
+		// Move the block.
+		registry
+			.dispatch( blockEditorStore )
+			.moveBlocksToPosition(
+				[ clientId ],
+				sourceRootClientId,
+				destinationRootClientId,
+				destinationIndex
+			);
+	};