HTML in Post Title causes error in the block editor. #39395

costdev · 2022-03-11T18:06:00Z

Description

Originally reported on Trac 55371.

When HTML is in the Post Title, attempting to edit post shows the error: "The editor has encountered an unexpected error."

This occurs in WordPress 5.9.
This does not occur in WordPress 5.8.3.
This does not occur in WordPress 5.8.3 with Gutenberg 11.3.0 installed.
This DOES occur in WordPress 5.8.3 with Gutenberg 11.4.0 installed.

Step-by-step reproduction instructions

Using WordPress 5.9:

Navigate to Posts > Add New.
Insert the following as the Post Title:

<img src='/favicon.png'>Hello!

Publish the post.
Refresh the page. The error should be displayed.

Using WordPress 5.8:

Install Gutenberg 11.3.0.
Repeat steps 1-4 above. The error should not be displayed.
Install Gutenberg 11.4.0.
Repeat steps 1-4 above. The error should be displayed.

Screenshots, screen recording, code snippet

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at append (to-dom.js:73:17)
    at toTree (to-tree.js:304:15)
    at toDom (to-dom.js:130:21)
    at apply (to-dom.js:183:30)
    at applyRecord (index.js:64:8)
    at applyFromProps (index.js:198:3)
    at index.js:247:4
    at index.ts:38:22
    at assignRef (index.js:20:3)
    at index.js:122:4
