Fetch media if isListItem is true

packages/block-library/src/gallery/block.json

@@ -49,7 +49,10 @@
 	},
 	"providesContext": {
 		"allowResize": "allowResize",
-		"isListItem": "isListItem"
+		"isListItem": "isListItem",
+		"linkTo": "linkTo",
+		"linkTarget": "linkTarget",
+		"sizeSlug": "sizeSlug"
 	},
 	"supports": {
 		"anchor": true,

packages/block-library/src/gallery/constants.js

@@ -1,3 +1,3 @@
 export const LINK_DESTINATION_NONE = 'none';
-export const LINK_DESTINATION_MEDIA = 'file';
-export const LINK_DESTINATION_ATTACHMENT = 'post';
+export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_ATTACHMENT = 'attachment';

packages/block-library/src/gallery/deprecated.js

@@ -13,12 +13,15 @@ import { createBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { getHrefAndDestination } from './utils';
 import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
+	LINK_DESTINATION_NONE,
 } from './constants';
 
+const DEPRECATED_LINK_DESTINATION_MEDIA = 'file';
+const DEPRECATED_LINK_DESTINATION_ATTACHMENT = 'post';
+
 /**
  * Original function to determine default number of columns from a block's
  * attributes.
@@ -32,6 +35,51 @@ export function defaultColumnsNumberV1( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
 
+/**
+ * Original function to determines new href and linkDestination values for an image block from the
+ * supplied Gallery link destination.
+ *
+ * Used in deprecations: v1-6.
+ *
+ * @param {Object} image       Gallery image.
+ * @param {string} destination Gallery's selected link destination.
+ * @return {Object}            New attributes to assign to image block.
+ */
+export function getHrefAndDestination( image, destination ) {
+	// Need to determine the URL that the selected destination maps to.
+	// Gutenberg and WordPress use different constants so the new link
+	// destination also needs to be tweaked.
+	switch ( destination ) {
+		case DEPRECATED_LINK_DESTINATION_MEDIA:
+			return {
+				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				linkDestination: LINK_DESTINATION_MEDIA,
+			};
+		case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
+			return {
+				href: image?.link,
+				linkDestination: LINK_DESTINATION_ATTACHMENT,
+			};
+		case LINK_DESTINATION_MEDIA:
+			return {
+				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				linkDestination: LINK_DESTINATION_MEDIA,
+			};
+		case LINK_DESTINATION_ATTACHMENT:
+			return {
+				href: image?.link,
+				linkDestination: LINK_DESTINATION_ATTACHMENT,
+			};
+		case LINK_DESTINATION_NONE:
+			return {
+				href: undefined,
+				linkDestination: LINK_DESTINATION_NONE,
+			};
+	}
+
+	return {};
+}
+
 const v1 = {
 	attributes: {
 		images: {
@@ -683,17 +731,16 @@ const v5 = {
 	supports: {
 		align: true,
 	},
-	isEligible( { linkTo } ) {
-		return ! linkTo || linkTo === 'attachment' || linkTo === 'media';
+	isEligible( { linkTo, imageCount } ) {
+		return (
+			! imageCount &&
+			( ! linkTo || linkTo === 'attachment' || linkTo === 'media' )
+		);
 	},
 	migrate( attributes ) {
 		let linkTo = attributes.linkTo;
 		if ( ! attributes.linkTo ) {
 			linkTo = 'none';
-		} else if ( attributes.linkTo === 'attachment' ) {
-			linkTo = 'post';
-		} else if ( attributes.linkTo === 'media' ) {
-			linkTo = 'file';
 		}
 		const imageBlocks = attributes.images.map( ( image ) => {
 			return createBlock( 'core/image', {
@@ -893,10 +940,10 @@ const v6 = {
 						let href;
 
 						switch ( linkTo ) {
-							case LINK_DESTINATION_MEDIA:
+							case DEPRECATED_LINK_DESTINATION_MEDIA:
 								href = image.fullUrl || image.url;
 								break;
-							case LINK_DESTINATION_ATTACHMENT:
+							case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
 								href = image.link;
 								break;
 						}
@@ -951,6 +998,11 @@ const v6 = {
 		return ! imageCount;
 	},
 	migrate( { images, imageCrop, linkTo, sizeSlug, columns, caption } ) {
+		if ( linkTo === 'post' ) {
+			linkTo = 'attachment';
+		} else if ( linkTo === 'file' ) {
+			linkTo = 'media';
+		}
 		const imageBlocks = images.map( ( image ) => {
 			return createBlock( 'core/image', {
 				id: parseInt( image.id ),

packages/block-library/src/gallery/edit.js

@@ -2,23 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import {
-	isEqual,
-	isEmpty,
-	find,
-	concat,
-	differenceBy,
-	some,
-	every,
-} from 'lodash';
+import { isEmpty, concat, differenceBy, some, every } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
-	Button,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
@@ -32,7 +23,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Platform, useEffect, useState } from '@wordpress/element';
+import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -45,7 +36,7 @@ import { createBlobURL } from '@wordpress/blob';
  */
 import { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
-import { getHrefAndDestination, getImageSizeAttributes } from './utils';
+import { getHrefAndDestination } from './utils';
 import { getUpdatedLinkTargetSettings } from '../image/utils';
 import Gallery from './gallery';
 import {
@@ -101,28 +92,7 @@ function GalleryEdit( props ) {
 		blockEditorStore
 	);
 
-	const currentImageOptions = useMemo(
-		() => ( {
-			linkTarget,
-			linkTo,
-			sizeSlug,
-		} ),
-		[ linkTarget, linkTo, sizeSlug ]
-	);
-	const [ imageSettings, setImageSettings ] = useState( currentImageOptions );
-	const [ dirtyImageOptions, setDirtyImageOptions ] = useState( false );
-
-	useEffect( () => {
-		const currentOptionsState = ! isEqual(
-			currentImageOptions,
-			imageSettings
-		);
-		if ( currentOptionsState !== dirtyImageOptions ) {
-			setDirtyImageOptions( currentOptionsState );
-		}
-	}, [ currentImageOptions, imageSettings ] );
-
-	const { getBlock, getSettings, preferredStyle } = useSelect( ( select ) => {
+	const { getSettings, preferredStyle } = useSelect( ( select ) => {
 		const settings = select( 'core/block-editor' ).getSettings();
 		const preferredStyleVariations =
 			settings.__experimentalPreferredStyleVariations;
@@ -188,9 +158,7 @@ function GalleryEdit( props ) {
 		getSettings
 	);
 
-	const { replaceInnerBlocks, updateBlockAttributes } = useDispatch(
-		'core/block-editor'
-	);
+	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
 
 	/**
 	 * Determines the image attributes that should be applied to an image block
@@ -263,6 +231,11 @@ function GalleryEdit( props ) {
 		const newBlocks = newImages.map( ( image ) => {
 			return createBlock( 'core/image', {
 				...buildImageAttributes( false, image ),
+				inheritedAttributes: {
+					linkDestination: true,
+					linkTarget: true,
+					sizeSlug: true,
+				},
 				id: image.id,
 			} );
 		} );
@@ -300,25 +273,6 @@ function GalleryEdit( props ) {
 		setAttributes( { linkTarget: linkTarget ? undefined : '_blank' } );
 	}
 
-	function applyImageOptions() {
-		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
-			const image = block.attributes.id
-				? find( imageData, { id: block.attributes.id } )
-				: null;
-			updateBlockAttributes( block.clientId, {
-				...getHrefAndDestination( image.data, linkTo ),
-				...getUpdatedLinkTargetSettings( linkTarget, block.attributes ),
-				...getImageSizeAttributes( image.data, sizeSlug ),
-			} );
-		} );
-		setDirtyImageOptions( false );
-		setImageSettings( currentImageOptions );
-	}
-
-	function cancelImageOptions() {
-		setAttributes( imageSettings );
-	}
-
 	function updateImagesSize( newSizeSlug ) {
 		setAttributes( { sizeSlug: newSizeSlug } );
 	}
@@ -435,20 +389,6 @@ function GalleryEdit( props ) {
 							</View>
 						</BaseControl>
 					) }
-					{ dirtyImageOptions && (
-						<View className={ 'gallery-settings-buttons' }>
-							<Button isPrimary onClick={ applyImageOptions }>
-								{ __( 'Apply to all images' ) }
-							</Button>
-							<Button
-								className={ 'cancel-apply-to-images' }
-								isLink
-								onClick={ cancelImageOptions }
-							>
-								{ __( 'Cancel' ) }
-							</Button>
-						</View>
-					) }
 				</PanelBody>
 			</InspectorControls>
 			{ noticeUI }

packages/block-library/src/gallery/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -49,20 +44,3 @@ export function getHrefAndDestination( image, destination ) {
 
 	return {};
 }
-
-/**
- * Determines new Image block attributes affected by a change in Gallery image
- * size selection.
- *
- * @param {Object} image Media file object for gallery image.
- * @param {string} size  Gallery's selected size slug to apply.
- */
-export function getImageSizeAttributes( image, size ) {
-	const url = get( image, [ 'media_details', 'sizes', size, 'source_url' ] );
-
-	if ( url ) {
-		return { url, width: undefined, height: undefined, sizeSlug: size };
-	}
-
-	return {};
-}

packages/block-library/src/image/block.json

@@ -2,7 +2,13 @@
 	"apiVersion": 2,
 	"name": "core/image",
 	"category": "media",
-	"usesContext": [ "allowResize", "isListItem" ],
+	"usesContext": [
+		"allowResize",
+		"isListItem",
+		"linkTo",
+		"linkTarget",
+		"sizeSlug"
+	],
 	"attributes": {
 		"align": {
 			"type": "string"
@@ -73,6 +79,14 @@
 		"isListItem": {
 			"type": "boolean",
 			"default": false
+		},
+		"inheritedAttributes": {
+			"type": "object",
+			"default": {
+				"linkTo": false,
+				"linkTarget": false,
+				"sizeSlug": false
+			}
 		}
 	},
 	"supports": {