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

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
Refine application of borders and display in editor 
This still isn't perfect. The cover content/background appears to be "under" dashed/dotted borders in the editor but are instead contained within them on the frontend.
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed May 16, 2022
commit ac7cdcdb78c4f1f1a7d0e50a8b858bdf235e44ca
7 changes: 6 additions & 1 deletion packages/block-library/src/cover/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@
margin-left: auto;
}

.block-library-cover__resize-container {
.block-library-cover__resize-container,
.block-library-cover__border-visualizer {
position: absolute !important;
top: 0;
left: 0;
Expand All @@ -84,6 +85,10 @@
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 Down