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

Apply custom scroll style to fixed header block toolbar #57444

Merged
merged 21 commits into from
Jan 26, 2024
Merged

Apply custom scroll style to fixed header block toolbar #57444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2f2913b
Apply custom scroll style to fixed header block toolbar
t-hamano Dec 29, 2023
588f2f7
Fix header height
t-hamano Dec 29, 2023
30ba00f
Scope the fix.
jasmussen Dec 29, 2023
395356f
Fix border and parent selector dot
t-hamano Dec 30, 2023
1451d8a
Merge branch 'trunk' into fixed-header-custom-scroll
t-hamano Jan 8, 2024
ae6854e
Merge branch 'trunk' into fixed-header-custom-scroll
t-hamano Jan 10, 2024
42c067e
Move styles to each package
t-hamano Jan 11, 2024
96e7976
Merge branch 'trunk' into fixed-header-custom-scroll
t-hamano Jan 11, 2024
8528b3b
Resolve conflicts
t-hamano Jan 15, 2024
3e79edc
Try to get buttons to line up
t-hamano Jan 15, 2024
c70eaf7
Try to fix the toolbar shift in the Post Editor
t-hamano Jan 16, 2024
45217e8
Temp
t-hamano Jan 16, 2024
f7dbbb6
Merge branch 'trunk' into fixed-header-custom-scroll
t-hamano Jan 16, 2024
b6831f5
Try to fix the toolbar shift in the Post Editor
t-hamano Jan 16, 2024
6a0fe59
Try to fix the toolbar shift in the Site Editor
t-hamano Jan 16, 2024
463b266
Try to fix the toolbar shift in the Widget Editor
t-hamano Jan 16, 2024
7692bde
Merge branch 'trunk' into fixed-header-custom-scroll
t-hamano Jan 20, 2024
6020b94
Fix border position when "Show button text labels" is enabled
t-hamano Jan 20, 2024
c2de530
Try: Small fix to center, keep the big buttons.
jasmussen Jan 24, 2024
6ce3c2e
Revert "Try: Small fix to center, keep the big buttons."
t-hamano Jan 26, 2024
a3c6530
Merge branch 'trunk' into fixed-header-custom-scroll
t-hamano Jan 26, 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
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
display: flex;
padding: 0;
border: none;
justify-content: center;

@include break-small() {
.block-editor-block-mover:not(.is-horizontal) & {
flex-direction: column;

> * {
height: $block-toolbar-height * 0.5;
height: $block-toolbar-height * 0.5 - $grid-unit-05;
width: 100%;
min-width: 0 !important; // overrides default button width.

Expand All @@ -19,12 +20,12 @@
}

.block-editor-block-mover-button.is-up-button svg {
top: 5px;
top: 3px;
flex-shrink: 0;
}

.block-editor-block-mover-button.is-down-button svg {
bottom: 5px;
bottom: 3px;
flex-shrink: 0;
}
}
Expand Down
9 changes: 8 additions & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@
.block-editor-block-toolbar {
overflow: auto;
overflow-y: hidden;
@include custom-scrollbars-on-hover($gray-200, $gray-600);

// Prevents padding from being applied to the left and right sides of the element.
scrollbar-gutter: auto;
Comment on lines +81 to +82
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The custom scrollbar mixin has a style called scrollbar-gutter: stable both-edges;. To prevent the button from being cut off due to this, we need to override it.

image


> :last-child,
> :last-child .components-toolbar-group,
Expand Down Expand Up @@ -109,7 +113,10 @@
position: absolute;
font-size: 16px;
right: 0;
bottom: $grid-unit-20;
height: $button-size-compact;
top: 0;
display: inline-flex;
align-items: center;
}
}
}
Expand Down
46 changes: 39 additions & 7 deletions 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 @@ -53,18 +53,34 @@
}

.selected-block-tools-wrapper {
overflow-x: hidden;
overflow: hidden;
display: flex;
align-items: center;
height: $header-height;

.block-editor-block-contextual-toolbar {
border-bottom: 0;
height: 100%;
}

// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
.block-editor-block-toolbar {
height: 100%;
// Push down so that buttons are centered vertically.
// It should be 14px (60px header height - 32px compact button height = 28 / 2),
// but there is a -1px top-margin down the stack that affects this.
padding-top: math.div($header-height - $button-size-compact, 2) + 1;

// Match the height of other buttons in the header toolbar.
.components-button:not(.block-editor-block-mover-button) {
height: $button-size-compact;
}
}

&::after {
content: "";
width: $border-width;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
height: $grid-unit-30;
background-color: $gray-300;
margin-left: $grid-unit;
}
Expand All @@ -77,9 +93,9 @@
&::after {
content: "";
width: $border-width;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
}

Expand All @@ -90,6 +106,22 @@
}
}

