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

Exploration: Simpler outlines and synced pattern interactions #60286

Closed
wants to merge 12 commits into from
Closed

Exploration: Simpler outlines and synced pattern interactions #60286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cb2ed9c
remove unnecessary overlay styling
richtabor Mar 28, 2024
757dd32
try outlines and inert background
richtabor Mar 28, 2024
1e954a5
bindingsStyle use single synced color
richtabor Mar 28, 2024
f532a9c
make the toolbar closer to the content
richtabor Mar 28, 2024
9f88f65
Update scale to 0.5
richtabor Mar 28, 2024
2b9f2f7
Add fade in/out only for editable blocks in synced patterns
richtabor Mar 28, 2024
809bc90
bindings to set admin and admin rgb color
richtabor Mar 28, 2024
a8f09b6
move template part outlines to the right file
richtabor Mar 28, 2024
b428ef3
try interface shadows instead of borders
richtabor Mar 28, 2024
8e73d71
remove unnecessary border on site hub icon
richtabor Mar 28, 2024
2c5e08e
remove forced border radii on isolated editor canvas
richtabor Mar 28, 2024
8fd1630
try a slight outline fade in/out
richtabor Mar 28, 2024
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
37 changes: 0 additions & 37 deletions packages/block-editor/src/components/block-content-overlay/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,4 @@
.block-editor-block-list__block.has-block-overlay {
cursor: default;

&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
border: none;
border-radius: $radius-block-ui;
z-index: z-index(".block-editor-block-list__block.has-block-overlay");
}

&:not(.is-multi-selected)::after {
content: none !important;
}

&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
}

&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
background: rgba(var(--wp-block-synced-color--rgb), 0.04);
box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
}

&.is-selected:not(.is-dragging-blocks)::before {
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
}

.block-editor-block-list__block {
pointer-events: none;
}

.block-editor-iframe__body.is-zoomed-out &::before {
// Unfortunately because of the vw unit, this is not always going to be exact
Expand Down
147 changes: 102 additions & 45 deletions 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 @@ -99,17 +99,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
position: absolute;
z-index: 1;
pointer-events: none;
top: $border-width;
right: $border-width;
bottom: $border-width;
left: $border-width;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
top: 0;
right: 0;
bottom: 0;
left: 0;
outline-color: var(--wp-admin-theme-color);
outline-style: solid;
outline-width: var(--wp-admin-border-width-focus);
outline-offset: calc(-1 * var(--wp-admin-border-width-focus));

// Show a light color for dark themes.
// Show a light color for dark themes (@todo, is this even helpful?)
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
outline-color: $dark-theme-focus;
}
}
}
Expand All @@ -122,10 +123,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
position: absolute;
z-index: 0;
pointer-events: none;
transition:
border-color 0.1s linear,
border-style 0.1s linear,
box-shadow 0.1s linear;
transition: outline 0.1s linear;
right: 0;
left: 0;
top: -$default-block-margin * 0.5;
Expand Down Expand Up @@ -262,20 +260,37 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}

// Add fade in/out background for editable blocks in synced patterns.
@keyframes block-editor-outline__animation {
from {
outline-color: transparent;
}
to {
outline-color: var(--wp-admin-theme-color);
}
}

.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
&.is-hovered {

&.is-hovered:not(.is-selected) {
cursor: default;

&::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;
top: 0;
left: 0;
right: 0;
bottom: 0;
outline-color: var(--wp-admin-theme-color);
outline-style: solid;
outline-width: var(--wp-admin-border-width-focus);
outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
animation-name: block-editor-outline__animation;
animation-duration: 0.15s;
animation-timing-function: ease-out;
@include reduce-motion("animation");
}
}

Expand All @@ -285,46 +300,82 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
&.rich-text {
cursor: unset;
}
}

&:not(.rich-text).is-selected {

&.rich-text::after {
outline-offset: 0;
}

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

// Colorize outlines for template parts and synced patterns (.is-reusable).
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
&.is-highlighted::after,
&.is-selected::after {
outline-color: var(--wp-block-synced-color);
}

&.is-hovered::after {
outline-color: var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
outline-color: var(--wp-block-synced-color);

// Show a light color for dark themes.
.is-dark-theme & {
outline-color: $dark-theme-focus; //@todo, is this even helpful?
}
}
}
}

@keyframes block-editor-has-editable-outline__fade-out-animation {
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
border: none;
}

// Add fade in/out background for editable blocks in synced patterns.
@keyframes block-editor-is-editable__animation {
from {
border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
}
to {
border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
}
}

