@wordpress/block-library 9.2.0 → 9.3.0

package/src/button/index.php

@@ -17,7 +17,20 @@
  * @return string The block content.
  */
 function render_block_core_button( $attributes, $content ) {
-	$p = new WP_HTML_Tag_Processor( $content );
+	/*
+	 * The current Gutenberg plugin supports WordPress 6.4, but the next_token()
+	 * method does not exist in WordPress 6.4. Therefore, if Gutenberg is used
+	 * as a plugin, use the Gutenberg class that has the `next_token()` method.
+	 *
+	 * TODO: After the Gutenberg plugin drops support for WordPress 6.4, this
+	 * conditional statement will be removed and the core class `WP_HTML_Tag_Processor`
+	 * should be used.
+	 */
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && class_exists( 'Gutenberg_HTML_Tag_Processor_6_5' ) ) {
+		$p = new Gutenberg_HTML_Tag_Processor_6_5( $content );
+	} else {
+		$p = new WP_HTML_Tag_Processor( $content );
+	}
 
 	/*
 	 * The button block can render an `<a>` or `<button>` and also has a

package/src/embed/embed-preview.js

@@ -20,6 +20,7 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { getAuthority } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -73,14 +74,11 @@ class EmbedPreview extends Component {
 		const { interactive } = this.state;
 
 		const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
-		const parsedHost = new URL( url ).host.split( '.' );
-		const parsedHostBaseUrl = parsedHost
-			.splice( parsedHost.length - 2, parsedHost.length - 1 )
-			.join( '.' );
+		const embedSourceUrl = getAuthority( url );
 		const iframeTitle = sprintf(
 			// translators: %s: host providing embed content e.g: www.youtube.com
 			__( 'Embedded content from %s' ),
-			parsedHostBaseUrl
+			embedSourceUrl
 		);
 		const sandboxClassnames = clsx(
 			type,
@@ -136,7 +134,7 @@ class EmbedPreview extends Component {
 								__(
 									"Embedded content from %s can't be previewed in the editor."
 								),
-								parsedHostBaseUrl
+								embedSourceUrl
 							) }
 						</p>
 					</Placeholder>

package/src/file/block.json

@@ -11,6 +11,10 @@
 		"id": {
 			"type": "number"
 		},
+		"blob": {
+			"type": "string",
+			"__experimentalRole": "local"
+		},
 		"href": {
 			"type": "string"
 		},

package/src/file/edit.js

@@ -23,7 +23,7 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -73,6 +73,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const { media } = useSelect(
 		( select ) => ( {
 			media:
@@ -88,7 +89,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		useDispatch( blockEditorStore );
 
 	useUploadMediaFromBlobURL( {
-		url: href,
+		url: temporaryURL,
 		onChange: onSelectFile,
 		onError: onUploadError,
 	} );
@@ -108,6 +109,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
+			setTemporaryURL();
+			return;
+		}
+
+		if ( isBlobURL( newMedia.url ) ) {
+			setTemporaryURL( newMedia.url );
 			return;
 		}
 
@@ -120,7 +127,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			displayPreview: isPdf ? true : undefined,
 			previewHeight: isPdf ? 600 : undefined,
 			fileId: `wp-block-file--media-${ clientId }`,
+			blob: undefined,
 		} );
+		setTemporaryURL();
 	}
 
 	function onUploadError( message ) {
@@ -166,16 +175,16 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const blockProps = useBlockProps( {
 		className: clsx(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+			!! temporaryURL && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': !! temporaryURL,
 			}
 		),
 	} );
 
 	const displayPreviewInEditor = browserSupportsPdfs() && displayPreview;
 
-	if ( ! href ) {
+	if ( ! href && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -197,7 +206,11 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	return (
 		<>
 			<FileBlockInspector
-				hrefs={ { href, textLinkHref, attachmentPage } }
+				hrefs={ {
+					href: href || temporaryURL,
+					textLinkHref,
+					attachmentPage,
+				} }
 				{ ...{
 					openInNewWindow: !! textLinkTarget,
 					showDownloadButton,

package/src/file/transforms.js

@@ -26,9 +26,8 @@ const transforms = {
 					// File will be uploaded in componentDidMount()
 					blocks.push(
 						createBlock( 'core/file', {
-							href: blobURL,
+							blob: blobURL,
 							fileName: file.name,
-							textLinkHref: blobURL,
 						} )
 					);
 				} );

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/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",