Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Archive Block: Prevent spacing styles and additional CSS classes from being printed twice #44438

Merged
merged 5 commits into from
Oct 10, 2022
Merged

Archive Block: Prevent spacing styles and additional CSS classes from being printed twice #44438

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
51c2aef
Archive Block: Prevent block support styles and additional CSS classe…
t-hamano Sep 25, 2022
02ceb06
Fix Typo
t-hamano Sep 26, 2022
7a7ba0f
Fix Typo
t-hamano Sep 26, 2022
f455d9f
Merge branch 'trunk' into fix/block-archives-spacing-support
t-hamano Oct 7, 2022
a6f8bb6
Use new option
t-hamano Oct 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion packages/block-library/src/archives/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,17 @@ import ServerSideRender from '@wordpress/server-side-render';
export default function ArchivesEdit( { attributes, setAttributes } ) {
const { showLabel, showPostCounts, displayAsDropdown, type } = attributes;

// Prevent block support styles and additional CSS classes from being printed twice.
const serverSideRenderAttirbutes = {
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
...attributes,
className: undefined,
style: {
...attributes.style,
spacing: undefined,
typography: undefined,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If border support is added in the future, it will be necessary to write border: undefined here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't filter out the fontSize or fontFamily attributes that are also used by the typography supports to generate CSS classnames. The result is that classes for those are still duplicated which goes against the stated intent of this PR.

As there are a few top-level attributes added by block supports and any block using ServerSideRender needs to remove them along with the style attribute, it seems like we might be able to address this within ServerSideRender itself rather than duplicate that logic across several blocks.

As a quick guide the following top-level attributes added by block supports come to mind;

  • fontSize
  • fontFamily
  • borderColor
  • backgroundColor
  • textColor
  • gradient

There are probably some others as well for things like align support etc.

},
};

return (
<>
<InspectorControls>
Expand Down Expand Up @@ -66,7 +77,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
<Disabled>
<ServerSideRender
block="core/archives"
attributes={ attributes }
attributes={ serverSideRenderAttirbutes }
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
/>
</Disabled>
</div>
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/archives/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.wp-block-archives {
// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added according to #43465, but will revert if this fix is not needed now.

}

.wp-block-archives-dropdown {
label {
display: block;
Expand Down