diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js index 7673943c70e6a1..afa691ecb64e2c 100644 --- a/packages/block-library/src/embed/deprecated.js +++ b/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 ( -
+// 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 ( +
+
{ `\n${ url }\n` /* URL needs to be on its own line. */ } - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, + + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, +}; + +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 ( +
+ { `\n${ url }\n` /* URL needs to be on its own line. */ } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); }, -]; +}; + +const deprecated = [ v2, v1 ]; export default deprecated; diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.html b/test/integration/fixtures/blocks/core__embed__deprecated-1.html new file mode 100644 index 00000000000000..3996ecd6425b11 --- /dev/null +++ b/test/integration/fixtures/blocks/core__embed__deprecated-1.html @@ -0,0 +1,6 @@ + +
+ https://example.com/ +
Embedded content from an example URL
+
+ diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.json b/test/integration/fixtures/blocks/core__embed__deprecated-1.json new file mode 100644 index 00000000000000..dfc2b215684c26 --- /dev/null +++ b/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": [] + } +] diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json new file mode 100644 index 00000000000000..3149ce776fc777 --- /dev/null +++ b/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
\n https://example.com/\n
Embedded content from an example URL
\n
\n", + "innerContent": [ + "\n
\n https://example.com/\n
Embedded content from an example URL
\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html new file mode 100644 index 00000000000000..af25e3c4acb671 --- /dev/null +++ b/test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html @@ -0,0 +1,5 @@ + +
+https://example.com/ +
Embedded content from an example URL
+ diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.html b/test/integration/fixtures/blocks/core__embed__deprecated-2.html new file mode 100644 index 00000000000000..f9a539f22a0c95 --- /dev/null +++ b/test/integration/fixtures/blocks/core__embed__deprecated-2.html @@ -0,0 +1,8 @@ + +
+
+ https://example.com/ +
+
Embedded content from an example URL
+
+ diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.json b/test/integration/fixtures/blocks/core__embed__deprecated-2.json new file mode 100644 index 00000000000000..dfc2b215684c26 --- /dev/null +++ b/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": [] + } +] diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json b/test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json new file mode 100644 index 00000000000000..e5eb6716d2e732 --- /dev/null +++ b/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
\n
\n https://example.com/\n
\n
Embedded content from an example URL
\n
\n", + "innerContent": [ + "\n
\n
\n https://example.com/\n
\n
Embedded content from an example URL
\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html new file mode 100644 index 00000000000000..af25e3c4acb671 --- /dev/null +++ b/test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html @@ -0,0 +1,5 @@ + +
+https://example.com/ +
Embedded content from an example URL
+