Fix dynamic blocks not rendering in the frontend (#11050)

* Fix dynamic blocks not rendering in the frontend

* Use variables for hook priorities

* Test that dynamic blocks are rendered when meta boxes use the excerpt

* Fix autop hook order

* Fix linting

* Fix scoping issues

* Add an e2e test for the autop issue

* copy/paste issues

* Trying to fix travis

* Trim content to avoid small differences between themes

Author: youknowriad

lib/blocks.php

@@ -262,6 +262,7 @@ function do_blocks( $content ) {
 
 		return $rendered_content;
 	}
+
 	add_filter( 'the_content', 'do_blocks', 7 ); // BEFORE do_shortcode() and oembed.
 }
 
@@ -292,7 +293,7 @@ function strip_dynamic_blocks( $content ) {
 	 * @return string
 	 */
 	function strip_dynamic_blocks_add_filter( $text ) {
-		add_filter( 'the_content', 'strip_dynamic_blocks', 6 ); // Before do_blocks().
+		add_filter( 'the_content', 'strip_dynamic_blocks', 6 );
 
 		return $text;
 	}
@@ -312,7 +313,7 @@ function strip_dynamic_blocks_add_filter( $text ) {
 	 * @return string
 	 */
 	function strip_dynamic_blocks_remove_filter( $text ) {
-		remove_filter( 'the_content', 'strip_dynamic_blocks', 8 );
+		remove_filter( 'the_content', 'strip_dynamic_blocks', 6 );
 
 		return $text;
 	}

lib/compat.php

@@ -114,7 +114,7 @@ function gutenberg_wpautop( $content ) {
 	return wpautop( $content );
 }
 remove_filter( 'the_content', 'wpautop' );
-add_filter( 'the_content', 'gutenberg_wpautop', 8 );
+add_filter( 'the_content', 'gutenberg_wpautop', 6 );
 
 
 /**

test/e2e/specs/__snapshots__/compatibility-classic-editor.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Compatibility with Classic Editor Should not apply autop when rendering blocks 1`] = `
+"<a>
+Random Link
+</a>"
+`;

test/e2e/specs/compatibility-classic-editor.test.js

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { newPost, insertBlock, publishPost } from '../support/utils';
+
+describe( 'Compatibility with Classic Editor', () => {
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	it( 'Should not apply autop when rendering blocks', async () => {
+		await insertBlock( 'Custom HTML' );
+		await page.keyboard.type( '<a>' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Random Link' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '</a>' );
+		await publishPost();
+
+		// View the post.
+		const viewPostLinks = await page.$x( "//a[contains(text(), 'View Post')]" );
+		await viewPostLinks[ 0 ].click();
+		await page.waitForNavigation();
+
+		// Check the the content doesn't contain <p> tags
+		await page.waitForSelector( '.entry-content' );
+		const content = await page.$eval( '.entry-content', ( element ) => element.innerHTML.trim() );
+		expect( content ).toMatchSnapshot();
+	} );
+} );

test/e2e/specs/meta-boxes.test.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { newPost } from '../support/utils';
+import { newPost, insertBlock, publishPost } from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
 describe( 'Meta boxes', () => {
@@ -35,4 +35,27 @@ describe( 'Meta boxes', () => {
 			page.keyboard.up( 'Meta' ),
 		] );
 	} );
+
+	it( 'Should render dynamic blocks when the meta box uses the excerpt for front end rendering', async () => {
+		// Publish a post so there's something for the latest posts dynamic block to render.
+		await newPost();
+		await page.type( '.editor-post-title__input', 'A published post' );
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Hello there!' );
+		await publishPost();
+
+		// Publish a post with the latest posts dynamic block.
+		await newPost();
+		await page.type( '.editor-post-title__input', 'Dynamic block test' );
+		await insertBlock( 'Latest Posts' );
+		await publishPost();
+
+		// View the post.
+		const viewPostLinks = await page.$x( "//a[contains(text(), 'View Post')]" );
+		await viewPostLinks[ 0 ].click();
+		await page.waitForNavigation();
+
+		// Check the the dynamic block appears.
+		await page.waitForSelector( '.wp-block-latest-posts' );
+	} );
 } );

test/e2e/test-plugins/meta-box.php

@@ -23,3 +23,15 @@ function gutenberg_test_meta_box_add_meta_box() {
 	);
 }
 add_action( 'add_meta_boxes', 'gutenberg_test_meta_box_add_meta_box' );
+
+
+function gutenberg_test_meta_box_render_head() {
+	// Emulates what plugins like Yoast do with meta data on the front end.
+	// Tests that our excerpt processing does not interfere with dynamic blocks.
+	$excerpt = wp_strip_all_tags( get_the_excerpt() );
+	?>
+	<meta property="gutenberg:hello" content="<?php echo esc_attr( $excerpt ); ?>" />
+	<?php
+}
+
+add_action( 'wp_head', 'gutenberg_test_meta_box_render_head' );