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

Reveal block boundaries on hover in the Site Editor #27271

Merged
merged 16 commits into from
Dec 1, 2020
Merged

Reveal block boundaries on hover in the Site Editor #27271

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
51e6acd
Reveal block boundaries on hover, and colorise template parts
jameskoster Nov 25, 2020
855042c
Hover boundary width
jameskoster Nov 25, 2020
d09dc61
Remove focus and selected styles
jameskoster Nov 25, 2020
316c20e
Merge branch 'master' into try/block-selection
jameskoster Nov 25, 2020
cfcad79
fix clipping issue and better align hover outline
jameskoster Nov 26, 2020
10e1974
Apply 1px black border when selected, but not focussed
jameskoster Nov 26, 2020
bfb8507
Default cursor on hover
jameskoster Nov 26, 2020
fa73c88
Only hide the outline on text editable blocks whilst typing
jameskoster Nov 26, 2020
4d3847b
outline alignment
jameskoster Nov 26, 2020
f547f3c
Merge branch 'master' into try/block-selection
jameskoster Nov 26, 2020
ee94f0d
Even more alignment fixes...
jameskoster Nov 27, 2020
cf9687c
Merge branch 'master' into try/block-selection
jameskoster Nov 27, 2020
b47f73b
Remove the pseudo-spotlight effect on template parts
jameskoster Nov 27, 2020
e208848
Merge branch 'master' into try/block-selection
jameskoster Nov 30, 2020
1561108
Merge branch 'master' into try/block-selection
jameskoster Nov 30, 2020
072db8f
Remove template part spotlight and move outline styles
jameskoster Nov 30, 2020
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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@

// Active entity spotlight.
&.has-active-entity:not(.is-focus-mode) {
opacity: 0.5;
Copy link
Member

Choose a reason for hiding this comment

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

If we are removing the template part spotlight mode thingy, we can probably remove this class entry altogether

//opacity: 0.5;
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably need to remove this when this PR goes out of draft state.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Probably 😅

transition: opacity 0.1s linear;
@include reduce-motion("transition");

Expand Down
74 changes: 52 additions & 22 deletions packages/block-library/src/template-part/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,35 +90,65 @@
}
}

.block-editor-block-list__block[data-type="core/template-part"] {
&.is-selected,
&.has-child-selected {
&::after {
top: $border-width;
bottom: $border-width;
left: $border-width;
right: $border-width;
border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
.block-editor-block-list__layout {
.block-editor-block-list__block[data-type="core/template-part"] {
&.is-selected,
&.has-child-selected {
&::after {
top: $border-width;
bottom: $border-width;
left: $border-width;
right: $border-width;
border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
}
}

&.is-hovered {
&::after, {
// 2px outside.
box-shadow: 0 0 0 $border-width $alert-red;
// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 $border-width $dark-theme-focus;
}
}
}
}

&.is-selected {
&::after {
// 2px outside.
box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
&.is-selected,
&:focus {
&::after, {
// 2px outside.
box-shadow: 0 0 0 $border-width-focus $alert-red;
// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
}
}
}

/*&.has-child-selected {
&::after {
box-shadow: 0 0 0 $border-width $gray-300;

.is-dark-theme & {
box-shadow: 0 0 0 $border-width-focus $gray-700;
}
}
}*/
}

&.has-child-selected {
&::after {
box-shadow: 0 0 0 $border-width $gray-300;
&.edit-site-block-editor__block-list {
.is-hovered {
&::after {
box-shadow: 0 0 0 $border-width $gray-900;
}
}

.is-dark-theme & {
box-shadow: 0 0 0 $border-width-focus $gray-700;
.block-editor-rich-text__editable {
&.is-selected.is-hovered {
&::after {
box-shadow: none;
}
}
}
}
Expand Down