Skip to content

RawHTML adds a wrapper div when it shouldn't #70349

@philipjohn

Description

@philipjohn

Description

The RawHTML component should only create a wrapper div when there are props other than children to use in that div:

* To preserve additional props, a `div` wrapper _will_ be created if any props
* aside from `children` are passed.

However, this is not the behaviour in practice. Take this example Edit function and the editor output:

edit.js:

export default function Edit() {
	const someHtmlContent = '<p>This is some <strong>HTML</strong> content that will be rendered in the editor.</p><p>There should be no wrapping <code>div</code>.</p>';
	return (
		<RawHTML children={ someHtmlContent } />
	);
}

editor output:

Image

I confirmed this with a fresh environment using wp-env and a basic plugin created from create-block. All the code is in this gist: https://gist.github.com/philipjohn/6a18b582d58c2214535ec368d77cea39

I noticed that the code comment says serialize.js will strip the div but I don't see how that's invoked anywhere, so maybe that's the issue.

// The `div` wrapper will be stripped by the `renderElement` serializer in
// `./serialize.js` unless there are non-children props present.

Step-by-step reproduction instructions

  1. Create a new directory on your local machine and copy the files from the gist. Note that -- in filenames represents folders.
  2. Start the environment with wp-env and ensure the plugin is active with wp-env run cli wp plugin activate example-static
  3. Create a new post and insert the Example Static block
  4. Observe that the HTML output of the block includes a wrapping div

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.8.1
Twenty Twenty-One 2.5
Gutenberg: not installed

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

[Package] Element/packages/element[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions