@wordpress/block-library 9.2.0 → 9.4.0

package/src/gallery/deprecated.js

@@ -22,7 +22,6 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 } from './constants';
-import { isGalleryV2Enabled } from './shared';
 
 const DEPRECATED_LINK_DESTINATION_MEDIA = 'file';
 const DEPRECATED_LINK_DESTINATION_ATTACHMENT = 'post';
@@ -408,11 +407,7 @@ const v6 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		return attributes;
+		return runV2Migration( attributes );
 	},
 };
 const v5 = {
@@ -498,23 +493,7 @@ const v5 = {
 		return ! linkTo || linkTo === 'attachment' || linkTo === 'media';
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		let linkTo = attributes.linkTo;
-
-		if ( ! attributes.linkTo ) {
-			linkTo = 'none';
-		} else if ( attributes.linkTo === 'attachment' ) {
-			linkTo = 'post';
-		} else if ( attributes.linkTo === 'media' ) {
-			linkTo = 'file';
-		}
-		return {
-			...attributes,
-			linkTo,
-		};
+		return runV2Migration( attributes );
 	},
 	save( { attributes } ) {
 		const {
@@ -661,17 +640,7 @@ const v4 = {
 		return ids && ids.some( ( id ) => typeof id === 'string' );
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		return {
-			...attributes,
-			ids: ( attributes.ids ?? [] ).map( ( id ) => {
-				const parsedId = parseInt( id, 10 );
-				return Number.isInteger( parsedId ) ? parsedId : null;
-			} ),
-		};
+		return runV2Migration( attributes );
 	},
 	save( { attributes } ) {
 		const {
@@ -867,10 +836,7 @@ const v3 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-		return attributes;
+		return runV2Migration( attributes );
 	},
 };
 const v2 = {
@@ -936,18 +902,7 @@ const v2 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-		return {
-			...attributes,
-			ids: ( attributes.images ?? [] ).map( ( { id } ) => {
-				if ( ! id ) {
-					return null;
-				}
-				return parseInt( id, 10 );
-			} ),
-		};
+		return runV2Migration( attributes );
 	},
 	supports: {
 		align: true,
@@ -1100,11 +1055,7 @@ const v1 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		return attributes;
+		return runV2Migration( attributes );
 	},
 };
 

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/deprecated.js

@@ -109,15 +109,11 @@ const deprecated = [
 			);
 		},
 		isEligible: ( { layout } ) =>
-			! layout ||
-			layout.inherit ||
-			( layout.contentSize && layout.type !== 'constrained' ),
+			layout?.inherit ||
+			( layout?.contentSize && layout?.type !== 'constrained' ),
 		migrate: ( attributes ) => {
 			const { layout = null } = attributes;
-			if ( ! layout ) {
-				return attributes;
-			}
-			if ( layout.inherit || layout.contentSize ) {
+			if ( layout?.inherit || layout?.contentSize ) {
 				return {
 					...attributes,
 					layout: {

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/heading/block.json

@@ -30,6 +30,18 @@
 		"anchor": true,
 		"className": true,
 		"splitting": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/heading/index.js

@@ -24,6 +24,7 @@ export const settings = {
 		attributes: {
 			content: __( 'Code is Poetry' ),
 			level: 2,
+			textAlign: 'center',
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {

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",
@@ -102,6 +106,9 @@
 		"filter": {
 			"duotone": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,

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':
@@ -317,7 +308,7 @@ export function ImageEdit( {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					! blockBindingsSource?.canUserEditValue( {
+					! blockBindingsSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: metadata?.bindings?.url?.args,

package/src/image/editor.scss

@@ -3,7 +3,7 @@
 .wp-block-image.wp-block-image {
 
 	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
+	&.is-selected .block-editor-media-placeholder {
 		// Block UI appearance.
 		color: $gray-900;
 		background-color: $white;
@@ -70,6 +70,11 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
+// Shown while image is being uploded but cannot be previewed.
+.wp-block-image__placeholder {
+	aspect-ratio: 4 / 3;
+}
+
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
 .wp-block-image .components-resizable-box__container {
 	// Using "display: table" because: