Gutenberg: autop not adding a trailing </p> when text is followed by a div

Created on 5 Dec 2018  路  3Comments  路  Source: WordPress/gutenberg

If you have this content:

Testing freeform block with some
<div class="wp-some-class">content</div>

autop converts it to this, with a missing </p>:

<p>Testing freeform block with some
<div class="wp-some-class">content</div>

When it should be this with a trailing </p>

<p>Testing freeform block with some</p>
<div class="wp-some-class">content</div>

To Reproduce
Add this unit test to the autop unit tests:

test( 'that autop correctly adds start and end tag when followed by a div', () => {
    const content = 'Testing freeform block with some\n<div class="wp-some-class">content</div>';
    const expected = '<p>Testing freeform block with some</p>\n<div class="wp-some-class">content</div>';

    expect( autop( content ).trim() ).toBe( expected );
} );
[Package] Autop [Type] Bug

All 3 comments

This line removes the trailing </p> because it follows the </div>.

I'm not yet sure what the difference is between the JS and PHP version, which it models:

https://core.trac.wordpress.org/browser/tags/4.9.8/src/wp-includes/formatting.php#L439

Found the problem in #12614 - a missing backslash is causing this expression to never match:

    // Add a double line break above block-level opening tags.
    text = text.replace( new RegExp( '(<' + allBlocks + '[\s\/>])', 'g' ), '\n\n$1' );

This means that the <div> is not split off from the paragraph, and then the subsequent code removes the trailing </p>

Just to verify, I ran the test case through the PHP implementation as well, to check that a discrepancy exists (it does):

$ wp shell
wp> wpautop('Testing freeform block with some\n<div class="wp-some-class">content</div>');
=> string(83) "<p>Testing freeform block with some\n</p>
<div class="wp-some-class">content</div>
"

_Edit: As noted at https://github.com/WordPress/gutenberg/pull/12614#pullrequestreview-181768135 , the above isn't quite right. Corrected:_

wp> wpautop("Testing freeform block with some\n<div class=\"wp-some-class\">content</div>");
=> string(81) "<p>Testing freeform block with some</p>
<div class="wp-some-class">content</div>
"
Was this page helpful?
0 / 5 - 0 ratings