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

package/src/gallery/save.js

@@ -1,74 +1,40 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { defaultColumnsNumber } from './shared';
 import {
-	LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA,
-} from './constants';
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const {
-		images,
-		columns = defaultColumnsNumber( attributes ),
-		imageCrop,
-		caption,
-		linkTo,
-	} = attributes;
-	const className = `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }`;
+/**
+ * Internal dependencies
+ */
+import saveWithoutInnerBlocks from './v1/save';
 
-	return (
-		<figure { ...useBlockProps.save( { className } ) }>
-			<ul className="blocks-gallery-grid">
-				{ images.map( ( image ) => {
-					let href;
+export default function saveWithInnerBlocks( { attributes } ) {
+	if ( attributes?.ids?.length > 0 || attributes?.images?.length > 0 ) {
+		return saveWithoutInnerBlocks( { attributes } );
+	}
 
-					switch ( linkTo ) {
-						case LINK_DESTINATION_MEDIA:
-							href = image.fullUrl || image.url;
-							break;
-						case LINK_DESTINATION_ATTACHMENT:
-							href = image.link;
-							break;
-					}
+	const { caption, columns, imageCrop } = attributes;
 
-					const img = (
-						<img
-							src={ image.url }
-							alt={ image.alt }
-							data-id={ image.id }
-							data-full-url={ image.fullUrl }
-							data-link={ image.link }
-							className={
-								image.id ? `wp-image-${ image.id }` : null
-							}
-						/>
-					);
+	const className = classnames( 'has-nested-images', {
+		[ `columns-${ columns }` ]: columns !== undefined,
+		[ `columns-default` ]: columns === undefined,
+		'is-cropped': imageCrop,
+	} );
+	const blockProps = useBlockProps.save( { className } );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-					return (
-						<li
-							key={ image.id || image.url }
-							className="blocks-gallery-item"
-						>
-							<figure>
-								{ href ? <a href={ href }>{ img }</a> : img }
-								{ ! RichText.isEmpty( image.caption ) && (
-									<RichText.Content
-										tagName="figcaption"
-										className="blocks-gallery-item__caption"
-										value={ image.caption }
-									/>
-								) }
-							</figure>
-						</li>
-					);
-				} ) }
-			</ul>
+	return (
+		<figure { ...innerBlocksProps }>
+			{ innerBlocksProps.children }
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"

package/src/gallery/shared.js

@@ -3,8 +3,8 @@
  */
 import { get, pick } from 'lodash';
 
-export function defaultColumnsNumber( attributes ) {
-	return Math.min( 3, attributes.images.length );
+export function defaultColumnsNumber( imageCount ) {
+	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {

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', {