@wordpress/block-library 5.0.1 → 6.0.1

package/src/gallery/shared.js

@@ -3,8 +3,13 @@
  */
 import { get, pick } from 'lodash';
 
-export function defaultColumnsNumber( attributes ) {
-	return Math.min( 3, attributes.images.length );
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function defaultColumnsNumber( imageCount ) {
+	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
@@ -19,5 +24,7 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	if ( fullUrl ) {
 		imageProps.fullUrl = fullUrl;
 	}
+	imageProps.alt =
+		imageProps.alt !== '' ? imageProps.alt : __( 'Image gallery image' );
 	return imageProps;
 };

package/src/gallery/style.scss

@@ -1,129 +1,169 @@
-.wp-block-gallery,
-.blocks-gallery-grid {
+// Import styles for rendering the static content of deprecated gallery versions.
+@import "./deprecated.scss";
+
+// Styles for current version of gallery block.
+.wp-block-gallery.has-nested-images {
 	display: flex;
 	flex-wrap: wrap;
-	list-style-type: none;
-	padding: 0;
-	// Some themes give all <ul> default margin instead of padding.
-	margin: 0;
-
-	.blocks-gallery-image,
-	.blocks-gallery-item {
+	// Need bogus :not(#individual-image) to override long :not()
+	// specificity chain on default image block on front end.
+	figure.wp-block-image:not(#individual-image) {
 		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 1em 1em 0;
-		display: flex;
-		flex-grow: 1;
-		flex-direction: column;
-		justify-content: center;
-		position: relative;
-		align-self: flex-start;
+		margin: 0 var(--gallery-block--gutter-size, #{$grid-unit-20}) var(--gallery-block--gutter-size, #{$grid-unit-20}) 0;
 
-		// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
-		width: calc(50% - 1em);
+		&:last-of-type:not(#individual-image) {
+			margin-right: 0;
+		}
+
+		width: calc(50% - (var(--gallery-block--gutter-size, #{$grid-unit-20}) / 2));
 
 		&:nth-of-type(even) {
 			margin-right: 0;
 		}
+	}
 
-		figure {
-			margin: 0;
-			height: 100%;
+	figure.wp-block-image {
+		display: flex;
+		flex-grow: 1;
+		justify-content: center;
+		position: relative;
+		margin-top: auto;
+		margin-bottom: auto;
+		flex-direction: column;
 
-			// IE doesn't support flex so omit that.
-			@supports (position: sticky) {
-				display: flex;
-				align-items: flex-end;
-				justify-content: flex-start;
-			}
+		> div,
+		> a {
+			margin: 0;
+			flex-direction: column;
+			flex-grow: 1;
 		}
 
 		img {
 			display: block;
-			max-width: 100%;
 			height: auto;
-
-			// IE doesn't handle cropping, so we need an explicit width here.
-			width: 100%;
-
-			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-			@supports (position: sticky) {
-				width: auto;
-			}
+			max-width: 100%;
+			width: auto;
 		}
 
 		figcaption {
-			position: absolute;
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
 			bottom: 0;
-			width: 100%;
-			max-height: 100%;
-			overflow: auto;
-			padding: 3em 0.77em 0.7em;
 			color: $white;
+			font-size: $default-font-size;
+			left: 0;
+			margin-bottom: 0;
+			max-height: 60%;
+			overflow: auto;
+			padding: 0 8px 8px;
+			position: absolute;
 			text-align: center;
-			font-size: 0.8em;
-			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			width: 100%;
 			box-sizing: border-box;
-			margin: 0;
 
 			img {
 				display: inline;
 			}
 		}
+
+		&.is-style-rounded {
+			> div,
+			> a {
+				flex: 1 1 auto;
+			}
+			figcaption {
+				flex: initial;
+				background: none;
+				color: inherit;
+				margin: 0;
+				padding: 10px 10px 9px;
+				position: relative;
+			}
+		}
 	}
 
 	figcaption {
 		flex-grow: 1;
+		flex-basis: 100%;
+		text-align: center;
 	}
 
-	// Cropped
-	&.is-cropped .blocks-gallery-image,
-	&.is-cropped .blocks-gallery-item {
+	// Non cropped images.
+	&:not(.is-cropped) {
+
+		figure.wp-block-image:not(#individual-image) {
+			margin-top: 0;
+			margin-bottom: auto;
+			img {
+				margin-bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
+			}
+
+			figcaption {
+				bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
+			}
+		}
+	}
+
+	// Cropped Images.
+	&.is-cropped figure.wp-block-image:not(#individual-image) {
 		align-self: inherit;
+		> div:not(.components-drop-zone),
+		> a {
+			display: flex;
+		}
 
 		a,
 		img {
-			// IE11 doesn't support object-fit, so just make sure images aren't skewed.
-			// The following rules are for all browsers.
 			width: 100%;
-
-			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-			@supports (position: sticky) {
-				height: 100%;
-				flex: 1;
-				object-fit: cover;
-			}
+			flex: 1 0 0%;
+			height: 100%;
+			object-fit: cover;
 		}
 	}
 
-	&.columns-1 .blocks-gallery-image,
-	&.columns-1 .blocks-gallery-item {
-		width: 100%;
+	&.columns-1 figure.wp-block-image:not(#individual-image) {
 		margin-right: 0;
+		width: 100%;
 	}
 
 	// Beyond mobile viewports, we allow up to 8 columns.
 	@include break-small {
 		@for $i from 3 through 8 {
-			&.columns-#{ $i } .blocks-gallery-image,
-			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(#{ math.div(100%, $i) } - #{ math.div(1em * ( $i - 1 ), $i) });
-				margin-right: 1em;
+			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
+				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
+				width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
+
 			}
-		}
 
+			// Prevent collapsing margin while sibling is being dragged.
+			&.columns-#{$i} figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
+			}
+		}
 		// Unset the right margin on every rightmost gallery item to ensure center balance.
 		@for $column-count from 1 through 8 {
-			&.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
-			&.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
+			&.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) {
 				margin-right: 0;
 			}
 		}
-	}
-
-	// Last item always needs margins reset.
-	.blocks-gallery-image:last-child,
-	.blocks-gallery-item:last-child {
-		margin-right: 0;
+		// If number of columns not explicitly set default to 3 columns if 3 or more images.
+		&.columns-default {
+			figure.wp-block-image:not(#individual-image) {
+				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
+				width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * #{math.div(2, 3)}));
+			}
+			figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) {
+				margin-right: 0;
+			}
+			// If only 2 child images use 2 columns.
+			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
+			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
+				width: calc(50% - (var(--gallery-block--gutter-size, 16px) * 0.5));
+			}
+			// For a single image set to 100%.
+			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
+				width: 100%;
+			}
+		}
 	}
 
 	// Apply max-width to floated items that have no intrinsic width.
@@ -135,8 +175,6 @@
 
 	// If the gallery is centered, center the content inside as well.
 	&.aligncenter {
-		.blocks-gallery-item figure {
-			justify-content: center;
-		}
+		justify-content: center;
 	}
 }

package/src/gallery/transforms.js

@@ -8,12 +8,23 @@ import { filter, every, toString } from 'lodash';
  */
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
+import {
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA,
+} from './constants';
+import {
+	LINK_DESTINATION_ATTACHMENT as DEPRECATED_LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA as DEPRECATED_LINK_DESTINATION_MEDIA,
+} from './v1/constants';
 import { pickRelevantMediaFiles } from './shared';
-import { LINK_DESTINATION_ATTACHMENT } from './constants';
 
 const parseShortcodeIds = ( ids ) => {
 	if ( ! ids ) {
@@ -23,6 +34,98 @@ const parseShortcodeIds = ( ids ) => {
 	return ids.split( ',' ).map( ( id ) => parseInt( id, 10 ) );
 };
 
+/**
+ * Third party block plugins don't have an easy way to detect if the
+ * innerBlocks version of the Gallery is running when they run a
+ * 3rdPartyBlock -> GalleryBlock transform so this tranform filter
+ * will handle this. Once the innerBlocks version is the default
+ * in a core release, this could be deprecated and removed after
+ * plugin authors have been given time to update transforms.
+ *
+ * @typedef  {Object} Attributes
+ * @typedef  {Object} Block
+ * @property {Attributes} attributes The attributes of the block.
+ * @param    {Block}      block      The transformed block.
+ * @return   {Block}                 The transformed block.
+ */
+function updateThirdPartyTransformToGallery( block ) {
+	const settings = select( blockEditorStore ).getSettings();
+	if (
+		settings.__unstableGalleryWithImageBlocks &&
+		block.name === 'core/gallery' &&
+		block.attributes?.images.length > 0
+	) {
+		const innerBlocks = block.attributes.images.map(
+			( { url, id, alt } ) => {
+				return createBlock( 'core/image', {
+					url,
+					id: id ? parseInt( id, 10 ) : null,
+					alt,
+					sizeSlug: block.attributes.sizeSlug,
+					linkDestination: block.attributes.linkDestination,
+				} );
+			}
+		);
+
+		delete block.attributes.ids;
+		delete block.attributes.images;
+		block.innerBlocks = innerBlocks;
+	}
+
+	return block;
+}
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/gallery/update-third-party-transform-to',
+	updateThirdPartyTransformToGallery
+);
+
+/**
+ * Third party block plugins don't have an easy way to detect if the
+ * innerBlocks version of the Gallery is running when they run a
+ * GalleryBlock -> 3rdPartyBlock transform so this transform filter
+ * will handle this. Once the innerBlocks version is the default
+ * in a core release, this could be deprecated and removed after
+ * plugin authors have been given time to update transforms.
+ *
+ * @typedef  {Object} Attributes
+ * @typedef  {Object} Block
+ * @property {Attributes} attributes The attributes of the block.
+ * @param    {Block}      toBlock    The block to transform to.
+ * @param    {Block[]}    fromBlocks The blocks to transform from.
+ * @return   {Block}                 The transformed block.
+ */
+function updateThirdPartyTransformFromGallery( toBlock, fromBlocks ) {
+	const from = Array.isArray( fromBlocks ) ? fromBlocks : [ fromBlocks ];
+	const galleryBlock = from.find(
+		( transformedBlock ) =>
+			transformedBlock.name === 'core/gallery' &&
+			transformedBlock.innerBlocks.length > 0 &&
+			! transformedBlock.attributes.images?.length > 0 &&
+			! toBlock.name.includes( 'core/' )
+	);
+
+	if ( galleryBlock ) {
+		const images = galleryBlock.innerBlocks.map(
+			( { attributes: { url, id, alt } } ) => ( {
+				url,
+				id: id ? parseInt( id, 10 ) : null,
+				alt,
+			} )
+		);
+		const ids = images.map( ( { id } ) => id );
+		galleryBlock.attributes.images = images;
+		galleryBlock.attributes.ids = ids;
+	}
+
+	return toBlock;
+}
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/gallery/update-third-party-transform-from',
+	updateThirdPartyTransformFromGallery
+);
+
 const transforms = {
 	from: [
 		{
@@ -42,6 +145,22 @@ const transforms = {
 
 				const validImages = filter( attributes, ( { url } ) => url );
 
+				const settings = select( blockEditorStore ).getSettings();
+				if ( settings.__unstableGalleryWithImageBlocks ) {
+					const innerBlocks = validImages.map( ( image ) => {
+						return createBlock( 'core/image', image );
+					} );
+
+					return createBlock(
+						'core/gallery',
+						{
+							align,
+							sizeSlug,
+						},
+						innerBlocks
+					);
+				}
+
 				return createBlock( 'core/gallery', {
 					images: validImages.map(
 						( { id, url, alt, caption } ) => ( {
@@ -60,19 +179,43 @@ const transforms = {
 		{
 			type: 'shortcode',
 			tag: 'gallery',
+
 			attributes: {
 				images: {
 					type: 'array',
 					shortcode: ( { named: { ids } } ) => {
-						return parseShortcodeIds( ids ).map( ( id ) => ( {
-							id: toString( id ),
-						} ) );
+						const settings = select(
+							blockEditorStore
+						).getSettings();
+						if ( ! settings.__unstableGalleryWithImageBlocks ) {
+							return parseShortcodeIds( ids ).map( ( id ) => ( {
+								id: toString( id ),
+							} ) );
+						}
 					},
 				},
 				ids: {
 					type: 'array',
 					shortcode: ( { named: { ids } } ) => {
-						return parseShortcodeIds( ids );
+						const settings = select(
+							blockEditorStore
+						).getSettings();
+						if ( ! settings.__unstableGalleryWithImageBlocks ) {
+							return parseShortcodeIds( ids );
+						}
+					},
+				},
+				shortCodeTransforms: {
+					type: 'array',
+					shortcode: ( { named: { ids } } ) => {
+						const settings = select(
+							blockEditorStore
+						).getSettings();
+						if ( settings.__unstableGalleryWithImageBlocks ) {
+							return parseShortcodeIds( ids ).map( ( id ) => ( {
+								id: parseInt( id ),
+							} ) );
+						}
 					},
 				},
 				columns: {
@@ -83,10 +226,28 @@ const transforms = {
 				},
 				linkTo: {
 					type: 'string',
-					shortcode: ( {
-						named: { link = LINK_DESTINATION_ATTACHMENT },
-					} ) => {
-						return link;
+					shortcode: ( { named: { link } } ) => {
+						const settings = select(
+							blockEditorStore
+						).getSettings();
+						if ( ! settings.__unstableGalleryWithImageBlocks ) {
+							switch ( link ) {
+								case 'post':
+									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
+								case 'file':
+									return DEPRECATED_LINK_DESTINATION_MEDIA;
+								default:
+									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
+							}
+						}
+						switch ( link ) {
+							case 'post':
+								return LINK_DESTINATION_ATTACHMENT;
+							case 'file':
+								return LINK_DESTINATION_MEDIA;
+							default:
+								return LINK_DESTINATION_NONE;
+						}
 					},
 				},
 			},
@@ -95,8 +256,13 @@ const transforms = {
 			},
 		},
 		{
-			// When created by drag and dropping multiple files on an insertion point
+			// When created by drag and dropping multiple files on an insertion point. Because multiple
+			// files must not be transformed to a gallery when dropped within a gallery there is another transform
+			// within the image block to handle that case. Therefore this transform has to have priority 1
+			// set so that it overrrides the image block transformation when mulitple images are dropped outside
+			// of a gallery block.
 			type: 'files',
+			priority: 1,
 			isMatch( files ) {
 				return (
 					files.length !== 1 &&
@@ -107,6 +273,16 @@ const transforms = {
 				);
 			},
 			transform( files ) {
+				const settings = select( blockEditorStore ).getSettings();
+				if ( settings.__unstableGalleryWithImageBlocks ) {
+					const innerBlocks = files.map( ( file ) =>
+						createBlock( 'core/image', {
+							url: createBlobURL( file ),
+						} )
+					);
+
+					return createBlock( 'core/gallery', {}, innerBlocks );
+				}
 				const block = createBlock( 'core/gallery', {
 					images: files.map( ( file ) =>
 						pickRelevantMediaFiles( {
@@ -122,7 +298,32 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { images, align, sizeSlug, ids } ) => {
+			transform: ( { align, images, ids, sizeSlug }, innerBlocks ) => {
+				const settings = select( blockEditorStore ).getSettings();
+				if ( settings.__unstableGalleryWithImageBlocks ) {
+					if ( innerBlocks.length > 0 ) {
+						return innerBlocks.map(
+							( {
+								attributes: {
+									id,
+									url,
+									alt,
+									caption,
+									imageSizeSlug,
+								},
+							} ) =>
+								createBlock( 'core/image', {
+									id,
+									url,
+									alt,
+									caption,
+									sizeSlug: imageSizeSlug,
+									align,
+								} )
+						);
+					}
+					return createBlock( 'core/image', { align } );
+				}
 				if ( images.length > 0 ) {
 					return images.map( ( { url, alt, caption }, index ) =>
 						createBlock( 'core/image', {

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

@@ -0,0 +1,59 @@
+/**
+ * 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;
+			}
+			const getMedia = select( coreStore ).getMedia;
+			const newImageMedia = imageIds.map( ( img ) => {
+				return getMedia( img );
+			} );
+
+			if ( newImageMedia.some( ( img ) => ! img ) ) {
+				return currentImageMedia;
+			}
+
+			return newImageMedia;
+		},
+		[ 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;
+	}
+}