Move setting of attributes to the child images

WordPress · Mar 9, 2021 · 2590ad5 · 2590ad5
1 parent 4b82dcc
commit 2590ad5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 39 deletions.
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
@@ -2,13 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/image",
 	"category": "media",
-	"usesContext": [
-		"allowResize",
-		"isGrouped",
-		"linkTo",
-		"linkTarget",
-		"sizeSlug"
-	],
+	"usesContext": [ "allowResize", "linkTo", "linkTarget", "sizeSlug" ],
 	"attributes": {
 		"align": {
 			"type": "string"

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, omit, pick } from 'lodash';
+import { get, omit, pick, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,6 @@ export function ImageEdit( {
 		sizeSlug,
 		inhertedAttributes,
 	} = attributes;
-	const { isGrouped } = context;
 	const [ tempUrl, setTempUrl ] = useState();
 	const altRef = useRef();
 	useEffect( () => {
@@ -162,10 +161,9 @@ export function ImageEdit( {
 		}
 
 		// Check if default link setting, or the one inherited from parent block should be used.
-		let linkDestination =
-			isGrouped && context.linkTo
-				? context.linkTo
-				: attributes.linkDestination;
+		let linkDestination = context.linkTo
+			? context.linkTo
+			: attributes.linkDestination;
 
 		if ( ! linkDestination ) {
 			// Use the WordPress option to determine the proper default.
@@ -204,7 +202,7 @@ export function ImageEdit( {
 		}
 		mediaAttributes.href = href;
 
-		if ( isGrouped ) {
+		if ( ! isEmpty( context ) ) {
 			const parentSizeAttributes = getImageSizeAttributes(
 				media,
 				context.sizeSlug

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -93,7 +93,11 @@ export default function Image( {
 } ) {
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
-	const { allowResize = true, isGrouped = false } = context;
+	const {
+		allowResize = true,
+		linkTo: parentLinkDestination,
+		sizeSlug: parentSizeSlug,
+	} = context;
 	const { block, currentId, image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( coreStore );
@@ -108,7 +112,10 @@ export default function Image( {
 				block: getSelectedBlock(),
 				currentId: getSelectedBlockClientId(),
 				image:
-					id && ( isSelected || isGrouped ) ? getMedia( id ) : null,
+					id &&
+					( isSelected || parentLinkDestination || parentSizeSlug )
+						? getMedia( id )
+						: null,
 				multiImageSelection:
 					multiSelectedClientIds.length &&
 					multiSelectedClientIds.every(
@@ -117,7 +124,7 @@ export default function Image( {
 					),
 			};
 		},
-		[ id, isSelected, isGrouped ]
+		[ id, isSelected, parentLinkDestination ]
 	);
 	const { imageEditing, imageSizes, maxWidth, mediaUpload } = useSelect(
 		( select ) => {

diff --git a/packages/block-library/src/image/use-parent-attributes.js b/packages/block-library/src/image/use-parent-attributes.js
@@ -24,50 +24,43 @@ export default function useParentAttributes(
 	setAttributes
 ) {
 	const {
-		isGrouped,
 		linkTo: parentLinkDestination,
 		linkTarget: parentLinkTarget,
 		sizeSlug: parentSizeSlug,
 	} = context;
 
 	useEffect( () => {
-		if ( ! isGrouped ) {
+		if ( ! inheritedAttributes.linkDestination ) {
 			return;
 		}
-		if ( inheritedAttributes.linkDestination && image ) {
+		if ( image ) {
 			const href = getUrl( image, parentLinkDestination );
 			setAttributes( {
 				href,
 				linkDestination: parentLinkDestination,
 			} );
 		}
-	}, [ image, parentLinkDestination, isGrouped ] );
+	}, [ image, parentLinkDestination ] );
 
 	useEffect( () => {
-		if ( ! isGrouped ) {
+		if ( ! inheritedAttributes.linkTarget ) {
 			return;
 		}
-		if ( inheritedAttributes.linkTarget ) {
-			setAttributes( {
-				linkTarget: parentLinkTarget,
-			} );
-		}
-	}, [ parentLinkTarget, isGrouped ] );
+
+		setAttributes( {
+			linkTarget: parentLinkTarget,
+		} );
+	}, [ parentLinkTarget ] );
 
 	useEffect( () => {
-		if ( ! isGrouped ) {
+		if ( ! inheritedAttributes.sizeSlug ) {
 			return;
 		}
 
-		if ( inheritedAttributes.sizeSlug ) {
-			const sizeAttributes = getImageSizeAttributes(
-				image,
-				parentSizeSlug
-			);
+		const sizeAttributes = getImageSizeAttributes( image, parentSizeSlug );
 
-			setAttributes( {
-				...sizeAttributes,
-			} );
-		}
-	}, [ parentSizeSlug, isGrouped ] );
+		setAttributes( {
+			...sizeAttributes,
+		} );
+	}, [ parentSizeSlug ] );
 }