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

Block Editor: Absorb parent block toolbar controls #33955

Merged
merged 4 commits into from
Aug 24, 2021

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented Aug 9, 2021

Description

Exploration for #26313.

One apparent difficulty that has risen with more and more blocks leveraging child blocks for controls (Buttons, Social Icons, Navigation, etc) is a general lack of intuitiveness when it comes to modifying attributes of the parent. Example: changing the alignment of Buttons when editing a single Button; changing the color of Navigation (a parent block attribute) when editing a single Navigation Item.
To address this, I'd like to explore ideas around when and how the toolbar and sidebar controls of a parent block could be exposed on their children. There are many challenges around clarity to overcome. This should not be a default true property, since groupings like Group, Columns, Cover, etc, should not present this behaviour.

This PR explores changes for the Buttons and Social Icons blocks. The very first iteration tries passing an experimental flag __experimentalExposeToChildren in BlockControl usage in the edit implementation of the parent block. It takes advantage of the SlotFill behavior and conditionally renders the control in the child block when it's selected.

The behavior is limited to the child block at the moment, but we could also cover ancestors if we would like to go one step further. The challenge is how to handle blocks that can be nested in themselves, but I think it's doable if we feel more adventurous. The current approach is enough for the Buttons and Social Icons blocks that have a very simple parent-child relation.

Please note that I also used __experimentalCaptureToolbars flag for the inner block containers so the toolbar is always present in the same place like in the Navigation block.

It should be possible to use the same technique for Inspector Controls.

Before

Screen Shot 2021-08-12 at 18 16 52

After

Screen Shot 2021-08-12 at 18 18 02

How has this been tested?

See the screencast:

Screen.Recording.2021-08-09.at.15.43.53.mov

I used multiple blocks of the same type to ensure that the control isn't present multiple times in the child block. I was able to ensure that the control updates only the parent block.

Knows Issues

Everything works perfectly fine for the Buttons block.

There is something strange happening with the Social Icons block that needs further investigation but it seems to be present in the trunk as well.

I still need to figure out how to handle controls that get injected through block supports like align.

Open Questions

Where should be parent controls located? It's the same group as in the parent in the prototype. Should we create a special group? Where should it be placed?

Screen Shot 2021-08-09 at 16 08 39

In the Buttons block, you can see controls from the parent (items justification) mixed with those from the child (link). If we would move parent controls to their own group we would make it more clear what we edit. We could even move this group next to the Select Buttons (Select parent) button to make it even more glued together.

Types of changes

