From ca3988d7b905148540e8b60bd9703166730c960a Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 19 Sep 2024 10:45:11 +0530 Subject: [PATCH 1/6] Add the fix for embed to resemeble exact markup as frontend and backend --- packages/block-library/src/embed/edit.js | 13 ++++++++++-- .../block-library/src/embed/embed-preview.js | 20 ++----------------- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index da3dac3e3d62b..8e8072dbe2a97 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -30,6 +30,7 @@ import { useBlockProps } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { View } from '@wordpress/primitives'; import { getAuthority } from '@wordpress/url'; +import { Caption } from '../utils/caption'; const EmbedEdit = ( props ) => { const { @@ -261,7 +262,7 @@ const EmbedEdit = ( props ) => { toggleResponsive={ toggleResponsive } switchBackToURLInput={ () => setIsEditingURL( true ) } /> - +
{ attributes={ attributes } setAttributes={ setAttributes } /> - + +
); }; diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index 1a230faf0c3d5..c0c7d5942d1d7 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -21,7 +21,6 @@ import { getAuthority } from '@wordpress/url'; * Internal dependencies */ import WpEmbedPreview from './wp-embed-preview'; -import { Caption } from '../utils/caption'; export default function EmbedPreview( { preview, @@ -32,9 +31,6 @@ export default function EmbedPreview( { className, icon, label, - insertBlocksAfter, - attributes, - setAttributes, } ) { const [ interactive, setInteractive ] = useState( false ); @@ -96,11 +92,7 @@ export default function EmbedPreview( { /* eslint-enable jsx-a11y/no-static-element-interactions */ return ( -
+ <> { previewable ? ( embedWrapper ) : ( @@ -122,14 +114,6 @@ export default function EmbedPreview( {

) } - -
+ ); } From 2ed84eef098093cf837a99b72576b84fa4b75f6d Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 23 Sep 2024 10:39:06 +0530 Subject: [PATCH 2/6] Fix e2e test for updated embed block --- test/e2e/specs/editor/various/embedding.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/various/embedding.spec.js b/test/e2e/specs/editor/various/embedding.spec.js index fb9746dce52e3..fe488f9130174 100644 --- a/test/e2e/specs/editor/various/embedding.spec.js +++ b/test/e2e/specs/editor/various/embedding.spec.js @@ -134,15 +134,15 @@ test.describe( 'Embedding content', () => { 'https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/' ); await expect( - currenEmbedBlock.locator( 'figure' ), + currenEmbedBlock, 'WordPress valid content. Should render valid figure element.' - ).toHaveClass( 'wp-block-embed' ); + ).toHaveClass( /wp-block-embed/ ); await embedUtils.insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' ); await expect( - currenEmbedBlock.locator( 'figure' ), + currenEmbedBlock, 'Video content. Should render valid figure element, and include the aspect ratio class.' ).toHaveClass( /wp-embed-aspect-16-9/ ); From 357823858618ec7a10463e4988a157e08c3ccc1f Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Tue, 24 Sep 2024 10:07:07 +0530 Subject: [PATCH 3/6] Add the blockprops className to use the newClassname --- packages/block-library/src/embed/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 8e8072dbe2a97..b69fc75cef92f 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -251,6 +251,9 @@ const EmbedEdit = ( props ) => { className: classFromPreview, } = getMergedAttributes(); const className = clsx( classFromPreview, props.className ); + blockProps.className = clsx( blockProps.className, className, { + 'is-type-video': 'video' === type, + } ); return ( <> From a57f1341a232133ba8e5b5008c8a2d496b46d8f9 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 7 Oct 2024 09:55:52 +0530 Subject: [PATCH 4/6] Fix the code syntax for the same --- packages/block-library/src/embed/edit.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index b69fc75cef92f..17f626175127b 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -251,9 +251,6 @@ const EmbedEdit = ( props ) => { className: classFromPreview, } = getMergedAttributes(); const className = clsx( classFromPreview, props.className ); - blockProps.className = clsx( blockProps.className, className, { - 'is-type-video': 'video' === type, - } ); return ( <> @@ -265,7 +262,12 @@ const EmbedEdit = ( props ) => { toggleResponsive={ toggleResponsive } switchBackToURLInput={ () => setIsEditingURL( true ) } /> -
+
Date: Mon, 7 Oct 2024 10:04:20 +0530 Subject: [PATCH 5/6] Add the missing class on editor for the embed block --- packages/block-library/src/embed/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 17f626175127b..8a58f3f59f4cf 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -266,6 +266,9 @@ const EmbedEdit = ( props ) => { { ...blockProps } className={ clsx( blockProps.className, className, { 'is-type-video': 'video' === type, + [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, + [ `wp-block-embed-${ providerNameSlug }` ]: + providerNameSlug, } ) } > Date: Mon, 7 Oct 2024 10:10:22 +0530 Subject: [PATCH 6/6] Add is-type- class to the editor embed block --- packages/block-library/src/embed/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 8a58f3f59f4cf..c0a10a20e31fc 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -265,7 +265,7 @@ const EmbedEdit = ( props ) => {