@wordpress/block-library 9.3.0 → 9.4.0

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

@@ -106,21 +106,21 @@ exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `
 
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
+exports[`Embed block insert via slash inserter inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
+exports[`Embed block insertion inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
+exports[`Embed block insertion inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
+exports[`Embed block insertion inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
+exports[`Embed block insertion inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 

package/src/embed/test/index.js

@@ -200,7 +200,7 @@ describe( 'utils', () => {
 			expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual(
 				expect.objectContaining( {
 					icon: embedInstagramIcon,
-					title: 'Instagram',
+					title: 'Instagram Embed',
 				} )
 			);
 		} );

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/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": {

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

@@ -106,6 +106,9 @@
 		"filter": {
 			"duotone": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,

package/src/image/edit.js

@@ -308,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: