@wordpress/block-library 9.2.0 → 9.4.0

package/src/embed/test/index.native.js

@@ -230,7 +230,7 @@ describe( 'Embed block', () => {
 		} );
 
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
-			it( `inserts ${ title } embed block`, async () => {
+			it( `inserts ${ title } block`, async () => {
 				const { block } = await insertEmbedBlock( title );
 				const blockName = within( block ).getByText( title );
 
@@ -285,10 +285,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -321,10 +321,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter Embed link, ${ clipboardURL }` );
 
 			expect( autopastedLinkField ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -383,10 +383,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -422,10 +422,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter Embed link, ${ clipboardURL }` );
 
 			expect( embedLink ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -472,10 +472,10 @@ describe( 'Embed block', () => {
 			);
 			await waitForModalVisible( blockSettingsModal );
 
-			// Start editing link.
+			// Start editing Embed link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ initialURL }`
+					`Twitter Embed link, ${ initialURL }`
 				)
 			);
 
@@ -491,10 +491,10 @@ describe( 'Embed block', () => {
 			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
 			await editor.findByText( 'Media settings' );
 
-			// Get YouTube link field.
+			// Get YouTube Embed link field.
 			const youtubeLinkField = await within(
 				blockSettingsModal
-			).findByLabelText( `YouTube link, ${ expectedURL }` );
+			).findByLabelText( `YouTube Embed link, ${ expectedURL }` );
 
 			expect( youtubeLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -519,7 +519,7 @@ describe( 'Embed block', () => {
 			// Start editing link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ previousURL }`
+					`Twitter Embed link, ${ previousURL }`
 				)
 			);
 
@@ -557,7 +557,7 @@ describe( 'Embed block', () => {
 			// Start editing link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ previousURL }`
+					`Twitter Embed link, ${ previousURL }`
 				)
 			);
 
@@ -661,10 +661,10 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, 'backdropPress' );
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = await within(
 				blockSettingsModal
-			).findByLabelText( `Twitter link, ${ expectedURL }` );
+			).findByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -728,10 +728,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -811,10 +811,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ successURL }` );
+			).getByLabelText( `Twitter Embed link, ${ successURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -1000,8 +1000,9 @@ describe( 'Embed block', () => {
 		} );
 
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
-			it( `inserts ${ title } embed block`, async () => {
-				const embedBlockSlashInserter = `/${ title }`;
+			it( `inserts ${ title } block`, async () => {
+				// Get just the first word of the title ("Twitter") as the full title ("Twitter Embed") breaks the test.
+				const embedBlockSlashInserter = `/${ title.split( ' ' )[ 0 ] }`;
 				const editor = await initializeEditor( {
 					initialHtml: EMPTY_PARAGRAPH_HTML,
 				} );

package/src/embed/variations.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -32,6 +32,14 @@ import {
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
+function getTitle( providerName ) {
+	return sprintf(
+		/* translators: %s: provider name */
+		__( '%s Embed' ),
+		providerName
+	);
+}
+
 /**
  * The embed provider services.
  *
@@ -40,7 +48,7 @@ import {
 const variations = [
 	{
 		name: 'twitter',
-		title: 'Twitter',
+		title: getTitle( 'Twitter' ),
 		icon: embedTwitterIcon,
 		keywords: [ 'tweet', __( 'social' ) ],
 		description: __( 'Embed a tweet.' ),
@@ -49,7 +57,7 @@ const variations = [
 	},
 	{
 		name: 'youtube',
-		title: 'YouTube',
+		title: getTitle( 'YouTube' ),
 		icon: embedYouTubeIcon,
 		keywords: [ __( 'music' ), __( 'video' ) ],
 		description: __( 'Embed a YouTube video.' ),
@@ -63,7 +71,7 @@ const variations = [
 		// Deprecate Facebook Embed per FB policy
 		// See: https://developers.facebook.com/docs/plugins/oembed-legacy
 		name: 'facebook',
-		title: 'Facebook',
+		title: getTitle( 'Facebook' ),
 		icon: embedFacebookIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Facebook post.' ),
@@ -79,7 +87,7 @@ const variations = [
 		// Deprecate Instagram per FB policy
 		// See: https://developers.facebook.com/docs/instagram/oembed-legacy
 		name: 'instagram',
-		title: 'Instagram',
+		title: getTitle( 'Instagram' ),
 		icon: embedInstagramIcon,
 		keywords: [ __( 'image' ), __( 'social' ) ],
 		description: __( 'Embed an Instagram post.' ),
@@ -89,7 +97,7 @@ const variations = [
 	},
 	{
 		name: 'wordpress',
-		title: 'WordPress',
+		title: getTitle( 'WordPress' ),
 		icon: embedWordPressIcon,
 		keywords: [ __( 'post' ), __( 'blog' ) ],
 		description: __( 'Embed a WordPress post.' ),
@@ -99,7 +107,7 @@ const variations = [
 	},
 	{
 		name: 'soundcloud',
-		title: 'SoundCloud',
+		title: getTitle( 'SoundCloud' ),
 		icon: embedAudioIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed SoundCloud content.' ),
@@ -108,7 +116,7 @@ const variations = [
 	},
 	{
 		name: 'spotify',
-		title: 'Spotify',
+		title: getTitle( 'Spotify' ),
 		icon: embedSpotifyIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed Spotify content.' ),
@@ -117,7 +125,7 @@ const variations = [
 	},
 	{
 		name: 'flickr',
-		title: 'Flickr',
+		title: getTitle( 'Flickr' ),
 		icon: embedFlickrIcon,
 		keywords: [ __( 'image' ) ],
 		description: __( 'Embed Flickr content.' ),
@@ -129,7 +137,7 @@ const variations = [
 	},
 	{
 		name: 'vimeo',
-		title: 'Vimeo',
+		title: getTitle( 'Vimeo' ),
 		icon: embedVimeoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a Vimeo video.' ),
@@ -138,7 +146,7 @@ const variations = [
 	},
 	{
 		name: 'animoto',
-		title: 'Animoto',
+		title: getTitle( 'Animoto' ),
 		icon: embedAnimotoIcon,
 		description: __( 'Embed an Animoto video.' ),
 		patterns: [ /^https?:\/\/(www\.)?(animoto|video214)\.com\/.+/i ],
@@ -146,7 +154,7 @@ const variations = [
 	},
 	{
 		name: 'cloudup',
-		title: 'Cloudup',
+		title: getTitle( 'Cloudup' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Cloudup content.' ),
 		patterns: [ /^https?:\/\/cloudup\.com\/.+/i ],
@@ -155,7 +163,7 @@ const variations = [
 	{
 		// Deprecated since CollegeHumor content is now powered by YouTube.
 		name: 'collegehumor',
-		title: 'CollegeHumor',
+		title: getTitle( 'CollegeHumor' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed CollegeHumor content.' ),
 		scope: [ 'block' ],
@@ -164,7 +172,7 @@ const variations = [
 	},
 	{
 		name: 'crowdsignal',
-		title: 'Crowdsignal',
+		title: getTitle( 'Crowdsignal' ),
 		icon: embedContentIcon,
 		keywords: [ 'polldaddy', __( 'survey' ) ],
 		description: __( 'Embed Crowdsignal (formerly Polldaddy) content.' ),
@@ -175,7 +183,7 @@ const variations = [
 	},
 	{
 		name: 'dailymotion',
-		title: 'Dailymotion',
+		title: getTitle( 'Dailymotion' ),
 		icon: embedDailymotionIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a Dailymotion video.' ),
@@ -184,7 +192,7 @@ const variations = [
 	},
 	{
 		name: 'imgur',
-		title: 'Imgur',
+		title: getTitle( 'Imgur' ),
 		icon: embedPhotoIcon,
 		description: __( 'Embed Imgur content.' ),
 		patterns: [ /^https?:\/\/(.+\.)?imgur\.com\/.+/i ],
@@ -192,7 +200,7 @@ const variations = [
 	},
 	{
 		name: 'issuu',
-		title: 'Issuu',
+		title: getTitle( 'Issuu' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Issuu content.' ),
 		patterns: [ /^https?:\/\/(www\.)?issuu\.com\/.+/i ],
@@ -200,7 +208,7 @@ const variations = [
 	},
 	{
 		name: 'kickstarter',
-		title: 'Kickstarter',
+		title: getTitle( 'Kickstarter' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Kickstarter content.' ),
 		patterns: [
@@ -211,7 +219,7 @@ const variations = [
 	},
 	{
 		name: 'mixcloud',
-		title: 'Mixcloud',
+		title: getTitle( 'Mixcloud' ),
 		icon: embedAudioIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed Mixcloud content.' ),
@@ -220,7 +228,7 @@ const variations = [
 	},
 	{
 		name: 'pocket-casts',
-		title: 'Pocket Casts',
+		title: getTitle( 'Pocket Casts' ),
 		icon: embedPocketCastsIcon,
 		keywords: [ __( 'podcast' ), __( 'audio' ) ],
 		description: __( 'Embed a podcast player from Pocket Casts.' ),
@@ -229,7 +237,7 @@ const variations = [
 	},
 	{
 		name: 'reddit',
-		title: 'Reddit',
+		title: getTitle( 'Reddit' ),
 		icon: embedRedditIcon,
 		description: __( 'Embed a Reddit thread.' ),
 		patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ],
@@ -237,7 +245,7 @@ const variations = [
 	},
 	{
 		name: 'reverbnation',
-		title: 'ReverbNation',
+		title: getTitle( 'ReverbNation' ),
 		icon: embedAudioIcon,
 		description: __( 'Embed ReverbNation content.' ),
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
@@ -245,7 +253,7 @@ const variations = [
 	},
 	{
 		name: 'screencast',
-		title: 'Screencast',
+		title: getTitle( 'Screencast' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed Screencast content.' ),
 		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
@@ -253,7 +261,7 @@ const variations = [
 	},
 	{
 		name: 'scribd',
-		title: 'Scribd',
+		title: getTitle( 'Scribd' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Scribd content.' ),
 		patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ],
@@ -261,7 +269,7 @@ const variations = [
 	},
 	{
 		name: 'smugmug',
-		title: 'SmugMug',
+		title: getTitle( 'SmugMug' ),
 		icon: embedPhotoIcon,
 		description: __( 'Embed SmugMug content.' ),
 		patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ],
@@ -273,7 +281,7 @@ const variations = [
 	},
 	{
 		name: 'speaker-deck',
-		title: 'Speaker Deck',
+		title: getTitle( 'Speaker Deck' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Speaker Deck content.' ),
 		patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ],
@@ -281,7 +289,7 @@ const variations = [
 	},
 	{
 		name: 'tiktok',
-		title: 'TikTok',
+		title: getTitle( 'TikTok' ),
 		icon: embedVideoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a TikTok video.' ),
@@ -290,7 +298,7 @@ const variations = [
 	},
 	{
 		name: 'ted',
-		title: 'TED',
+		title: getTitle( 'TED' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed a TED video.' ),
 		patterns: [ /^https?:\/\/(www\.|embed\.)?ted\.com\/.+/i ],
@@ -298,7 +306,7 @@ const variations = [
 	},
 	{
 		name: 'tumblr',
-		title: 'Tumblr',
+		title: getTitle( 'Tumblr' ),
 		icon: embedTumblrIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Tumblr post.' ),
@@ -307,7 +315,7 @@ const variations = [
 	},
 	{
 		name: 'videopress',
-		title: 'VideoPress',
+		title: getTitle( 'VideoPress' ),
 		icon: embedVideoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a VideoPress video.' ),
@@ -316,7 +324,7 @@ const variations = [
 	},
 	{
 		name: 'wordpress-tv',
-		title: 'WordPress.tv',
+		title: getTitle( 'WordPress.tv' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed a WordPress.tv video.' ),
 		patterns: [ /^https?:\/\/wordpress\.tv\/.+/i ],
@@ -324,7 +332,7 @@ const variations = [
 	},
 	{
 		name: 'amazon-kindle',
-		title: 'Amazon Kindle',
+		title: getTitle( 'Amazon Kindle' ),
 		icon: embedAmazonIcon,
 		keywords: [ __( 'ebook' ) ],
 		description: __( 'Embed Amazon Kindle content.' ),
@@ -336,7 +344,7 @@ const variations = [
 	},
 	{
 		name: 'pinterest',
-		title: 'Pinterest',
+		title: getTitle( 'Pinterest' ),
 		icon: embedPinterestIcon,
 		keywords: [ __( 'social' ), __( 'bookmark' ) ],
 		description: __( 'Embed Pinterest pins, boards, and profiles.' ),
@@ -347,7 +355,7 @@ const variations = [
 	},
 	{
 		name: 'wolfram-cloud',
-		title: 'Wolfram',
+		title: getTitle( 'Wolfram' ),
 		icon: embedWolframIcon,
 		description: __( 'Embed Wolfram notebook content.' ),
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
@@ -355,7 +363,7 @@ const variations = [
 	},
 	{
 		name: 'bluesky',
-		title: 'Bluesky',
+		title: getTitle( 'Bluesky' ),
 		icon: embedBlueskyIcon,
 		description: __( 'Embed a Bluesky post.' ),
 		patterns: [ /^https?:\/\/bsky\.app\/profile\/.+\/post\/.+/i ],

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/footnotes/index.js

@@ -21,8 +21,7 @@ export const settings = {
 	edit,
 };
 
-registerFormatType( formatName, format );
-
 export const init = () => {
+	registerFormatType( formatName, format );
 	initBlock( { name, metadata, settings } );
 };

package/src/form-input/edit.js

@@ -38,6 +38,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					<PanelBody title={ __( 'Settings' ) }>
 						{ 'checkbox' !== type && (
 							<CheckboxControl
+								__nextHasNoMarginBottom
 								label={ __( 'Inline label' ) }
 								checked={ inlineLabel }
 								onChange={ ( newVal ) => {
@@ -48,6 +49,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 							/>
 						) }
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							label={ __( 'Required' ) }
 							checked={ required }
 							onChange={ ( newVal ) => {

package/src/gallery/block.json

@@ -112,6 +112,16 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true
+			}
+		},
 		"html": false,
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {