@wordpress/block-library 8.4.0 → 8.6.0

package/src/embed/edit.native.js

@@ -4,6 +4,7 @@
 import {
 	createUpgradedEmbedBlock,
 	getClassNames,
+	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
 	getMergedAttributesWithPreview,
@@ -123,16 +124,14 @@ const EmbedEdit = ( props ) => {
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
 	 *
-	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+	const getMergedAttributes = () =>
 		getMergedAttributesWithPreview(
 			attributes,
 			preview,
 			title,
-			responsive,
-			ignorePreviousClassName
+			responsive
 		);
 
 	const toggleResponsive = () => {
@@ -159,21 +158,20 @@ const EmbedEdit = ( props ) => {
 		const newURL = url.replace( /\/$/, '' );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, url ] );
+	}, [ preview?.html, url, cannotEmbed, fetching ] );
 
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview, we set the attributes derived from
-			// the preview data. In this case when getting the merged attributes,
-			// we ignore the previous classname because it might not match the expected
-			// classes by the new preview.
-			setAttributes( getMergedAttributes( true ) );
+			// When obtaining an incoming preview,
+			// we set the attributes derived from the preview data.
+			const mergedAttributes = getMergedAttributes();
+			setAttributes( mergedAttributes );
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
-					getMergedAttributes()
+					mergedAttributes
 				);
 
 				if ( upgradedBlock ) {
@@ -188,13 +186,25 @@ const EmbedEdit = ( props ) => {
 		[ isEditingURL ]
 	);
 
-	const onEditURL = useCallback( ( value ) => {
-		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
-		// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
-		// for creating the new block.
-		setAttributes( { url: value } );
-		setIsEditingURL( false );
-	}, [] );
+	const onEditURL = useCallback(
+		( value ) => {
+			// If the embed URL was changed, we need to reset the aspect ratio class.
+			// To do this we have to remove the existing ratio class so it can be recalculated.
+			if ( attributes.url !== value ) {
+				const blockClass = removeAspectRatioClasses(
+					attributes.className
+				);
+				setAttributes( { className: blockClass } );
+			}
+
+			// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+			// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+			// for creating the new block.
+			setAttributes( { url: value } );
+			setIsEditingURL( false );
+		},
+		[ attributes, setAttributes ]
+	);
 
 	const blockProps = useBlockProps();
 

package/src/embed/embed-controls.js

@@ -49,6 +49,7 @@ const EmbedControls = ( {
 					className="blocks-responsive"
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Resize for smaller devices' ) }
 						checked={ allowResponsive }
 						help={ getResponsiveHelp }

package/src/embed/test/__snapshots__/index.native.js.snap

@@ -1,56 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Embed block alignment options sets Align center option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"center\\"} -->
-<figure class=\\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"center"} -->
+<figure class="wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Align left option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"left\\"} -->
-<figure class=\\"wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"left"} -->
+<figure class="wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Align right option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"right\\"} -->
-<figure class=\\"wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"right"} -->
+<figure class="wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Full width option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"full\\"} -->
-<figure class=\\"wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"full"} -->
+<figure class="wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Wide width option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"wide\\"} -->
-<figure class=\\"wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"wide"} -->
+<figure class="wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block block settings toggles resize for smaller devices media settings 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"allowResponsive\\":false,\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","allowResponsive":false,"responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block create by pasting URL creates embed block when pasting URL in paragraph block 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://www.youtube.com/watch?v=lXMskKTw3Bc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
 https://www.youtube.com/watch?v=lXMskKTw3Bc
 </div></figure>
 <!-- /wp:embed -->"
@@ -58,75 +58,75 @@ https://www.youtube.com/watch?v=lXMskKTw3Bc
 
 exports[`Embed block create by pasting URL creates link when pasting URL in paragraph block 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
+<p><a href="https://www.youtube.com/watch?v=lXMskKTw3Bc">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Embed block displays cannot embed on the placeholder if preview data is null 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/testing\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/testing","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/testing
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL edits URL when edited after setting a bad URL of a provider 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL keeps the previous URL if an invalid URL is set 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL keeps the previous URL if no URL is set 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL replaces URL 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://www.youtube.com/watch?v=lXMskKTw3Bc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
 https://www.youtube.com/watch?v=lXMskKTw3Bc
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {\\"url\\":\\"\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {"url":"","type":"rich","providerNameSlug":"twitter","responsive":true} /-->"`;
 
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
 exports[`Embed block retry allows editing link if request failed 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\"} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter"} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
@@ -134,58 +134,58 @@ https://twitter.com/notnownikki
 
 exports[`Embed block retry converts to link if preview request failed 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"https://twitter.com/notnownikki\\">https://twitter.com/notnownikki</a></p>
+<p><a href="https://twitter.com/notnownikki">https://twitter.com/notnownikki</a></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Embed block retry retries loading the preview if initial request failed 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL upon block insertion auto-pastes the URL from clipboard 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL upon block insertion sets a valid URL when dismissing edit URL modal 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {"url":""} /-->"`;
 
 exports[`Embed block set URL when empty block auto-pastes the URL from clipboard 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL when empty block sets a valid URL when dismissing edit URL modal 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {"url":""} /-->"`;
 
 exports[`Embed block sets block caption 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
-</div><figcaption class=\\"wp-element-caption\\">Caption</figcaption></figure>
+</div><figcaption class="wp-element-caption">Caption</figcaption></figure>
 <!-- /wp:embed -->"
 `;

package/src/embed/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Embed block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Embed block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed --></div>
+<!-- /wp:group -->"
+`;

package/src/embed/test/index.js

@@ -17,6 +17,7 @@ import {
 	createUpgradedEmbedBlock,
 	getEmbedInfoByProvider,
 	removeAspectRatioClasses,
+	hasAspectRatioClass,
 } from '../util';
 import { embedInstagramIcon } from '../icons';
 import variations from '../variations';
@@ -101,6 +102,17 @@ describe( 'utils', () => {
 			).toEqual( expected );
 		} );
 	} );
+	describe( 'hasAspectRatioClass', () => {
+		it( 'should return false if an aspect ratio class does not exist', () => {
+			const existingClassNames = 'wp-block-embed is-type-video';
+			expect( hasAspectRatioClass( existingClassNames ) ).toBe( false );
+		} );
+		it( 'should return true if an aspect ratio class exists', () => {
+			const existingClassNames =
+				'wp-block-embed is-type-video wp-embed-aspect-16-9 wp-has-aspect-ratio';
+			expect( hasAspectRatioClass( existingClassNames ) ).toBe( true );
+		} );
+	} );
 	describe( 'removeAspectRatioClasses', () => {
 		it( 'should return the same falsy value as received', () => {
 			const existingClassNames = undefined;

package/src/embed/test/transforms.native.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Embed';
+const initialHtml = `
+<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/embed/util.js

@@ -152,6 +152,21 @@ export const createUpgradedEmbedBlock = (
 	} );
 };
 
+/**
+ * Determine if the block already has an aspect ratio class applied.
+ *
+ * @param {string} existingClassNames Existing block classes.
+ * @return {boolean} True or false if the classnames contain an aspect ratio class.
+ */
+export const hasAspectRatioClass = ( existingClassNames ) => {
+	if ( ! existingClassNames ) {
+		return false;
+	}
+	return ASPECT_RATIOS.some( ( { className } ) =>
+		existingClassNames.includes( className )
+	);
+};
+
 /**
  * Removes all previously set aspect ratio related classes and return the rest
  * existing class names.
@@ -283,6 +298,13 @@ export const getAttributesFromPreview = memoize(
 			attributes.providerNameSlug = providerNameSlug;
 		}
 
+		// Aspect ratio classes are removed when the embed URL is updated.
+		// If the embed already has an aspect ratio class, that means the URL has not changed.
+		// Which also means no need to regenerate it with getClassNames.
+		if ( hasAspectRatioClass( currentClassNames ) ) {
+			return attributes;
+		}
+
 		attributes.className = getClassNames(
 			html,
 			currentClassNames,
@@ -296,27 +318,26 @@ export const getAttributesFromPreview = memoize(
 /**
  * Returns the attributes derived from the preview, merged with the current attributes.
  *
- * @param {Object}  currentAttributes       The current attributes of the block.
- * @param {Object}  preview                 The preview data.
- * @param {string}  title                   The block's title, e.g. Twitter.
- * @param {boolean} isResponsive            Boolean indicating if the block supports responsive content.
- * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+ * @param {Object}  currentAttributes The current attributes of the block.
+ * @param {Object}  preview           The preview data.
+ * @param {string}  title             The block's title, e.g. Twitter.
+ * @param {boolean} isResponsive      Boolean indicating if the block supports responsive content.
  * @return {Object} Merged attributes.
  */
 export const getMergedAttributesWithPreview = (
 	currentAttributes,
 	preview,
 	title,
-	isResponsive,
-	ignorePreviousClassName = false
+	isResponsive
 ) => {
 	const { allowResponsive, className } = currentAttributes;
+
 	return {
 		...currentAttributes,
 		...getAttributesFromPreview(
 			preview,
 			title,
-			ignorePreviousClassName ? undefined : className,
+			className,
 			isResponsive,
 			allowResponsive
 		),

package/src/file/inspector.js

@@ -43,6 +43,7 @@ export default function FileBlockInspector( {
 				{ href.endsWith( '.pdf' ) && (
 					<PanelBody title={ __( 'PDF settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show inline embed' ) }
 							help={
 								displayPreview
@@ -78,11 +79,13 @@ export default function FileBlockInspector( {
 						onChange={ changeLinkDestinationOption }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						checked={ openInNewWindow }
 						onChange={ changeOpenInNewWindow }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show download button' ) }
 						checked={ showDownloadButton }
 						onChange={ changeShowDownloadButton }