-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Description
The RawHTML component should only create a wrapper div
when there are props other than children
to use in that div:
gutenberg/packages/element/src/raw-html.js
Lines 11 to 12 in b8c1e6b
* 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:
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.
gutenberg/packages/element/src/raw-html.js
Lines 30 to 31 in b8c1e6b
// 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
- Create a new directory on your local machine and copy the files from the gist. Note that
--
in filenames represents folders. - Start the environment with
wp-env
and ensure the plugin is active withwp-env run cli wp plugin activate example-static
- Create a new post and insert the Example Static block
- 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