Fix WordPress block resolution and embeds as reusable blocks

lib/blocks.php

@@ -249,7 +249,7 @@ function do_blocks( $content ) {
 
 	return $rendered_content;
 }
-add_filter( 'the_content', 'do_blocks', 9 ); // BEFORE do_shortcode().
+add_filter( 'the_content', 'do_blocks', 7 ); // BEFORE do_shortcode() and oembed.
 
 /**
  * Remove all dynamic blocks from the given content.
@@ -275,7 +275,7 @@ function strip_dynamic_blocks( $content ) {
  * @return string
  */
 function strip_dynamic_blocks_add_filter( $text ) {
-	add_filter( 'the_content', 'strip_dynamic_blocks', 8 ); // Before do_blocks().
+	add_filter( 'the_content', 'strip_dynamic_blocks', 6 ); // Before do_blocks().
 
 	return $text;
 }

packages/block-library/src/embed/index.js

@@ -59,10 +59,10 @@ export function getEmbedEdit( title, icon ) {
 	return class extends Component {
 		constructor() {
 			super( ...arguments );
-
 			this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
 			this.setUrl = this.setUrl.bind( this );
 			this.maybeSwitchBlock = this.maybeSwitchBlock.bind( this );
+			this.getAttributesFromPreview = this.getAttributesFromPreview.bind( this );
 			this.setAttributesFromPreview = this.setAttributesFromPreview.bind( this );
 			this.setAspectRatioClassNames = this.setAspectRatioClassNames.bind( this );
 			this.getResponsiveHelp = this.getResponsiveHelp.bind( this );
@@ -91,7 +91,7 @@ export function getEmbedEdit( title, icon ) {
 			const switchedPreview = this.props.preview && this.props.attributes.url !== prevProps.attributes.url;
 			const switchedURL = this.props.attributes.url !== prevProps.attributes.url;
 
-			if ( switchedURL && this.maybeSwitchBlock() ) {
+			if ( ( switchedURL || ( hasPreview && ! hadPreview ) ) && this.maybeSwitchBlock() ) {
 				return;
 			}
 
@@ -154,7 +154,24 @@ export function getEmbedEdit( title, icon ) {
 				if ( includes( html, 'class="wp-embedded-content" data-secret' ) ) {
 					// If this is not the WordPress embed block, transform it into one.
 					if ( this.props.name !== 'core-embed/wordpress' ) {
-						this.props.onReplace( createBlock( 'core-embed/wordpress', { url } ) );
+						this.props.onReplace(
+							createBlock(
+								'core-embed/wordpress',
+								{
+									url,
+									// By now we have the preview, but when the new block first renders, it
+									// won't have had all the attributes set, and so won't get the correct
+									// type and it won't render correctly. So, we work out the attributes
+									// here so that the initial render works when we switch to the WordPress
+									// block. This only affects the WordPress block because it can't be
+									// rendered in the usual Sandbox (it has a sandbox of its own) and it
+									// relies on the preview to set the correct render type.
+									...this.getAttributesFromPreview(
+										this.props.preview, this.props.attributes.allowResponsive
+									),
+								}
+							)
+						);
 						return true;
 					}
 				}
@@ -189,6 +206,8 @@ export function getEmbedEdit( title, icon ) {
 					}
 				}
 			}
+
+			return this.props.attributes.className;
 		}
 
 		/**
@@ -210,11 +229,14 @@ export function getEmbedEdit( title, icon ) {
 		}
 
 		/***
-		 * Sets block attributes based on the preview data.
+		 * Gets block attributes based on the preview and responsive state.
+		 *
+		 * @param {string} preview The preview data.
+		 * @param {boolean} allowResponsive Apply responsive classes to fixed size content.
+		 * @return {Object} Attributes and values.
 		 */
-		setAttributesFromPreview() {
-			const { setAttributes, preview } = this.props;
-
+		getAttributesFromPreview( preview, allowResponsive = true ) {
+			const attributes = {};
 			// Some plugins only return HTML with no type info, so default this to 'rich'.
 			let { type = 'rich' } = preview;
 			// If we got a provider name from the API, use it for the slug, otherwise we use the title,
@@ -227,10 +249,25 @@ export function getEmbedEdit( title, icon ) {
 			}
 
 			if ( html || 'photo' === type ) {
-				setAttributes( { type, providerNameSlug } );
+				attributes.type = type;
+				attributes.providerNameSlug = providerNameSlug;
 			}
 
-			this.setAspectRatioClassNames( html );
+			attributes.className = classnames(
+				this.props.attributes.className,
+				this.getAspectRatioClassNames( html, allowResponsive )
+			);
+
+			return attributes;
+		}
+
+		/***
+		 * Sets block attributes based on the preview data.
+		 */
+		setAttributesFromPreview() {
+			const { setAttributes, preview } = this.props;
+			const { allowResponsive } = this.props.attributes;
+			setAttributes( this.getAttributesFromPreview( preview, allowResponsive ) );
 		}
 
 		switchBackToURLInput() {