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.

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

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Dec 29, 2023

What?

This PR applies the custom scrolling style to the fixed block toolbar. I think this improves the appearance, especially on Windows.

Note

This PR was originally to simply introduce a custom scrollbar. However, after some discussion, we have made a CSS adjustment in all editor instances to prevent the toolbar from shifting when a scrollbar appears or when a button is focused.

Before (Chrome)

chrome-before

After (Chrome)

chrome-after

Why?

In the Chrome browser on Windows, the scrollbar has a physical width/height. So the top toolbar buttons are pushed far up and look unnatural to me.

Additionally, this toolbar actually contains two overflow properties:

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

.block-editor-block-toolbar {
overflow: auto;

In the case of the Site Editor, the overfow property value of the upper container (.selected-block-tools-wrapper ) is scroll instead of hidden, so when element in the container overflow, the two scroll bars overlap, making it look even more unnatural.

double-scrollbar

How?

First, I changed the overflow property of the upper container (.selected-block-tools-wrapper) from scroll to hidden. This will eliminate double scrollbars.

Additionally, to make this thick scrollbar appear more natural, I applied a custom-scrollbars-on-hover mixin to the inner scroll container (.block-editor-block-toolbar). If an element overflows, a scrollbar will appear without the need for mouseover. Personally, I feel that this is easier to understand than the behavior of disappearing the scroll bar when the mouse is out.

Testing Instructions

  • Open the Site Editor.
  • Insert some block and select it. For example, image blocks are easier to test because they have a long block toolbar.
  • Change the browser width in various browsers.
  • For Mac OS, change the OS settings so that the scroll bar is always displayed.
  • When the block toolbar is not fixed, the scrollbar should never be displayed.

Screenshots or screencast

Note: This shows scrollbar behavior in WindowsOS and Chrome.

Before

before.mp4

After

after.mp4

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. OS Issues Issues or PRs that are related to OS specific problems labels Dec 29, 2023
@t-hamano t-hamano self-assigned this Dec 29, 2023
Comment on lines +81 to +82
// Prevents padding from being applied to the left and right sides of the element.
scrollbar-gutter: auto;
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

@t-hamano t-hamano marked this pull request as ready for review December 29, 2023 05:44
Copy link

github-actions bot commented Dec 29, 2023

Size Change: +901 B (0%)

Total Size: 1.7 MB

Filename Size Change
build/block-editor/style-rtl.css 15.5 kB +154 B (+1%)
build/block-editor/style.css 15.5 kB +152 B (+1%)
build/edit-post/style-rtl.css 5.7 kB +77 B (+1%)
build/edit-post/style.css 5.69 kB +76 B (+1%)
build/edit-site/style-rtl.css 15.3 kB +131 B (+1%)
build/edit-site/style.css 15.3 kB +126 B (+1%)
build/edit-widgets/style-rtl.css 4.48 kB +91 B (+2%)
build/edit-widgets/style.css 4.48 kB +94 B (+2%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.22 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.38 kB
build/block-editor/content.css 4.38 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/index.min.js 250 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.69 kB
build/block-library/blocks/cover/style.css 1.68 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 316 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 863 B
build/block-library/blocks/image/editor.css 862 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view.min.js 2.01 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.25 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.24 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 1.1 kB
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 614 B
build/block-library/blocks/search/style.css 614 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 471 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 215 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/index.min.js 235 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.71 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.34 kB
build/customize-widgets/style.css 1.33 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.92 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 25 kB
build/edit-site/index.min.js 195 kB
build/edit-widgets/index.min.js 17.3 kB
build/editor/index.min.js 61.6 kB
build/editor/style-rtl.css 5.42 kB
build/editor/style.css 5.42 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.85 kB
build/format-library/style-rtl.css 478 B
build/format-library/style.css 477 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/file.min.js 440 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.9 kB
build/interactivity/navigation.min.js 1.23 kB
build/interactivity/query.min.js 884 B
build/interactivity/router.min.js 952 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 5.47 kB
build/patterns/style-rtl.css 540 B
build/patterns/style.css 539 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.07 kB
build/preferences/index.min.js 2.81 kB
build/preferences/style-rtl.css 698 B
build/preferences/style.css 700 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.07 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@jasmussen
Copy link
Contributor

jasmussen commented Dec 29, 2023

Thank you for the ping, thank you for the PR!

Let's definitely land a version of this; the use case described is valid, and it solves an issue present with the on-hover scrollbars where it isn't clear that there are more tools.

That said, we'll need to fiddle with the margins and styles, so that the icons remain on a single row, rather than get pushed upwards, because right now this change affects not just Windows, but all browsers including Mac with on-hover scrollbars:

Screenshot 2023-12-29 at 10 23 16

It also appears as if the trick to make these scrollbars on-hover is broken here, despite the mixin. I realize the visibility:hidden; trick employed is a little fragile, but I wonder what happened? Edit: this works again by setting the first prop in the mixin to transparent, suggesting the always-visible aspect was intentional. Let me see if I can try something that keeps the spirit here.

I wonder, while we're here, if we can even apply this overflow with a max-width, so that it also scrolls horizontally when the block toolbar is docked near the block. If you insert a list item, and apply text labels only, it's trivial to get the toolbar cut off:

Screenshot 2023-12-29 at 10 32 15

I've added a red border here as I'm debugging some things. I'll dive in now and see if we can have some tricks that make the icons line up still, while keeping this scrollbar.

@jasmussen
Copy link
Contributor

jasmussen commented Dec 29, 2023

An observation as I stumble upon it, looks like the post/page header-bar is now 64px tall, whereas the site editor header is 60px tall (as defined by $header-height). We actually want the header to eventually be 64px tall, as part of some updates we are making to the metrics, but at the moment the discrepancy seems a bug. CC: @youknowriad, I wonder if it has to do with some of the unification work?

Edit: actually that's wrong. The web inspector measures 64px, so there's definitely something funky going on with elements not being quite the right size, but the rendered height is still 61px including the 1px border.

@jasmussen
Copy link
Contributor

Okay I think I have the start of a fix. I haven't pushed it yet, because I don't have immediately on hand an easy way to test in Windows, so I would appreciate you testing first. There's also a side effect I'll come back to.

Here's the updated rule, starting at line 76:

	.block-editor-block-toolbar {
		// These two rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
		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.

		overflow: auto;
		overflow-y: hidden;
		@include custom-scrollbars-on-hover($gray-100, $gray-600);

		// Prevents padding from being applied to the left and right sides of the element.
		scrollbar-gutter: auto;

		> :last-child,
		> :last-child .components-toolbar-group,
		> :last-child .components-toolbar {
			&::after {
				display: none;
			}
		}
	}

What it does is provide a fixed height to the toolbar section, which means the icons, now positioned with a top-padding rather than vertical centering, push the scrollbar below the row of icons, letting the inner scrollbar technically overlap the buttons a little bit. I combined that with having the resting state of the scrollbar be a light gray that goes darker on hover.

Here's how it looks with debug colors:

with debug

Here's what it looks like with the default UI colors:

without debug

Depending on how this works in Windows, we will need to do a little followup. Because right now that fixed height, if not the padding, also affects the contextual block toolbar:

regular block toolbar

While we could distinguish between top and contextual toolbars in the CSS, it might be good to find a solution that works across both, because as noted there are cases, very commonly with text labels only mode, where the toolbar currently gets cropped and therefore unusable. So it'd be nice if we could a solution that works across both. Let me know what you think!

@t-hamano
Copy link
Contributor Author

Thank you for your great exploration, @jasmussen!

While we could distinguish between top and contextual toolbars in the CSS, it might be good to find a solution that works across both, because as noted there are cases, very commonly with text labels only mode, where the toolbar currently gets cropped and therefore unusable. So it'd be nice if we could a solution that works across both.

I think this is definitely an issue that should be improved. I have encountered many cases where a large number of plugins extend the block toolbar and hide it even when not in text label mode. This is a simple example to demonstrate it.

float-toolbar

The challenge here is that we need logic to detect if the floating block toolbar hits the edge of the browser or the block sidebar and automatically stretches or shrinks its width.

This is probably related to the Popover component, and may not be solved with CSS alone. Therefore, it might be better to leave this as a future improvement plan for now.

That said, we'll need to fiddle with the margins and styles, so that the icons remain on a single row, rather than get pushed upwards, because right now this change affects not just Windows, but all browsers including Mac with on-hover scrollbars:

Indeed. First of all, I would like to apply the approach you suggested in this comment and report the test results again.

@t-hamano
Copy link
Contributor Author

What it does is provide a fixed height to the toolbar section, which means the icons, now positioned with a top-padding rather than vertical centering, push the scrollbar below the row of icons, letting the inner scrollbar technically overlap the buttons a little bit. I combined that with having the resting state of the scrollbar be a light gray that goes darker on hover.

This approach seems to work for Windows as well. However, it appears that some adjustments are needed in the non-fixed or mobile toolbars.

1e24792b47740641e0d5576c795257c8.mp4

I think this PR needs further exploration, so I'll return it to the draft. I'll try different approaches, but if you have any ideas, feel free to push them.

@t-hamano t-hamano marked this pull request as draft December 29, 2023 11:50
@jasmussen
Copy link
Contributor

The challenge here is that we need logic to detect if the floating block toolbar hits the edge of the browser or the block sidebar and automatically stretches or shrinks its width.

Right, good point, that makes me think it's probably best to look at separately.

However, it appears that some adjustments are needed in the non-fixed or mobile toolbars.

Good catch.

I think this PR needs further exploration, so I'll return it to the draft. I'll try different approaches, but if you have any ideas, feel free to push them.

My instincts would go towards applying a fixed height also to mobile, and even to contextual block toolbars. In the case of the mobile toolbar, it probably just lacks a fixed height at the moment. In the case of the contextual toolbar, it is likely it needs a local fixed-height, that takes precedence over the taller height.

I'll take a quick look now, see if there's a small fix I can push. Otherwise, I'm heading AFK for a little bit very soon, and can look again the second week of January. I'd like to take the opportunity to wish you a happy new year. Thank you for the energy and care you brought to the project in 2023, your impact is felt!

@jasmussen
Copy link
Contributor

Oh I may have found a fix. There's a wrapper that appears to be attached only to the top-toolbar-embedded version, and if we apply the height and padding scoped to just that wrapper, it appears to thread the needle:

fix

CC: @jeryj as I believe he worked on this as well.

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Per the latest changes, here's a tentative 👍 👍 on the behavior and appearance.

Comment on lines 118 to 121
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.

@t-hamano
Copy link
Contributor Author

Thank you for your wonderful efforts, @jasmussen!

In order to ship this PR, we mail need to adjust the border height and the dot position. I made a little adjustment in
395356f. I think I've adjusted it well so far, but let's test it again next year!

Before

Post Editor:

edit-post-before

Site Editor:

edit-site-before

Widget Editor:

edit-widget-before

After

Post Editor:

edit-post-after

Site Editor:

edit-site-after

Widget Editor:

edit-widget-after

@jasmussen
Copy link
Contributor

Looks good to me!

@t-hamano t-hamano marked this pull request as ready for review January 8, 2024 14:05
@t-hamano
Copy link
Contributor Author

I do wonder, can we change the vertical mover button heights to be percentages? I.e. always be 50% height across all toolbars?

From what I've researched, this might be difficult.

The toolbar (.components-toolbar-group) has min-height: 48px applied as a style of the component itself, rather than a fixed height.

image

Simply adding height:50% to a vertical toolbar button will not make it half as tall as 48px because the parent element does not have a fixed height. Instead, due to his 24px internal SVG button and the padding of the button itself, the height of the button is more than half of his 48px, causing an overflow.

image

@jasmussen
Copy link
Contributor

I wonder, what if the buttons are abs-positioned? They might be covered by the scrollbar, but would they force a scroll?

@t-hamano
Copy link
Contributor Author

what if the buttons are abs-positioned?

Does this mean applying position:absolute to the vertical mover button? If so, it may be difficult to apply. Because if we position the button absolutely, we need to apply a fixed width to the parent element. However, when the "Show button text labels" is enabled, the width of the mover button changes depending on the locale, so a fixed width cannot be applied.

mover-button-width

@jasmussen
Copy link
Contributor

Yes indeed, good catch. That might need a min-width. For now I was mostly curious if that aspect actually fixed the issue, meaning that it would not cause shifting when focused, and would afford the scrollbar where it was. If yes, I think we could probably find a reasonable min-width for it. In general the text-labels only mode needs separate work, both in terms of rephrasing labels, and managing font sizes, there should be room to get that right.

@t-hamano
Copy link
Contributor Author

For now I was mostly curious if that aspect actually fixed the issue, meaning that it would not cause shifting when focused, and would afford the scrollbar where it was.

I tried this approach right away. That is, apply an explicit width and position: relative to the block mover button's wrapper element. Then apply position: absolute to the two buttons inside and apply top:0 or top:24px. Just to be sure, I also applied height: 0 to this wrapper element.

Unfortunately, even if the button is absolutely positioned, toolbar shifting seems to occur if the button overlaps the scrollbar. Perhaps the toolbar shift might occur when an element visually overlaps the scrollbar, regardless of whether the element is relative or absolutely positioned 🤔

82e44f91438c27831200d805283cb7c8.mp4

@jasmussen
Copy link
Contributor

Forgive the delay, I finally had time to come back to this. I think I've found a way forward. The key was realizing that the 20+20 != 48.

Screenshot 2024-01-24 at 10 59 53

Essentially, the min-height: 48px; exists elsewhere to help vertically center items in the block toolbar. But for this particular case, it's not really helping the buttons. And so it seems, due to how the nested overflow works, we can enforce an almost arbitrarily small height, and gain pixels in the process. Shown here, a 20px enforced height on the mover container. But the buttons are still their full 20+20=40 height, and in my testing I could not get focus to shift things around:

with debug

Here's the same in Firefox:

firefox

I took the liberty of pushing the fix, but it should be easy to revert if I made an error. Let me know how this works for you.

@t-hamano
Copy link
Contributor Author

Thank you for exploring! Unfortunately, it did not work properly with the combination of Windows OS and Chrome.

In the screencast below, a red border is applied to the container (.block-editor-block-mover__move-button-container). This container does indeed have a height of 20px, but focusing on the bottom mover button causes a toolbar shift. Perhaps this is due to differences in OS 🤔

5cc0178fdbe39164bc059591c521fff9.mp4

Personally, I would like to at least fix this unsophisticated scrollbar in Windows with WP6.5.

I think the current destination is one of the following, what do you think?

  • Apply only custom scrollbars. Toolbar shifts occur.
  • As mentioned in this comment, move the vertical mover button position up as far as it will go without causing toolbar shifting.

In either case, we might be able to try this problem again after changing the header height to 64px in the future.

@jasmussen
Copy link
Contributor

What happens if the 20px container is even smaller, say 8px tall?

That said, I don't think it's problematic to move it upwards 6px if that fixes it, especially if we can limit it to only the top toolbar mode. As you say, we can then revisit.

@t-hamano
Copy link
Contributor Author

What happens if the 20px container is even smaller, say 8px tall?

If I change the height of a container with a height of 20px to 8px, the mover button will move up. In order to align this, I was able to increase the top value to 10px. However, for more precise alignment, setting the top value to 11px or higher seems to cause the toolbar to shift.

91e0b57bf850efa01f3975c37fb7dc6d.mp4

@jasmussen
Copy link
Contributor

If we're comfortable with the code complexity, and if it's limited to the toolbar in top toolbar mode for now, I think it's fine to shift the movers upwards to address the scrolling issue, and then merge this. What do you think?

@t-hamano
Copy link
Contributor Author

If we're comfortable with the code complexity, and if it's limited to the toolbar in top toolbar mode for now, I think it's fine to shift the movers upwards to address the scrolling issue, and then merge this. What do you think?

I think so too. I reverted your c2de530 and merged the latest trunk again. What this PR ultimately achieves should be the behavior described in this comment.

By the way, I'm thinking of making the headers more consistent overall. The issues I found are summarized in #58293. If you have any opinions, please comment.

@jasmussen
Copy link
Contributor

Good issue, I've subscribed! The buttons should be 32px now, as of #56635, and is part of #46734.

@t-hamano
Copy link
Contributor Author

I think it's okay to ship this PR, what do you think?

The buttons should be 32px now, as of #56635

Yes, I checked that PR. However, it seems that some components have reverted to 36px in the latest trunk. Perhaps some subsequent change caused the regression.

@jasmussen
Copy link
Contributor

I think it's okay to ship this PR, what do you think?

If this scrollbar code is limited to the toolbar in top toolbar mode, and not near the block, yes, I think it's a substantial improvement over trunk, which looks like this:
before

That's barely usable given how much things are shifting around. This PR fixes that well, and does not preclude further improvements. Thank you for your work and attention to detail here.

However, it seems that some components have reverted to 36px in the latest trunk. Perhaps some subsequent change caused the regression.

Ack, well thank you for being aware!

@t-hamano
Copy link
Contributor Author

If this scrollbar code is limited to the toolbar in top toolbar mode, and not near the block, yes,

Yes, this PR should have no effect when not in Top Toolbar mode. If there are any issues, I would be happy to address them with a follow-up PR. This was a difficult problem, but thank you for all your ideas and advice!

@t-hamano t-hamano merged commit 11a9943 into trunk Jan 26, 2024
56 checks passed
@t-hamano t-hamano deleted the fixed-header-custom-scroll branch January 26, 2024 09:51
@github-actions github-actions bot added this to the Gutenberg 17.7 milestone Jan 26, 2024
westonruter added a commit that referenced this pull request Jan 26, 2024
…zy-hydration

* origin/trunk: (47 commits)
  Interactivity API: Break up long hydration task in interactivity init (#58227)
  Add supports.interactivity to Query block (#58316)
  Font Library: Make notices more consistent (#58180)
  Fix Global styles text settings bleeding into placeholder component (#58303)
  Fix the position and size of the Options menu, (#57515)
  DataViews: Fix safari grid row height issue (#58302)
  Try a fix (#58282)
  Navigation Submenu Block: Make block name affect list view (#58296)
  Apply custom scroll style to fixed header block toolbar (#57444)
  Add support for transform and letter spacing controls in Global Styles > Typography > Elements (#58142)
  DataViews: Fix table view cell wrapper and BlockPreviews (#58062)
  Workflows: Add 'Technical Prototype' to the type-related labels list (#58163)
  Block Editor: Optimize the 'useBlockDisplayTitle' hook (#58250)
  Remove noahtallen from .wp-env codeowners (#58283)
  Global styles revisions: fix is-selected rules from affecting other areas of the editor (#58228)
  Try: Disable text selection for post content placeholder block. (#58169)
  Remove `template-only` mode from editor and edit-post packages (#57700)
  Refactored download/upload logic to support font faces with multiple src assets (#58216)
  Components: Expand theming support in COLORS (#58097)
  Implementing new UX for invoking rich text Link UI  (#57986)
  ...
@MaggieCabrera MaggieCabrera added the [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") label Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") General Interface Parts of the UI which don't fall neatly under other labels. OS Issues Issues or PRs that are related to OS specific problems [Type] Enhancement A suggestion for improvement.
Projects
Development

Successfully merging this pull request may close these issues.

6 participants