Heading block: move alignment controls to toolbar #16682

draganescu · 2019-07-19T14:56:46Z

Description

How has this been tested?

Tested locally.

Screenshots

Types of changes

Added an alignment toolbar component to the heading block's toolbar.
I think we should also remove them from the inspector, right @mapk ?

packages/block-library/src/heading/heading-toolbar.js

paaljoachim · 2019-07-24T11:11:36Z

This issue would then also be associated with moving alignment options of the heading to the toolbar.

Try: Always collapse block alignments.
#16557

mapk · 2019-07-24T23:10:44Z

I think we should also remove them from the inspector, right @mapk ?

Yep, let's do that. Right now I'm seeing them doubled up. Let's just remove them all now that they are included in the toolbar.

gziolo · 2019-07-25T09:44:38Z

Yep, let's do that. Right now I'm seeing them doubled up. Let's just remove them all now that they are included in the toolbar.

Yes, they should be removed from the sidebar with the proposed change.

We should also make sure that this PR takes into account changes proposed in #16557. I guess it would make sense to land the latter first and then apply it here.

packages/block-library/src/heading/edit.js

packages/block-library/src/heading/heading-toolbar.js

youknowriad · 2019-07-25T13:05:00Z

This is looking good overall. A few things about consistency and collapsing.

The text alignment toolbar is not collapsed in both the paragraph and heading blocks at the root level
The text alignment toolbar is collapsed in both the paragraph and heading blocks inside the columns block.
The heading level toolbar is not collapsed no matter where we use the blocks.

Questioins

Should we just collapse all these toolbars in all situations especially since we're adding a lot of tools to a lot of blocks?
If not, should we align the "heading level" toolbar behavior on the text alignment toolbar as well: collapsed inside columns and keep uncollapsed at the root level?

Thoughts @mapk @mtias @jasmussen @kjellr

gziolo · 2019-07-25T13:56:30Z

@youknowriad, see this comment under PR I lined earlier today: #16557 (comment)

I think this work started by @jasmussen together with my updates addressed most of the issues you listed.

mapk · 2019-07-26T00:35:52Z

Should we just collapse all these toolbars in all situations especially since we're adding a lot of tools to a lot of blocks?

Yes. I tested @gziolo's additional commits to that PR and the collapsed toolbar elements didn't bother me. It felt natural to open them up even when there was more than one to interact with.

paaljoachim · 2019-07-26T07:11:41Z

When there are alternatives to a specific tool (in the toolbar) associated with doing a similar thing it becomes natural to have them in a drop down. The drop down shows variation of one specific feature.

The additional More drop down signals an area that has a mix of tools not so often used, but good to have available.

paaljoachim · 2019-07-26T07:25:23Z

Btw @draganescu we should also have the h tags in a drop down in the toolbar.

#15096 (comment)

draganescu · 2019-08-02T18:44:33Z

I have removed the align tools from the inspector, added a collapsing item in the toolbar for the heading levels and kept the heading levels always expanded in the inspector.

The problem is that the heading collapsed icon is very confusing:

I am unsure what to use instead as the "H" icon is already there in the block switcher, @mapk any suggestions :D

paaljoachim · 2019-08-02T20:00:48Z

I am looking at what it might look like. I am sure not sure if this is a good solution though.

Having two H drop downs next to each other can be somewhat confusing.

davewhitley · 2019-08-02T20:54:07Z

@paaljoachim I like your solution because it shows which level heading is selected. An additional enhancement would be to tweak the H icon on the left to something like this maybe (imagine an H instead the letters shown):
1

2

3

4

5

6

My favorite is 2 or a variation of that idea.

paaljoachim · 2019-08-02T23:44:36Z

Here is the earlier T that is still in use in the Core version of Gutenberg. With a Heading drop down next to it.

Hey Dave
@drw158
Here are the icons you shared added into the wireframe.

davewhitley · 2019-08-06T19:24:27Z

Thanks for the mockups, that helps.I think the decision to use an H instead of T is still sound, so we should keep the H. We should be able to create a new icon incorporating some of those ideas to make the icon look more like a "group of heading options".

paaljoachim · 2019-08-06T21:44:28Z

Here are additional mockups.

draganescu · 2019-08-07T09:53:34Z

I think 5 works best as usually headings clear floats and content is below. Also the other resemble drop cap too much.

richtabor · 2019-08-07T12:42:59Z

I am looking at what it might look like. I am sure not sure if this is a good solution though.

Having two H drop downs next to each other can be somewhat confusing.

As long as the H2 icon adapts to switchever is active I’d say this is ok. The hierarchy between the H and following Hx icons works fine here. I vote for keeping the H heading icon as is.

…collapsing

gziolo · 2019-08-12T06:37:14Z

Have you tried to make SVG icon more dynamic using text or something similar for numbers?

mapk · 2019-08-13T02:30:10Z

there is no bg of the heading dropdown toggle, although no toolbar button behaves like that

Good catch, @draganescu! I'd say don't show the background color in the top toolbar level. This way it's consistent with all other toolbar dropdowns. Basically, keep it as you have it.

draganescu · 2019-08-15T07:15:36Z

Have you tried to make SVG icon more dynamic using text or something similar for numbers?

No, but that should be something to check out too. Not sure if in this PR. The H icons are half SVG half subscript :)

draganescu · 2019-08-15T12:04:04Z

This looks ready to go. @gziolo @mapk what do you think?

mtias · 2019-08-21T11:10:19Z

Thanks for the mockups, that helps.I think the decision to use an H instead of T is still sound, so we should keep the H.

I'm still against using "H" here because, while standard in terms of HTML tags, it perpetuates using English as the canonical source of meaning — the H on its own can be really confusing in other languages for people not familiar with HTML. (I'm totally fine with H being used for the hierarchy level as it's more technical.)

I like some of the ideas proposed by @drw158 for the icon as it gives a bit more context.

Also, the dropdown here seems like a perfect case for showing the actual size rendering of the heading like we used to do on the font-size dropdown. (cc @enriquesanchez)

It would also be a great place to pre-warn if you are choosing an incorrect heading level for the current context.

mapk · 2019-08-23T21:23:37Z

Also, the dropdown here seems like a perfect case for showing the actual size rendering of the heading like we used to do on the font-size dropdown.

This is a great point! All the more reason to get this selectbox right in #16473 (comment)

richtabor · 2019-08-27T20:14:34Z

Also, the dropdown here seems like a perfect case for showing the actual size rendering of the heading like we used to do on the font-size dropdown. (cc @enriquesanchez)

I lean towards not having actual size rendering of headings here. UI wise, that implementation could lead to display issues for headings that may not follow "standard" sizes. For example, how would we account for actual heading sizes if a theme opts for rather large headings.

I see value in having the sizes there, but the cognitive load may not be worth it - likely over complicating the component.

I could be convinced otherwise though - I'd appreciate any further insight. :)

paaljoachim · 2019-08-27T21:50:04Z

It seems this PR which seemed straight forward now has added elements.

A suggestion on not using the H but another icon.
Actual size rendering.

These are additional elements that we can get back to later on. Lets get this merged as it is right now as a first iteration.

Uses the H in the Heading drop down. (H2, H3, H4 etc)
So that we go from this:

To something like this:

Thanks.
Then we can after this PR is merged create a new issue for switching the icon and another issue for having actual size rendering of the Heading drop down options.

mapk · 2019-08-29T00:07:06Z

I can't get this PR running locally, and so am leaving a proper review to someone who can.

In light of @paaljoachim's comment above, I'd agree that we should keep this PR focused for now. Moving the heading levels into the dropdown while showing the active heading level in the toolbar's icon looks like a reasonable solution since most everything else in the toolbar is also in a dropdown nowadays.

I'd rather not change the Heading icon back to something else. There was good discussion about this here: #15340 and seemed to fulfill a11y needs better. I don't believe the "T" was any more cross-language compatible than an "H". And the "H" at least jives with the Heading levels. So let's keep it as is. That being said, I'm totally okay with expanding on the "H" and iconizing it more. But that's another PR.

paaljoachim · 2019-08-30T07:31:10Z

I believe this PR is ready for a Code Review.

packages/block-library/src/heading/edit.js

packages/block-library/src/heading/heading-toolbar.js

gziolo · 2019-08-30T08:43:34Z

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

@@ -43,6 +43,13 @@ function DropdownMenu( {
 		}
 	}

+	let activeControl = false;
+	flatMap( controlSets, ( controlSet ) => {


It seems like a very specific implementation of the heading dropdown. Can you think of an alternative approach where DropdownMenu stays unmodified so we could leave this component as is? Ideally, all those CSS styles are applied directly to HeadingToolbar components or alternatively, we modify SVG icons to take the number as param.

Maybe, but that would complicate this PR. I tried to follow the same pattern in the interest of pushing the feature forward. We do already use isActive in the DropdownMenu so I don't feel I've introduced specific Heading related behavior, just some logic to determine the active DropdownMenu element.

I will look into implementing the heading icons differently and get rid of the subscript in the heading component but we'll see. I wonder if there is any benefit of still using subscript for these kinds of icons?

Can you think of other use cases for subscripts like these?

This reverts commit d9895ae.

paaljoachim · 2019-09-06T17:54:54Z

Hopefully we can get this merged into the next version of Gutenberg. It will have an important effect on the heading UI.

@gziolo @draganescu @mtias

epiqueras · 2019-09-12T15:42:31Z

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

@@ -43,6 +43,13 @@ function DropdownMenu( {
 		}
 	}

+	let activeControl = false;
+	flatMap( controlSets, ( controlSet ) => {


We shouldn't be using flatMap if we don't need the return value.

epiqueras · 2019-09-12T15:42:48Z

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

@@ -43,6 +43,13 @@ function DropdownMenu( {
 		}
 	}

+	let activeControl = false;
+	flatMap( controlSets, ( controlSet ) => {
+		activeControl = find( controlSet, ( control ) => {


Can we break after finding the active control?

epiqueras · 2019-09-12T15:46:09Z

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

@@ -43,6 +43,13 @@ function DropdownMenu( {
 		}
 	}

+	let activeControl = false;
+	flatMap( controlSets, ( controlSet ) => {


Can you think of other use cases for subscripts like these?

epiqueras · 2019-09-12T15:49:19Z

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

 		}

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


Looks like this new line snuck in.

draganescu · 2019-09-13T19:30:04Z

@epiqueras thanks for the review. I will close this in favor of #17419 which rightfully removes the whole subscript implementation.

gziolo · 2019-09-14T14:29:49Z

@draganescu, many thanks for all work on this PR 🙇

#17419 is now merged.

draganescu requested review from ajitbohra, gziolo, jorgefilipecosta, Soean, talldan and youknowriad as code owners July 19, 2019 14:56

youknowriad reviewed Jul 24, 2019

View reviewed changes

packages/block-library/src/heading/heading-toolbar.js Outdated Show resolved Hide resolved

youknowriad reviewed Jul 25, 2019

View reviewed changes

packages/block-library/src/heading/edit.js Show resolved Hide resolved

gziolo reviewed Jul 25, 2019

View reviewed changes

packages/block-library/src/heading/heading-toolbar.js Outdated Show resolved Hide resolved

gziolo mentioned this pull request Jul 25, 2019

Try: Always collapse block alignments. #16557

Merged

mcsf changed the title ~~added alignment to the toolbar for consistency~~ Heading block: move alignment controls to toolbar Jul 26, 2019

gziolo mentioned this pull request Jul 29, 2019

Bring consistency to block toolbar for text blocks #15964

Closed

5 tasks

draganescu requested a review from ellatrix as a code owner August 2, 2019 18:10

draganescu force-pushed the try/unify-formatting-tools branch from 1ab31f2 to 29c994d Compare August 2, 2019 18:42

heading controls update

14204f1

draganescu reopened this Aug 11, 2019

removed useless HoC from heading toolbar since we manually determine …

308d8ed

…collapsing

draganescu removed the Needs Dev Ready for, and needs developer efforts label Aug 15, 2019

draganescu self-assigned this Aug 15, 2019

removed useless function body and some useless export

fdce1d0

draganescu added the [Block] Heading Affects the Headings Block label Aug 15, 2019

new snaptshot

f5fc1e8

gziolo reviewed Aug 30, 2019

View reviewed changes

draganescu added 3 commits September 4, 2019 10:50

default collapsed

d9895ae

Revert "default collapsed"

cb01d3f

This reverts commit d9895ae.

default collapsed

060beee

youknowriad added the [Release] Do Not Punt Used to indicate the issue or pull request must not be moved from the assigned milestone label Sep 12, 2019

epiqueras requested changes Sep 12, 2019

View reviewed changes

gziolo mentioned this pull request Sep 12, 2019

Heading block: move alignment controls to toolbar (#2) #17419

Merged

1 task

draganescu closed this Sep 13, 2019

talldan deleted the try/unify-formatting-tools branch September 13, 2019 19:45

Heading block: move alignment controls to toolbar #16682

Heading block: move alignment controls to toolbar #16682

Conversation

draganescu commented Jul 19, 2019

Description

How has this been tested?

Screenshots

Types of changes

paaljoachim commented Jul 24, 2019

mapk commented Jul 24, 2019

gziolo commented Jul 25, 2019

youknowriad commented Jul 25, 2019

gziolo commented Jul 25, 2019

mapk commented Jul 26, 2019

paaljoachim commented Jul 26, 2019 • edited Loading

paaljoachim commented Jul 26, 2019 • edited Loading

draganescu commented Aug 2, 2019

paaljoachim commented Aug 2, 2019 • edited Loading

davewhitley commented Aug 2, 2019 • edited Loading

paaljoachim commented Aug 2, 2019

davewhitley commented Aug 6, 2019

paaljoachim commented Aug 6, 2019 • edited Loading

draganescu commented Aug 7, 2019

richtabor commented Aug 7, 2019

gziolo commented Aug 12, 2019

mapk commented Aug 13, 2019

draganescu commented Aug 15, 2019

draganescu commented Aug 15, 2019

mtias commented Aug 21, 2019 • edited Loading

mapk commented Aug 23, 2019

richtabor commented Aug 27, 2019

paaljoachim commented Aug 27, 2019 • edited Loading

mapk commented Aug 29, 2019

paaljoachim commented Aug 30, 2019 • edited Loading

gziolo Aug 30, 2019

Choose a reason for hiding this comment

draganescu Sep 4, 2019

Choose a reason for hiding this comment

epiqueras Sep 12, 2019

Choose a reason for hiding this comment

paaljoachim commented Sep 6, 2019 • edited Loading

epiqueras Sep 12, 2019

Choose a reason for hiding this comment

epiqueras Sep 12, 2019

Choose a reason for hiding this comment

epiqueras Sep 12, 2019

Choose a reason for hiding this comment

epiqueras Sep 12, 2019

Choose a reason for hiding this comment

draganescu commented Sep 13, 2019 • edited Loading

gziolo commented Sep 14, 2019

paaljoachim commented Jul 26, 2019 •

edited

Loading

paaljoachim commented Jul 26, 2019 •

edited

Loading

paaljoachim commented Aug 2, 2019 •

edited

Loading

davewhitley commented Aug 2, 2019 •

edited

Loading

paaljoachim commented Aug 6, 2019 •

edited

Loading

mtias commented Aug 21, 2019 •

edited

Loading

paaljoachim commented Aug 27, 2019 •

edited

Loading

paaljoachim commented Aug 30, 2019 •

edited

Loading

paaljoachim commented Sep 6, 2019 •

edited

Loading

draganescu commented Sep 13, 2019 •

edited

Loading