@wordpress/block-library 9.1.0 → 9.3.0

package/src/gallery/edit.js

@@ -14,6 +14,7 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
+	withNotices,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -237,7 +238,7 @@ function GalleryEdit( props ) {
 		return (
 			ALLOWED_MEDIA_TYPES.some(
 				( mediaType ) => mediaTypeSelector?.indexOf( mediaType ) === 0
-			) || file.url?.indexOf( 'blob:' ) === 0
+			) || file.blob
 		);
 	}
 
@@ -249,9 +250,9 @@ function GalleryEdit( props ) {
 		const imageArray = newFileUploads
 			? Array.from( selectedImages ).map( ( file ) => {
 					if ( ! file.url ) {
-						return pickRelevantMediaFiles( {
-							url: createBlobURL( file ),
-						} );
+						return {
+							blob: createBlobURL( file ),
+						};
 					}
 
 					return file;
@@ -271,9 +272,9 @@ function GalleryEdit( props ) {
 			.filter( ( file ) => file.url || isValidFileType( file ) )
 			.map( ( file ) => {
 				if ( ! file.url ) {
-					return pickRelevantMediaFiles( {
-						url: createBlobURL( file ),
-					} );
+					return {
+						blob: file.blob || createBlobURL( file ),
+					};
 				}
 
 				return file;
@@ -307,6 +308,7 @@ function GalleryEdit( props ) {
 		const newBlocks = newImageList.map( ( image ) => {
 			return createBlock( 'core/image', {
 				id: image.id,
+				blob: image.blob,
 				url: image.url,
 				caption: image.caption,
 				alt: image.alt,
@@ -632,6 +634,7 @@ function GalleryEdit( props ) {
 		</>
 	);
 }
-export default compose( [ withViewportMatch( { isNarrow: '< small' } ) ] )(
-	GalleryEdit
-);
+export default compose( [
+	withNotices,
+	withViewportMatch( { isNarrow: '< small' } ),
+] )( GalleryEdit );

package/src/gallery/gallery-styles.native.scss

@@ -1,5 +1,3 @@
-@import "./v1/gallery-styles.native.scss";
-
 .galleryAppender {
 	padding-top: $grid-unit-20;
 }

package/src/gallery/index.js

@@ -8,7 +8,7 @@ import { gallery as icon } from '@wordpress/icons';
  */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
-import edit from './edit-wrapper';
+import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';

package/src/gallery/save.js

@@ -13,17 +13,7 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import saveWithoutInnerBlocks from './v1/save';
-import { isGalleryV2Enabled } from './shared';
-
 export default function saveWithInnerBlocks( { attributes } ) {
-	if ( ! isGalleryV2Enabled() ) {
-		return saveWithoutInnerBlocks( { attributes } );
-	}
-
 	const { caption, columns, imageCrop } = attributes;
 
 	const className = clsx( 'has-nested-images', {

package/src/gallery/shared.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { Platform } from '@wordpress/element';
-
 export function defaultColumnsNumber( imageCount ) {
 	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
@@ -27,26 +22,3 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	}
 	return imageProps;
 };
-
-function getGalleryBlockV2Enabled() {
-	// We want to fail early here, at least during beta testing phase, to ensure
-	// there aren't instances where undefined values cause false negatives.
-	if ( ! window.wp || typeof window.wp.galleryBlockV2Enabled !== 'boolean' ) {
-		throw 'window.wp.galleryBlockV2Enabled is not defined';
-	}
-	return window.wp.galleryBlockV2Enabled;
-}
-
-/**
- * The new gallery block format is not compatible with the use_BalanceTags option
- * in WP versions <= 5.8 https://core.trac.wordpress.org/ticket/54130. The
- * window.wp.galleryBlockV2Enabled flag is set in lib/compat.php. This method
- * can be removed when minimum supported WP version >=5.9.
- */
-export function isGalleryV2Enabled() {
-	if ( Platform.isNative ) {
-		return getGalleryBlockV2Enabled();
-	}
-
-	return true;
-}

package/src/gallery/transforms.js

@@ -13,7 +13,6 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA,
 } from './constants';
-import { pickRelevantMediaFiles, isGalleryV2Enabled } from './shared';
 
 const parseShortcodeIds = ( ids ) => {
 	if ( ! ids ) {
@@ -39,7 +38,6 @@ const parseShortcodeIds = ( ids ) => {
  */
 function updateThirdPartyTransformToGallery( block ) {
 	if (
-		isGalleryV2Enabled() &&
 		block.name === 'core/gallery' &&
 		block.attributes?.images.length > 0
 	) {
@@ -137,37 +135,21 @@ const transforms = {
 
 				const validImages = attributes.filter( ( { url } ) => url );
 
-				if ( isGalleryV2Enabled() ) {
-					const innerBlocks = validImages.map( ( image ) => {
-						// Gallery images can't currently be resized so make sure height and width are undefined.
-						image.width = undefined;
-						image.height = undefined;
-						return createBlock( 'core/image', image );
-					} );
-
-					return createBlock(
-						'core/gallery',
-						{
-							align,
-							sizeSlug,
-						},
-						innerBlocks
-					);
-				}
-
-				return createBlock( 'core/gallery', {
-					images: validImages.map(
-						( { id, url, alt, caption } ) => ( {
-							id: id.toString(),
-							url,
-							alt,
-							caption,
-						} )
-					),
-					ids: validImages.map( ( { id } ) => parseInt( id, 10 ) ),
-					align,
-					sizeSlug,
+				const innerBlocks = validImages.map( ( image ) => {
+					// Gallery images can't currently be resized so make sure height and width are undefined.
+					image.width = undefined;
+					image.height = undefined;
+					return createBlock( 'core/image', image );
 				} );
+
+				return createBlock(
+					'core/gallery',
+					{
+						align,
+						sizeSlug,
+					},
+					innerBlocks
+				);
 			},
 		},
 		{
@@ -220,23 +202,13 @@ const transforms = {
 				);
 			},
 			transform( files ) {
-				if ( isGalleryV2Enabled() ) {
-					const innerBlocks = files.map( ( file ) =>
-						createBlock( 'core/image', {
-							url: createBlobURL( file ),
-						} )
-					);
+				const innerBlocks = files.map( ( file ) =>
+					createBlock( 'core/image', {
+						blob: createBlobURL( file ),
+					} )
+				);
 
-					return createBlock( 'core/gallery', {}, innerBlocks );
-				}
-				const block = createBlock( 'core/gallery', {
-					images: files.map( ( file ) =>
-						pickRelevantMediaFiles( {
-							url: createBlobURL( file ),
-						} )
-					),
-				} );
-				return block;
+				return createBlock( 'core/gallery', {}, innerBlocks );
 			},
 		},
 	],
@@ -244,57 +216,42 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { align, images, ids, sizeSlug }, innerBlocks ) => {
-				if ( isGalleryV2Enabled() ) {
-					if ( innerBlocks.length > 0 ) {
-						return innerBlocks.map(
-							( {
-								attributes: {
-									url,
-									alt,
-									caption,
-									title,
-									href,
-									rel,
-									linkClass,
-									id,
-									sizeSlug: imageSizeSlug,
-									linkDestination,
-									linkTarget,
-									anchor,
-									className,
-								},
-							} ) =>
-								createBlock( 'core/image', {
-									align,
-									url,
-									alt,
-									caption,
-									title,
-									href,
-									rel,
-									linkClass,
-									id,
-									sizeSlug: imageSizeSlug,
-									linkDestination,
-									linkTarget,
-									anchor,
-									className,
-								} )
-						);
-					}
-					return createBlock( 'core/image', { align } );
-				}
-				if ( images.length > 0 ) {
-					return images.map( ( { url, alt, caption }, index ) =>
-						createBlock( 'core/image', {
-							id: ids[ index ],
-							url,
-							alt,
-							caption,
-							align,
-							sizeSlug,
-						} )
+			transform: ( { align }, innerBlocks ) => {
+				if ( innerBlocks.length > 0 ) {
+					return innerBlocks.map(
+						( {
+							attributes: {
+								url,
+								alt,
+								caption,
+								title,
+								href,
+								rel,
+								linkClass,
+								id,
+								sizeSlug: imageSizeSlug,
+								linkDestination,
+								linkTarget,
+								anchor,
+								className,
+							},
+						} ) =>
+							createBlock( 'core/image', {
+								align,
+								url,
+								alt,
+								caption,
+								title,
+								href,
+								rel,
+								linkClass,
+								id,
+								sizeSlug: imageSizeSlug,
+								linkDestination,
+								linkTarget,
+								anchor,
+								className,
+							} )
 					);
 				}
 				return createBlock( 'core/image', { align } );

package/src/group/block.json

@@ -45,6 +45,7 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"margin": [ "top", "bottom" ],
 			"padding": true,

package/src/group/placeholder.js

@@ -139,6 +139,13 @@ function GroupPlaceHolder( { name, onSelect } ) {
 	const blockProps = useBlockProps( {
 		className: 'wp-block-group__placeholder',
 	} );
+
+	useEffect( () => {
+		if ( variations && variations.length === 1 ) {
+			onSelect( variations[ 0 ] );
+		}
+	}, [ onSelect, variations ] );
+
 	return (
 		<div { ...blockProps }>
 			<Placeholder

package/src/image/block.json

@@ -9,6 +9,10 @@
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
 	"attributes": {
+		"blob": {
+			"type": "string",
+			"__experimentalRole": "local"
+		},
 		"url": {
 			"type": "string",
 			"source": "attribute",

package/src/image/edit.js

@@ -56,17 +56,6 @@ export const pickRelevantMediaFiles = ( image, size ) => {
 	return imageProps;
 };
 
-/**
- * Is the URL a temporary blob URL? A blob URL is one that is used temporarily
- * while the image is being uploaded and will not have an id yet allocated.
- *
- * @param {number=} id  The id of the image.
- * @param {string=} url The url of the image.
- *
- * @return {boolean} Is the URL a Blob URL
- */
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
 /**
  * Is the url for the image hosted externally. An externally hosted image has no
  * id and is not a blob url.
@@ -118,9 +107,7 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
-	const [ temporaryURL, setTemporaryURL ] = useState( () => {
-		return isTemporaryImage( id, url ) ? url : undefined;
-	} );
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -157,8 +144,8 @@ export function ImageEdit( {
 			src: undefined,
 			id: undefined,
 			url: undefined,
+			blob: undefined,
 		} );
-		setTemporaryURL( undefined );
 	}
 
 	function onSelectImage( media ) {
@@ -169,7 +156,9 @@ export function ImageEdit( {
 				id: undefined,
 				title: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
 
 			return;
 		}
@@ -179,8 +168,6 @@ export function ImageEdit( {
 			return;
 		}
 
-		setTemporaryURL();
-
 		const { imageDefaultSize } = getSettings();
 
 		// Try to use the previous selected image size if its available
@@ -254,24 +241,28 @@ export function ImageEdit( {
 		mediaAttributes.href = href;
 
 		setAttributes( {
+			blob: undefined,
 			...mediaAttributes,
 			...additionalAttributes,
 			linkDestination,
 		} );
+		setTemporaryURL();
 	}
 
 	function onSelectURL( newURL ) {
 		if ( newURL !== url ) {
 			setAttributes( {
+				blob: undefined,
 				url: newURL,
 				id: undefined,
 				sizeSlug: getSettings().imageDefaultSize,
 			} );
+			setTemporaryURL();
 		}
 	}
 
 	useUploadMediaFromBlobURL( {
-		url,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectImage,
 		onError: onUploadError,
@@ -292,7 +283,7 @@ export function ImageEdit( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = clsx( className, {
-		'is-transient': temporaryURL,
+		'is-transient': !! temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'has-custom-border':

package/src/image/editor.scss

@@ -176,19 +176,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-.wp-block-image__aspect-ratio {
-	height: $grid-unit-60 - $border-width - $border-width;
-	margin-bottom: -$grid-unit-10;
-	display: flex;
-	align-items: center;
-
-	.components-button {
-		width: $button-size;
-		padding-left: 0;
-		padding-right: 0;
-	}
-}
-
 .wp-block-image__toolbar_content_textarea {
 	// Corresponds to the size of the textarea in the block inspector.
 	width: 250px;

package/src/image/image.js

@@ -49,7 +49,7 @@ import { Caption } from '../utils/caption';
 /**
  * Module constants
  */
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 import { evalAspectRatio } from './utils';
 
@@ -182,8 +182,7 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport &&
-		parentLayoutType !== 'grid';
+		isLargeViewport;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -373,6 +372,8 @@ export default function Image( {
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const dimensionsControl = (
 		<DimensionsTool
 			value={ { width, height, scale, aspectRatio } }
@@ -403,6 +404,20 @@ export default function Image( {
 		/>
 	);
 
+	const aspectRatioControl = (
+		<DimensionsTool
+			value={ { aspectRatio } }
+			onChange={ ( { aspectRatio: newAspectRatio } ) => {
+				setAttributes( {
+					aspectRatio: newAspectRatio,
+					scale: 'cover',
+				} );
+			} }
+			defaultAspectRatio="auto"
+			tools={ [ 'aspectRatio' ] }
+		/>
+	);
+
 	const resetAll = () => {
 		setAttributes( {
 			alt: undefined,
@@ -419,13 +434,19 @@ export default function Image( {
 			<ToolsPanel
 				label={ __( 'Settings' ) }
 				resetAll={ resetAll }
-				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				dropdownMenuProps={ dropdownMenuProps }
 			>
-				{ isResizable && dimensionsControl }
+				{ isResizable &&
+					( parentLayoutType === 'grid'
+						? aspectRatioControl
+						: dimensionsControl ) }
 			</ToolsPanel>
 		</InspectorControls>
 	);
 
+	const arePatternOverridesEnabled =
+		metadata?.bindings?.__default?.source === 'core/pattern-overrides';
+
 	const {
 		lockUrlControls = false,
 		lockHrefControls = false,
@@ -440,16 +461,12 @@ export default function Image( {
 				return {};
 			}
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const { getBlockParentsByBlockName } = unlock(
-				select( blockEditorStore )
-			);
 			const {
 				url: urlBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
-			const hasParentPattern =
-				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
+			const hasParentPattern = !! context[ 'pattern/overrides' ];
 			const urlBindingSource = getBlockBindingsSource(
 				urlBinding?.source
 			);
@@ -470,7 +487,7 @@ export default function Image( {
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
-					hasParentPattern,
+					hasParentPattern || arePatternOverridesEnabled,
 				lockCaption:
 					// Disable editing the caption if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the caption on the frontend.
@@ -505,7 +522,12 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ clientId, isSingleSelected, metadata?.bindings ]
+		[
+			arePatternOverridesEnabled,
+			context,
+			isSingleSelected,
+			metadata?.bindings,
+		]
 	);
 
 	const showUrlInput =
@@ -688,7 +710,7 @@ export default function Image( {
 				<ToolsPanel
 					label={ __( 'Settings' ) }
 					resetAll={ resetAll }
-					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					{ isSingleSelected && (
 						<ToolsPanelItem
@@ -732,7 +754,10 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable && dimensionsControl }
+					{ isResizable &&
+						( parentLayoutType === 'grid'
+							? aspectRatioControl
+							: dimensionsControl ) }
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
@@ -842,7 +867,7 @@ export default function Image( {
 				/>
 			</ImageWrapper>
 		);
-	} else if ( ! isResizable ) {
+	} else if ( ! isResizable || parentLayoutType === 'grid' ) {
 		img = (
 			<div style={ { width, height, aspectRatio } }>
 				<ImageWrapper href={ href }>{ img }</ImageWrapper>
@@ -971,7 +996,11 @@ export default function Image( {
 				isSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
-				showToolbarButton={ isSingleSelected && hasNonContentControls }
+				showToolbarButton={
+					isSingleSelected &&
+					hasNonContentControls &&
+					! arePatternOverridesEnabled
+				}
 				readOnly={ lockCaption }
 			/>
 		</>

package/src/image/index.php

@@ -28,12 +28,33 @@ function render_block_core_image( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$has_id_binding = isset( $attributes['metadata']['bindings']['id'] ) && isset( $attributes['id'] );
+
+	// Ensure the `wp-image-id` classname on the image block supports block bindings.
+	if ( $has_id_binding ) {
+		// If there's a mismatch with the 'wp-image-' class and the actual id, the id was
+		// probably overridden by block bindings. Update it to the correct value.
+		// See https://github.com/WordPress/gutenberg/issues/62886 for why this is needed.
+		$id                       = $attributes['id'];
+		$image_classnames         = $p->get_attribute( 'class' );
+		$class_with_binding_value = "wp-image-$id";
+		if ( is_string( $image_classnames ) && ! str_contains( $image_classnames, $class_with_binding_value ) ) {
+			$image_classnames = preg_replace( '/wp-image-(\d+)/', $class_with_binding_value, $image_classnames );
+			$p->set_attribute( 'class', $image_classnames );
+		}
+	}
+
+	// For backwards compatibility, the data-id html attribute is only set for
+	// image blocks nested in a gallery. Detect if the image is in a gallery by
+	// checking the data-id attribute.
+	// See the `block_core_gallery_data_id_backcompatibility` function.
 	if ( isset( $attributes['data-id'] ) ) {
-		// Adds the data-id="$id" attribute to the img element to provide backwards
-		// compatibility for the Gallery Block, which now wraps Image Blocks within
-		// innerBlocks. The data-id attribute is added in a core/gallery
-		// `render_block_data` hook.
-		$p->set_attribute( 'data-id', $attributes['data-id'] );
+		// If there's a binding for the `id`, the `id` attribute is used for the
+		// value, since `data-id` does not support block bindings.
+		// Else the `data-id` is used for backwards compatibility, since
+		// third parties may be filtering its value.
+		$data_id = $has_id_binding ? $attributes['id'] : $attributes['data-id'];
+		$p->set_attribute( 'data-id', $data_id );
 	}
 
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';