Collapsible panels for the block's toolbar #9687

youknowriad · 2018-09-07T11:19:29Z

This PR adds

Support for "collapsible" toolbars using the isCollapsed prop
Support for collapsing text alignment toolbars
Auto-collapse text alignment toolbars on mobile
Always Collapse text alignment for the paragraph block.

I tried adding auto computation on whether or not to collapse the toolbar segments based on the available space. It turns out it's more challenging than I expected originally and may not be achievable in a not fragile way, I'm instead suggesting it should be "opt-in" like the paragraph block here or more simple computations like "mobile" automatically triggering collapsed panels.

jasmussen · 2018-09-07T11:46:41Z

This is a very nice first stab. GIF:

I'd like to do some stule changes — tweak the dropdown arrow a bit, tweak the focus and active styles, that sort of thing. But this is working very well.

It is rather unfortunate that we can't auto-collapse when space is at a premium, and uncollapse when space is aplenty. Is there anything we can do to make this easier? Are there any changes in the design or structure that could accommodate this collapsing, even if those changes come with their own tradeoffs?

Did anything come of the element query discussions? I had my doubts about using polyfills here given how react creates the DOM, but hope springs eternal.

youknowriad · 2018-09-07T11:51:30Z

Are there any changes in the design or structure that could accommodate this collapsing, even if those changes come with their own tradeoffs?

It's not about design structure but more about Block API and the way we declare the toolbars.

Did anything come of the element query discussions?

element query is about the size of the container not about the available space (like media queries) so not really, they can't help a lot

jorgefilipecosta

This is looking good 👍 I only found a problem with headings on mobile because of the way the headings on mobile use the AlignmentToolbar.

jorgefilipecosta · 2018-09-07T18:25:57Z

packages/editor/src/components/alignment-toolbar/index.js

 	return (
 		<Toolbar
+			isCollapsed={ isCollapsed || ! isLargeViewport }


I think we may need an option to disable this forced collapsing on mobile. On the heading block the AlignmentToolbar component is used on the sidebar and collapsing it makes the result feel strange.

If the resolution is really small it becomes even impossible to change the alignment, that seems unexpected and I'm not certain of the reason why it happens:

jorgefilipecosta · 2018-09-07T18:41:15Z

It is rather unfortunate that we can't auto-collapse when space is at a premium, and uncollapse when space is aplenty. Is there anything we can do to make this easier?

Maybe we can get this result with some assumptions. Like on mobile we can consider space a premium like we do and always collapse. On the desktop for the paragraph case, if it is not nested, we can decide that we always have space and never collapse. If it is nested depends on the parent to determine if there is space or not and the parent may decide if the paragraph alignment options are collapsed or not. To pursue this option, we would need to implement some kind of options API that allows parents to control the UI of children as referred in #7931.
A more simple version would be for the alignment options of the paragraph to be collapsed when the paragraph is nested and uncollapsed when it is not nested (we can get if the paragraph is nested or not with a simple withSelect call). But even the simplest version adds some complexity to a block that is expected to be simple like the paragraph.

jasmussen · 2018-09-10T07:14:10Z

I like this line of thinking, Jorgé. It brings us benefits immediately, despite the challenges.

Non-mobile, non-nested blocks that can fit the expanded segments should have them. Mobile, nested, or floated blocks, should have collapsed segments. Seems like a great compromise.

youknowriad · 2018-09-12T08:33:12Z

I updated this PR and I'm now auto-collapsing the alignment toolbar on:

small screens
nested context when the toolbar is not fixed at the top

I didn't add the collapsing when the block is "floated" because the block being floated or not is a block attribute value (the attribute name can change) and can't be detected in a generic way.

jasmussen · 2018-09-12T08:53:59Z

Awesome work Riad, this is working really well. Mobile:

Nested:

Can we add this for Image/Gallery/Cover Image or in general decorative alignemnts too?

I love how the menu is fully tabbable as it should be.

Let me know when's a good time and I'll push some polish to the indicators — both the dropdown triangle and the focus styles could use a little love, and we need the "active" indicators to show in the dropdown as well — which I can probably fix.

youknowriad · 2018-09-12T09:32:04Z

I added the "collapsible" behavior to the block alignment toolbar as well

jasmussen · 2018-09-12T09:36:21Z

I'll try and take a look at the dropdown/focus styles in a minute.

jorgefilipecosta

This PR is looking good. I did some tests, and things seem to be working fine.
Maybe we can add some end two end tests for this behaviors so we can catch regressions easily (can be done in a separate PR).
As @jasmussen referred, it would be nice to have indications on the dropdown for the currently active item.
I would say that for example for the block alignment we should also add a gray mark to the icon (even before drop-down is open) if any alignment is enabled (identical to the marks we had before), so the users can differentiate between no alignment and left alignment even without opening the drop-down.
Right now it is impossible to differentiate both states (using the block toolbar):

youknowriad · 2018-09-13T07:52:55Z

I added a background on the active item similar to how it shows in the toolbar.

jasmussen · 2018-09-13T10:12:52Z

Thanks for that, Riad. I will be using that to polish it a bit further.

jasmussen · 2018-09-13T10:30:17Z

Okay, I've pushed some polish. Sorry it took so long.

Dropdown arrow now the same as in switcher
Formatting menu items look and behave the same in the dropdown
Dropdown itself shows the active state, it doesn't show the "toggled" state.

jasmussen · 2018-09-13T10:30:46Z

Given a sanity check of c933243 and 89790a6, I think this is good to go experience wise. 👍 👍 amazing work Riad!

youknowriad · 2018-09-13T15:17:11Z

packages/components/src/dropdown-menu/style.scss

 		}

