Blocks: Parse blocks when displaying posts.

Posts containing blocks are now correctly handled when displaying on the front end, including dynamic blocks and nested blocks.

Props pento.

Merges [43752] to trunk.

See #45109.

git-svn-id: https://develop.svn.wordpress.org/trunk@44118 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers
2018-12-13 18:11:10 +00:00
parent 6aef7e1966
commit 93091fac36
71 changed files with 1419 additions and 24 deletions

View File

@@ -2,13 +2,18 @@
<!--more-->
<p>First Gutenberg Paragraph</p>
<p>Second Auto Paragraph</p>
<p>Third Gutenberg Paragraph</p>
<p>Third Auto Paragraph</p>
<p>[someshortcode]</p>

View File

@@ -0,0 +1 @@
<div class="wp-block-archives">No archives to show.</div>

View File

@@ -0,0 +1 @@
<div class="wp-block-archives">No archives to show.</div>

View File

@@ -0,0 +1,5 @@
<figure class="wp-block-audio alignright">
<audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio>
</figure>

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,3 @@
<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>

View File

@@ -0,0 +1 @@
<ul class="wp-block-categories wp-block-categories-list aligncenter"><li class="cat-item-none">No categories</li></ul>

View File

@@ -0,0 +1,5 @@
<pre class="wp-block-code"><code>export default function MyButton() {
return &lt;Button&gt;Click Me!&lt;/Button&gt;;
}</code></pre>

View File

