Core Columns Block - adds ability to vertically align all the columns #13899

getdave · 2019-02-15T17:34:26Z

It is not currently possible to change the vertical alignment of Columns within the Columns Block. This results in a certain degree of inflexibility.

This PR will add:

Ability to adjust the vertical alignment of individual Columns within the Columns Block
Ability to adjust the vertical alignment of all Columns via the parent Columns Block
New reusable toolbar component within a@wordpress/editor to allow the vertical alignment toolbar UI to be reused for other Blocks that required this functionality.

Todo

Outstanding Queries

~~Considering extracting VAlignToolbar to a reusable Component of some kind. Waiting for guidance on whether this should live in package/components yet.~~ ✅ Complete - based on advice received in #core-editor Slack channel.

How has this been tested?

Manually verify ability to align all columns from parent
Manually verify ability to provide per column alignment settings (and these take precedence over the parent valign setting if applied)
Manually verify can preview valignment via block editor in editor mode
Manually verify save output on website aligns correctly in various permutations of alignment
Manually verify enhancement doesn't require migration path (ie: deprecation) when upgrading from old form of the Block to the one in this PR (you can do this by switching to master adding the old Block, publishing/updating the post, then switching back to this PR and testing)
Manually test how valign behaves in Responsive (ie: non-desktop) context

Screenshots

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

Related PRs

Media & Text Block: Add vertical alignment options #13989 Media + Text Block Vertical Alignment
Add nested blocks inside cover block #13822 Cover Block Nested Blocks

michelleweber · 2019-02-20T12:01:51Z

Hi! What copy needs a check here?

packages/editor/src/components/index.js

getdave · 2019-02-20T13:40:59Z

Hi! What copy needs a check here?

@michelleweber I think the labels for the Toolbar here https://github.com/WordPress/gutenberg/pull/13899/files#diff-2f589ecb53b1259bbae7acf5b2dd770cR20 could do with sanity check please.

packages/block-library/src/columns/deprecated.js

packages/block-library/src/columns/index.js

packages/block-library/src/columns/deprecated.js

kjellr · 2019-02-20T15:22:42Z

Hey @getdave! This is a lovely new feature, thanks for working on it. From a design perspective, this is looking pretty solid.

In general, my main issues were just around how difficult it is to select parent/child blocks. But that's not limited to this feature, and we're working that out in #9628 (comment). 🙂

I did find one bug: Toolbar spacing seems a bit off on mobile. I think it's related to the new icon there:

I also have a few small notes we should think about regarding this feature. I'm not sure there's actually any action we should take based on this, but I figured it's worth sharing.