New feature (non-breaking change which adds functionality).

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@gziolo gziolo added [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P labels Aug 9, 2021
@gziolo gziolo self-assigned this Aug 9, 2021
@github-actions
Copy link

github-actions bot commented Aug 9, 2021

Size Change: +286 B (0%)

Total Size: 1.04 MB

Filename Size Change
build/block-editor/index.min.js 118 kB +227 B (0%)
build/block-library/index.min.js 150 kB +59 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.19 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/style-rtl.css 13.8 kB
build/block-editor/style.css 13.8 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 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 474 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 605 B
build/block-library/blocks/button/style.css 604 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 370 B
build/block-library/blocks/buttons/style.css 370 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 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 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 194 B
build/block-library/blocks/columns/editor.css 193 B
build/block-library/blocks/columns/style-rtl.css 474 B
build/block-library/blocks/columns/style.css 475 B
build/block-library/blocks/cover/editor-rtl.css 666 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 400 B
build/block-library/blocks/embed/style.css 400 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 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 879 B
build/block-library/blocks/gallery/editor.css 876 B
build/block-library/blocks/gallery/style-rtl.css 1.7 kB
build/block-library/blocks/gallery/style.css 1.7 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 159 B
build/block-library/blocks/group/editor.css 159 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 70 B
build/block-library/blocks/group/theme.css 70 B
build/block-library/blocks/heading/editor-rtl.css 152 B
build/block-library/blocks/heading/editor.css 152 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 283 B
build/block-library/blocks/html/editor.css 284 B
build/block-library/blocks/image/editor-rtl.css 728 B
build/block-library/blocks/image/editor.css 728 B
build/block-library/blocks/image/style-rtl.css 482 B
build/block-library/blocks/image/style.css 487 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 63 B
build/block-library/blocks/list/style.css 63 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 488 B
build/block-library/blocks/media-text/style.css 485 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 474 B
build/block-library/blocks/navigation-link/editor.css 474 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation/editor-rtl.css 1.69 kB
build/block-library/blocks/navigation/editor.css 1.69 kB
build/block-library/blocks/navigation/style-rtl.css 1.65 kB
build/block-library/blocks/navigation/style.css 1.64 kB
build/block-library/blocks/navigation/view.min.js 2.52 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 310 B
build/block-library/blocks/page-list/editor.css 310 B
build/block-library/blocks/page-list/style-rtl.css 242 B
build/block-library/blocks/page-list/style.css 242 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 248 B
build/block-library/blocks/paragraph/style.css 248 B
build/block-library/blocks/post-author/editor-rtl.css 210 B
build/block-library/blocks/post-author/editor.css 210 B
build/block-library/blocks/post-author/style-rtl.css 182 B
build/block-library/blocks/post-author/style.css 181 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 138 B
build/block-library/blocks/post-content/editor.css 138 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 398 B
build/block-library/blocks/post-featured-image/editor.css 398 B
build/block-library/blocks/post-featured-image/style-rtl.css 143 B
build/block-library/blocks/post-featured-image/style.css 143 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 378 B
build/block-library/blocks/post-template/style.css 379 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 361 B
build/block-library/blocks/pullquote/style.css 360 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 270 B
build/block-library/blocks/query-pagination/editor.css 262 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B
build/block-library/blocks/query-pagination/style.css 168 B
build/block-library/blocks/query-title/editor-rtl.css 85 B
build/block-library/blocks/query-title/editor.css 85 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 169 B
build/block-library/blocks/quote/style.css 169 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 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 374 B
build/block-library/blocks/search/style.css 375 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 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 462 B
build/block-library/blocks/site-logo/editor.css 464 B
build/block-library/blocks/site-logo/style-rtl.css 153 B
build/block-library/blocks/site-logo/style.css 153 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 165 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 812 B
build/block-library/blocks/social-links/editor.css 811 B
build/block-library/blocks/social-links/style-rtl.css 1.33 kB
build/block-library/blocks/social-links/style.css 1.33 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 636 B
build/block-library/blocks/template-part/editor.css 635 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/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 1.29 kB
build/block-library/common.css 1.29 kB
build/block-library/editor-rtl.css 9.95 kB
build/block-library/editor.css 9.93 kB
build/block-library/reset-rtl.css 527 B
build/block-library/reset.css 527 B
build/block-library/style-rtl.css 10.9 kB
build/block-library/style.css 10.9 kB
build/block-library/theme-rtl.css 658 B
build/block-library/theme.css 663 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 47 kB
build/components/index.min.js 209 kB
build/components/style-rtl.css 15.7 kB
build/components/style.css 15.8 kB
build/compose/index.min.js 10.1 kB
build/core-data/index.min.js 12.3 kB
build/customize-widgets/index.min.js 11.1 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.09 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.53 kB
build/edit-navigation/index.min.js 13.6 kB
build/edit-navigation/style-rtl.css 3.15 kB
build/edit-navigation/style.css 3.14 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 28.7 kB
build/edit-post/style-rtl.css 7.2 kB
build/edit-post/style.css 7.2 kB
build/edit-site/index.min.js 26.2 kB
build/edit-site/style-rtl.css 5.07 kB
build/edit-site/style.css 5.07 kB
build/edit-widgets/index.min.js 16 kB
build/edit-widgets/style-rtl.css 4.06 kB
build/edit-widgets/style.css 4.06 kB
build/editor/index.min.js 37.7 kB
build/editor/style-rtl.css 3.74 kB
build/editor/style.css 3.73 kB
build/element/index.min.js 3.17 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.36 kB
build/format-library/style-rtl.css 668 B
build/format-library/style.css 669 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.59 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.49 kB
build/keycodes/index.min.js 1.25 kB
build/list-reusable-blocks/index.min.js 1.85 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.88 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.28 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.32 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.72 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 6.27 kB
build/widgets/style-rtl.css 1.05 kB
build/widgets/style.css 1.05 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@gziolo gziolo added the [Status] In Progress Tracking issues with work in progress label Aug 9, 2021
@mtias
Copy link
Member

mtias commented Aug 9, 2021

Nice! We should probably add the parent's tools as a toolbar group so it has a separation.

@jasmussen
Copy link
Contributor

Very nice. This is before:

before

This is after:

after

Where should be parent controls located? It's the same group as in the parent in the prototype. Should we create a special group? Where should it be placed?

We should probably add the parent's tools as a toolbar group so it has a separation.

A few quick doodles. The Buttons block remains the same:

Absorb Toolbar

A "what if" that integrates the key parent toolbar options in the parent button selector. Doesn't feel right, but wanted to explore:

Absorb Toolbar-1

An entirely separate group. This one feels the best, but it does grow a bit wider:

Absorb Toolbar

The exploration might work better without the explicit drag handle as shown in the following. That isn't so much a suggestion for this PR as it is a reminder to keep thinking of how we can handle drag and drop in a more holistic way, perhaps make it a more dedicated part of the select tool:

Absorb Toolbar

Another thought: the Button toolbar gets pretty bordery in these mocks. Although the Link feature is technically block level and therefore separate, we migth consider curating it with the inline tools:

Screenshot 2021-08-10 at 11 23 27

@priethor
Copy link
Contributor

priethor commented Aug 10, 2021

Should we create a special group? Where should it be placed?

I also think a separate group can greatly help usability as seen in @jasmussen's exploration. As a user, it would be very hard to understand why sometimes a block's toolbar has some options while others don't without knowing where those options are coming from.

@gziolo gziolo force-pushed the try/absorb-parent-block-controls branch from 8d8f561 to fca1e35 Compare August 11, 2021 12:48
@gziolo
Copy link
Member Author

gziolo commented Aug 11, 2021

Iteration 2: a new block controls group called parent located next to select a parent toolbar button

Screen Shot 2021-08-11 at 14 46 56

Screen Shot 2021-08-11 at 14 47 02

At the moment the parent toolbar group uses the standard class name block-editor-block-toolbar__slot but we can change it if we want to have better control over it.

By the way, it looks like the different distribution of children blocks is an expected feature in the Social Icons block when it's selected vs when it isn't.

@gziolo gziolo force-pushed the try/absorb-parent-block-controls branch from 4414a30 to 0648dd3 Compare August 11, 2021 13:10
@gziolo gziolo marked this pull request as ready for review August 11, 2021 13:11
@@ -100,6 +100,7 @@ export function SocialLinksEdit( props ) {
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: ALLOWED_BLOCKS,
orientation: 'horizontal',
__experimentalCaptureToolbars: true,
Copy link
Member Author

@gziolo gziolo Aug 11, 2021

Choose a reason for hiding this comment

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

@mtias, I have an idea for controls injected from the framework through supports in block.json like align. We could put also __experimentalCaptureToolbars in supports object to act as a way to decide if those general controls should also be exposed to children. An alternative would be to include __experimentalExposeToChildren setting in supports object.

I understood that we want to have it as an opt-in for every block. Otherwise, the parent's block alignment would get exposed for the huge groups of blocks 😄

Copy link
Member Author

Choose a reason for hiding this comment

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

Experiment implemented in e5f1f88.

Copy link
Contributor

Choose a reason for hiding this comment

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

__experimentalCaptureToolbars

I'm slightly confused by usage of this. "Capture toolbars" is for the UI space occupied by the parent toolbar to display the toolbars of any child. This is great when having deeply nested navigation blocks where having the toolbar show up on the deeply nested child gets very clunky.

If we're implementing a feature which is essentially the inverse (ie: child toolbar UI space includes controls form the parent) then it should probably have a different name/setting. __experimentalExposeToChildren seems good.

Copy link
Member

Choose a reason for hiding this comment

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

My current thinking is that for "capture toolbars" to make sense, it also needs to expose tools to the children, otherwise it feels a bit awkward to use.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, this part is something that was only added yesterday so I'm open seek a better API here even under the experimental flag.

Let me explain my reasoning better. My assumption was that you want to combine the toolbar capturing with exposing children to have more space to display controls. Given that they both work a bit differently at the moment, I'm fine following your recommendation:

  • __experimentaExposeControlsToChildren - at the moment it is limited only to children, in effect, it doesn't apply to deeper descendants

Aside, I like the idea that useInnerBlocksProps would be able to read some settings from the supports object so maybe having __experimentalCaptureToolbars also there isn't that bad idea. I saw many requests where people wanted to control allowed blocks or template lock settings.

Copy link
Member Author

Choose a reason for hiding this comment

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

Let me know what do you think about #33955 (comment).

@gziolo gziolo force-pushed the try/absorb-parent-block-controls branch from 0648dd3 to 4e3f7d8 Compare August 11, 2021 13:53
@jasmussen
Copy link
Contributor

Iteration 2: a new block controls group called parent located next to select a parent toolbar button

Nice one!

Can you visually separate the control groups with spacing, like the spacing we have between the parent button and the rest of the toolbar? Like in https://user-images.githubusercontent.com/1204802/128842093-85b815dd-a044-43dc-a77e-427eca34fc3d.png

@jasmussen
Copy link
Contributor

As an update to the mockups in #33955 (comment) having discussed them in chat, the motivation was to clarify their parent relationship by sharing DNA with the parent button.

However that isn't necessarily any more clear in the mockups, the value of that DNA shared is perhaps also spurious, and it's less an "absorbing" of the toolbar than what is originally suggested. So perhaps we should just start with the simplest possible thing and learn from there:

Screenshot 2021-08-12 at 11 55 34

@gziolo gziolo force-pushed the try/absorb-parent-block-controls branch from 4e3f7d8 to e5f1f88 Compare August 12, 2021 16:05
@gziolo
Copy link
Member Author

gziolo commented Aug 12, 2021

Iteration 3:

Screen Shot 2021-08-12 at 18 04 36

It aligns with the most recent feedback:

So perhaps we should just start with the simplest possible thing and learn from there:

I also included changes that allow to opt-in to block toolbar capturing (__experimentalCaptureToolbars) for the parent block. When it is enabled, then two supported toolbar controls: align and duotone get exposed to child blocks. Example for the Buttons block:

Screen Shot 2021-08-12 at 18 07 59

There are two ways to test __experimentalCaptureToolbars:

  • Navigation block uses manual __experimentalCaptureToolbars in the useInnerBlocksProps call so there are no controls exposed in the child blocks
  • For the Button and Social Icons block it's easy to opt-out from toolbar capturing by changing the flag to false in block.json

@gziolo gziolo force-pushed the try/absorb-parent-block-controls branch from e5f1f88 to d8c76a7 Compare August 12, 2021 16:14
@gziolo gziolo requested a review from getdave August 12, 2021 16:14
@gziolo gziolo added [Type] New API New API to be used by plugin developers or package users. and removed [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Status] In Progress Tracking issues with work in progress labels Aug 12, 2021
@gziolo gziolo added [Feature] Block API API that allows to express the block paradigm. [Type] Experimental Experimental feature or API. and removed [Type] New API New API to be used by plugin developers or package users. labels Aug 12, 2021
@jasmussen
Copy link
Contributor

It does get pretty long. Once we land this we'll want to revisit the feature where the toolbar bumps against the right side of the screen if inside a columns block. That used to work, but has been broken for a bit, ticketed it here: #34053

@getdave
Copy link
Contributor

getdave commented Aug 13, 2021

🌟 I really like this idea as I frequently find it frustrating that I have to select the parent to make certain changes.

Sorry to be "that guy" but looking at iteration 3 and then testing it, I am concerned that it's not obvious that the controls shown are associated with the parent.

It feels very much like they need additional visual affordance (over and above that provided by a separate group with a border) to "mark" them as distinct parent controls.

I worry it's going to be very surprising for a user if certain block-level controls suddenly start affecting other blocks (eg: parent) with no visual cue that they are distinct. If the user has to "learn" a UI pattern (eg: parent block controls appear to the left in a separate group) then that probably isn't going to cut the mustard.

For example, when I first tested this PR I intentionally didn't read too much of the description before hand in order that I could test the new feature without prejudicing my conclusions. My experience was that I was initially confused as to which control was the parent and I had to "hunt" for it until I realised it was the justification controls. There was no clear indicator to me - that will happen for others as well.

Just some ideas but have we explored...

  • a "fly out" menu on the parent block selector icon that appears on mouseover?
  • visually labelling the group of controls with text?
  • color (I aware it's not ideal but as an additional affordance it might ok?)?

Really hope we can find a way to land this in a manner that doesn't add additional confusion to the toolbar.

@mtias
Copy link
Member

mtias commented Aug 13, 2021

Part of the thinking for absorbing toolbars is that there is no need to discriminate parent tools from child tools because the container ones are always available regardless of what is selected. Blocks that are entangled in this way will function more like a single block with contextual tools upon selecting an element within than separate child / parent blocks.

@gziolo
Copy link
Member Author

gziolo commented Aug 16, 2021

42e8030 tries a revised approach. When __experimentalExposeControlsToChildren is enabled in block.json then the following happens:

  • the toolbar gets captured by the parent block
  • align and duotone controls get exposed to the (direct) children blocks
  • all toolbar groups explicitly marked as __experimentalExposeToChildren get exposed to the (direct) children blocks

At the moment when there is the following code:

<BlockControls group="block" __experimentalExposeToChildren>
     <SomeControls />
</BlockControls>

and the __experimentalExposeControlsToChildren isn't set in the block.json then controls don't get exposed. It's still something I'm not sure about. Anyway, we can change it later when we have more use cases covered. It would be great to look at the following blocks (among others) next:

  • Navigation
  • Cover
  • Media & Text
  • Columns
  • Group

@gziolo gziolo force-pushed the try/absorb-parent-block-controls branch from 42e8030 to c80e104 Compare August 23, 2021 08:55
@gziolo
Copy link
Member Author

gziolo commented Aug 23, 2021

I rebased this branch with the latest changes in trunk. I plan to land the very first iteration tomorrow so we can include it in the Gutenberg 11.4 release to get more feedback from users and developers.

Sorry to be "that guy" but looking at iteration 3 and then testing it, I am concerned that it's not obvious that the controls shown are associated with the parent.

It's hard to tell if that is really a huge concern because the toolbar is rendered in the same place as the parent so maybe it's enough to have those controls in their own section. We can iterate on the design in the follow-up PRs and it's exactly how most of the features improved over time.

@gziolo gziolo changed the title Block Editor: Try to absorb parent block toolbar controls Block Editor: Absorb parent block toolbar controls Aug 23, 2021
@gziolo gziolo merged commit 1971a3c into trunk Aug 24, 2021
@gziolo gziolo deleted the try/absorb-parent-block-controls branch August 24, 2021 08:10
@github-actions github-actions bot added this to the Gutenberg 11.4 milestone Aug 24, 2021
@mtias
Copy link
Member

mtias commented Aug 27, 2021

@annezazu I'm curious if we can do some testing with users on this one. Start from a pattern with three buttons on the page and ask: "change the second button text to blabla"; "change the alignment of buttons to be centered".

@annezazu
Copy link
Contributor

Definitely can. Do you want a full call for testing or are you okay if this is part of a larger call for testing in the future?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants