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

Sidebar Tabs: Stabilize the block inspector tabs experiment #47045

Merged
merged 14 commits into from
Jan 11, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

Related:

What?

  • Stabilizes the Block Inspector Tabs experiment and block editor setting.
  • Tweaks inclusion of list view tab so that it relies on the block allow list meaning it can be set as the default regardless of current fills

Why?

We're pretty confident the tabs are here to stay, given generally positive feedback in recent calls for testing. These tabs must also be stabilized for the Navigation block's off-canvas editor to be the default experience.

How?

  • Removes the Gutenberg experiment for Block Inspector Tabs
  • Removes setting of window.__experimentalEnableBlockInspectorTabs based on experiment
  • Removes uses of window.__experimentalEnableBlockInspectorTabs
  • Removes the __experimental prefix from the block inspector tabs block editor setting
  • Removes the list view tab's check for fills so it relies only on the block allow list

Testing Instructions

  1. Confirm the Block Inspector Tabs experiment is no longer available on the Gutenberg Experiments page
  2. Open the post editor, add a block, select it, and confirm that the block displays tabs within the block inspector
  3. Add a Navigation block with submenu and links, select it, and confirm that it’s list view tab contains items
  4. Within the Nav block’s list view, click the edit button for a submenu, and confirm the submenu block has no tabs
  5. Navigate back to the Nav block, click the edit button for a navigation link, and confirm the navigation link block has no tabs
  6. Add/update a filter to set the blockInspectorTabs.default editor setting to false to check complete disabling of tabs
  7. Select various types of blocks and ensure tabs aren’t displayed
Click for quick and dirty patch to update block editor setting to test disabling tab display across blocks
  diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
  index f214a6b9b5..db113f7289 100644
  --- a/packages/block-library/src/navigation-link/index.php
  +++ b/packages/block-library/src/navigation-link/index.php
  @@ -396,7 +396,7 @@ function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
   
    $settings['blockInspectorTabs'] = array_merge(
     $current_tab_settings,
  -		array( 'core/navigation-link' => false )
  +		array( 'core/navigation-link' => false, 'default' => false )
    );
   
    return $settings;
  

Screenshots or screencast

Screen.Recording.2023-01-11.at.11.53.32.am.mp4

Without this change we have to wait for fills before the tab would be included preventing the list tab being a default.
@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Package] Block editor /packages/block-editor labels Jan 11, 2023
@aaronrobertshaw aaronrobertshaw self-assigned this Jan 11, 2023
@github-actions
Copy link

github-actions bot commented Jan 11, 2023

Size Change: +1.08 kB (0%)

Total Size: 1.33 MB

Filename Size Change
build/block-editor/index.min.js 184 kB -9 B (0%)
build/block-library/index.min.js 198 kB -19 B (0%)
build/edit-site/index.min.js 66.5 kB +1.04 kB (+2%)
build/edit-site/style-rtl.css 9.3 kB +31 B (0%)
build/edit-site/style.css 9.3 kB +31 B (0%)
build/editor/index.min.js 44.1 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 7.16 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 2.96 kB
build/block-editor/content.css 2.96 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 14.6 kB
build/block-editor/style.css 14.6 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 138 B
build/block-library/blocks/audio/theme.css 138 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 84 B
build/block-library/blocks/avatar/style.css 84 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 485 B
build/block-library/blocks/button/editor.css 485 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 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 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 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 406 B
build/block-library/blocks/columns/style.css 406 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 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 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 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 829 B
build/block-library/blocks/image/editor.css 828 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 298 B
build/block-library/blocks/latest-comments/style.css 298 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 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
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 376 B
build/block-library/blocks/page-list/editor.css 376 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 282 B
build/block-library/blocks/post-template/style.css 282 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-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 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 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 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 440 B
build/block-library/blocks/query/editor.css 440 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 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 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 457 B
build/block-library/blocks/table/editor.css 457 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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 404 B
build/block-library/blocks/template-part/editor.css 404 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/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 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50.4 kB
build/components/index.min.js 203 kB
build/components/style-rtl.css 11.6 kB
build/components/style.css 11.6 kB
build/compose/index.min.js 12.3 kB
build/core-data/index.min.js 15.9 kB
build/customize-widgets/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 7.69 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.71 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.12 kB
build/edit-navigation/style.css 4.13 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.6 kB
build/edit-post/style-rtl.css 7.45 kB
build/edit-post/style.css 7.44 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.46 kB
build/edit-widgets/style.css 4.47 kB
build/editor/style-rtl.css 3.69 kB
build/editor/style.css 3.68 kB
build/element/index.min.js 4.93 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 882 B
build/format-library/index.min.js 7.2 kB
build/format-library/style-rtl.css 598 B
build/format-library/style.css 597 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.88 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 283 B
build/reusable-blocks/style.css 283 B
build/rich-text/index.min.js 10.8 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.7 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 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.31 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Jan 11, 2023

