@wordpress/block-library 5.0.1 → 6.0.1

package/src/file/transforms.js

@@ -10,6 +10,7 @@ import { createBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { getFilename } from '@wordpress/url';
 
 const transforms = {
 	from: [
@@ -72,7 +73,8 @@ const transforms = {
 			transform: ( attributes ) => {
 				return createBlock( 'core/file', {
 					href: attributes.url,
-					fileName: attributes.caption,
+					fileName:
+						attributes.caption || getFilename( attributes.url ),
 					textLinkHref: attributes.url,
 					id: attributes.id,
 					anchor: attributes.anchor,

package/src/gallery/block.json

@@ -58,6 +58,13 @@
 			},
 			"default": []
 		},
+		"shortCodeTransforms": {
+			"type": "array",
+			"default": [],
+			"items": {
+				"type": "object"
+			}
+		},
 		"columns": {
 			"type": "number",
 			"minimum": 1,
@@ -72,14 +79,25 @@
 			"type": "boolean",
 			"default": true
 		},
+		"linkTarget": {
+			"type": "string"
+		},
 		"linkTo": {
 			"type": "string"
 		},
 		"sizeSlug": {
 			"type": "string",
 			"default": "large"
+		},
+		"allowResize": {
+			"type": "boolean",
+			"default": false
 		}
 	},
+	"providesContext": {
+		"allowResize": "allowResize",
+		"imageCrop": "imageCrop"
+	},
 	"supports": {
 		"anchor": true,
 		"align": true

package/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';

package/src/gallery/deprecated.js

@@ -10,9 +10,17 @@ import { map, some } from 'lodash';
 import { RichText } from '@wordpress/block-editor';
 
 /**
- * Internal dependencies
+ * Original function to determine default number of columns from a block's
+ * attributes.
+ *
+ * Used in deprecations: v1-6, for versions of the gallery block that didn't use inner blocks.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {number}           Default number of columns for the gallery.
  */
-import { defaultColumnsNumber } from './shared';
+export function defaultColumnsNumberV1( attributes ) {
+	return Math.min( 3, attributes.images.length );
+}
 
 const deprecated = [
 	{
@@ -114,7 +122,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				caption,
 				linkTo,
@@ -270,7 +278,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				caption,
 				linkTo,
@@ -409,7 +417,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				linkTo,
 			} = attributes;
@@ -549,7 +557,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				linkTo,
 			} = attributes;
@@ -655,7 +663,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				align,
 				imageCrop,
 				linkTo,

package/src/gallery/deprecated.scss

@@ -0,0 +1,132 @@
+// Deprecated gallery styles pre refactoring to use nested image blocks.
+// https://github.com/WordPress/gutenberg/pull/25940.
+.wp-block-gallery,
+.blocks-gallery-grid {
+	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 {
+		// 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;
+
+		// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
+		width: calc(50% - 1em);
+
+		&:nth-of-type(even) {
+			margin-right: 0;
+		}
+
+		figure {
+			margin: 0;
+			height: 100%;
+			display: flex;
+			align-items: flex-end;
+			justify-content: flex-start;
+		}
+
+		img {
+			display: block;
+			max-width: 100%;
+			height: auto;
+			width: auto;
+		}
+
+		figcaption {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			max-height: 100%;
+			overflow: auto;
+			padding: 3em 0.77em 0.7em;
+			color: $white;
+			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);
+			box-sizing: border-box;
+			margin: 0;
+			z-index: 2;
+			img {
+				display: inline;
+			}
+		}
+	}
+
+	figcaption {
+		flex-grow: 1;
+	}
+
+	// Cropped
+	&.is-cropped .blocks-gallery-image,
+	&.is-cropped .blocks-gallery-item {
+		a,
+		img {
+			width: 100%;
+			height: 100%;
+			flex: 1;
+			object-fit: cover;
+		}
+	}
+
+	&.columns-1 .blocks-gallery-image,
+	&.columns-1 .blocks-gallery-item {
+		width: 100%;
+		margin-right: 0;
+	}
+
+	// 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;
+			}
+		}
+
+		// 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) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	// Last item always needs margins reset.
+	.blocks-gallery-image:last-child,
+	.blocks-gallery-item:last-child {
+		margin-right: 0;
+	}
+
+	// Apply max-width to floated items that have no intrinsic width.
+	&.alignleft,
+	&.alignright {
+		max-width: $content-width * 0.5;
+		width: 100%;
+	}
+
+	// If the gallery is centered, center the content inside as well.
+	&.aligncenter {
+		.blocks-gallery-item figure {
+			justify-content: center;
+		}
+	}
+}
+.wp-block-gallery {
+	// Non cropped images.
+	&:not(.is-cropped) {
+		.blocks-gallery-item {
+			align-self: flex-start;
+		}
+	}
+}

package/src/gallery/edit-wrapper.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import EditWithInnerBlocks from './edit';
+import EditWithoutInnerBlocks from './v1/edit';
+
+/*
+ * Using a wrapper around the logic to load the edit for v1 of Gallery block
+ * or the refactored version with InnerBlocks. This is to prevent conditional
+ * use of hooks lint errors if adding this logic to the top of the edit component.
+ */
+export default function GalleryEditWrapper( props ) {
+	const { attributes, clientId } = props;
+
+	const innerBlockImages = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
+		},
+		[ clientId ]
+	);
+
+	const __unstableGalleryWithImageBlocks = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return settings.__unstableGalleryWithImageBlocks;
+	}, [] );
+
+	// This logic is used to infer version information from content with higher
+	// precedence than the flag. New galleries (and existing empty galleries) will
+	// honor the flag.
+	const hasNewVersionContent = !! innerBlockImages?.length;
+	const hasOldVersionContent =
+		0 < attributes?.ids?.length || 0 < attributes?.images?.length;
+	if (
+		hasOldVersionContent ||
+		( ! hasNewVersionContent && ! __unstableGalleryWithImageBlocks )
+	) {
+		return <EditWithoutInnerBlocks { ...props } />;
+	}
+
+	return <EditWithInnerBlocks { ...props } />;
+}