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

Refactor: useBlockTools hook #58979

Merged
merged 12 commits into from
Feb 28, 2024
Merged

Refactor: useBlockTools hook #58979

merged 12 commits into from
Feb 28, 2024

Conversation

jeryj
Copy link
Contributor

@jeryj jeryj commented Feb 13, 2024

Closes #57288 alternative to #57291 and #58947.

There are times where a block is selected but no tools are available. If we don't have any tools, we don't want to show a toolbar. This combines the logic for showing the block toolbar that was sprinkled throughout the codebase:

  • block-toolbar/index.js checked if it should render based on if a toolbar was enabled for the block and if there were block controls in the slots
  • block-tools/index.js determined if the popover should render based on cascading rules if the inserter popover or block select mode popover were showing (and other rules)
  • use-can-block-toolbar-be-focused made an approximation of if the block toolbar would be showing or not, but fell short in some areas such as when a block toolbar should have been rendered, but there were no block tools available.

What?

Unify logic for which block tools will be showing so there is a source of truth for what will be showing (block toolbar popover, fixed block toolbar, block inserter, block breadcrumb).

Why?

Fixes #57288.

How?

  • Adds a useHasBlockToolbar hook that has the logic for if the block-toolbar will render or not.
  • Adds a useBlockTools hook that privately exports which block tools will be showing (block toolbar popover, fixed block toolbar, block inserter, block breadcrumb).
  • Checks if any block tools are available before adding the is-collapsed class to the central toolbar area
  • Removes selected block tools wrapper from DOM if no block tools available. I'm not sure if this was intentional to leave it in the DOM before, or if it was because there wasn't a reliable way of checking for it.

Testing Instructions

Toolbar should show/hide in the same way as before.

Testing Instructions for Keyboard

  • Go to Site Editor
  • Turn on Top Toolbar
  • Edit Navigation Template Part
  • Click navigation item
  • Press Up Arrow until the block toolbar disappears
  • Central command area should be present
  • Central command area should not have is-collapsed class
  • Alt + F10 should move focus to the document tools

Copy link

github-actions bot commented Feb 13, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link

github-actions bot commented Feb 13, 2024

Size Change: -5 B (0%)

Total Size: 1.71 MB

Filename Size Change
build/block-editor/index.min.js 251 kB +14 B (0%)
build/edit-post/index.min.js 23.7 kB -1 B (0%)
build/edit-site/index.min.js 215 kB -15 B (0%)
build/edit-widgets/index.min.js 17.3 kB -2 B (0%)
build/editor/index.min.js 64 kB -1 B (0%)
ℹ️ 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.37 kB
build/block-editor/content.css 4.37 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 15.5 kB
build/block-editor/style.css 15.5 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 324 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 471 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 647 B
build/block-library/blocks/group/editor.css 647 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 894 B
build/block-library/blocks/image/editor.css 893 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 1.54 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 259 B
build/block-library/blocks/navigation-link/style.css 257 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.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.02 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/view.min.js 958 B
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 629 B
build/block-library/blocks/search/style.css 628 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 478 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 229 B
build/block-library/blocks/separator/style.css 229 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.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 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.4 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 217 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.8 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.8 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/index.min.js 223 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.8 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.32 kB
build/customize-widgets/style.css 1.32 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.95 kB
build/date/index.min.js 17.9 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/style-rtl.css 5.64 kB
build/edit-post/style.css 5.63 kB
build/edit-site/style-rtl.css 15.4 kB
build/edit-site/style.css 15.4 kB
build/edit-widgets/style-rtl.css 4.22 kB
build/edit-widgets/style.css 4.22 kB
build/editor/style-rtl.css 5.32 kB
build/editor/style.css 5.32 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.89 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 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 12.9 kB
build/interactivity/navigation.min.js 1.15 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.36 kB
build/interactivity/search.min.js 618 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.78 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.05 kB
build/preferences/index.min.js 2.82 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.08 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

Copy link

github-actions bot commented Feb 13, 2024

Flaky tests detected in 2f9b9c6.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7904280994
📝 Reported issues:

