Site Editor: Remove extra div on post content #38451
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
scruffian
added
[Feature] Full Site Editing
[Feature] Site Editor
scruffian
commented
Feb 2, 2022
| <div { ...blockProps }> | ||
| <RawHTML key="html">{ content?.rendered }</RawHTML> | ||
| </div> | ||
| <RawHTML key="html" { ...blockProps }> |
There was a problem hiding this comment.
This causes and error in the console because it's trying to set a ref on an functional component which isn't possible.
There was a problem hiding this comment.
Can you use dangerouslySetInnerHTML on the div instead? RawHTML is a special wrapper mostly for save implementation of the block when you don't want any wrapping DOM elements.
There was a problem hiding this comment.
Oh yeah, that seems to work. What do you think?
|
Size Change: +1.19 kB (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
|
I don't think this is the right approach, but I'm not sure how else to solve this one. |
|
Can we remove When searching |
|
Thanks for the PR @scruffian! @ellatrix do you think we can |
|
Thanks for looking into the I also did some testings; it looks like If I run the following snippet in the console I get results with the correct behavior: const element1 = wp.element.createElement( wp.element.RawHTML, { key: 'html' }, '<div>Hello</div>' );
const element2 = wp.element.createElement( wp.element.RawHTML, { className: 'greetings' }, '<div>Hello</div>' );
// Has no wrapper div
console.log( wp.element.renderToString( element1 ) );
// Has wrapper div
console.log( wp.element.renderToString( element2 ) ); |
|
In my tests removing the key prop didn't make a difference - I think key gets treated differently to other props anyway. I think the issue here might be that the block itself isn't being serialized. |
|
Removing the key doesn't make any difference in that case because we are passing all the other props from |
|
I tried the approach @gziolo suggested. Not sure if it breaks anything else! |
ntsekouras
reviewed
Feb 4, 2022
| <div { ...blockProps }> | ||
| <RawHTML key="html">{ content?.rendered }</RawHTML> | ||
| </div> | ||
| createElement( 'div', { |
There was a problem hiding this comment.
You don't need to use createElement. Just append the dangerouslySetInnerHTML to the existing div.
andrewserong
approved these changes
Feb 7, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The post content block outputs and additional div when being rendered in the Site Editor. This is coming from the RawHTML component. There is a comment which suggests the extra div should be removed when the block is serialized but that doesn't seem to be happening.
This additional div is causing issues with out alignment styles for themes - see Automattic/themes#5385
Testing Instructions
Checkout this PR: Automattic/themes#5385
Switch to the Livro theme
Open the Site Editor
Confirm that wide and full blocks go to the edge of the editor
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.jsfiles for terms that need renaming or removal).