Embed: Remove aspect ratio classes when transforming into Paragraph (#…

…68721) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ZebulanStanphill <[email protected]> Co-authored-by: kathrynwp <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: petitphp <[email protected]> Co-authored-by: ts-mz <[email protected]>
WordPress · Jan 18, 2025 · 61d7b50 · 61d7b50 · github-actions · Jan 18, 2025
1 parent bd2c328
commit 61d7b50
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
@@ -123,7 +123,8 @@ export function addTransforms( result, source, index, results ) {
 	// if source N does not exists we do nothing.
 	if ( source[ index ] ) {
 		const originClassName = source[ index ]?.attributes.className;
-		if ( originClassName ) {
+		// Avoid overriding classes if the transformed block already includes them.
+		if ( originClassName && result.attributes.className === undefined ) {
 			return {
 				...result,
 				attributes: {

diff --git a/packages/block-library/src/embed/transforms.js b/packages/block-library/src/embed/transforms.js
@@ -7,6 +7,7 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import metadata from './block.json';
+import { removeAspectRatioClasses } from './util';
 
 const { name: EMBED_BLOCK } = metadata;
 
@@ -33,13 +34,14 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			isMatch: ( { url } ) => !! url,
-			transform: ( { url, caption } ) => {
+			transform: ( { url, caption, className } ) => {
 				let value = `<a href="${ url }">${ url }</a>`;
 				if ( caption?.trim() ) {
 					value += `<br />${ caption }`;
 				}
 				return createBlock( 'core/paragraph', {
 					content: value,
+					className: removeAspectRatioClasses( className ),
 				} );
 			},
 		},