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

Collapsible panels for the block's toolbar #9687

Merged
merged 10 commits into from Sep 14, 2018

Conversation

Projects
None yet
5 participants
@youknowriad
Contributor

youknowriad commented Sep 7, 2018

closes #9075

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.

@youknowriad youknowriad self-assigned this Sep 7, 2018

@youknowriad youknowriad requested review from mtias, jasmussen and WordPress/gutenberg-core Sep 7, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 7, 2018

Contributor

This is a very nice first stab. GIF:

toolbar segments

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.

Contributor

jasmussen commented Sep 7, 2018

This is a very nice first stab. GIF:

toolbar segments

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

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 7, 2018

Contributor

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

Contributor

youknowriad commented Sep 7, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Sep 7, 2018

Member

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.

Member

jorgefilipecosta commented Sep 7, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 10, 2018

Contributor

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.

Contributor

jasmussen commented Sep 10, 2018

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

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 12, 2018

Contributor

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.

Contributor

youknowriad commented Sep 12, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 12, 2018

Contributor

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

screen shot 2018-09-12 at 10 52 01

Nested:

screen shot 2018-09-12 at 10 51 24

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

screen shot 2018-09-12 at 10 50 55

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.

Contributor

jasmussen commented Sep 12, 2018

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

screen shot 2018-09-12 at 10 52 01

Nested:

screen shot 2018-09-12 at 10 51 24

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

screen shot 2018-09-12 at 10 50 55

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

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 12, 2018

Contributor

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

Contributor

youknowriad commented Sep 12, 2018

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

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 12, 2018

Contributor

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

Contributor

jasmussen commented Sep 12, 2018

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

@mtias mtias added this to the 3.9 milestone Sep 12, 2018

@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):
image

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

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

Contributor

youknowriad commented Sep 13, 2018

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

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

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

Contributor

jasmussen commented Sep 13, 2018

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

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

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.

new styles

Contributor

jasmussen commented Sep 13, 2018

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.

new styles

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

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

Contributor

jasmussen commented Sep 13, 2018

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

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

So this applies to all drop-down menus. Just noting to make sure it's ok.

Contributor

youknowriad commented on packages/components/src/dropdown-menu/index.js in 89790a6 Sep 13, 2018

So this applies to all drop-down menus. Just noting to make sure it's ok.

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

I guess we should remove the corresponding CSS styles.

Contributor

youknowriad replied Sep 13, 2018

I guess we should remove the corresponding CSS styles.

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

Yes, all dropdown menus that show an arrow should use this triangle instead of the Dashicon.

Contributor

jasmussen replied Sep 13, 2018

Yes, all dropdown menus that show an arrow should use this triangle instead of the Dashicon.

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

I was thinking about the is-active flag

Contributor

youknowriad replied Sep 13, 2018

I was thinking about the is-active flag

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

Hmm. I'm very slow today, sorry — what could be the side-effects here?

Contributor

jasmussen replied Sep 13, 2018

Hmm. I'm very slow today, sorry — what could be the side-effects here?

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

See the Table block's dropdown menu. I personally all Dropdowns should have similar styles whether it's "dotted", "rounded" or whatever, I don't really care and whether we're using Dropdown or DropdownMenu shouldn't matter.

Contributor

youknowriad replied Sep 13, 2018

See the Table block's dropdown menu. I personally all Dropdowns should have similar styles whether it's "dotted", "rounded" or whatever, I don't really care and whether we're using Dropdown or DropdownMenu shouldn't matter.

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

The more menu and the block settings menu are using Dropdown and not DropdownMenu

Contributor

youknowriad replied Sep 13, 2018

The more menu and the block settings menu are using Dropdown and not DropdownMenu

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

Right, solid point, I finally understand thanks. I'll take another look.

Contributor

jasmussen replied Sep 13, 2018

Right, solid point, I finally understand thanks. I'll take another look.

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 13, 2018

Contributor

Okay pushed a change. I still sort of preferred the old, but your points are solid and I think this is good too:

screen shot 2018-09-13 at 16 14 28

Contributor

jasmussen replied Sep 13, 2018

Okay pushed a change. I still sort of preferred the old, but your points are solid and I think this is good too:

screen shot 2018-09-13 at 16 14 28

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Sep 13, 2018

Contributor

LGTM 👍

Contributor

youknowriad replied Sep 13, 2018

LGTM 👍

@aduth

aduth approved these changes Sep 13, 2018

Show outdated Hide outdated packages/components/src/dropdown-menu/index.js Outdated
Show outdated Hide outdated packages/editor/src/components/alignment-toolbar/index.js Outdated

@youknowriad youknowriad merged commit 762c717 into master Sep 14, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the add/collapsible-segments branch Sep 14, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 14, 2018

Contributor

Nice to see this in.

Contributor

mtias commented Sep 14, 2018

Nice to see this in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment