Conversation
…ses from being printed twice
| className: undefined, | ||
| style: { | ||
| ...attributes.style, | ||
| spacing: undefined, |
There was a problem hiding this comment.
If border support is added in the future, it will be necessary to write border: undefined here.
There was a problem hiding this comment.
There is an open PR adding typography supports to the Tag Cloud block. This would need updating here, in that PR, or immediately after it lands.
This is probably further justification that we should move the logic for stripping block support related attributes for <ServerSideRender> as suggested over on the PR doing this for the Archive block.
| @@ -0,0 +1,4 @@ | |||
| .wp-block-tag-cloud { | |||
| // This block has customizable padding, border-box makes that more predictable. | |||
| box-sizing: border-box; | |||
There was a problem hiding this comment.
Added according to #43465, but will revert if this fix is not needed now.
|
Size Change: +147 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Thanks for working on cleaning up these styles and classes @t-hamano 👍
This is testing well for me.
However, as per my review on these changes for the Archive block, I think we'd be better served moving the logic for stripping block support related attributes to a single location rather than duplicating it across several blocks.
There also look to be a couple of minor copy and pasted typos 🙂
| className: undefined, | ||
| style: { | ||
| ...attributes.style, | ||
| spacing: undefined, |
There was a problem hiding this comment.
There is an open PR adding typography supports to the Tag Cloud block. This would need updating here, in that PR, or immediately after it lands.
This is probably further justification that we should move the logic for stripping block support related attributes for <ServerSideRender> as suggested over on the PR doing this for the Archive block.
|
Thank you for the review, @aaronrobertshaw !
Indeed, it would be better to first set a policy in #44438 and then work on this PR again. |
| { inspectorControls } | ||
| <div { ...useBlockProps() }> | ||
| <ServerSideRender | ||
| key="tag-cloud" |
There was a problem hiding this comment.
I found that only this block has a key prop among the blocks using the ServerSideRender component.
But since the key prop is not accepted by the ServerSideRender component, I removed it.
|
I have added the new |
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Thanks for the work behind getting this PR ready @t-hamano.
In my testing, this does resolve the original issue of duplicate classes and styles being applied to this block. However, it only applies the box-sizing reset within the editor. We should be keeping the editor and frontend consistent where possible.
Can we move the box-sizing: border-box to the style.scss file instead?
I have taken this action and confirm that it continues to work as expected. |
Follow-up on #43367
Similar to #44438
Blocker: ##44491
Note: I think the double spacing is a major layout issue, so it would be a good idea to be backported to WordPress 6.1.
@edit: As per the discussion that began with this comment, it was decided to move the logic for filtering the block support attributes to the
ServerSideRendercomponent itself. Once the appropriate prop is added to theServerSideRedercomponent, the code changes in this PR will be simpler. This PR will be placed on freeze until a PR regarding improvements toServerSideRenderis submitted and merged.@update: Now that #44491 has been merged, the new
skipBlockSupportAttributesprop of theServerSideRendercomponent is available. This allows us to solve the problem this PR addresses in a simpler way.What?
This PR fixes a problem in the editor where block support inline styles and additional CSS classes are rendered twice.
Why?
This is because this block uses the
ServiceSideRendercomponent and receives all attributes (including styles generated by the block support).How?
As the discussion started with this comment, there are many possible approaches for a block using the
ServiceSideRendercomponent. I have tried to solve this by not passing block support styles and additional classes to theServiceSideRendercomponent.Testing Instructions
ServiceSideRendercomponent and are rendered only in the block wrapper by using the browser console.Screenshots or screencast
Before
After