Embed: Add deprecation for the caption element (#45166)

Co-authored-by: Glen Davies <glen.davies@automattic.com>

packages/block-library/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;

test/integration/fixtures/blocks/core__embed__deprecated-1.html

@@ -0,0 +1,6 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed">
+    https://example.com/
+    <figcaption>Embedded content from an example URL</figcaption>
+</figure>
+<!-- /wp:embed -->

test/integration/fixtures/blocks/core__embed__deprecated-1.json

@@ -0,0 +1,14 @@
+[
+	{
+		"name": "core/embed",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"caption": "Embedded content from an example URL",
+			"allowResponsive": true,
+			"responsive": false,
+			"previewable": true
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json

@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/embed",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-embed\">\n    https://example.com/\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-embed\">\n    https://example.com/\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
+https://example.com/
+</div><figcaption class="wp-element-caption">Embedded content from an example URL</figcaption></figure>
+<!-- /wp:embed -->

test/integration/fixtures/blocks/core__embed__deprecated-2.html

@@ -0,0 +1,8 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed">
+    <div class="wp-block-embed__wrapper">
+        https://example.com/
+    </div>
+    <figcaption>Embedded content from an example URL</figcaption>
+</figure>
+<!-- /wp:embed -->

test/integration/fixtures/blocks/core__embed__deprecated-2.json

@@ -0,0 +1,14 @@
+[
+	{
+		"name": "core/embed",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"caption": "Embedded content from an example URL",
+			"allowResponsive": true,
+			"responsive": false,
+			"previewable": true
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json

@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/embed",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-embed\">\n    <div class=\"wp-block-embed__wrapper\">\n        https://example.com/\n    </div>\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-embed\">\n    <div class=\"wp-block-embed__wrapper\">\n        https://example.com/\n    </div>\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
+https://example.com/
+</div><figcaption class="wp-element-caption">Embedded content from an example URL</figcaption></figure>
+<!-- /wp:embed -->