...
react-dom.js?ver=17.0.1:20115 The above error occurred in the <h1> component:

    at h1
    at PostTypeSupportCheck (http://localhost/wordpress-develop/src/wp-includes/js/dist/editor.js?ver=01fb613918bcc66701ddcfd70da3f247:8105:5)
    at http://localhost/wordpress-develop/src/wp-includes/js/dist/data.js?ver=93e547cee9fc74070215d5c1ce324bf6:1103:81
    at <anonymous> (http://localhost/wordpress-develop/src/wp-includes/js/dist/compose.js?ver=1491dea52ef44b12c4130dc7fe00ea20:239:10)
    at PostTitle (http://localhost/wordpress-develop/src/wp-includes/js/dist/editor.js?ver=01fb613918bcc66701ddcfd70da3f247:7718:80)
    at div
    at div
    at WritingFlow (http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:34655:5)
    at MaybeIframe (http://localhost/wordpress-develop/src/wp-includes/js/dist/edit-post.js?ver=d1f7eff1711bbd5a12e7a5b393f59854:7098:5)
    at div
    at MotionComponent (http://localhost/wordpress-develop/src/wp-includes/js/dist/components.js?ver=194bb4ad7b702ec1158fae8c39f4055f:68852:80)
    at div
    at MotionComponent (http://localhost/wordpress-develop/src/wp-includes/js/dist/components.js?ver=194bb4ad7b702ec1158fae8c39f4055f:68852:80)
    at InsertionPoint (http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:14472:5)
    at div
    at BlockTools (http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:14020:5)
    at VisualEditor (http://localhost/wordpress-develop/src/wp-includes/js/dist/edit-post.js?ver=d1f7eff1711bbd5a12e7a5b393f59854:7137:5)
    at div
    at div
    at div
    at div
    at InterfaceSkeleton (http://localhost/wordpress-develop/src/wp-includes/js/dist/edit-post.js?ver=d1f7eff1711bbd5a12e7a5b393f59854:18807:5)
    at Layout (http://localhost/wordpress-develop/src/wp-includes/js/dist/edit-post.js?ver=d1f7eff1711bbd5a12e7a5b393f59854:3223:5)
    at ErrorBoundary (http://localhost/wordpress-develop/src/wp-includes/js/dist/editor.js?ver=01fb613918bcc66701ddcfd70da3f247:1564:5)
    at BlockRefsProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:28942:5)
    at BlockEditorProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:28992:5)
    at http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:29318:7
    at WithRegistryProvider(BlockEditorProvider)
    at BlockContextProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/block-editor.js?ver=f2aa66e525b142523ccf4a3f45798fe0:5886:5)
    at EntityProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/core-data.js?ver=97c06a5195fcd3e5fe3c5d2422c7d76b:1625:5)
    at EntityProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/core-data.js?ver=97c06a5195fcd3e5fe3c5d2422c7d76b:1625:5)
    at EditorProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/editor.js?ver=01fb613918bcc66701ddcfd70da3f247:8522:5)
    at http://localhost/wordpress-develop/src/wp-includes/js/dist/editor.js?ver=01fb613918bcc66701ddcfd70da3f247:8781:5
    at WithRegistryProvider(EditorProvider)
    at SlotFillProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/components.js?ver=194bb4ad7b702ec1158fae8c39f4055f:32149:5)
    at SlotFillProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/components.js?ver=194bb4ad7b702ec1158fae8c39f4055f:32534:5)
    at Provider (http://localhost/wordpress-develop/src/wp-includes/js/dist/components.js?ver=194bb4ad7b702ec1158fae8c39f4055f:32472:5)
    at div
    at ShortcutProvider (http://localhost/wordpress-develop/src/wp-includes/js/dist/keyboard-shortcuts.js?ver=78a4020b31c5ae28f7e97405b83d5027:158:94)
    at Editor (http://localhost/wordpress-develop/src/wp-includes/js/dist/edit-post.js?ver=d1f7eff1711bbd5a12e7a5b393f59854:7595:5)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Environment info

WordPress:
- 5.9 with/without the latest version of Gutenberg installed and activated.
- 5.8 with Gutenberg 11.4.0+ installed.
Theme: Twenty-Twenty One.
Browser: Chrome 99.0.4844.51.
Device: Desktop, Windows 10.
Server: Apache via WSL2.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

The text was updated successfully, but these errors were encountered:

mauriac · 2022-03-15T16:45:06Z

I'm abble to reproduce this one, and it seems like it was introduced here #31569

I think this is related: #38668

paaljoachim · 2022-03-25T20:21:07Z

It sounds like a depreciation was introduced in Gutenberg 11.4.
I assume I might ping @youknowriad about this issue. I also added it to the WP 6.0 Project board.

I believe these are associated in some way.

HTML Validation Error: Element style not allowed as child of element body in this context
#38917

HTML tags in post titles are gone when editing existing posts
#38668

Home.html displays title from query loop instead of post-title
#39187

youknowriad · 2022-03-28T08:20:02Z

Trying debugging this but it's an internal RichText thing. I wasn't able to follow properly. @ntsekouras or @ellatrix might know better.

woodwardmatt · 2022-03-28T23:50:30Z

Did a little debugging on this today. The value of the child object is being output as:

"" when console.log(child); is used
"object" when console.log(typeof child); is used

For all intents and purposes it looks like an empty object with an undefined type:

Update: Looks like the child element is being set within the first conditional block where the value is seen to be a string type, but the string is of zero length.

function to_dom_append(element, child) {

  if (typeof child === 'string') {
    child = element.ownerDocument.createTextNode(child);
  }

  const {
    type,
    attributes
  } = child;

  if (type) {
    child = element.ownerDocument.createElement(type);

    for (const key in attributes) {
      child.setAttribute(key, attributes[key]);
    }
  }

  return element.appendChild(child);
}

ntsekouras · 2022-04-04T11:15:31Z

Trying debugging this but it's an internal RichText thing. I wasn't able to follow properly. @ntsekouras or @ellatrix might know better.

Tried to understand what's going on in this draft PR. I have details in the description and any feedback is welcome.

ndiego · 2022-04-19T14:30:35Z

@costdev is this still something we are trying to land in 6.0. If not, I will remove from the project board. Thanks!

costdev · 2022-04-19T14:50:23Z

@costdev is this still something we are trying to land in 6.0. If not, I will remove from the project board. Thanks!

@ndiego I haven't had a chance to test the draft PR just yet - if anyone else is up for testing it, that would be great!

Since the PR is still a draft approach that needs feedback from others familiar with the component, it might be best to take this off the milestone to give it more time.

cnote76 · 2022-09-10T10:55:59Z

Hi! This problem is still present in 6.0.2. How can I solve this?

adamsilverstein · 2023-12-19T15:44:32Z

Is this still an issue? I tried testing against WP trunk and the HTML gets stripped from the post title, even if I use the code editor mode.

skorasaurus · 2023-12-19T16:21:39Z

I'm unable to reproduce this as well; I'm comfortable closing them; please reopen if you are still experiencing this.

Mamaduka added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Package] Edit Post /packages/edit-post [Type] Bug An existing feature does not function as intended labels Mar 12, 2022

mauriac added the [Priority] High Used to indicate top priority items that need quick attention label Mar 17, 2022

paaljoachim mentioned this issue Mar 25, 2022

HTML Validation Error: Element style not allowed as child of element body in this context #38917

Open

ntsekouras mentioned this issue Apr 4, 2022

[RichText]: Try add prop to handle content as text #40019

Closed

skorasaurus closed this as completed Dec 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML in Post Title causes error in the block editor. #39395

HTML in Post Title causes error in the block editor. #39395

costdev commented Mar 11, 2022

mauriac commented Mar 15, 2022

paaljoachim commented Mar 25, 2022

youknowriad commented Mar 28, 2022 •

edited

Loading

woodwardmatt commented Mar 28, 2022 •

edited

Loading

ntsekouras commented Apr 4, 2022 •

edited

Loading

ndiego commented Apr 19, 2022

costdev commented Apr 19, 2022

cnote76 commented Sep 10, 2022

adamsilverstein commented Dec 19, 2023

skorasaurus commented Dec 19, 2023

HTML in Post Title causes error in the block editor. #39395

HTML in Post Title causes error in the block editor. #39395

Comments

costdev commented Mar 11, 2022

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

mauriac commented Mar 15, 2022

paaljoachim commented Mar 25, 2022

youknowriad commented Mar 28, 2022 • edited Loading

woodwardmatt commented Mar 28, 2022 • edited Loading

ntsekouras commented Apr 4, 2022 • edited Loading

ndiego commented Apr 19, 2022

costdev commented Apr 19, 2022

cnote76 commented Sep 10, 2022

adamsilverstein commented Dec 19, 2023

skorasaurus commented Dec 19, 2023

youknowriad commented Mar 28, 2022 •

edited

Loading

woodwardmatt commented Mar 28, 2022 •

edited

Loading

ntsekouras commented Apr 4, 2022 •

edited

Loading