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

Jump to bottom

Outline editable blocks that are within a content-locked container #57901

Merged
merged 8 commits into from
Jan 19, 2024
Merged

Outline editable blocks that are within a content-locked container #57901

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0e98ea9
Outline editable blocks that are within a content-locked container
noisysocks Jan 17, 2024
bb583c8
Hide outline and pencil icon from previews
noisysocks Jan 17, 2024
763d02a
Make outlines look more like the mockup
noisysocks Jan 17, 2024
60bce86
remove icon
SaxonF Jan 18, 2024
e2dbe63
only show block outline when hovering
SaxonF Jan 18, 2024
7a0018c
Only show outlines when hovering over the page editor or locked pattern
noisysocks Jan 18, 2024
08355d5
Remove unnecessary css
noisysocks Jan 18, 2024
a75a9bb
Remove unnecessary z-index
noisysocks Jan 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ $z-layers: (
".wp-block-cover__image-background": 0, // Image background inside cover block.
".wp-block-cover__video-background": 0, // Video background inside cover block.
".wp-block-template-part__placeholder-preview-filter-input": 1,
".block-editor-block-list__block:not(.is-editing-disabled)::before": 2,

// Fixed position appender:
".block-editor-block-list__block .block-list-appender": 2,
Expand Down
35 changes: 34 additions & 1 deletion packages/block-editor/src/components/block-list/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
/* stylelint-disable */
_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
background-color: transparent;
background-color: transparent;
}
/* stylelint-enable */

Expand Down Expand Up @@ -303,6 +303,39 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}

.block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) {
&::before {
background-color: var(--wp-admin-theme-color);
// Disable reason: Need quotes around the encoded SVG URL.
// stylelint-disable-next-line function-url-quotes
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'%3E%3Cpath d='m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z' fill='%23fff'/%3E%3C/svg%3E%0A");
color: $white;
content: "";
height: 24px;
position: absolute;
right: $grid-unit-05;
top: $grid-unit-05;
width: 24px;
z-index: z-index(".block-editor-block-list__block:not(.is-editing-disabled)::before");
}

&::after {
content: "";
position: absolute;
pointer-events: none;
top: $border-width;
left: $border-width;
right: $border-width;
bottom: $border-width;
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
border-radius: $radius-block-ui - $border-width;
}

&.is-hovered::after {
background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
}
}

// Spotlight mode. Fade out blocks unless they contain a selected block.
.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
opacity: 0.2;
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/src/components/block-preview/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
display: none;
}

// Hide pencil icon that indicates editable blocks from previews.
.block-editor-block-preview__content-iframe .block-editor-block-list__block:not(.is-editing-disabled)::before {
display: none;
}

.block-editor-block-preview__live-content {
* {
pointer-events: none;
Expand Down