Page editor adding <p> around <a> and </a> when using <figure>

[jasonmader]

In the html page editor, entering the html,

<a href="/">Link</a>

<a href="/"><figure>Link</figure></a>

results in

<p><a href="/">Link</a></p>
<p><a href="/"></p>
<figure>Link</figure>
<p></a></p>

The second example is problematic with the <p><a></p> construction.

[abcd95]

Hey @jasonmader, Welcome to Trac, and thanks for bringing this up!

Reproduction Report

Description

I was able to reproduce the issue. However, the behavior I noticed was slightly different from that of yours, here are the details -

Test Environment -

• WordPress Version: 6.7
• Theme: Twenty Twenty-Five 1.0
• Browser: Chrome 131.0.6778.85
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• OS: macOS

Actual Results

Entering the HTML -

<a href="/">Link</a>

<a href="/"><figure>Link</figure></a>

Result -

<p><a href="/">Link</a></p>
<p><a href="/"></a></p>
<a href="/"><figure>Link</figure></a>
<p><a href="/"></a></p>

Screenshot -

Additional Notes

Additional empty anchor tags are being generated and wrapped in paragraph tags. The behavior differs from the originally reported output where the anchor tag was being split around the figure element.

[jasonmader]

On rechecking, that is also the same behavior I see, with the additional <a><figure></figure></a> around the figure element.

[sukhendu2002]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).

Supplemental Artifacts

​https://utfs.io/f/TTyF6MLuAyHDfUMHkxyUy7JRH3j6GQamK94Eq8WIpX2sYnuC

[lumiblog]

Reproduction Report

This report validates that the issue can be reproduced.

Environment

• OS: Microsoft Windows 10 Pro
• Web Server: Nginx
• PHP: 8.1.22
• WordPress: 6.7.1
• Browser: Google Chrome Version 131.0.6778.86 (Official Build) (64-bit)
• Theme: Twenty Twenty-Five
• Active Plugins:
  • Gutenberg 19.7.0
  • Contact Form 7 6.0.1

Actual Results

• ✅ Error condition occurs (reproduced).

Supplemental Artifacts

Screenshot:

[sppramodh]

The Block Editor (Gutenberg) relies on block delimiters to save and interpret content accurately. These delimiters, such as <!-- wp:paragraph --> or <!-- wp:html -->, allow the editor to differentiate block types and render content correctly in both the editor and on the front end.

When HTML is added directly into the Code Editor without these delimiters, Gutenberg cannot recognize the content as a structured block. This can result in unexpected rendering, especially with nested HTML elements. To ensure proper handling, it is recommended to use the appropriate block delimiters when adding custom HTML.

It's worth noting that there are open issues in the Gutenberg GitHub repository addressing similar or related behavior, highlighting the challenges in implementing seamless conversion of raw code into structured blocks. This indicates that the complexity of accurately parsing and interpreting raw HTML while maintaining block integrity is a topic still under active discussion and refinement within the community.