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

Add border controls to Cover and Featured Image blocks #37783

Closed
wants to merge 3 commits into from
Closed

Add border controls to Cover and Featured Image blocks #37783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
57852a1
Add border controls to Site Logo, Cover, and Featured Image blocks
jameskoster Jan 7, 2022
4e4846a
Merge branch 'trunk' into update/cover-featured-image-site-logo-borders
jameskoster Feb 25, 2022
1160407
Revert site logo
jameskoster Feb 25, 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
12 changes: 12 additions & 0 deletions packages/block-library/src/cover/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,18 @@
"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
"text": false,
"background": false
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": false,
"radius": false,
"style": false,
"width": false
}
}
},
"editorStyle": "wp-block-cover-editor",
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/cover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;

> span,
> img,
> video {
border-radius: inherit;
}

&.has-parallax {
background-attachment: fixed;

Expand Down Expand Up @@ -72,6 +78,7 @@
right: 0;
z-index: z-index(".wp-block-cover.has-background-dim::before");
opacity: 0.5;
border-radius: inherit;
}

// The following styles are needed to support legacy blocks added prior to the update
Expand Down
12 changes: 12 additions & 0 deletions packages/block-library/src/post-featured-image/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,18 @@
"spacing": {
"margin": true,
"padding": true
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": false,
"radius": false,
"style": false,
"width": false
}
Comment on lines +46 to +51
Copy link
Contributor

Choose a reason for hiding this comment

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

If all the border controls are in fact to be optional, I think you can omit this part of the configuration.

That said, when the border support panel was first switched to the ToolsPanel, the general idea was that any block opting into more than the border radius support should have all its border support features as default controls.

From memory, this was primarily to address UX issues around the split border color, width, and style controls. The fact this clutters the sidebar was also a driving force in refining the border controls and delaying opting into border support more widely.

Some background and context here can be found in #34061 and #36942.

}
},
"editorStyle": "wp-block-post-featured-image-editor",
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/post-featured-image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
align-items: center;
box-shadow: none;
padding: 0;
border-radius: inherit;

// Hide the upload button, as it's also available in the media library.
.components-form-file-upload {
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/post-featured-image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
vertical-align: bottom;
}

&:not(.is-style-rounded) {
> a,
img {
border-radius: inherit;
}
}

&.alignwide img,
&.alignfull img {
width: 100%;
Expand Down