@jeryj jeryj self-assigned this Feb 13, 2024
@jeryj jeryj added [Type] Bug An existing feature does not function as intended Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) [Type] Code Quality Issues or PRs that relate to code quality and removed [Type] Code Quality Issues or PRs that relate to code quality labels Feb 13, 2024
@jeryj jeryj changed the title Refactor: showBlockToolbar hook Refactor: useBlockTools hook Feb 13, 2024
*
* @return {boolean} Whether the block toolbar component will be rendered.
*/
export function useHasBlockToolbar() {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export function useHasBlockToolbar() {
export function useShowBlockToolbar() {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This isn't a check to know if it will show or not, but rather if it can be shown. Like, does the current selection have a block toolbar it can render? useShowBlockToolbar makes me think it will do something to display the toolbar.

packages/edit-post/src/components/header/index.js Outdated Show resolved Hide resolved
@@ -77,7 +79,12 @@ export default function HeaderEditMode() {
}, [] );

const isLargeViewport = useViewportMatch( 'medium' );
const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
const { showFixedToolbar } = useShowBlockTools();
const hasTopToolbar =
Copy link
Contributor

Choose a reason for hiding this comment

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

same comment as above, could this determination be abstracted in tiny hook?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I refactored it further by adding ! isZoomOutMode to the showFixedToolbar check and removing hasFixedToolbar here, as that setting was already checked in showFixedToolbar. Now the hasTopToolbar check is just isLargeViewport && showFixedToolbar.

I don't think it's worth extracting that to its own hook as we can't easily share it between the edit-site and edit-post packages. Especially now that it's just an isLargeViewport check. I didn't want to put the showTopToolbar vs showFixedToolbar within the block-editor package, as it isn't supposed to have knowledge about how the block toolbar is being used outside of it.

@MaggieCabrera
Copy link
Contributor

I think the label you want is Backport to WP beta/RC?

@draganescu draganescu added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta and removed Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Feb 14, 2024
@jeryj jeryj added [Package] Block editor /packages/block-editor and removed Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Feb 14, 2024
@jeryj
Copy link
Contributor Author

jeryj commented Feb 14, 2024

Thanks @MaggieCabrera! I went ahead and removed the label because it is a larger change the bug it fixes is minor.

Comment on lines +38 to +43
if (
! isToolbarEnabled ||
( ! isDefaultEditingMode && ! hasAnyBlockControls )
) {
return false;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the same check that block-toolbar.js used to determine if it would early return or continue to render.

Comment on lines +27 to +28
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
Copy link
Member

Choose a reason for hiding this comment

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

Suggestion: We can probably use getBlockSelectionStart here if we want only the first block clientId.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I do think that would be a good change because getBlockSelectionStart() returns a state value and selectedBlockClientIds() does quite a bit more work. However, if I:

  • Add three paragraphs
  • click and drag from the third paragraph up to the first
  • getBlockSelectionStart() will return the third paragraph ID (where selection started) and getSelectedBlockClientIds()[0] will return the first paragraph ID.

So, as it would be a functional change, I think we should do it in a follow-up.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Follow-up at #59450

Comment on lines +55 to +68
showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
showBreadcrumb:
! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
showBlockToolbarPopover:
hasBlockToolbar &&
! getSettings().hasFixedToolbar &&
! _showEmptyBlockSideInserter &&
hasSelectedBlock &&
! isEmptyDefaultBlock &&
! maybeShowBreadcrumb,
showFixedToolbar:
editorMode !== 'zoom-out' &&
hasBlockToolbar &&
getSettings().hasFixedToolbar,
Copy link
Member

Choose a reason for hiding this comment

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

This hook subscribes to four values. Three of these are only used by BlockTools and the remaining showFixedToolbar by only editor packages.

I'm unsure if moving the selection of values used only by BlockTools to this hook is worth it. cc @ellatrix

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I had concerns about that too. However, the information we need for showFixedToolbar is all right here, and this hook is already running for <BlockTools />. It doesn't need to do any additional work to set this value. I think it will end up being more performant and less code, so it's worth the tradeoff.

Copy link
Member

Choose a reason for hiding this comment

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

This is probably fine. We can always refactor if CodeVitals catches any perf regression.

Copy link
Member

Choose a reason for hiding this comment

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

It's fine, it's not worth trying to optimise performance here because there's only one block toolbar visible at any point in time.

Copy link
Member

Choose a reason for hiding this comment

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

Or maybe not, looking at the comments below. Not sure if this is the cause of the regression though.

Comment on lines 40 to 41
const isEmptyDefaultBlock =
hasSelectedBlock && isUnmodifiedDefaultBlock( block );
Copy link
Member

@Mamaduka Mamaduka Feb 26, 2024

Choose a reason for hiding this comment

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

The isUnmodifiedDefaultBlock expects the block object. Even though it currently only uses attribute and name properties, I think this is more future proof.

Other changes are just minor cleanups.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Follow up at #59450

@jeryj jeryj force-pushed the refactor/show-block-tools-hook branch from 82a80cc to 161454f Compare February 28, 2024 17:37
@jeryj jeryj merged commit 226b2ba into trunk Feb 28, 2024
57 checks passed
@jeryj jeryj deleted the refactor/show-block-tools-hook branch February 28, 2024 21:56
@github-actions github-actions bot added this to the Gutenberg 17.9 milestone Feb 28, 2024
@youknowriad
Copy link
Contributor

Hi there, it looks like this PR introduced a meaningful performance regression for the "block select" metric. Can we look into it?

@jeryj
Copy link
Contributor Author

jeryj commented Feb 29, 2024

@youknowriad Sure! Thanks for flagging it.

@jeryj
Copy link
Contributor Author

jeryj commented Feb 29, 2024

@youknowriad I'm looking at https://www.codevitals.run/project/gutenberg and I see the increased Block Select time, but I'm having a hard time tracking down what this metric is really measuring. I've been looking through the e2e performance tests and Readme. In the performance test for this branch, the one that stands out as an increase is firstPaint, which seems different than Block Select.

Could you point me in the right direction for debugging this more?

@youknowriad
Copy link
Contributor

Yes, it's this one

test.describe( 'Selecting blocks', () => {
let draftId = null;
test( 'Set up the test post', async ( { admin, perfUtils } ) => {
await admin.createNewPost();
await perfUtils.load1000Paragraphs();
draftId = await perfUtils.saveDraft();
} );
test( 'Run the test', async ( { admin, page, perfUtils, metrics } ) => {
await admin.editPost( draftId );
await perfUtils.disableAutosave();
const canvas = await perfUtils.getCanvas();
const paragraphs = canvas.getByRole( 'document', {
name: /Empty block/i,
} );
const samples = 10;
const throwaway = 1;
const iterations = samples + throwaway;
for ( let i = 1; i <= iterations; i++ ) {
// Wait for the browser to be idle before starting the monitoring.
// eslint-disable-next-line no-restricted-syntax
await page.waitForTimeout( BROWSER_IDLE_WAIT );
// Start tracing.
await metrics.startTracing();
// Click the next paragraph.
await paragraphs.nth( i ).click();
// Stop tracing.
await metrics.stopTracing();
// Get the durations.
const allDurations = metrics.getSelectionEventDurations();
// Save the results.
if ( i > throwaway ) {
results.focus.push(
allDurations.reduce( ( acc, eventDurations ) => {
return acc + sum( eventDurations );
}, 0 )
);
}
}
} );
} );
it's basically the sum of the "focus" + "focusin" event handlers when you click on an unselected paragraph block.

@jeryj
Copy link
Contributor Author

jeryj commented Feb 29, 2024

@youknowriad @ellatrix The performance regression is because in order to know if the block toolbar will render or not, we need to rely on the useHasAnyBlockControls hook, which loops through each slot in the block toolbar to check if there's a fill, and can't return early since it's a hook.

This was seemingly good enough when it was only within the <BlockToolbar /> component, but this PR intended to have one hook that could be used anywhere to tell if the block toolbar would be rendered or not. That means relying on useHasAnyBlockControls. Unfortunately, when this is used as a hook dependency, it starts to get expensive.

So, we could explore:

  • Find a different way to check if the block toolbar will render (not rely on checking all slots for a fill?). It seems like other approaches were explored before Fix missing Replace button in content-locked Image blocks #53410 landed.
  • Adding an isBlockToolbarAvailable state to the block editor store so we don't need to rely on this hook
  • … I'll keep thinking on it. Very open to ideas!

@ellatrix
Copy link
Member

Why do we need to check fills? Don't we always need to render the switcher and options buttons?

@jeryj
Copy link
Contributor Author

jeryj commented Feb 29, 2024

@ellatrix There are a few very specific instances:

  • The navigation block in isolated editor: You can get to a point where you have a block selected but no block tools available
  • The featured image block in content only mode offers a Replace button to replace the image.

#53410 explains it well.

I'm not sure if those things are doing it wrong and should be fixed in those locations, or if they have valid use cases that we need to support here.

@ellatrix
Copy link
Member

Not sure I get this. To me the should always be the block icon visible?

For this PR specifically, can't you check first if there is anything else to render in the toolbar before making this expensive check? If there's something to render, there's no need to do this check.

@jeryj
Copy link
Contributor Author

jeryj commented Feb 29, 2024

The featured image replace one specifically is when the editor is in contentOnly mode, and the toolbar mostly only renders things in default editor mode. I'm not saying this is a good idea, but that's how it's set up.

I'd love to get rid of the code that checks all the block tools slots for fills. It seems like a heavy solution to render one button in one mode for one block that affects the performance of everything else.

@ellatrix
Copy link
Member

ellatrix commented Mar 1, 2024

Could you still do other checks first to fix the performance problem?

@youknowriad
Copy link
Contributor

Any follow-ups here, let's not let it slip

@jeryj
Copy link
Contributor Author

jeryj commented Mar 11, 2024

@youknowriad - I'm feeling stuck on how to address useHasAnyBlockControls. I spent a bit of time poking at different ways to improve the performance, and useHasAnyBlockControls was the main culprit. It's only necessary for a couple of very specific instances that I think may be misusing the intention of the block toolbar. If we could change those implementations, we can remove useHasAnyBlockTools entirely.

Previously, useHasAnyBlockControls wouldn't run as often because it was the last check before rendering the toolbar. This PR lifted it to a hook that could be used anywhere to know if the block toolbar would render or not. I still think this is a useful thing for us and third party tools.

#58979 (comment) and #53410 explain useHasAnyBlockControls more. Very open to direction, as I'm feeling a bit stuck on it.

@youknowriad
Copy link
Contributor

Is it possible to keep the call to useHasAnyBlockControls where it was before while we solve these very specific instances (remove the need for the check for these cases)?

@jeryj
Copy link
Contributor Author

jeryj commented Mar 14, 2024

Is it possible to keep the call to useHasAnyBlockControls where it was before

Unfortunately not :/ The purpose of this PR was to make it possible to know if the block toolbar would render, and leaving useHasAnyBlockControls where it was before would make this refactor no longer reliable.

@jeryj
Copy link
Contributor Author

jeryj commented Mar 14, 2024

If we address the content-locked image block toolbar offering a "replace" button, then we could go back to checking for content-locked to not render the toolbar again. This would allow us to remove the useHasAnyBlockControls check, which was added only for the image and featured image blocks:.

@Mamaduka
Copy link
Member

@jeryj, both links are pointing to the same pull request.

@youknowriad
Copy link
Contributor

To be honest, the bug fixed by this PR feels rather small while performance regression are experienced by everyone. I'm not saying we should not fix it but maybe it help prioritize things.

@jeryj
Copy link
Contributor Author

jeryj commented Mar 14, 2024

@jeryj, both links are pointing to the same pull request.

Updated. Thanks for catching, @Mamaduka!

the bug fixed by this PR feels rather small while performance regression are experienced by everyone.

Fair. I'm putting in a PR that only checks for the "other" slot, as that's the only one used. It reduces the selecting block focus by 3-4ms. It's not a perfect code solution, but it does reduce the impact.

@jeryj
Copy link
Contributor Author

jeryj commented Apr 19, 2024

Performance regression fixed by #60717 and #60879. Now we're below where the block select metric started:
Block select metric showing the initial rise to from 30ms to 45ms average and now back down to upper 20ms

@youknowriad
Copy link
Contributor

Great thanks for the follow-ups :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
Development

Successfully merging this pull request may close these issues.

Central Command Area missing when Block with No Tools is Selected
6 participants