.block-editor-block-mover {
// Match the height of other buttons in the header toolbar.
&.is-horizontal .block-editor-block-mover-button {
height: $button-size-compact;
overflow: visible;
}

// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
@include break-small() {
&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
position: relative;
top: -10px;
}
}
}

&.is-collapsed {
display: none;
}
Expand Down Expand Up @@ -201,9 +233,9 @@
&::before {
content: "";
width: $border-width;
margin-top: $grid-unit-15;
margin-bottom: $grid-unit-15;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
}

Expand Down
52 changes: 47 additions & 5 deletions 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 @@ -149,9 +149,9 @@ $header-toolbar-min-width: 335px;
&::before {
content: "";
width: $border-width;
margin-top: $grid-unit-15;
margin-bottom: $grid-unit-15;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
}

Expand All @@ -168,10 +168,36 @@ $header-toolbar-min-width: 335px;

.has-fixed-toolbar {
.selected-block-tools-wrapper {
overflow-x: scroll;
overflow: hidden;
display: flex;
align-items: center;
height: $header-height;

.block-editor-block-contextual-toolbar {
border-bottom: 0;
height: 100%;
}

// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
.block-editor-block-toolbar {
height: 100%;
// Push down so that buttons are centered vertically.
// It should be 14px (60px header height - 32px compact button height = 28 / 2),
// but there is a -1px top-margin down the stack that affects this.
padding-top: math.div($header-height - $button-size-compact, 2) + 1;

// Match the height of other buttons in the header toolbar.
.components-button:not(.block-editor-block-mover-button) {
height: $button-size-compact;
}
}

&::after {
content: "";
width: $border-width;
height: $grid-unit-30;
background-color: $gray-300;
margin-left: $grid-unit;
}

// Modified group borders.
Expand All @@ -182,9 +208,9 @@ $header-toolbar-min-width: 335px;
&::after {
content: "";
width: $border-width;
margin-top: $grid-unit-15;
margin-bottom: $grid-unit-15;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
}

Expand All @@ -195,6 +221,22 @@ $header-toolbar-min-width: 335px;
}
}

.block-editor-block-mover {
// Match the height of other buttons in the header toolbar.
&.is-horizontal .block-editor-block-mover-button {
height: $button-size-compact;
overflow: visible;
}

// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
@include break-small() {
&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
position: relative;
top: -10px;
}
}
}

&.is-collapsed {
display: none;
}
Expand Down
42 changes: 39 additions & 3 deletions packages/edit-widgets/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,28 @@
}

.selected-block-tools-wrapper {
overflow-x: hidden;
overflow: hidden;
display: flex;
align-items: center;
height: $header-height;

.block-editor-block-contextual-toolbar {
border-bottom: 0;
height: 100%;
}

// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
.block-editor-block-toolbar {
height: 100%;
// Push down so that buttons are centered vertically.
// It should be 14px (60px header height - 32px compact button height = 28 / 2),
// but there is a -1px top-margin down the stack that affects this.
padding-top: math.div($header-height - $button-size-compact, 2) + 1;

// Match the height of other buttons in the header toolbar.
.components-button:not(.block-editor-block-mover-button) {
height: $button-size-compact;
}
}

// Modified group borders.
Expand All @@ -25,9 +43,9 @@
&::after {
content: "";
width: $border-width;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
}

Expand All @@ -37,6 +55,22 @@
}
}
}

.block-editor-block-mover {
// Match the height of other buttons in the header toolbar.
&.is-horizontal .block-editor-block-mover-button {
height: $button-size-compact;
overflow: visible;
}

// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
@include break-small() {
&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
position: relative;
top: -10px;
}
}
}
}
}

Expand All @@ -45,7 +79,9 @@
align-items: center;
justify-content: center;
flex-shrink: 2;
padding-right: $grid-unit-10;
padding-left: $grid-unit-20;
overflow: hidden;
}

.edit-widgets-header__title {
Expand Down
Loading