Skip to content

Cover: Add custom border support to the cover block #31370

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

Closed
aaronrobertshaw wants to merge 6 commits into from
Closed

Cover: Add custom border support to the cover block #31370

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e028ca3
Add border support to the cover block
aaronrobertshaw Apr 30, 2021
a9c13d6
Add baseline border styles for cover block
aaronrobertshaw Aug 9, 2021
9d79d94
Try moving application of border in the editor to improve UX
aaronrobertshaw Apr 29, 2022
ac7cdcd
Refine application of borders and display in editor
aaronrobertshaw Apr 29, 2022
7de91ca
Try new approach to handling cover borders in editor
aaronrobertshaw Apr 29, 2022
c9b9909
Re-apply edit component changes after controls refactoring
aaronrobertshaw May 16, 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
Prev Previous commit
Next Next commit
Try new approach to handling cover borders in editor
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed May 16, 2022
commit 7de91cab178a99a4616edf20432500985e02dbbd
1 change: 0 additions & 1 deletion packages/block-library/src/cover/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@
"radius": true,
"style": true,
"width": true,
"__experimentalSkipSerialization": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
Expand Down
20 changes: 13 additions & 7 deletions packages/block-library/src/cover/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
/* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
.editor-styles-wrapper & {
box-sizing: border-box;
overflow: initial;
}

// Override default cover styles
Expand Down Expand Up @@ -75,8 +74,7 @@
margin-left: auto;
}

.block-library-cover__resize-container,
.block-library-cover__border-visualizer {
.block-library-cover__resize-container {
position: absolute !important;
top: 0;
left: 0;
Expand All @@ -85,10 +83,6 @@
min-height: 50px;
}

.block-library-cover__border-visualizer {
z-index: z-index(".wp-block-cover.has-background-dim::before");
}

.block-library-cover__resize-container:not(.is-resizing) {
// Important is used to have higher specificity than the inline style set by re-resizable library.
height: auto !important;
Expand All @@ -104,3 +98,15 @@
.block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
background-attachment: scroll;
}

.block-library-cover__outer-wrapper {
position: relative;

&.is-selected {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

> .wp-block-cover::after {
display: none;
}
}
}