Flaky tests detected in 175a868.
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/3890697796
📝 Reported issues:

@aaronrobertshaw
Copy link
Contributor Author

With the tabs being stabilized, a number of e2es will need updating. I'm in the process of updating them.

@talldan
Copy link
Contributor

talldan commented Jan 12, 2023

Yep, that all makes sense to me. I suppose with both settings and default there's some duplication, I'm not sure if a soft deprecation of default is a possibility, but the new names do seem more sensible.

@ndiego
Copy link
Member

ndiego commented Jan 18, 2023

Maybe we should have explicit groups to both tabs i.e. styles and settings. We already have the equivalent for the list tab with the list group.

+1 for this. Having an easy way to explicitly add options to each tab would be perfect for block plugins.

@aaronrobertshaw
Copy link
Contributor Author

PR stabilizing inspector controls groups, adding a styles group, and aliasing the default group as settings is up in #47105.

@femkreations femkreations added the Needs User Documentation Needs new user documentation label Feb 1, 2023
@bph bph mentioned this pull request Feb 6, 2023
47 tasks
@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented Feb 10, 2023

Dev Note for 6.2

Introduction of Block Inspector Tabs

The new Block Inspector tabs aim to help organize and delineate the design tools within our Block Inspector sidebar. Before these tabs, the sidebar was becoming increasingly crowded and challenging to use. With the release of WordPress 6.2, you'll find the inspector's design tools categorized under three tabs;

  • Settings - Contains configuration settings for the block that are not appearance-related, e.g. Number of columns or whether the block links to another resource.
  • Appearance - Groups panels and controls related specifically to styling the appearance of the current block, e.g. typography and colors.
  • List View - Contains controls for managing a block’s children in a similar manner to the editor’s list view, e.g. editing submenus and links in the Navigation block.

Block Inspector Tabs Display

The Block Inspector will only render tabs when it makes sense to do so. As such, there are a few conditions around their display:

  • A tab is only rendered if it contains items for display.
  • If the Settings tab would only contain the Advanced panel, it will be consolidated into the Appearance tab.
  • If the Block Inspector only has a single tab to display, tabs will not be rendered. Instead, the design tools will be rendered directly into the sidebar as they would have prior to WordPress 6.2.

It is possible that the Block Inspector tabs may not make sense for all blocks. Plugins might also aim to overhaul a block's available tools. In these cases, it would be desirable to disable Block Inspector tabs. This can be achieved via a new editor setting, blockInspectorTabs. One approach to doing so might be via the block_editor_settings_all filter, like the example below.

function my_plugin_disable_tabs_for_my_custom_block( $settings ) {
	$current_tab_settings = _wp_array_get( $settings, array( 'blockInspectorTabs' ), array() );
	$settings['blockInspectorTabs'] = array_merge(
		$current_tab_settings,
		array( 'my-plugin/my-custom-block' => false )
	);

	return $settings;
}

add_filter( 'block_editor_settings_all', 'my_plugin_disable_tabs_for_my_custom_block' );

If available, the Block Inspector tabs will be displayed in the following order; List View, Settings, and Appearance. The default selected tab will be the first available. For the majority of blocks, this will be the Settings tab.

Inspector Control Groups

