gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Classic Block wrapping <cite> with <p> tags

Open michaelbourne opened this issue 3 years ago • 4 comments

Description

When HTML content is added to a post via PHP, and that post is viewed in the block editor, some tags will have paragraphs wrapped around them. When viewing the content in the database, these paragraph tags don't exist. When viewing the post in the block editor's code editor view, these paragraph tags don't exist. They are only present inside the Classic Block (viewable when editing block as HTML, or if the post is saved).

Step-by-step reproduction instructions

  1. Insert HTML into the database for a post. Example string here with all newlines stripped: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><hr class="wp-block-separator is-style-wave mtl" /><figure class="wp-block-pullquote"><blockquote><p>This wine rocks</p><cite>Mike</cite></blockquote></figure>
  2. Open that post in the block editor
  3. Classic Block > Edit as HTML to view the added tags.

Expected behaviour

Fundamentally I would expect the HTML to not be modified at all, since it's valid. I would also expect that "Convert to Blocks" would convert this example code into 3 blocks: a paragraph, a separator, and a pullquote.

Actual behaviour

When editing the post, the classic block with wrap the cite tag with a p tag, which carries over when saved. A possibly related issue: When doing a "Convert to Blocks", it only converts the first two, leaving the pullquote as an HTML block. I'm not sure if that's due to the classic editor adding those paragraph tags though.

Screenshots or screen recording

Database showing raw content: database

Block editor: block-editor)

WordPress information

  • WordPress version: 5.7.2
  • Gutenberg version: 10.8.2
  • Are all plugins except Gutenberg deactivated? Yes (in testing, not for the screenshots)
  • Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

  • Device: Desktop
  • Operating system: Windows 10
  • Browser: Chrome 91.0.4472.106

Additional Info

The end goal of this on my side is to import content from a 3rd party source as HTML, and allow the site admins to convert it to blocks to move forward with Gutenberg. This works pretty flawlessly with most elements, but this pullquote/citation issue came up in testing.

michaelbourne avatar Jun 16 '21 20:06 michaelbourne

Additional context: this happens with the HTML markup for both Pullquote and Quote blocks. Both get a p tag wrapping their cite.

However, the Quote HTML properly converts to blocks, where as the Pullquote does not. This is not the issue at hand, but the Pullquote block is missing a raw matching rule for transforms (since a pullquote isn't really a valid HTML element, it's a style of blockquote?). I'm not sure how sensible it would be to add a raw match for the actual HTML expected in a pullquote in WP, but it would be a workaround in my specific case.

I'm still curious why the classic block adds these paragraph tags though.

michaelbourne avatar Jun 16 '21 20:06 michaelbourne

Hi! Thanks much for the report.

This was tested today during an editor triage session.

I was able to reproduce this by:

  • Install the Classic Editor plugin
  • Paste the provided HTML in to the "Code" editor in a Classic post.
  • Disable Classic Editor plugin
  • Open post (notice that within the Classic block, the HTML is still intact)
  • Click "Convert to Blocks" button
  • Notice that the second half of the HTML is in an HTML block, and has added <p> tags.

getsource avatar Sep 28 '21 06:09 getsource

Still able to replicate, following the steps just above.

WordPress 6.0.1 No plugins active Twenty Twenty-Two 1.2

kathrynwp avatar Sep 05 '22 20:09 kathrynwp

I'm removing the "Needs testing" label, as it's been tested and replicated a few times now.

kathrynwp avatar Sep 22 '22 16:09 kathrynwp