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 4 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
15 changes: 14 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 All @@ -84,6 +88,12 @@
display: none;
}
}

// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
.selected-block-tools-wrapper & {
height: $header-height;
padding-top: 7px; // It should be 6px (60px header height - 48px toolbar height = 12 / 2), but there is a -1px top-margin down the stack that affects this.
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Any rules related to the block toolbar within the header should be moved into the header.scss files for that package (edit-post, edit-site, etc), as the block-toolbar/style.scss shouldn't "know about" how it's used outside of the block editor.

}

.block-editor-block-toolbar .components-toolbar-group,
Expand All @@ -105,7 +115,10 @@
position: absolute;
font-size: 16px;
right: 0;
bottom: $grid-unit-20;
height: $grid-unit-60;
top: 0;
display: inline-flex;
align-items: center;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Since this dot is a font, its height may change depending on the font-family and line-height. So I explicitly set it to the same height as the button and aligned it vertically and centered.

}
}

Expand Down
7 changes: 4 additions & 3 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 @@ -55,6 +55,7 @@
.selected-block-tools-wrapper {
overflow-x: hidden;
display: flex;
align-items: center;

.block-editor-block-contextual-toolbar {
border-bottom: 0;
Expand All @@ -63,8 +64,7 @@
&::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 @@ -73,12 +73,13 @@
.components-toolbar-group,
.components-toolbar {
border-right: none;
height: 100%;

&::after {
content: "";
width: $border-width;
height: $grid-unit-30;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
background-color: $gray-300;
margin-left: $grid-unit;
}
Expand Down
4 changes: 2 additions & 2 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 @@ -205,7 +205,7 @@ $header-toolbar-min-width: 335px;

.has-fixed-toolbar {
.selected-block-tools-wrapper {
overflow-x: scroll;
overflow-x: hidden;

.block-editor-block-contextual-toolbar {
border-bottom: 0;
Expand All @@ -219,8 +219,8 @@ $header-toolbar-min-width: 335px;
&::after {
content: "";
width: $border-width;
height: $grid-unit-30;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
background-color: $gray-300;
margin-left: $grid-unit;
}
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -25,8 +25,8 @@
&::after {
content: "";
width: $border-width;
height: $grid-unit-30;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
background-color: $gray-300;
margin-left: $grid-unit;
}
Expand Down
Loading