Fix: Embed Block: Match HTML in the editor and frontend (WordPress#65478

)

* Add the fix for embed to resemeble exact markup as frontend and backend

* Fix e2e test for updated embed block

* Add the blockprops className to use the newClassname

* Fix the code syntax for the same

* Add the missing class on editor for the embed block

* Add is-type-<typename> class to the editor embed block

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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,15 @@ const EmbedEdit = ( props ) => {
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>
-			<View { ...blockProps }>
+			<figure
+				{ ...blockProps }
+				className={ clsx( blockProps.className, className, {
+					[ `is-type-${ type }` ]: type,
+					[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+					[ `wp-block-embed-${ providerNameSlug }` ]:
+						providerNameSlug,
+				} ) }
+			>
 				<EmbedPreview
 					preview={ preview }
 					previewable={ previewable }
@@ -279,7 +288,15 @@ const EmbedEdit = ( props ) => {
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 				/>
-			</View>
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
+			</figure>
 		</>
 	);
 };

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 (
-		<figure
-			className={ clsx( className, 'wp-block-embed', {
-				'is-type-video': 'video' === type,
-			} ) }
-		>
+		<>
 			{ previewable ? (
 				embedWrapper
 			) : (
@@ -122,14 +114,6 @@ export default function EmbedPreview( {
 					</p>
 				</Placeholder>
 			) }
-			<Caption
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSelected={ isSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				label={ __( 'Embed caption text' ) }
-				showToolbarButton={ isSelected }
-			/>
-		</figure>
+		</>
 	);
 }

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/ );