From 24ade9d2a508074b887e8fd6e6c5a032d9605b14 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 21 Oct 2022 09:13:28 +0100 Subject: [PATCH] Video: Add a deprecation for the caption element (#45169) * Video: Add a deprecation for the caption element * add deprecations to the index file * Add new fixtures to cover the figcaption change deprecation Co-authored-by: Glen Davies --- .../block-library/src/video/deprecated.js | 57 +++++++++++++++++++ packages/block-library/src/video/index.js | 2 + .../fixtures/blocks/core__video.html | 2 +- .../fixtures/blocks/core__video.json | 2 +- .../fixtures/blocks/core__video.parsed.json | 4 +- .../blocks/core__video.serialized.html | 2 +- .../blocks/core__video__deprecated-1.html | 3 + .../blocks/core__video__deprecated-1.json | 18 ++++++ .../core__video__deprecated-1.parsed.json | 11 ++++ .../core__video__deprecated-1.serialized.html | 3 + 10 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 packages/block-library/src/video/deprecated.js create mode 100644 test/integration/fixtures/blocks/core__video__deprecated-1.html create mode 100644 test/integration/fixtures/blocks/core__video__deprecated-1.json create mode 100644 test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html diff --git a/packages/block-library/src/video/deprecated.js b/packages/block-library/src/video/deprecated.js new file mode 100644 index 00000000000000..ef4ddf41ce3f41 --- /dev/null +++ b/packages/block-library/src/video/deprecated.js @@ -0,0 +1,57 @@ +/** + * WordPress dependencies + */ +import { RichText, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import Tracks from './tracks'; + +const { attributes: blockAttributes } = metadata; + +// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname +// to the video figcaption element. +const v1 = { + attributes: blockAttributes, + save( { attributes } ) { + const { + autoplay, + caption, + controls, + loop, + muted, + poster, + preload, + src, + playsInline, + tracks, + } = attributes; + return ( +
+ { src && ( + + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, +}; + +const deprecated = [ v1 ]; + +export default deprecated; diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js index 688d5ca944f846..57201ef7125658 100644 --- a/packages/block-library/src/video/index.js +++ b/packages/block-library/src/video/index.js @@ -8,6 +8,7 @@ import { video as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; +import deprecated from './deprecated'; import edit from './edit'; import metadata from './block.json'; import save from './save'; @@ -27,6 +28,7 @@ export const settings = { }, }, transforms, + deprecated, edit, save, }; diff --git a/test/integration/fixtures/blocks/core__video.html b/test/integration/fixtures/blocks/core__video.html index 67f6f86fec0955..50e34dfa1e1385 100644 --- a/test/integration/fixtures/blocks/core__video.html +++ b/test/integration/fixtures/blocks/core__video.html @@ -1,3 +1,3 @@ -
+
My video
diff --git a/test/integration/fixtures/blocks/core__video.json b/test/integration/fixtures/blocks/core__video.json index 98ec2133902209..5458186c67ae6b 100644 --- a/test/integration/fixtures/blocks/core__video.json +++ b/test/integration/fixtures/blocks/core__video.json @@ -4,7 +4,7 @@ "isValid": true, "attributes": { "autoplay": false, - "caption": "", + "caption": "My video", "controls": true, "loop": false, "muted": false, diff --git a/test/integration/fixtures/blocks/core__video.parsed.json b/test/integration/fixtures/blocks/core__video.parsed.json index deb9a2a6d74e92..c0f6f04f986a3e 100644 --- a/test/integration/fixtures/blocks/core__video.parsed.json +++ b/test/integration/fixtures/blocks/core__video.parsed.json @@ -3,9 +3,9 @@ "blockName": "core/video", "attrs": {}, "innerBlocks": [], - "innerHTML": "\n
\n", + "innerHTML": "\n
My video
\n", "innerContent": [ - "\n
\n" + "\n
My video
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__video.serialized.html b/test/integration/fixtures/blocks/core__video.serialized.html index b3d567b5c0d698..6a1cb7ab46c8d7 100644 --- a/test/integration/fixtures/blocks/core__video.serialized.html +++ b/test/integration/fixtures/blocks/core__video.serialized.html @@ -1,3 +1,3 @@ -
+
My video
diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.html b/test/integration/fixtures/blocks/core__video__deprecated-1.html new file mode 100644 index 00000000000000..3e165ecbd8e474 --- /dev/null +++ b/test/integration/fixtures/blocks/core__video__deprecated-1.html @@ -0,0 +1,3 @@ + +
My video
+ diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.json b/test/integration/fixtures/blocks/core__video__deprecated-1.json new file mode 100644 index 00000000000000..5458186c67ae6b --- /dev/null +++ b/test/integration/fixtures/blocks/core__video__deprecated-1.json @@ -0,0 +1,18 @@ +[ + { + "name": "core/video", + "isValid": true, + "attributes": { + "autoplay": false, + "caption": "My video", + "controls": true, + "loop": false, + "muted": false, + "preload": "metadata", + "src": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=", + "playsInline": false, + "tracks": [] + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json new file mode 100644 index 00000000000000..3619eff24d2d24 --- /dev/null +++ b/test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/video", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n
My video
\n", + "innerContent": [ + "\n
My video
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html new file mode 100644 index 00000000000000..b5ee414dc68910 --- /dev/null +++ b/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html @@ -0,0 +1,3 @@ + +
My video
+