@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/gallery/use-get-media.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Retrieves the extended media info for each gallery image from the store. This is used to
+ * determine which image size options are available for the current gallery.
+ *
+ * @param {Array} innerBlockImages An array of the innerBlock images currently in the gallery.
+ *
+ * @return {Array} An array of media info options for each gallery image.
+ */
+export default function useGetMedia( innerBlockImages ) {
+	const [ currentImageMedia, setCurrentImageMedia ] = useState( [] );
+
+	const imageMedia = useSelect(
+		( select ) => {
+			if ( ! innerBlockImages?.length ) {
+				return currentImageMedia;
+			}
+
+			const imageIds = innerBlockImages
+				.map( ( imageBlock ) => imageBlock.attributes.id )
+				.filter( ( id ) => id !== undefined );
+
+			if ( imageIds.length === 0 ) {
+				return currentImageMedia;
+			}
+
+			return select( coreStore ).getMediaItems( {
+				include: imageIds.join( ',' ),
+				per_page: -1,
+			} );
+		},
+		[ innerBlockImages ]
+	);
+
+	if (
+		imageMedia?.length !== currentImageMedia?.length ||
+		imageMedia?.some(
+			( newImage ) =>
+				! currentImageMedia.find(
+					( currentImage ) => currentImage.id === newImage.id
+				)
+		)
+	) {
+		setCurrentImageMedia( imageMedia );
+		return imageMedia;
+	}
+	return currentImageMedia;
+}

package/src/gallery/use-get-new-images.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Keeps track of images already in the gallery to allow new innerBlocks to be identified. This
+ * is required so default gallery attributes can be applied without overwriting any custom
+ * attributes applied to existing images.
+ *
+ * @param {Array} images    Basic image block data taken from current gallery innerBlock
+ * @param {Array} imageData The related image data for each of the current gallery images.
+ *
+ * @return {Array} An array of any new images that have been added to the gallery.
+ */
+export default function useGetNewImages( images, imageData ) {
+	const [ currentImages, setCurrentImages ] = useState( [] );
+
+	return useMemo( () => getNewImages(), [ images, imageData ] );
+
+	function getNewImages() {
+		let imagesUpdated = false;
+
+		// First lets check if any images have been deleted.
+		const newCurrentImages = currentImages.filter( ( currentImg ) =>
+			images.find( ( img ) => {
+				return currentImg.clientId === img.clientId;
+			} )
+		);
+
+		if ( newCurrentImages.length < currentImages.length ) {
+			imagesUpdated = true;
+		}
+
+		// Now lets see if we have any images hydrated from saved content and if so
+		// add them to currentImages state.
+		images.forEach( ( image ) => {
+			if (
+				image.fromSavedContent &&
+				! newCurrentImages.find(
+					( currentImage ) => currentImage.id === image.id
+				)
+			) {
+				imagesUpdated = true;
+				newCurrentImages.push( image );
+			}
+		} );
+
+		// Now check for any new images that have been added to InnerBlocks and for which
+		// we have the imageData we need for setting default block attributes.
+		const newImages = images.filter(
+			( image ) =>
+				! newCurrentImages.find(
+					( currentImage ) =>
+						image.clientId &&
+						currentImage.clientId === image.clientId
+				) &&
+				imageData?.find( ( img ) => img.id === image.id ) &&
+				! image.fromSavedConent
+		);
+
+		if ( imagesUpdated || newImages?.length > 0 ) {
+			setCurrentImages( [ ...newCurrentImages, ...newImages ] );
+		}
+
+		return newImages.length > 0 ? newImages : null;
+	}
+}