.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline {
&::after {
content: "";
position: absolute;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1);
border-radius: $radius-block-ui;
animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out;
animation-delay: 1s;
animation-fill-mode: forwards;
@include reduce-motion("animation");
}
.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
content: "";
position: absolute;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation-name: block-editor-is-editable__animation;
animation-duration: 0.35s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-fill-mode: backwards;
@include reduce-motion("animation");
}

// Spotlight mode. Fade out blocks unless they contain a selected block.
Expand Down Expand Up @@ -360,10 +411,16 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
z-index: z-index("{core/image aligned left or right} .wp-block");
}

// Increase width when zoomed out to match visually.
body.is-zoomed-out {
display: flex;
flex-direction: column;

.is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text).is-selected::after,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after {
outline-width: calc(2 * var(--wp-admin-border-width-focus)); // Adjusted for the zoom scale of 0.5; not perfect but its ok.
}

> .is-root-container {
flex: 1;
display: flex;
Expand Down
6 changes: 5 additions & 1 deletion packages/block-editor/src/components/block-list/use-block-props/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
const bindingsStyle =
hasBlockBindings && canBindBlock( name )
? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
? {
'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
'--wp-admin-theme-color--rgb':
'var(--wp-block-synced-color--rgb)',
}
: {};

// Ensures it warns only inside the `edit` implementation for the block.
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,8 @@
.block-editor-block-list__block-selection-button,
.block-editor-block-contextual-toolbar {
pointer-events: all;
margin-top: $grid-unit-15;
margin-bottom: $grid-unit-15;
margin-top: $grid-unit-10;
margin-bottom: $grid-unit-10;
}

.block-editor-block-contextual-toolbar {
Expand Down
25 changes: 0 additions & 25 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 @@ -23,28 +23,3 @@
z-index: z-index(".block-library-template-part__selection-search");
}

.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
&.is-highlighted::after,
&.is-selected::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
}

&.is-hovered::after {
box-shadow: 0 0 0 $border-width var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
}
}
}
}

.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
border: none;
}
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@
.edit-post-header {
backdrop-filter: blur(20px) !important;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133);
position: absolute;
width: 100%;

Expand Down
1 change: 0 additions & 1 deletion packages/edit-post/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ body.js.block-editor-page {

.is-sidebar-opened & {
@include break-medium() {
border-left: $border-width solid $gray-200;
overflow: hidden scroll;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ function EditorCanvas( {
const scale = isZoomOutMode
? ( contentWidth ) =>
computeIFrameScale(
{ width: 1000, scale: 0.45 },
{ width: 1000, scale: 0.5 },
{ width: 400, scale: 0.9 },
contentWidth
)
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/block-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
}

.edit-site-visual-editor__editor-canvas {
border-radius: $radius-block-ui;
max-height: 100%;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/header-edit-mode/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
box-sizing: border-box;
width: 100%;
justify-content: space-between;
border-bottom: $border-width solid $gray-200;
box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133);
padding-left: $header-height;

.edit-site-header-edit-mode__start {
Expand Down
6 changes: 0 additions & 6 deletions packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,12 +175,6 @@
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid transparent;

.edit-site-layout.is-full-canvas & {
border-bottom-color: $gray-200;
transition: border-bottom-color 0.15s 0.4s ease-out;
}

&:hover,
&:active {
Expand Down
8 changes: 4 additions & 4 deletions packages/interface/src/components/interface-skeleton/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ html.interface-interface-skeleton__html-container {
flex-shrink: 0;
position: absolute;
z-index: z-index(".interface-interface-skeleton__sidebar");
top: 0;
top: $border-width;
right: 0;
bottom: 0;
left: 0;
Expand All @@ -126,20 +126,20 @@ html.interface-interface-skeleton__html-container {
overflow: auto;

@include break-medium() {
border-left: $border-width solid $gray-200;
box-shadow: -$border-width 0 0 0 rgba($color: #000, $alpha: 0.133);
}
}

.interface-interface-skeleton__secondary-sidebar {
@include break-medium() {
border-right: $border-width solid $gray-200;
box-shadow: $border-width 0 0 0 rgba($color: #000, $alpha: 0.133);
}
}

.interface-interface-skeleton__header {
flex-shrink: 0;
height: auto; // Keep the height flexible.
border-bottom: $border-width solid $gray-200;
box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133);
z-index: z-index(".interface-interface-skeleton__header");
color: $gray-900;
}
Expand Down
Loading