@wordpress/block-library 7.17.0 → 7.19.0

package/src/columns/test/edit.native.js

@@ -75,7 +75,7 @@ describe( 'Columns block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			// Get block
 			const columnsBlock = await getBlock( screen, 'Columns' );
@@ -85,7 +85,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by adding one
-			const columnsControl = getByA11yLabel( /Number of columns/ );
+			const columnsControl = getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'increment' },
 			} );
@@ -97,7 +97,7 @@ describe( 'Columns block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			// Wait for the block to be created.
 			const columnsBlock = await getBlock( screen, 'Columns' );
@@ -107,7 +107,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by removing one
-			const columnsControl = getByA11yLabel( /Number of columns/ );
+			const columnsControl = getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'decrement' },
 			} );
@@ -117,7 +117,7 @@ describe( 'Columns block', () => {
 
 		it( 'reaches the minimum limit of number of column blocks', async () => {
 			const screen = await initializeEditor();
-			const { getByA11yLabel, getByTestId } = screen;
+			const { getByLabelText, getByTestId } = screen;
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -131,7 +131,7 @@ describe( 'Columns block', () => {
 			const blockVariationModal = getByTestId( 'block-variation-modal' );
 			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
-				within( blockVariationModal ).getByA11yLabel(
+				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
 				);
 			fireEvent.press( threeColumnLayout );
@@ -144,7 +144,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by adding one
-			const columnsControl = getByA11yLabel( /Number of columns/ );
+			const columnsControl = getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'increment' },
 			} );
@@ -164,7 +164,7 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
@@ -175,11 +175,11 @@ describe( 'Columns block', () => {
 		fireEvent.press( firstColumnBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete block
-		const deleteButton = getByA11yLabel( /Remove block/ );
+		const deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -189,7 +189,7 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
@@ -200,11 +200,11 @@ describe( 'Columns block', () => {
 		fireEvent.press( firstColumnBlock );
 
 		// Open block actions menu
-		let blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		let blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete block
-		let deleteButton = getByA11yLabel( /Remove block/ );
+		let deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		// Get the only left column
@@ -212,11 +212,11 @@ describe( 'Columns block', () => {
 		fireEvent.press( lastColumnBlock );
 
 		// Open block actions menu
-		blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete block
-		deleteButton = getByA11yLabel( /Remove block/ );
+		deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -226,20 +226,20 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByA11yLabel(
+		const verticalAlignmentButton = getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -249,20 +249,20 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByA11yLabel(
+		const verticalAlignmentButton = getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		// Get the first column
@@ -273,7 +273,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align bottom button
-		const verticalBottomAlignmentButton = getByA11yLabel( /Align bottom/ );
+		const verticalBottomAlignmentButton = getByLabelText( /Align bottom/ );
 		fireEvent.press( verticalBottomAlignmentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -283,20 +283,20 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByA11yLabel(
+		const verticalAlignmentButton = getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		// Add a new column
@@ -310,7 +310,7 @@ describe( 'Columns block', () => {
 	describe( 'when using columns percentage mechanism', () => {
 		it( "updates the slider's input value", async () => {
 			const screen = await initializeEditor();
-			const { getByA11yLabel, getByTestId } = screen;
+			const { getByLabelText, getByTestId } = screen;
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -324,7 +324,7 @@ describe( 'Columns block', () => {
 			const blockVariationModal = getByTestId( 'block-variation-modal' );
 			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
-				within( blockVariationModal ).getByA11yLabel(
+				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
 				);
 			fireEvent.press( threeColumnLayout );
@@ -337,7 +337,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Get width control
-			const widthControl = getByA11yLabel( /Width. Value is/ );
+			const widthControl = getByLabelText( /Width. Value is/ );
 			fireEvent.press( within( widthControl ).getByText( '33.3' ) );
 			const widthTextInput =
 				within( widthControl ).getByDisplayValue( '33.3' );
@@ -350,7 +350,7 @@ describe( 'Columns block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
-			const { getByA11yLabel, getByTestId } = screen;
+			const { getByLabelText, getByTestId } = screen;
 
 			// Get block
 			const columnsBlock = await getBlock( screen, 'Columns' );
@@ -364,7 +364,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Set custom width value for the first column
-			let widthControl = getByA11yLabel( /Width. Value is/ );
+			let widthControl = getByLabelText( /Width. Value is/ );
 			fireEvent.press( within( widthControl ).getByText( '50' ) );
 			let widthTextInput =
 				within( widthControl ).getByDisplayValue( '50' );
@@ -383,7 +383,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Set custom width value for the second column
-			widthControl = getByA11yLabel( /Width. Value is/ );
+			widthControl = getByLabelText( /Width. Value is/ );
 			fireEvent.press( within( widthControl ).getByText( '50' ) );
 			widthTextInput = within( widthControl ).getByDisplayValue( '50' );
 			fireEvent.changeText( widthTextInput, '55.5' );
@@ -422,7 +422,7 @@ describe( 'Columns block', () => {
 				);
 				await waitFor( () => blockVariationModal.props.isVisible );
 				const columnLayout =
-					within( blockVariationModal ).getByA11yLabel( layout );
+					within( blockVariationModal ).getByLabelText( layout );
 				fireEvent.press( columnLayout );
 
 				expect( getEditorHtml() ).toMatchSnapshot();

package/src/columns/transforms.js

@@ -105,6 +105,14 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) =>
+				innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
+		},
+	],
 };
 
 export default transforms;

package/src/comment-template/block.json

@@ -9,9 +9,13 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
-		"reusable": false,
-		"html": false,
 		"align": true,
+		"html": false,
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/comment-template/style.scss

@@ -1,4 +1,6 @@
 .wp-block-comment-template {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;

package/src/cover/edit/index.js

@@ -188,7 +188,9 @@ function CoverEdit( {
 			className: 'wp-block-cover__inner-container',
 		},
 		{
-			template: innerBlocksTemplate,
+			// Avoid template sync when the `templateLock` value is `all` or `contentOnly`.
+			// See: https://github.com/WordPress/gutenberg/pull/45632
+			template: ! hasInnerBlocks ? innerBlocksTemplate : undefined,
 			templateInsertUpdatesSelection: true,
 			allowedBlocks,
 			templateLock,

package/src/cover/edit/inspector-controls.js

@@ -3,7 +3,6 @@
  */
 import { Fragment, useMemo } from '@wordpress/element';
 import {
-	BaseControl,
 	Button,
 	ExternalLink,
 	FocalPointPicker,
@@ -73,18 +72,17 @@ function CoverHeightInput( {
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				style={ { maxWidth: 80 } }
-				units={ units }
-				value={ computedValue }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ __( 'Minimum height of cover' ) }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ min }
+			onChange={ handleOnChange }
+			onUnitChange={ onUnitChange }
+			__unstableInputWidth={ '80px' }
+			units={ units }
+			value={ computedValue }
+		/>
 	);
 }
 export default function CoverInspectorControls( {

package/src/cover/test/edit.native.js

@@ -307,7 +307,7 @@ describe( 'when an image is attached', () => {
 		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_IMAGE_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const coverBlock = await getBlock( screen, 'Cover' );
@@ -317,7 +317,7 @@ describe( 'when an image is attached', () => {
 		await openBlockSettings( screen );
 
 		// Update Opacity attribute
-		const opacityControl = getByA11yLabel( /Opacity/ );
+		const opacityControl = getByLabelText( /Opacity/ );
 		fireEvent.press( within( opacityControl ).getByText( '50' ) );
 		const heightTextInput =
 			within( opacityControl ).getByDisplayValue( '50' );
@@ -334,12 +334,12 @@ describe( 'when an image is attached', () => {
 
 describe( 'color settings', () => {
 	it( 'sets a color for the overlay background when the placeholder is visible', async () => {
-		const { getByTestId, getByA11yLabel } = await initializeEditor( {
+		const { getByTestId, getByLabelText } = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
 		const block = await waitFor( () =>
-			getByA11yLabel( 'Cover block. Empty' )
+			getByLabelText( 'Cover block. Empty' )
 		);
 		expect( block ).toBeDefined();
 
@@ -354,13 +354,13 @@ describe( 'color settings', () => {
 
 		// Wait for the block to be created.
 		const coverBlockWithOverlay = await waitFor( () =>
-			getByA11yLabel( /Cover Block\. Row 1/ )
+			getByLabelText( /Cover Block\. Row 1/ )
 		);
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
 		const settingsButton = await waitFor( () =>
-			getByA11yLabel( 'Open Settings' )
+			getByLabelText( 'Open Settings' )
 		);
 		fireEvent.press( settingsButton );
 
@@ -370,7 +370,7 @@ describe( 'color settings', () => {
 
 		// Open the overlay color settings.
 		const colorOverlay = await waitFor( () =>
-			getByA11yLabel( 'Color. Empty' )
+			getByLabelText( 'Color. Empty' )
 		);
 		expect( colorOverlay ).toBeDefined();
 		fireEvent.press( colorOverlay );
@@ -389,20 +389,20 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'sets a gradient overlay background when a solid background was already selected', async () => {
-		const { getByTestId, getByA11yLabel } = await initializeEditor( {
+		const { getByTestId, getByLabelText } = await initializeEditor( {
 			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 		} );
 
 		// Wait for the block to be created.
 		const coverBlock = await waitFor( () =>
-			getByA11yLabel( /Cover Block\. Row 1/ )
+			getByLabelText( /Cover Block\. Row 1/ )
 		);
 		expect( coverBlock ).toBeDefined();
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
 		const settingsButton = await waitFor( () =>
-			getByA11yLabel( 'Open Settings' )
+			getByLabelText( 'Open Settings' )
 		);
 		fireEvent.press( settingsButton );
 
@@ -412,7 +412,7 @@ describe( 'color settings', () => {
 
 		// Open the overlay color settings.
 		const colorOverlay = await waitFor( () =>
-			getByA11yLabel( 'Color. Empty' )
+			getByLabelText( 'Color. Empty' )
 		);
 		expect( colorOverlay ).toBeDefined();
 		fireEvent.press( colorOverlay );
@@ -423,7 +423,7 @@ describe( 'color settings', () => {
 
 		// Open the gradients.
 		const gradientsButton = await waitFor( () =>
-			getByA11yLabel( 'Gradient' )
+			getByLabelText( 'Gradient' )
 		);
 		expect( gradientsButton ).toBeDefined();
 
@@ -446,12 +446,12 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'toggles between solid colors and gradients', async () => {
-		const { getByTestId, getByA11yLabel } = await initializeEditor( {
+		const { getByTestId, getByLabelText } = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
 		const block = await waitFor( () =>
-			getByA11yLabel( 'Cover block. Empty' )
+			getByLabelText( 'Cover block. Empty' )
 		);
 		expect( block ).toBeDefined();
 
@@ -466,13 +466,13 @@ describe( 'color settings', () => {
 
 		// Wait for the block to be created.
 		const coverBlockWithOverlay = await waitFor( () =>
-			getByA11yLabel( /Cover Block\. Row 1/ )
+			getByLabelText( /Cover Block\. Row 1/ )
 		);
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
 		const settingsButton = await waitFor( () =>
-			getByA11yLabel( 'Open Settings' )
+			getByLabelText( 'Open Settings' )
 		);
 		fireEvent.press( settingsButton );
 
@@ -482,7 +482,7 @@ describe( 'color settings', () => {
 
 		// Open the overlay color settings.
 		const colorOverlay = await waitFor( () =>
-			getByA11yLabel( 'Color. Empty' )
+			getByLabelText( 'Color. Empty' )
 		);
 		expect( colorOverlay ).toBeDefined();
 		fireEvent.press( colorOverlay );
@@ -499,7 +499,7 @@ describe( 'color settings', () => {
 
 		// Open the gradients.
 		const gradientsButton = await waitFor( () =>
-			getByA11yLabel( 'Gradient' )
+			getByLabelText( 'Gradient' )
 		);
 		expect( gradientsButton ).toBeDefined();
 
@@ -516,11 +516,11 @@ describe( 'color settings', () => {
 		fireEvent.press( newGradientButton );
 
 		// Go back to the settings list.
-		fireEvent.press( await waitFor( () => getByA11yLabel( 'Go back' ) ) );
+		fireEvent.press( await waitFor( () => getByLabelText( 'Go back' ) ) );
 
 		// Find the color setting.
 		const colorSetting = await waitFor( () =>
-			getByA11yLabel( 'Color. Empty' )
+			getByLabelText( 'Color. Empty' )
 		);
 		expect( colorSetting ).toBeDefined();
 		fireEvent.press( colorSetting );
@@ -532,21 +532,21 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
-		const { getByTestId, getByA11yLabel, getByText } =
+		const { getByTestId, getByLabelText, getByText } =
 			await initializeEditor( {
 				initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 			} );
 
 		// Wait for the block to be created.
 		const coverBlock = await waitFor( () =>
-			getByA11yLabel( /Cover Block\. Row 1/ )
+			getByLabelText( /Cover Block\. Row 1/ )
 		);
 		expect( coverBlock ).toBeDefined();
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
 		const settingsButton = await waitFor( () =>
-			getByA11yLabel( 'Open Settings' )
+			getByLabelText( 'Open Settings' )
 		);
 		fireEvent.press( settingsButton );
 
@@ -556,7 +556,7 @@ describe( 'color settings', () => {
 
 		// Open the overlay color settings.
 		const colorOverlay = await waitFor( () =>
-			getByA11yLabel( 'Color. Empty' )
+			getByLabelText( 'Color. Empty' )
 		);
 		expect( colorOverlay ).toBeDefined();
 		fireEvent.press( colorOverlay );
@@ -635,7 +635,7 @@ describe( 'minimum height settings', () => {
 				const screen = await initializeEditor( {
 					initialHtml: COVER_BLOCK_CUSTOM_HEIGHT_HTML,
 				} );
-				const { getByA11yLabel, getByText } = screen;
+				const { getByLabelText, getByText } = screen;
 
 				// Get block
 				const coverBlock = await getBlock( screen, 'Cover' );
@@ -649,7 +649,7 @@ describe( 'minimum height settings', () => {
 				fireEvent.press( getByText( unitName ) );
 
 				// Update height attribute
-				const heightControl = getByA11yLabel( /Minimum height/ );
+				const heightControl = getByLabelText( /Minimum height/ );
 				fireEvent.press( within( heightControl ).getByText( value ) );
 				const heightTextInput =
 					within( heightControl ).getByDisplayValue( value );

package/src/embed/deprecated.js

@@ -11,36 +11,63 @@ import metadata from './block.json';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const { attributes: blockAttributes } = metadata;
 
-const deprecated = [
-	{
-		attributes: blockAttributes,
-		save( { attributes: { url, caption, type, providerNameSlug } } ) {
-			if ( ! url ) {
-				return null;
-			}
-
-			const embedClassName = classnames( 'wp-block-embed', {
-				[ `is-type-${ type }` ]: type,
-				[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
-			} );
-
-			return (
-				<figure className={ embedClassName }>
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the embed figcaption element.
+const v2 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const { url, caption, type, providerNameSlug } = attributes;
+
+		if ( ! url ) {
+			return null;
+		}
+
+		const className = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure { ...useBlockProps.save( { className } ) }>
+				<div className="wp-block-embed__wrapper">
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+				</div>
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes: { url, caption, type, providerNameSlug } } ) {
+		if ( ! url ) {
+			return null;
+		}
+
+		const embedClassName = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure className={ embedClassName }>
+				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-];
+};
+
+const deprecated = [ v2, v1 ];
 
 export default deprecated;