fix: syncing attributes from curated list block to inner blocks (#64)

Automattic · Jun 4, 2021 · cdbc0bb · cdbc0bb
1 parent a273a40
commit cdbc0bb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/src/blocks/curated-list/edit.js b/src/blocks/curated-list/edit.js
@@ -287,6 +287,19 @@ const CuratedListEditorComponent = ( {
 		setAttributes( { hasDarkBackground: false } );
 	}, [ backgroundColor ]);
 
+	/**
+	 * Sync parent attributes to inner blocks.
+	 */
+	useEffect(() => {
+		if ( list ) {
+			updateBlockAttributes(
+				[ list.clientId ].concat( list.innerBlocks.map( innerBlock => innerBlock.clientId ) ), // Array of client IDs for both list container and individual listings.
+				attributes,
+				false
+			);
+		}
+	}, [ JSON.stringify( attributes ) ]);
+
 	/**
 	 * Render the results of the listing query.
 	 *

diff --git a/src/blocks/list-container/edit.js b/src/blocks/list-container/edit.js
@@ -6,24 +6,12 @@ import { InnerBlocks, InspectorControls } from '@wordpress/block-editor';
 import { Notice, PanelRow, Spinner } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
 
-const ListContainerEditorComponent = ( {
-	clientId,
-	innerBlocks,
-	isSelected,
-	parent,
-	setAttributes,
-} ) => {
+const ListContainerEditorComponent = ( { clientId, innerBlocks, isSelected, parent } ) => {
 	const parentAttributes = parent.attributes || {};
 	const { queryMode, queryOptions, isSelected: parentIsSelected, showSortUi } = parentAttributes;
 	const { order } = queryOptions;
 
-	// Sync parent attributes to list container attributes, so that we can use parent attributes in the PHP render callback.
-	useEffect(() => {
-		setAttributes( { ...parentAttributes } );
-	}, [ JSON.stringify( parentAttributes ) ]);
-
 	if ( queryMode && ! showSortUi ) {
 		return null;
 	}

diff --git a/src/blocks/listing/edit.js b/src/blocks/listing/edit.js
@@ -35,8 +35,6 @@ const ListingEditorComponent = ( {
 
 		if ( 'newspack-listings/list-container' === blockInfo.name ) {
 			acc.listContainer = blockInfo;
-		} else if ( 'newspack-listings/curated-list' === blockInfo.name ) {
-			acc.curatedList = blockInfo;
 		}
 
 		return acc;
@@ -57,16 +55,11 @@ const ListingEditorComponent = ( {
 
 	// Fetch listing post data if we have a listing post ID.
 	useEffect(() => {
-		if ( listing ) {
+		if ( ! post && listing ) {
 			fetchPost( listing );
 		}
 	}, [ listing ]);
 
-	// Sync parent attributes to listing attributes, so that we can use parent attributes in the PHP render callback.
-	useEffect(() => {
-		setAttributes( { ...parent.curatedList.attributes } );
-	}, [ JSON.stringify( parent.curatedList.attributes ) ]);
-
 	// Fetch listing post by listingId.
 	const fetchPost = async listingId => {
 		try {
@@ -147,7 +140,7 @@ const ListingEditorComponent = ( {
 
 		return (
 			<div className="newspack-listings__listing-editor newspack-listings__listing">
-				<Listing attributes={ parent.curatedList.attributes } error={ error } post={ post } />
+				<Listing attributes={ attributes } error={ error } post={ post } />
 				{ post && (
 					<Button
 						isLink