Try: Always collapse block alignments. #16557

jasmussen · 2019-07-12T07:43:09Z

This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow.

This comes with a couple of benefits:

It ensures that the block toolbar always fits even when the item is deeply nested inside columns.
It affords a scalable method to show additional alignment options, such as those suggested in Blocks: Full Screen alignment/display option on several blocks #16385.
It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others.
It has labels, to be descriptive of such new alignments.

Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today.

paaljoachim · 2019-07-14T11:02:44Z

I have been thinking about this as well.
The alignment buttons take so much space in the toolbar, and to me it would be natural to have them in a drop down.

kjellr · 2019-07-15T13:34:18Z

I'm all for this. It saves space, and also helps apply text labels to some often-confusing toolbar icons.

These are the sorts of toolbar controls that you're likely to hit just once or twice for any given block, so I don't think hiding them behind an extra click is too much of a hassle. Especially given the other benefits explained above.

Looks like some of the tests would need to be rewritten if we decide to land this one.

gziolo

It needs some polishing but it's definitely something that will solve a couple of issues :)

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

mapk · 2019-07-24T13:47:32Z

I'm all for this as well. With the introduction of more toolbar items, it's getting crowded. I'm just not sure what our dropdown pattern is for this stuff.

Do we use an arrow icon to indicate it's a dropdown or not? I vote yes.

Here's an example of the Table block which uses a variety.

karmatosed · 2019-07-24T17:42:15Z

My concern is would be hiding a useful thing away and as a result, causing it to either be thought to not exist, happen from this suggestion? If people agree that's not the case it's totally worth exploring.

gziolo · 2019-07-25T09:47:18Z

Do we use an arrow icon to indicate it's a dropdown or not? I vote yes.

