@wordpress/block-library 9.1.0 → 9.3.0

package/build-style/theme.css

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-audio figcaption {
+.wp-block-audio :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-audio figcaption {
+.is-dark-theme .wp-block-audio :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
@@ -106,12 +106,12 @@
   padding: 0.8em 1em;
 }
 
-.wp-block-embed figcaption {
+.wp-block-embed :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-embed figcaption {
+.is-dark-theme .wp-block-embed :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
@@ -225,21 +225,21 @@
 .wp-block-table th {
   word-break: normal;
 }
-.wp-block-table figcaption {
+.wp-block-table :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-table figcaption {
+.is-dark-theme .wp-block-table :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

package/build-style/video/style-rtl.css

@@ -101,7 +101,7 @@
 .wp-block-video.aligncenter {
   text-align: center;
 }
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   margin-top: 0.5em;
   margin-bottom: 1em;
 }

package/build-style/video/style.css

@@ -101,7 +101,7 @@
 .wp-block-video.aligncenter {
   text-align: center;
 }
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   margin-top: 0.5em;
   margin-bottom: 1em;
 }

package/build-style/video/theme-rtl.css

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

package/build-style/video/theme.css

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.1.0",
+	"version": "9.3.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,39 +32,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.1.0",
-		"@wordpress/api-fetch": "^7.1.0",
-		"@wordpress/autop": "^4.1.0",
-		"@wordpress/blob": "^4.1.0",
-		"@wordpress/block-editor": "^13.1.0",
-		"@wordpress/blocks": "^13.1.0",
-		"@wordpress/components": "^28.1.0",
-		"@wordpress/compose": "^7.1.0",
-		"@wordpress/core-data": "^7.1.0",
-		"@wordpress/data": "^10.1.0",
-		"@wordpress/date": "^5.1.0",
-		"@wordpress/deprecated": "^4.1.0",
-		"@wordpress/dom": "^4.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/escape-html": "^3.1.0",
-		"@wordpress/hooks": "^4.1.0",
-		"@wordpress/html-entities": "^4.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/interactivity": "^6.1.0",
-		"@wordpress/interactivity-router": "^2.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.1.0",
-		"@wordpress/keycodes": "^4.1.0",
-		"@wordpress/notices": "^5.1.0",
-		"@wordpress/patterns": "^2.1.0",
-		"@wordpress/primitives": "^4.1.0",
-		"@wordpress/private-apis": "^1.1.0",
-		"@wordpress/reusable-blocks": "^5.1.0",
-		"@wordpress/rich-text": "^7.1.0",
-		"@wordpress/server-side-render": "^5.1.0",
-		"@wordpress/url": "^4.1.0",
-		"@wordpress/viewport": "^6.1.0",
-		"@wordpress/wordcount": "^4.1.0",
+		"@wordpress/a11y": "^4.3.0",
+		"@wordpress/api-fetch": "^7.3.0",
+		"@wordpress/autop": "^4.3.0",
+		"@wordpress/blob": "^4.3.0",
+		"@wordpress/block-editor": "^13.3.0",
+		"@wordpress/blocks": "^13.3.0",
+		"@wordpress/components": "^28.3.0",
+		"@wordpress/compose": "^7.3.0",
+		"@wordpress/core-data": "^7.3.0",
+		"@wordpress/data": "^10.3.0",
+		"@wordpress/date": "^5.3.0",
+		"@wordpress/deprecated": "^4.3.0",
+		"@wordpress/dom": "^4.3.0",
+		"@wordpress/element": "^6.3.0",
+		"@wordpress/escape-html": "^3.3.0",
+		"@wordpress/hooks": "^4.3.0",
+		"@wordpress/html-entities": "^4.3.0",
+		"@wordpress/i18n": "^5.3.0",
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/interactivity": "^6.3.0",
+		"@wordpress/interactivity-router": "^2.3.0",
+		"@wordpress/keyboard-shortcuts": "^5.3.0",
+		"@wordpress/keycodes": "^4.3.0",
+		"@wordpress/notices": "^5.3.0",
+		"@wordpress/patterns": "^2.3.0",
+		"@wordpress/primitives": "^4.3.0",
+		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/reusable-blocks": "^5.3.0",
+		"@wordpress/rich-text": "^7.3.0",
+		"@wordpress/server-side-render": "^5.3.0",
+		"@wordpress/url": "^4.3.0",
+		"@wordpress/viewport": "^6.3.0",
+		"@wordpress/wordcount": "^4.3.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
 }

package/src/audio/block.json

@@ -8,6 +8,10 @@
 	"keywords": [ "music", "sound", "podcast", "recording" ],
 	"textdomain": "default",
 	"attributes": {
+		"blob": {
+			"type": "string",
+			"__experimentalRole": "local"
+		},
 		"src": {
 			"type": "string",
 			"source": "attribute",

package/src/audio/edit.js

@@ -26,6 +26,7 @@ import { __, _x } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,10 +46,10 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, loop, preload, src } = attributes;
-	const isTemporaryAudio = ! id && isBlobURL( src );
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	useUploadMediaFromBlobURL( {
-		url: src,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectAudio,
 		onError: onUploadError,
@@ -72,7 +73,8 @@ function AudioEdit( {
 				onReplace( embedBlock );
 				return;
 			}
-			setAttributes( { src: newSrc, id: undefined } );
+			setAttributes( { src: newSrc, id: undefined, blob: undefined } );
+			setTemporaryURL();
 		}
 	}
 
@@ -95,27 +97,37 @@ function AudioEdit( {
 				src: undefined,
 				id: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
 			return;
 		}
+
+		if ( isBlobURL( media.url ) ) {
+			setTemporaryURL( media.url );
+			return;
+		}
+
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
 		setAttributes( {
+			blob: undefined,
 			src: media.url,
 			id: media.id,
 			caption: media.caption,
 		} );
+		setTemporaryURL();
 	}
 
 	const classes = clsx( className, {
-		'is-transient': isTemporaryAudio,
+		'is-transient': !! temporaryURL,
 	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
 
-	if ( ! src ) {
+	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -190,9 +202,9 @@ function AudioEdit( {
 					file or change the position slider when the controls are enabled.
 				*/ }
 				<Disabled isDisabled={ ! isSingleSelected }>
-					<audio controls="controls" src={ src } />
+					<audio controls="controls" src={ src ?? temporaryURL } />
 				</Disabled>
-				{ isTemporaryAudio && <Spinner /> }
+				{ !! temporaryURL && <Spinner /> }
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }

package/src/audio/style.scss

@@ -4,7 +4,7 @@
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

package/src/audio/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-audio figcaption {
+.wp-block-audio :where(figcaption) {
 	@include caption-style-theme();
 }
 

package/src/audio/transforms.js

@@ -20,7 +20,7 @@ const transforms = {
 				// It's already done as part of the `componentDidMount`
 				// in the audio block.
 				const block = createBlock( 'core/audio', {
-					src: createBlobURL( file ),
+					blob: createBlobURL( file ),
 				} );
 
 				return block;

package/src/block/block.json

@@ -12,9 +12,13 @@
 			"type": "number"
 		},
 		"content": {
-			"type": "object"
+			"type": "object",
+			"default": {}
 		}
 	},
+	"providesContext": {
+		"pattern/overrides": "content"
+	},
 	"supports": {
 		"customClassName": false,
 		"html": false,

package/src/block/edit.js

@@ -268,7 +268,6 @@ function ReusableBlockEdit( {
 						<ToolbarButton
 							onClick={ resetContent }
 							disabled={ ! content }
-							__experimentalIsFocusable
 						>
 							{ __( 'Reset' ) }
 						</ToolbarButton>

package/src/button/block.json

@@ -93,6 +93,7 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

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/embed/style.scss

@@ -25,7 +25,7 @@
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

package/src/embed/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-embed figcaption {
+.wp-block-embed :where(figcaption) {
 	@include caption-style-theme();
 }
 

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 );
 	},
 };