package/src/gallery/use-image-sizes.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { get, some } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Calculates the image sizes that are avaible for the current gallery images in order to
+ * populate the 'Image size' selector.
+ *
+ * @param {Array}    images      Basic image block data taken from current gallery innerBlock
+ * @param {boolean}  isSelected  Is the block currently selected in the editor.
+ * @param {Function} getSettings Block editor store selector.
+ *
+ * @return {Array} An array of image size options.
+ */
+export default function useImageSizes( images, isSelected, getSettings ) {
+	return useMemo( () => getImageSizing(), [ images, isSelected ] );
+
+	function getImageSizing() {
+		if ( ! images || images.length === 0 ) {
+			return;
+		}
+		const { imageSizes } = getSettings();
+		let resizedImages = {};
+
+		if ( isSelected ) {
+			resizedImages = images.reduce( ( currentResizedImages, img ) => {
+				if ( ! img.id ) {
+					return currentResizedImages;
+				}
+
+				const sizes = imageSizes.reduce( ( currentSizes, size ) => {
+					const defaultUrl = get( img, [
+						'sizes',
+						size.slug,
+						'url',
+					] );
+					const mediaDetailsUrl = get( img, [
+						'media_details',
+						'sizes',
+						size.slug,
+						'source_url',
+					] );
+					return {
+						...currentSizes,
+						[ size.slug ]: defaultUrl || mediaDetailsUrl,
+					};
+				}, {} );
+				return {
+					...currentResizedImages,
+					[ parseInt( img.id, 10 ) ]: sizes,
+				};
+			}, {} );
+		}
+		return imageSizes
+			.filter( ( { slug } ) =>
+				some( resizedImages, ( sizes ) => sizes[ slug ] )
+			)
+			.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
+	}
+}

package/src/gallery/use-mobile-warning.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function useMobileWarning() {
+	const { createWarningNotice } = useDispatch( noticesStore );
+	const { toggleFeature } = useDispatch( interfaceStore );
+	const isMobileWarningActive = useSelect( ( select ) => {
+		const { isFeatureActive } = select( interfaceStore );
+		return isFeatureActive( 'core/edit-post', 'mobileGalleryWarning' );
+	}, [] );
+
+	if ( ! isMobileWarningActive ) {
+		return;
+	}
+
+	createWarningNotice(
+		__(
+			'Editing this Gallery in the WordPress mobile app requires version 18.2 or higher.'
+		),
+		{ type: 'snackbar', explicitDismiss: true }
+	);
+	toggleFeature( 'core/edit-post', 'mobileGalleryWarning' );
+}

package/src/gallery/use-short-code-transform.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { every } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Shortcode transforms don't currently have a tranform method and so can't use a selector to
+ * retrieve the data for each image being transformer, so this selector handle this post transformation.
+ *
+ * @param {Array} shortCodeTransforms An array of image data passed from the shortcode transform.
+ *
+ * @return {Array} An array of extended image data objects for each of the shortcode transform images.
+ */
+export default function useShortCodeTransform( shortCodeTransforms ) {
+	const newImageData = useSelect(
+		( select ) => {
+			if ( ! shortCodeTransforms || shortCodeTransforms.length === 0 ) {
+				return;
+			}
+			const getMedia = select( coreStore ).getMedia;
+			return shortCodeTransforms.map( ( image ) => {
+				const imageData = getMedia( image.id );
+				if ( imageData ) {
+					return {
+						id: imageData.id,
+						type: 'image',
+						url: imageData.source_url,
+						mime: imageData.mime_type,
+						alt: imageData.alt_text,
+						link: imageData.link,
+					};
+				}
+				return undefined;
+			} );
+		},
+		[ shortCodeTransforms ]
+	);
+
+	if ( ! newImageData ) {
+		return;
+	}
+
+	if ( every( newImageData, ( img ) => img && img.url ) ) {
+		return newImageData;
+	}
+}

package/src/gallery/utils.js

@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import {
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA,
+	LINK_DESTINATION_NONE,
+} from './constants';
+import {
+	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA as IMAGE_LINK_DESTINATION_MEDIA,
+	LINK_DESTINATION_NONE as IMAGE_LINK_DESTINATION_NONE,
+} from '../image/constants';
+
+/**
+ * Determines new href and linkDestination values for an image block from the
+ * supplied Gallery link destination.
+ *
+ * @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 LINK_DESTINATION_MEDIA:
+			return {
+				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
+			};
+		case LINK_DESTINATION_ATTACHMENT:
+			return {
+				href: image?.link,
+				linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT,
+			};
+		case LINK_DESTINATION_NONE:
+			return {
+				href: undefined,
+				linkDestination: IMAGE_LINK_DESTINATION_NONE,
+			};
+	}
+
+	return {};
+}

package/src/gallery/v1/constants.js

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