Yes, 100% agree. Everything that opens a dropdown should have a consistent indicator. I also think that this should be handled on the component side rather than through CSS as proposed in this PR. (internally it can use CSS approach, it doesn't matter, my point is that this should be the default which you can opt-out from)

gziolo · 2019-07-25T13:55:29Z

Changes applied:

This resolves a few issues discussed:

all controls which use dropdown have arrow indicator appended
all controls which have items to pick with dropdown have every word starting with uppercase for consistency
all controls have tooltip label which starts with uppercase and the rest is lowercase for consistency

Issues to resolve

I think there are blocks like Columns which should have center block alignment added because it's the default state for all blocks. At least we use center icon this way. See:

gziolo · 2019-07-25T13:58:53Z

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

@@ -69,6 +69,7 @@ function HeadingEdit( {
 					<HeadingToolbar minLevel={ 1 } maxLevel={ 7 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
 					<p>{ __( 'Text Alignment' ) }</p>
 					<AlignmentToolbar
+						isCollapsed={ false }


It's temporary for backward compatibility. It should be resolved with #16682.

This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow. This comes with a couple of benefit: - It ensures that the block toolbar always fits even when the item is deeply nested inside columns. - It affords a scalable method to show additional alignment options, such as those suggested in #16385. - It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others. - It has labels, to be descriptive of such new alignments. Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today.

packages/e2e-tests/specs/__snapshots__/font-size-picker.test.js.snap

packages/e2e-tests/specs/__snapshots__/block-hierarchy-navigation.test.js.snap

gziolo · 2019-07-25T18:37:11Z

@mapk and @karmatosed, I managed to update all e2e tests to work with the updated UI for all types of alignment controls which can be added to the block toolbar. I'd like to move forward with this PR as this gives are more space to work on further refinements for text blocks as described in #15096.

mapk · 2019-07-25T23:45:19Z

I just tested these all out, @gziolo, and they look and work great! Let's get this merged.

gziolo

I consider it ready to go feature-wise. Given that I added most of the code changes, I would appreciate sanity check from another developer as well because I had to rework a few e2e tests to make Travis happy :)

I also opened #16764 so we could discuss how labels/titles should be capitalized.
There is also one possible follow-up task where we should add center alignment to those blocks which offer only full and wide alignments if we are concerned by the fact that no alignment selected is in fact center. However, I'm also fine with leaving it as is to avoid setting explicitly center when someone selects it.

youknowriad

Let's try that.

jasmussen added the Needs Design Feedback Needs general design feedback. label Jul 12, 2019

jasmussen requested review from aduth, ajitbohra, chrisvanpatten, ellatrix, gziolo, jorgefilipecosta, talldan and youknowriad as code owners July 12, 2019 07:43

jasmussen self-assigned this Jul 12, 2019

kjellr mentioned this pull request Jul 18, 2019

Enhance the tools for selecting child/parent blocks #9628

Closed

gziolo reviewed Jul 19, 2019

View reviewed changes

packages/block-editor/src/components/block-alignment-toolbar/index.js Outdated Show resolved Hide resolved

packages/block-editor/src/components/block-alignment-toolbar/index.js Outdated Show resolved Hide resolved

gziolo added General Interface Parts of the UI which don't fall neatly under other labels. [Feature] Blocks Overall functionality of blocks labels Jul 19, 2019

paaljoachim mentioned this pull request Jul 24, 2019

Heading block: move alignment controls to toolbar #16682

Closed

mapk mentioned this pull request Jul 24, 2019

Add table block column alignment #16111

Merged

5 tasks

karmatosed removed the Needs Design Feedback Needs general design feedback. label Jul 24, 2019

gziolo force-pushed the try/always-collapsed-alignments branch from 8f12cf0 to afc3756 Compare July 25, 2019 13:50

jasmussen requested a review from Soean as a code owner July 25, 2019 13:50

gziolo reviewed Jul 25, 2019

View reviewed changes

Joen Asmussen and others added 4 commits July 25, 2019 18:57

Refactor alignment toolbars to be collapsed by default

0675b8f

Add arrow indicator to the Edit tabel dropdown menu

122051c

Update snapshot tests to work with updated components

8a1d9e7

gziolo force-pushed the try/always-collapsed-alignments branch from afc3756 to a93b328 Compare July 25, 2019 17:04

jasmussen requested review from nerrad and ntwb as code owners July 25, 2019 17:04

gziolo reviewed Jul 25, 2019

View reviewed changes

packages/e2e-tests/specs/__snapshots__/font-size-picker.test.js.snap Outdated Show resolved Hide resolved

gziolo reviewed Jul 25, 2019

View reviewed changes

packages/e2e-tests/specs/__snapshots__/block-hierarchy-navigation.test.js.snap Outdated Show resolved Hide resolved

Update failing e2e tests to work after UI changes introduced

66a5518

gziolo force-pushed the try/always-collapsed-alignments branch from a93b328 to 66a5518 Compare July 25, 2019 18:06

gziolo self-assigned this Jul 25, 2019

gziolo mentioned this pull request Jul 26, 2019

Copy: Inconsistent capitalization of labels in tooltips and dropdown menus #16764

Closed

gziolo approved these changes Jul 26, 2019

View reviewed changes

gziolo added this to the Gutenberg 6.2 milestone Jul 26, 2019

mtias mentioned this pull request Jul 26, 2019

Add fullScreen control to the block alignment toolbar #16738

Closed

4 tasks

youknowriad approved these changes Jul 26, 2019

View reviewed changes

gziolo merged commit 79d7847 into master Jul 26, 2019

gziolo deleted the try/always-collapsed-alignments branch July 26, 2019 12:46

kjellr mentioned this pull request Aug 5, 2019

Top toolbar items unnecessarily buried on large screens #16889

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Always collapse block alignments. #16557

Try: Always collapse block alignments. #16557

jasmussen commented Jul 12, 2019 •

edited

Loading

paaljoachim commented Jul 14, 2019 •

edited

Loading

kjellr commented Jul 15, 2019 •

edited

Loading

gziolo left a comment

mapk commented Jul 24, 2019

karmatosed commented Jul 24, 2019

gziolo commented Jul 25, 2019 •

edited

Loading

gziolo commented Jul 25, 2019

gziolo Jul 25, 2019

gziolo commented Jul 25, 2019

mapk commented Jul 25, 2019

gziolo left a comment

youknowriad left a comment

Try: Always collapse block alignments. #16557

Try: Always collapse block alignments. #16557

Conversation

jasmussen commented Jul 12, 2019 • edited Loading

paaljoachim commented Jul 14, 2019 • edited Loading

kjellr commented Jul 15, 2019 • edited Loading

gziolo left a comment

Choose a reason for hiding this comment

mapk commented Jul 24, 2019

karmatosed commented Jul 24, 2019

gziolo commented Jul 25, 2019 • edited Loading

gziolo commented Jul 25, 2019

Issues to resolve

gziolo Jul 25, 2019

Choose a reason for hiding this comment

gziolo commented Jul 25, 2019

mapk commented Jul 25, 2019

gziolo left a comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

jasmussen commented Jul 12, 2019 •

edited

Loading

paaljoachim commented Jul 14, 2019 •

edited

Loading

kjellr commented Jul 15, 2019 •

edited

Loading

gziolo commented Jul 25, 2019 •

edited

Loading