In general, there are a number of scenarios in which this feature will have no immediate effect. It makes sense to me (and to most of us working on this I'm sure), but I do think it'll be confusing to many users. First, the vertical alignment only kicks on columns that are not the tallest column, so users will surely run into circumstances where they're clicking these controls and not seeing anything change. Take this example for instance:

This gets confusing because visually, there is a lot of extra top/bottom space there. We've (thankfully) added this to help with block selection, but it does make things a little confusing: It looks like the blocks could move up and down within that space, even though they can't. This may be improved upon depending on the outcome of #9628 (comment).

Similarly, columns are stacked by default on mobile, and so these controls have no effect there. This may change a bit depending on the outcome of #13363, but even now I think it's still useful to include this control there.

Finally, these controls can be applied to both the parent columns block and the individual column block. Settings on the innermost block override settings on the parent columns block. Conceptually this makes sense, but it does add a bunch of complexity. I encountered some scenarios where adjusting vertical alignment on the parent block had no effect because because the inner blocks had settings already (either because they were the tallest block already, or because they had their own setting). For simplicity's sake, we might want to consider limiting this setting to one or the other.

Again, this is looking great though. I think it'll bring a lot of great new flexibility to the columns block, and I could see the component coming in handy for lots of other blocks in the future. 🎉

marekhrabe · 2019-02-20T15:30:09Z

I encountered some scenarios where adjusting vertical alignment on the parent block had no effect because because the inner blocks had settings already (either because they were the tallest block already, or because they had their own setting).

So I've had a long comment composed that was playing with this idea… You summed it up better! 🙇‍♂️

Are there any precedents for similar situation where we have a setting that's being inherited/overridden elsewhere in Gutenberg? I can't think of one but I'm also new with the development here.

michelleweber · 2019-02-20T15:40:42Z

@getdave, I think they're fine. From a purely visual perspective you could probably get away with losing the "vertical" because the icon communicates that, but It's probably best to keep it for accessibility purposes.

The one thing I wondered was whether "middle" should be "center," which I feel like is the term I'm used to seeing re: aligning things.

marekhrabe · 2019-02-20T15:49:23Z

@michelleweber I think I've mostly seen "Middle" being used in the vertical context (as opposed to horizontal "Center"). Examples from other editors I've tried:

GDocs	TinyMCE Table

packages/block-library/src/columns/editor.scss

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

Resolves WordPress#13899 (comment)

Previously in order to reset the Parent’s alignment when one of the child Columns set it’s own alignment, the render method of the Parent Columns mutated the attributes causing a re-render. To avoid this we now reset the Parent from the Child Column whose alignment changed. Addresses WordPress#13899 (comment)

Resolves point raised in WordPress#13899 (comment)

As discussed [here](WordPress#13899 (comment)) selection of parent/child Blocks is currently being worked on elsewhere. Therefore to get the vertical-alignment shipped, this commit reverts the change that made Columns individually selectable. Now reverts to original behaviour of only being selectable via the Block Inspector (or keyboard). This assumes that future PRs will land better Parent/Child selection behaviour. Also removes unwanted space within the Columns themselves.

marekhrabe · 2019-03-19T10:17:22Z

I just tested the latest version now. The functionality works well for me, there is no extra whitespace and only child blocks and main Columns are selectable in the visual editor. Individual Column is accessible only through the block navigation menu at the top.

To me, this sounds like a good first iteration of the feature. Some parts are more hidden and "power user" but considering how deep those related issues are, I echo we should handle that separately later while having this PR already merged.

Previously the editor package container the toolbar. Now the new Block Editor should be the new home for the toolbar

getdave · 2019-03-19T11:07:21Z

🚢 Enhancement now merged. Thanks to all who took the time to contribute!

aduth · 2019-03-19T13:13:12Z

packages/block-library/src/columns/column.js

+		const { getBlockRootClientId } = select( 'core/editor' );
+
+		return {
+			parentColumsBlockClientId: getBlockRootClientId( clientId ),


Noting:

Typo on "Colums" ("Columns")

getBlockRootClientId is a very non-performant selector in its current form. Ideally this shouldn't impact you in implementing this, but unfortunately it might. Options here may be to either improve the performance of (at worst, memoize) the selector, or pass through the selector, not the selector result, to be called directly in the callback of updateAlignment when it's needed.

getBlockRootClientId is a very non-performant selector in its current form. Ideally this shouldn't impact you in implementing this, but unfortunately it might. Options here may be to either improve the performance of (at worst, memoize) the selector, or pass through the selector, not the selector result, to be called directly in the callback of updateAlignment when it's needed.

Revisiting this since I'm encountering it again: Since it's only used in the withDispatch callback, another (preferred) option would be to leverage the third argument of withDispatch (registry) to select the necessary data on-demand only when necessary. I suspect this would provide a significant performance improvement for posts containing a columns block.

See: #11851

For what it's worth, I'm refactoring this in an unrelated effort, so it may not require any action on your part.

aduth · 2019-03-19T13:14:38Z

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

+	 * Selects the child column Blocks for this parent Column
+	 */
+	withSelect( ( select, { clientId } ) => {
+		const { getBlocksByClientId } = select( 'core/editor' );


These selectors have all been effectively deprecated from core/editor, though they're not logged as such. We should still aim to select from core/block-editor instead.

aduth · 2019-03-19T13:16:45Z

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

+		const { getBlocksByClientId } = select( 'core/editor' );
+
+		return {
+			childColumns: getBlocksByClientId( clientId )[ 0 ].innerBlocks,


There's a few levels of indirection here to get to the innerBlocks. You could have called getBlock to get the singular block by clientId, but actually think it may have been better to call:

getBlocks( clientId )

...where the clientId argument of the getBlocks selector signifies the "root" (i.e. parent) from which to select inner blocks.

https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-block-editor/#getblocks

aduth · 2019-03-19T13:17:14Z

packages/block-library/src/columns/column.js

+				} );
+
+				// Reset Parent Columns Block
+				dispatch( 'core/editor' ).updateBlockAttributes( parentColumsBlockClientId, {


Is it necessary to update the block if it's not guaranteed that anything will change (i.e. what about if the parent block had no vertical alignment)?

aduth · 2019-04-15T16:02:26Z

packages/block-library/src/columns/editor.scss

 // These margins make sure that nested blocks stack/overlay with the parent block chrome
 // This is sort of an experiment at making sure the editor looks as much like the end result as possible
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
 // When using CSS grid, margins do not collapse on the container.
-.wp-block-columns .block-editor-block-list__layout {


Why was this changed? It undoes intentional changes from #14420.

Noting that confusion around these classnames was anticipated in #14112 (comment) . As such, it might warrant more exploration about how we can eliminate the wrong names (.editor-) from code while retaining them in the built output for compatibility.

aduth · 2019-05-07T19:41:46Z

packages/block-library/src/columns/column.js

+const ColumnEdit = ( { attributes, updateAlignment } ) => {
+	const { verticalAlignment } = attributes;
+
+	const classes = classnames( 'block-core-columns', {


Was this intentionally named as the plural "columns" ? This is for the single "column" block, a separate block from the plural "columns" block. Should it not then be named 'block-core-column' instead?

mrleemon · 2020-02-15T11:57:20Z

#19962

jasomdotnet · 2020-06-08T11:29:40Z

I was able to vertical align button in Columns block.

You all did a great job within this issue!

gziolo added [Block] Columns Affects the Columns Block [Type] Enhancement A suggestion for improvement. labels Feb 16, 2019

getdave added Needs Testing Needs further testing to be confirmed. Needs Technical Feedback Needs testing from a developer perspective. labels Feb 19, 2019

getdave requested review from frontdevde and marekhrabe February 19, 2019 16:40

getdave self-assigned this Feb 19, 2019

getdave added the Needs Design Feedback Needs general design feedback. label Feb 20, 2019

getdave marked this pull request as ready for review February 20, 2019 11:57

getdave requested review from ajitbohra, gziolo, jorgefilipecosta, noisysocks, notnownikki, Soean, talldan and youknowriad as code owners February 20, 2019 11:57

getdave added the Needs Copy Review Needs review of user-facing copy (language, phrasing) label Feb 20, 2019

gziolo reviewed Feb 20, 2019

View reviewed changes

packages/editor/src/components/index.js Outdated Show resolved Hide resolved

gziolo added this to the 5.3 (Gutenberg) milestone Feb 20, 2019

spen reviewed Feb 20, 2019

View reviewed changes

packages/block-library/src/columns/deprecated.js Show resolved Hide resolved

packages/block-library/src/columns/index.js Outdated Show resolved Hide resolved

packages/block-library/src/columns/deprecated.js Outdated Show resolved Hide resolved

frontdevde reviewed Feb 20, 2019

View reviewed changes

packages/block-library/src/columns/editor.scss Outdated Show resolved Hide resolved

frontdevde reviewed Feb 20, 2019

View reviewed changes

packages/block-library/src/columns/editor.scss Outdated Show resolved Hide resolved

frontdevde reviewed Feb 20, 2019

View reviewed changes

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

getdave added 6 commits March 19, 2019 10:15

Updates example to run without erroring due to missing var

5e05de1

Resolves WordPress#13899 (comment)

Fixes comment to match coding style guidelines

8e65b6b

Resolves WordPress#13899 (comment)

Fixes single Column Block breadcrumb to RHS of boundary

2905a82

Resolves point raised in WordPress#13899 (comment)

Updates to tidy CSS selectors for improved readability

a65d18c

getdave added 2 commits March 19, 2019 10:32

Updates to move VAlign Toolbar into Block Editor package

46a9b12

Previously the editor package container the toolbar. Now the new Block Editor should be the new home for the toolbar

Automated README update

c8713f5

getdave force-pushed the add/core-columns-valignment branch from bc4d83d to c8713f5 Compare March 19, 2019 10:35

Updates changlogs to reflect release status

56b838f

gziolo removed Needs Design Feedback Needs general design feedback. Needs Testing Needs further testing to be confirmed. labels Mar 19, 2019

getdave merged commit c34d6b7 into WordPress:master Mar 19, 2019

gziolo added this to the 5.4 (Gutenberg) milestone Mar 19, 2019

getdave mentioned this pull request Mar 19, 2019

Add ability to update multiple Blocks' attributes in Block Editor Data #14511

Closed

aduth reviewed Mar 19, 2019

View reviewed changes

This was referenced Apr 1, 2019

Bump plugin version to 5.4.0-rc.1 #14735

Merged

Bump plugin version to 5.4.0 #14783

Merged

aduth mentioned this pull request Apr 15, 2019

Plugin: Backport bug fixes from Gutenberg 5.5.0 to wp/trunk (WordPress 5.2 RC) #14987

Merged

aduth reviewed Apr 15, 2019

View reviewed changes

aduth reviewed May 7, 2019

View reviewed changes

aduth mentioned this pull request May 8, 2019

Block Library: Add width attribute for resizable Column blocks #15499

Merged

1 task

aduth mentioned this pull request May 21, 2019

Enables Block Grouping/UnGrouping using core/group #14908

Merged

6 tasks

mcsf mentioned this pull request Nov 8, 2019

Nav Block - improving initial state by adding Block placeholder and ability to create from existing Pages. #18363

Merged

5 tasks

scruffian mentioned this pull request May 4, 2021

Columns Block: Add horizontal alignments #31459

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core Columns Block - adds ability to vertically align all the columns #13899

Core Columns Block - adds ability to vertically align all the columns #13899

getdave commented Feb 15, 2019 •

edited

Loading

michelleweber commented Feb 20, 2019

getdave commented Feb 20, 2019

kjellr commented Feb 20, 2019

marekhrabe commented Feb 20, 2019

michelleweber commented Feb 20, 2019

marekhrabe commented Feb 20, 2019

marekhrabe commented Mar 19, 2019

getdave commented Mar 19, 2019

aduth Mar 19, 2019

aduth Apr 30, 2019

aduth Mar 19, 2019

aduth Mar 19, 2019

aduth Mar 19, 2019

aduth Apr 15, 2019

aduth May 7, 2019

mrleemon commented Feb 15, 2020

jasomdotnet commented Jun 8, 2020 •

edited

Loading

Core Columns Block - adds ability to vertically align all the columns #13899

Core Columns Block - adds ability to vertically align all the columns #13899

Conversation

getdave commented Feb 15, 2019 • edited Loading

This PR will add:

Todo

Outstanding Queries

How has this been tested?

Screenshots

Checklist:

Related PRs

michelleweber commented Feb 20, 2019

getdave commented Feb 20, 2019

kjellr commented Feb 20, 2019

marekhrabe commented Feb 20, 2019

michelleweber commented Feb 20, 2019

marekhrabe commented Feb 20, 2019

marekhrabe commented Mar 19, 2019

getdave commented Mar 19, 2019

aduth Mar 19, 2019

Choose a reason for hiding this comment

aduth Apr 30, 2019

Choose a reason for hiding this comment

aduth Mar 19, 2019

Choose a reason for hiding this comment

aduth Mar 19, 2019

Choose a reason for hiding this comment

aduth Mar 19, 2019

Choose a reason for hiding this comment

aduth Apr 15, 2019

Choose a reason for hiding this comment

aduth May 7, 2019

Choose a reason for hiding this comment

mrleemon commented Feb 15, 2020

jasomdotnet commented Jun 8, 2020 • edited Loading

getdave commented Feb 15, 2019 •

edited

Loading

jasomdotnet commented Jun 8, 2020 •

edited

Loading