From 95ca4ec581edccf9775a0922451cafc069b90281 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Thu, 20 Oct 2022 16:13:10 +0100 Subject: [PATCH 1/2] Embed: Add deprecation for the caption element --- .../block-library/src/embed/deprecated.js | 77 ++++++++++++------- 1 file changed, 51 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js index 7673943c70e6a1..90e72eb7b65a93 100644 --- a/packages/block-library/src/embed/deprecated.js +++ b/packages/block-library/src/embed/deprecated.js @@ -11,36 +11,61 @@ 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 }> +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; From bcb54c1e43b8ddced8902482a0efdc1ed9de0782 Mon Sep 17 00:00:00 2001 From: Glen Davies <glen.davies@automattic.com> Date: Fri, 21 Oct 2022 12:17:52 +1300 Subject: [PATCH 2/2] Add fixtures for new deprecation, as well as for the original deprecation --- packages/block-library/src/embed/deprecated.js | 2 ++ .../fixtures/blocks/core__embed__deprecated-1.html | 6 ++++++ .../fixtures/blocks/core__embed__deprecated-1.json | 14 ++++++++++++++ .../blocks/core__embed__deprecated-1.parsed.json | 13 +++++++++++++ .../core__embed__deprecated-1.serialized.html | 5 +++++ .../fixtures/blocks/core__embed__deprecated-2.html | 8 ++++++++ .../fixtures/blocks/core__embed__deprecated-2.json | 14 ++++++++++++++ .../blocks/core__embed__deprecated-2.parsed.json | 13 +++++++++++++ .../core__embed__deprecated-2.serialized.html | 5 +++++ 9 files changed, 80 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-1.html create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-1.json create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-2.html create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-2.json create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json create mode 100644 test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js index 90e72eb7b65a93..afa691ecb64e2c 100644 --- a/packages/block-library/src/embed/deprecated.js +++ b/packages/block-library/src/embed/deprecated.js @@ -15,6 +15,8 @@ import { RichText, useBlockProps } from '@wordpress/block-editor'; const { attributes: blockAttributes } = metadata; +// 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 } ) { 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 @@ +<!-- 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 --> 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<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" + ] + } +] 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 @@ +<!-- 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 --> 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 @@ +<!-- 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 --> 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<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" + ] + } +] 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 @@ +<!-- 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 -->