The InspectorControls groups have become requirements for features we are making default experiences, such as the Block Inspector tabs or the Navigation Block’s off canvas editor. As a result, we are stabilizing the __experimentalGroup property on our InspectorControls slots. You can now define which InspectorControls group to render controls into via the group prop.

In addition to stabilizing the __experimentalGroup property, we've added a new styles group, so styles-related controls that do not fit conceptually under the block support panels; border, color, dimensions, typography etc., can be included under the "Appearance" tab in the Block Inspector.

<InspectorControls group="styles">
  // Add your custom styles-related controls here.
</InspectorControls>

Block Inspector Tabs vs InspectorControl Groups

Each Block Inspector tab is responsible for displaying a subset of the available Inspector Controls groups.

  • Settings Tab - Includes any items rendered into the default, settings (alias for default), advanced, or position groups.
  • Appearance Tab - Renders block support groups such as; border, color, dimensions, and typography. It also now includes the new styles group, which offers a means of displaying items under the Appearance tab but outside of the block support panels.
  • List View Tab - Includes only the list group as this tab is only intended for blocks that need to manage their own children in a list.

Settings-only Blocks

During the experiment trialling Block Inspector tabs, it became clear that some blocks should be considered "settings-only". A great example of this is the Query block. A user's primary focus while interacting with this block is to configure it to display their desired posts. Attempts to apply styling, e.g. colors, at such a high level leads to inconsistent results.

To remove that friction moving forward, we've removed the color block support from the Query block, making it settings-only. A new deprecation has been added to migrate existing Query blocks with color styles. These will have their inner blocks wrapped in a Group block with the original color styles applied.

For blocks considered settings-only, the recommended approach to styling moving forward is to wrap the inner blocks in a style-provider block, e.g. Group.