@@ -3,20 +3,38 @@
"blockName": "core/column",
"attrs": {},
"innerBlocks": [
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<div class=\"wp-block-column\">\n\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<p>Column One, Paragraph One</p>\n\t"
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<p>Column One, Paragraph Two</p>\n\t"
}
],
"innerHTML": "\n<div class=\"wp-block-column\">\n\t\n\t\n</div>\n"
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n</div>\n"
}
],
"innerHTML": ""
},
{
"blockName": null,

View File

@@ -0,0 +1,10 @@
<div class="wp-block-column">
<p>Column One, Paragraph One</p>
<p>Column One, Paragraph Two</p>
</div>

View File

@@ -5,46 +5,100 @@
"columns": 3
},
"innerBlocks": [
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<div class=\"wp-block-columns has-3-columns\">\n\t"
},
{
"blockName": "core/column",
"attrs": {},
"innerBlocks": [
{
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t<p>Column One, Paragraph One</p>\n\t\t"
},
{
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t<p>Column One, Paragraph Two</p>\n\t\t"
}
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t</div>\n\t"
}
],
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t"
"innerHTML": ""
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t"
},
{
"blockName": "core/column",
"attrs": {},
"innerBlocks": [
{
"innerBlocks": [
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t<p>Column Two, Paragraph One</p>\n\t\t"
},
{
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t<p>Column Three, Paragraph One</p>\n\t\t"
}
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t</div>\n\t"
}
],
"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t"
}
"innerHTML": ""
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n</div>\n"
}
],
"innerHTML": "\n<div class=\"wp-block-columns has-3-columns\">\n\t\n\t\n</div>\n"
"innerHTML": ""
},
{
"blockName": null,

View File

@@ -0,0 +1,24 @@
<div class="wp-block-columns has-3-columns">
<div class="wp-block-column">
<p>Column One, Paragraph One</p>
<p>Column One, Paragraph Two</p>
</div>
<div class="wp-block-column">
<p>Column Two, Paragraph One</p>
<p>Column Three, Paragraph One</p>
</div>
</div>

View File

@@ -0,0 +1,5 @@
<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
<p class="wp-block-cover-image-text">Guten Berg!</p>
</div>

View File

@@ -0,0 +1,8 @@
<figure class="wp-block-embed">
<div class="wp-block-embed__wrapper">
https://example.com/
</div>
<figcaption>Embedded content from an example URL</figcaption>
</figure>

View File

@@ -0,0 +1,3 @@
<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download="6546">Download</a></div>

View File

@@ -0,0 +1,3 @@
<div class="wp-block-file"><a href="http://localhost:8888/?attachment_id=176">lkjfijwef</a></div>

View File

@@ -0,0 +1,3 @@
<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download="">Download</a></div>

View File

@@ -0,0 +1,6 @@
Testing freeform block with some
<div class="wp-some-class">
HTML <span style="color: red;">content</span>
</div>

View File

@@ -0,0 +1,4 @@
Testing freeform block with some
<div class="wp-some-class">
HTML <span style="color: red;">content</span>
</div>

View File

@@ -0,0 +1,14 @@
<ul class="wp-block-gallery columns-2 is-cropped">
<li class="blocks-gallery-item">
<figure>
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="http://google.com/hi.png" alt="title" />
</figure>
</li>
</ul>

View File

@@ -0,0 +1,14 @@
<ul class="wp-block-gallery columns-1 is-cropped">
<li class="blocks-gallery-item">
<figure>
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="http://google.com/hi.png" alt="title" />
</figure>
</li>
</ul>

View File

@@ -0,0 +1,3 @@
<h2>The <em>Inserter</em> Tool</h2>

View File

@@ -0,0 +1,3 @@
<h2>A picture is worth a thousand words, or so the saying goes</h2>

View File

@@ -0,0 +1,4 @@
<h1>Some HTML code</h1>
<marquee>This text will scroll from right to left</marquee>

View File

@@ -0,0 +1,3 @@
<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></figure>

View File

@@ -0,0 +1,3 @@
<figure class="wp-block-image"><a href="http://localhost:8888/?attachment_id=7"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>

View File

@@ -0,0 +1,3 @@
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>

View File

@@ -0,0 +1,3 @@
<figure class="wp-block-image"><a href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>

View File

@@ -0,0 +1,3 @@
<figure class="wp-block-image"><a href="https://cldup.com/uuUqE_dXzy.jpg"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>

View File

@@ -0,0 +1 @@
<div class="wp-block-latest-comments has-avatars has-dates has-excerpts no-comments">No comments to show.</div>

View File

@@ -0,0 +1 @@
<ul class="wp-block-latest-posts"></ul>

View File

@@ -0,0 +1 @@
<ul class="wp-block-latest-posts"></ul>

View File

@@ -0,0 +1,3 @@
<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>

View File

@@ -0,0 +1,6 @@
<p>Testing missing block with some</p>
<div class="wp-some-class">
HTML <span style="color: red;">content</span>
</div>

View File

@@ -0,0 +1,3 @@
<!--more-->

View File

@@ -0,0 +1,4 @@
<!--more Continue Reading-->
<!--noteaser-->

View File

@@ -0,0 +1,3 @@
<!--nextpage-->

View File

@@ -0,0 +1,3 @@
<p style="text-align:right;">... like this one, which is separate from the above and right aligned.</p>

View File

@@ -0,0 +1,3 @@
Unwrapped is <em>still</em> valid.

View File

@@ -0,0 +1,3 @@
<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br>And more!</pre>

View File

@@ -0,0 +1,7 @@
<figure class="wp-block-pullquote">
<blockquote>
<p>Testing pullquote block...</p><cite>...with a caption</cite>
</blockquote>
</figure>

View File

@@ -0,0 +1,9 @@
<figure class="wp-block-pullquote">
<blockquote>
<p>Paragraph <strong>one</strong></p>
<p>Paragraph two</p>
<cite>by whomever</cite>
</blockquote>
</figure>

View File

@@ -0,0 +1,3 @@
<blockquote class="wp-block-quote"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>

View File

@@ -0,0 +1,3 @@
<blockquote class="wp-block-quote is-style-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>

View File

@@ -0,0 +1,3 @@
<hr class="wp-block-separator" />

View File

@@ -0,0 +1,2 @@
<p>[gallery ids="238,338"]</p>

View File

@@ -0,0 +1,3 @@
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

View File

@@ -0,0 +1,3 @@
<p class="wp-block-subhead">This is a <em>subhead</em>.</p>

View File

@@ -0,0 +1,3 @@
<table class="wp-block-table"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>

View File

@@ -0,0 +1,10 @@
<div class="wp-block-text-columns aligncenter columns-2">
<div class="wp-block-column">
<p>One</p>
</div>
<div class="wp-block-column">
<p>Two</p>
</div>
</div>

View File

@@ -0,0 +1,3 @@
<p>This is an old-style text block. Changed to <code>paragraph</code> in #2135.</p>

View File

@@ -0,0 +1,3 @@
<pre class="wp-block-verse">A <em>verse</em><br>And more!</pre>

View File

@@ -0,0 +1,3 @@
<figure class="wp-block-video"><video controls src="https://awesome-fake.video/file.mp4"></video></figure>

View File

@@ -212,3 +212,17 @@ function _wp_rest_server_class_filter() {
// Skip `setcookie` calls in auth_cookie functions due to warning:
// Cannot modify header information - headers already sent by ...
tests_add_filter( 'send_auth_cookies', '__return_false' );
/**
* After the init action has been run once, trying to re-register block types can cause
* _doing_it_wrong warnings. To avoid this, unhook the block registration functions.
*
* @since 5.0.0
*/
function _unhook_block_registration() {
remove_action( 'init', 'register_block_core_archives' );
remove_action( 'init', 'register_block_core_categories' );
remove_action( 'init', 'register_block_core_latest_posts' );
remove_action( 'init', 'register_block_core_shortcode' );
}
tests_add_filter( 'init', '_unhook_block_registration', 1000 );

View File

@@ -59,7 +59,7 @@ class WP_Test_Block_Parser extends WP_UnitTestCase {
foreach ( array( $html_path, $parsed_json_path ) as $filename ) {
if ( ! file_exists( $filename ) ) {
//throw new Exception( "Missing fixture file: '$filename'" );
throw new Exception( "Missing fixture file: '$filename'" );
}
}
@@ -116,5 +116,4 @@ class WP_Test_Block_Parser extends WP_UnitTestCase {
protected function strip_r( $input ) {
return str_replace( "\r", '', $input );
}
}

View File

@@ -0,0 +1,310 @@
<?php
/**
* Block rendering tests.
*
* @package WordPress
* @subpackage Blocks
* @since 5.0.0
*/
/**
* Tests for block rendering functions
*
* @since 5.0.0
*
* @group blocks
*/
class WP_Test_Block_Render extends WP_UnitTestCase {
/**
* The location of the fixtures to test with.
*
* @since 5.0.0
* @var string
*/
protected static $fixtures_dir;
/**
* Test block instance number.
*
* @since 5.0.0
*
* @var int
*/
protected $test_block_instance_number = 0;
/**
* Tear down after each test.
*
* @since 5.0.0
*/
public function tearDown() {
parent::tearDown();
$this->test_block_instance_number = 0;
$registry = WP_Block_Type_Registry::get_instance();
if ( $registry->is_registered( 'core/test' ) ) {
$registry->unregister( 'core/test' );
}
}
/**
* @ticket 45109
*/
public function test_do_blocks_removes_comments() {
$original_html = file_get_contents( DIR_TESTDATA . '/blocks/do-blocks-original.html' );
$expected_html = file_get_contents( DIR_TESTDATA . '/blocks/do-blocks-expected.html' );
$actual_html = do_blocks( $original_html );
$this->assertEquals( $expected_html, $actual_html );
}
/**
* @ticket 45109
*/
public function test_the_content() {
add_shortcode( 'someshortcode', array( $this, 'handle_shortcode' ) );
$classic_content = "Foo\n\n[someshortcode]\n\nBar\n\n[/someshortcode]\n\nBaz";
$block_content = "<!-- wp:core/paragraph -->\n<p>Foo</p>\n<!-- /wp:core/paragraph -->\n\n<!-- wp:core/shortcode -->[someshortcode]\n\nBar\n\n[/someshortcode]<!-- /wp:core/shortcode -->\n\n<!-- wp:core/paragraph -->\n<p>Baz</p>\n<!-- /wp:core/paragraph -->";
$classic_filtered_content = apply_filters( 'the_content', $classic_content );
$block_filtered_content = apply_filters( 'the_content', $block_content );
// Block rendering add some extra blank lines, but we're not worried about them.
$block_filtered_content = preg_replace( "/\n{2,}/", "\n", $block_filtered_content );
$this->assertEquals( $classic_filtered_content, $block_filtered_content );
}
function handle_shortcode( $atts, $content ) {
return $content;
}
/**
* @ticket 45109
*/
public function data_do_block_test_filenames() {
self::$fixtures_dir = DIR_TESTDATA . '/blocks/fixtures';
$fixture_filenames = array_merge(
glob( self::$fixtures_dir . '/*.json' ),
glob( self::$fixtures_dir . '/*.html' )
);
$fixture_filenames = array_values(
array_unique(
array_map(
array( $this, 'clean_fixture_filename' ),
$fixture_filenames
)
)
);
return array_map(
array( $this, 'pass_parser_fixture_filenames' ),
$fixture_filenames
); }
/**
* @dataProvider data_do_block_test_filenames
* @ticket 45109
*/
public function test_do_block_output( $html_filename, $server_html_filename ) {
$html_path = self::$fixtures_dir . '/' . $html_filename;
$server_html_path = self::$fixtures_dir . '/' . $server_html_filename;
foreach ( array( $html_path, $server_html_path ) as $filename ) {
if ( ! file_exists( $filename ) ) {
throw new Exception( "Missing fixture file: '$filename'" );
}
}
$html = do_blocks( self::strip_r( file_get_contents( $html_path ) ) );
$expected_html = self::strip_r( file_get_contents( $server_html_path ) );
$this->assertEquals(
$expected_html,
$html,
"File '$html_path' does not match expected value"
);
}
/**
* @ticket 45109
*/
public function test_dynamic_block_rendering() {
$settings = array(
'render_callback' => array(
$this,
'render_test_block',
),
);
register_block_type( 'core/test', $settings );
// The duplicated dynamic blocks below are there to ensure that do_blocks() replaces each one-by-one.
$post_content =
'before' .
'<!-- wp:core/test {"value":"b1"} --><!-- /wp:core/test -->' .
'<!-- wp:core/test {"value":"b1"} --><!-- /wp:core/test -->' .
'between' .
'<!-- wp:core/test {"value":"b2"} /-->' .
'<!-- wp:core/test {"value":"b2"} /-->' .
'after';
$updated_post_content = do_blocks( $post_content );
$this->assertEquals(
$updated_post_content,
'before' .
'1:b1' .
'2:b1' .
'between' .
'3:b2' .
'4:b2' .
'after'
);
}
/**
* @ticket 45109
*/
public function test_global_post_persistence() {
global $post;
register_block_type(
'core/test',
array(
'render_callback' => array(
$this,
'render_test_block_wp_query',
),
)
);
$posts = self::factory()->post->create_many( 5 );
$post = get_post( end( $posts ) );
$global_post = $post;
do_blocks( '<!-- wp:core/test /-->' );
$this->assertEquals( $global_post, $post );
}
/**
* @ticket 45109
*/
public function test_dynamic_block_renders_string() {
$settings = array(
'render_callback' => array(
$this,
'render_test_block_numeric',
),
);
register_block_type( 'core/test', $settings );
$block_type = new WP_Block_Type( 'core/test', $settings );
$rendered = $block_type->render();
$this->assertSame( '10', $rendered );
$this->assertInternalType( 'string', $rendered );
}
/**
* Helper function to remove relative paths and extension from a filename, leaving just the fixture name.
*
* @since 5.0.0
*
* @param string $filename The filename to clean.
* @return string The cleaned fixture name.
*/
protected function clean_fixture_filename( $filename ) {
$filename = basename( $filename );
$filename = preg_replace( '/\..+$/', '', $filename );
return $filename;
}
/**
* Helper function to return the filenames needed to test the parser output.
*
* @since 5.0.0
*
* @param string $filename The cleaned fixture name.
* @return array The input and expected output filenames for that fixture.
*/
protected function pass_parser_fixture_filenames( $filename ) {
return array(
"$filename.html",
"$filename.server.html",
);
}
/**
* Helper function to remove '\r' characters from a string.
*
* @since 5.0.0
*
* @param string $input The string to remove '\r' from.
* @return string The input string, with '\r' characters removed.
*/
protected function strip_r( $input ) {
return str_replace( "\r", '', $input );
}
/**
* Test block rendering function.
*
* @since 5.0.0
*
* @param array $attributes Block attributes.
* @return string Block output.
*/
public function render_test_block( $attributes ) {
$this->test_block_instance_number += 1;
return $this->test_block_instance_number . ':' . $attributes['value'];
}
/**
* Test block rendering function, returning numeric value.
*
* @since 5.0.0
*
* @return int Block output.
*/
public function render_test_block_numeric() {
return 10;
}
/**
* Test block rendering function, creating a new WP_Query instance.
*
* @since 5.0.0
*
* @return string Block output.
*/
public function render_test_block_wp_query() {
$content = '';
$recent = new WP_Query(
array(
'numberposts' => 10,
'orderby' => 'ID',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'draft, publish, future, pending, private',
'suppress_filters' => true,
)
);
while ( $recent->have_posts() ) {
$recent->the_post();
$content .= get_the_title();
}
wp_reset_postdata();
return $content;
}
}