-		&:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active {
-			@include formatting-button-style__active();
+		// Formatting buttons


It's not only for formatting buttons though it's for any Dropdown menu containing icons right? (like the table block)

Right, but the table block will never have an is-active applied, so the dark background won't be applied.

aduth · 2018-09-13T15:40:15Z

packages/components/src/dropdown-menu/index.js

+								<IconButton
+									key={ [ indexOfSet, indexOfControl ].join() }
+									onClick={ ( event ) => {
+										if ( control.isDisabled ) {


Why should we expect onClick callback would ever be triggered when disabled prop is passed?

Speaking more from a high-level; this doesn't seem like it should happen.

Edit: Observing this is a hold-over from previous implementation. My concern still stands, but not necessarily within scope of the pull request.

aduth · 2018-09-13T15:45:26Z

packages/editor/src/components/alignment-toolbar/index.js

+		const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' );
+		return {
+			isCollapsed: isCollapsed || ! isLargeViewport || (
+				getBlockRootClientId( clientId ) &&


Nitpick: getBlockRootClientId's implementation is computationally intensive (aside: it should be improved), and thus we could reorder the && parts here to short-circuit on getEditorSettings as the fast path.

mtias · 2018-09-14T11:53:29Z

Nice to see this in.

youknowriad added the Needs Design Feedback Needs general design feedback. label Sep 7, 2018

youknowriad self-assigned this Sep 7, 2018

youknowriad requested review from mtias, jasmussen and a team September 7, 2018 11:19

youknowriad mentioned this pull request Sep 7, 2018

Try/block toolbar refactoring #9282

Closed

jorgefilipecosta reviewed Sep 7, 2018

View reviewed changes

youknowriad added 3 commits September 12, 2018 09:17

Add collapse support to the toolbar component

5a2fe81

Collapse Text Alignment Toolbar for paragraphs and mobile

8332163

Auto-collapse in nested blocks

1c954c4

youknowriad force-pushed the add/collapsible-segments branch from bec7890 to 1c954c4 Compare September 12, 2018 08:33

Collapse Block Alignment Toolbars

027ada6

mtias added [Type] Task Issues or PRs that have been broken down into an individual action to take and removed Needs Design Feedback Needs general design feedback. labels Sep 12, 2018

mtias added this to the 3.9 milestone Sep 12, 2018

Fix unit tests

af04493

jorgefilipecosta reviewed Sep 12, 2018

View reviewed changes

Make the active item noticeable

6d92309

Polish dropdown arrow. Now it's the same as for switcher.

c933243

Polish focus styles.

89790a6

Address feedback.

b1c31ae

youknowriad commented Sep 13, 2018

View reviewed changes

aduth approved these changes Sep 13, 2018

View reviewed changes

Small changes per review

f4f3cac

youknowriad merged commit 762c717 into master Sep 14, 2018

youknowriad deleted the add/collapsible-segments branch September 14, 2018 09:58

chrisvanpatten mentioned this pull request Sep 14, 2018

Enforce a default icon size to allow flex alignment + fix unaligned labels #9828

Merged

hypest mentioned this pull request Sep 14, 2018

Integrate the mobile React Native testsuite with the main Gutenberg build #9883

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Collapsible panels for the block's toolbar #9687

Collapsible panels for the block's toolbar #9687

youknowriad commented Sep 7, 2018

jasmussen commented Sep 7, 2018

youknowriad commented Sep 7, 2018

jorgefilipecosta left a comment

jorgefilipecosta Sep 7, 2018

jorgefilipecosta commented Sep 7, 2018

jasmussen commented Sep 10, 2018

youknowriad commented Sep 12, 2018

jasmussen commented Sep 12, 2018

youknowriad commented Sep 12, 2018

jasmussen commented Sep 12, 2018

jorgefilipecosta left a comment

youknowriad commented Sep 13, 2018

jasmussen commented Sep 13, 2018

jasmussen commented Sep 13, 2018

jasmussen commented Sep 13, 2018

youknowriad Sep 13, 2018

jasmussen Sep 13, 2018

aduth Sep 13, 2018

aduth Sep 13, 2018

mtias commented Sep 14, 2018

Collapsible panels for the block's toolbar #9687

Collapsible panels for the block's toolbar #9687

Conversation

youknowriad commented Sep 7, 2018

jasmussen commented Sep 7, 2018

youknowriad commented Sep 7, 2018

jorgefilipecosta left a comment

Choose a reason for hiding this comment

jorgefilipecosta Sep 7, 2018

Choose a reason for hiding this comment

jorgefilipecosta commented Sep 7, 2018

jasmussen commented Sep 10, 2018

youknowriad commented Sep 12, 2018

jasmussen commented Sep 12, 2018

youknowriad commented Sep 12, 2018

jasmussen commented Sep 12, 2018

jorgefilipecosta left a comment

Choose a reason for hiding this comment

youknowriad commented Sep 13, 2018

jasmussen commented Sep 13, 2018

jasmussen commented Sep 13, 2018

jasmussen commented Sep 13, 2018

youknowriad Sep 13, 2018

Choose a reason for hiding this comment

jasmussen Sep 13, 2018

Choose a reason for hiding this comment

aduth Sep 13, 2018

Choose a reason for hiding this comment

aduth Sep 13, 2018

Choose a reason for hiding this comment

mtias commented Sep 14, 2018