@bph the draft above aims to cover the dev note requirements for a number of tightly coupled PRs (#47045, #47105, #45005, #46321, #46147). Do you think that covers all that's required, or is a bit too much?

I'm happy to continue iterating on it in light of any feedback.

@ndiego
Copy link
Member

ndiego commented Feb 10, 2023

This is great, thanks @aaronrobertshaw. It covers everything I can think of that an extender would want to know 🙌

@bph
Copy link
Contributor

bph commented Feb 28, 2023

I agree with @ndiego. Thank you, @aaronrobertshaw would you have bandwidth to add the note to the make blog in draft so we can get it into the publishing queue? I'd be happy to do it for you, though. I know it's a bit short notice.

Note: I see a few references "we" that would need to be reviewed. Options:

  • Identify the "we" as in contributors,
  • rewrite in passive voice or
  • rewrite with the "you" (as the reader) in mind.

@bph bph added has dev note when dev note is done (for upcoming WordPress release) and removed Needs Dev Note Requires a developer note for a major WordPress release cycle labels Feb 28, 2023
@aaronrobertshaw
Copy link
Contributor Author

@bph I've tweaked those references to "we" while creating a draft on the Make blog:
https://make.wordpress.org/core/?p=103033&preview=1&_ppp=518ec10534

@wpsoul
Copy link

wpsoul commented Mar 3, 2023

Maybe I missed something, but where is custom class and anchor section now?

I see that instead of Advanced section, we have "Looking for other block settings? They've moved to the styles tab." but this section is not available under Styles tab

  1. I also don't understand why my custom block has Split tabs and Style tab shows Typography section with Text decoration. My block has no Typography support and I don't need it. https://monosnap.com/file/o2HLC0c9u2zACj9KLFTmI34sp3H8BL

@ndiego
Copy link
Member

ndiego commented Mar 3, 2023

Hi @wpsoul, can you try testing with Beta 4? The typography section is a bug that was recently fixed.

As for the other issue with the Advanced Tab, can you provide a screenshot here on GitHub? You can drag images right into the text area. Thanks!

@wpsoul
Copy link

wpsoul commented Mar 3, 2023

@ndiego I thought Gutenberg plugin has the same things as Beta WP. Ok, with beta 4 I don't see typography, so it's fixed

About class panel, How to reproduce - add any core block, you will see next

fixclass

But if I go to Style tab, no Advanced panel, so, we have no option to add "ADDITIONAL CSS CLASS(ES)" or anchors

fix2

@ndiego
Copy link
Member

ndiego commented Mar 3, 2023

Hi @wpsoul, in the first screenshot above the notice is the Advanced panel. Clicking on this will open the panel, which will have the options. Is that what you are looking for?

@colorful-tones
Copy link
Member

Curious @aaronrobertshaw whether we might want to clarify this in the dev notes, but can an extender use InspectorControls within a custom registerPlugin component?

@wpsoul
Copy link

wpsoul commented Mar 4, 2023

@ndiego clear now, ok, but maybe it's better to place this notice inside Advanced panel, because currently all content is inside panels and when I see this notice, I decided that it's part of Advanced panel. Or maybe removing notice will be better, I don't see that it solves something, just confusing. Style tab is visible enough and doesn't require any notice

@aaronrobertshaw
Copy link
Contributor Author

@wpsoul, thanks for flagging the potential for confusion regarding the hint notifying users that controls may have moved tabs.

maybe it's better to place this notice inside Advanced panel

The purpose of the hint is to reduce some of the friction created by reorganising controls into different tabs. Burying this hint under a collapsed by default Advanced panel would defeat its purpose.

because currently all content is inside panels and when I see this notice, I decided that it's part of Advanced panel

I can understand the potential for this confusion. I wonder if the original design accepted this potential was mitigated by the visual cue of the Advanced panel's chevron indicating that it is collapsed and can be expanded.

Or maybe removing notice will be better, I don't see that it solves something, just confusing. Style tab is visible enough and doesn't require any notice

It's expected that over time, the need for this notice will be reduced and it can in fact be removed.

You can find more context and history around the current design and past decisions in the issue and PR introducing the hint.

If you'd still like to propose removing or relocating the hint, would you mind creating a new issue and linking it to the original issue/PR above? It would help to attract a wider set of opinions and ideas than this conversion being hidden on a loosely related PR.

@aaronrobertshaw
Copy link
Contributor Author

Curious whether we might want to clarify this in the dev notes, but can an extender use InspectorControls within a custom registerPlugin component?

Thanks for the suggestion @colorful-tones, I'm not sure we should make this PR's dev note a complete readme around InspectorControls but instead keep it more focused on what has changed.

As for the question at hand, I'm not 100% certain whether it is possible to render InspectorControls slot fills via the registerPlugin render function. After quickly hacking something together it didn't seem to work for me. I'll need to dig a little deeper there.

@colorful-tones
Copy link
Member

I'm not sure we should make this PR's dev note a complete readme around InspectorControls but instead keep it more focused on what has changed.

👍

I'm not 100% certain whether it is possible to render InspectorControls slot fills via the registerPlugin render function. After quickly hacking something together it didn't seem to work for me. I'll need to dig a little deeper there.

I would love to know what you find if/when you have time to dig more. I think this will quickly become a common feature request for extenders who want to organize their plugin's settings into "General" and "Advanced" tabs, which we should aim to clarify whether this is suitable or even recommended. Thanks @aaronrobertshaw !

@talldan
Copy link
Contributor

talldan commented Mar 7, 2023

I did some digging into why InspectorControls doesn't work via registerPlugin.

The reason is that InspectorControls was designed to be used in a block's edit function, or via the BlockEdit filter. It uses React context check a few things about the current block, which isn't available when using registerPlugins.

More specifically, it's this check that causes nothing to be rendered since BlockEditContext isn't available:

if ( ! isDisplayed ) {
return null;
}

It may be possible to make it work (I haven't checked feasibility), but I don't think it'd be a high priority since there's already a decent alternative (the BlockEdit filter) for plugins that can achieve the same thing.

@colorful-tones
Copy link
Member

Thanks for investigating @aaronrobertshaw

@aaronrobertshaw
Copy link
Contributor Author

The props for pinpointing where the limitation occurs go to @talldan. I merely reached out to pick his brain 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inspector Controls The interface showing block settings and the controls available for each block has dev note when dev note is done (for upcoming WordPress release) Needs User Documentation Needs new user documentation [Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants