Add table block column alignment #16111

talldan · 2019-06-12T08:43:56Z

Description

Adds column alignment options to the table block. Closes #15823

Dev decisions
Code-wise, the part where I've had to break from the norm is by using a data-align attribute to store the alignment value for a cell. This is because the cell attributes are deeply nested and sourced using a query matcher, so normal attributes can't be used.

Applying an alignment adds a class name and data-align attribute to each table cell in a column. There aren't many alternatives to this approach that I can think of, apart from using inline styles. colgroup/col elements don't support text align, so they're out of the question.

How has this been tested?

Added unit and e2e tests.

Manual testing steps:

Add a table block to a post
Add some text to the first column of the table.
Ensure one of the cells in the first column is selected
From the toolbar try each of the column alignment options
Verify that text in the each cell in the column is aligned in the editor
Preview the post
Verify that the text is aligned when viewing the post.

Screenshots

Editor

Post

Types of changes

New feature (non-breaking change which adds functionality)

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.

mapk · 2019-06-15T14:21:31Z

I just tested this and it works wonderfully! Thanks, @talldan! 👍 from a design perspective.

talldan · 2019-06-17T01:19:21Z

Thanks! I think I'll switch this to using classnames as #16035 does, as that's now been merged.

mtias · 2019-06-25T12:05:49Z

Should this apply to the whole table, per column, or on individual cells?

mapk · 2019-06-26T00:01:44Z

Should this apply to the whole table, per column, or on individual cells?

Great question, @mtias. Right now the block only allows selection of a single cell at a time. I would love to see selections happen across rows and columns. Once this works, we can look at alignment across these.

talldan · 2019-06-27T14:06:36Z

Right now the block only allows selection of a single cell at a time. I would love to see selections happen across rows and columns. Once this works, we can look at alignment across these.

This is my take on it as well.

I've refactored this to use classes, so it's ready for a code review 👍

youknowriad

This seesm to be in a good shape. I left some minor comments.

youknowriad · 2019-07-04T10:28:03Z

packages/block-library/src/table/block.json

+						"align": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "data-align"


Interesting. since it applied as a class, makes me wonder if at some point, we'd want "classNames" sources. That said, it can be complex and I know it's a deliberate decision to restrict the number of sources available. css @aduth

Yeah, I think we'd considered once before a source serialized as the presence of a class name. Personally I don't have much of an issue with the data- attributes; they can be styled just as well, are a bit easier to parse, and fit well as serving the purpose of a data attribute.

Custom data attributes are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements.

https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

That being said, I'm not really sure why we bother to serialize this in the HTML at all, if we're not using it for anything like styling? Why not just embed it within the comment delimiters (i.e. omit source)?

@aduth As this attribute is in a query, my understanding is that source can't be omitted. A classNames source could be useful in this use case.

An argument against data- attributes is that it's double storing data, but then it's not too much of a problem with the reactive nature of blocks, it's not like there's extra business logic to keep them in sync.

Why use the class at all? Can we not just use the data attribute?

There are some global styles for text alignment:

gutenberg/packages/block-library/src/style.scss

Lines 150 to 161 in 4ac7dc9

// Text alignments.

.has-text-align-center {

text-align: center;

}

.has-text-align-left {

text-align: left;

}

.has-text-align-right {

text-align: right;

}

Seems better to be able to use those and not have extra styles in the table block.

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

packages/block-library/src/table/style.scss

ellatrix

I have some strong opinion about the user experience of this, sorry.

We should only allow table cells to be left- or right-aligned. The button can be a simple toggle. Center alignment in tables doesn't make so much sense. What kind of data will you align like that? The general rule of thumb is that textual data should be left-aligned, and numerical data should be right-aligned.
Another table "rule" is that each column should have the same alignment. This not only looks better, it easier for the user to align the entire column at once.

mtias · 2019-07-05T09:16:20Z

I think center alignment can be perfectly fine in some cases, and we should not dictate that. However, I think that single cell alignment is a bit excessive. I'd rather have a text alignment toolbar button that applies to the whole table at once (since columns is a bit more complicated).

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

ellatrix · 2019-07-30T08:12:21Z

packages/block-library/src/table/state.js

+ *
+ * @return {boolean} True if the cell is selected, false otherwise.
+ */
+export function isCellSelected( cellLocation, selection ) {


Why not have isCellSelected and isColumnSelected?

isColumnSelected would only be used in one place, so it seems unnecessary at this stage to have two separate functions.

I'm exploring this more in #16493, where I do have separate functions for different types of selections as well as the same isCellSelected for easily checking whether a given cell is in any type of selection:

gutenberg/packages/block-library/src/table/state.js

Lines 221 to 244 in ec1aa43

/**

* Determines if a cell is selected.

*

* @param {Object} cellLocation The cell to check.

* @param {Object} selection The selection data.

*

* @return {boolean} True if the cell is within a selection, false otherwise.

*/

export function isCellSelected( cellLocation, selection ) {

if ( ! cellLocation || ! selection ) {

return false;

}

switch ( selection.type ) {

case 'cell':

return hasSingleCellSelection( cellLocation, selection );

case 'table':

return true;

case 'row':

return hasRowSelection( cellLocation, selection );

case 'column':

return hasColumnSelection( cellLocation, selection );

}

}

It'll be an easy refactor from this to that.

That's fine, but then I wouldn't call it isCellSelected? That's misleading if you're checking if a column is selected. isCellSelected( ..., 'column' ) doesn't make sense?

Hmm, yeah, that's good feedback. I can work on a few naming improvements in future PRs as this functionality develops. Something like isCellWithinSelection might be more appropriate.

Thanks for the reviews btw!

packages/block-library/src/table/state.js

ellatrix · 2019-07-30T08:14:57Z

packages/block-library/src/table/state.js

-				} ) ),
+				cells: times( cellCount, ( index ) => {
+					const firstCellInColumn = get( firstRow, [ 'cells', index ], {} );
+					const inheritedAttributes = pick( firstCellInColumn, INHERITED_COLUMN_ATTRIBUTES );


Why is alignment inherited?

When adding a new row, the newly added cells will keep the same alignment as the rest of their adjacent column.

As already mentioned elsewhere in this PR, it seems like all cells in a column should have the same alignment, so this maintains that experience for the user. In my testing it felt like the right way to go.

Sounds good

ellatrix · 2019-07-30T08:22:11Z

packages/block-library/src/table/state.js

 	rowIndex,
 	columnIndex,
-	content,
+	attributeName,


I think this would read better if attributeName is a separate argument. E.g. getCellAttribute( state, 'align', cell ).

Agreed it could be improved. I've changed it to getCellAttribute( state, cell, 'align' ).

Great! It seems like a good idea to keep cellLocation as a separate entity. Could this object be documented somewhere to the type can be used in the docs of all these functions?

ellatrix · 2019-07-30T08:23:38Z

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

+		setAttributes( updateSelectedCell(
+			attributes,
+			selectedCell,
+			( cellAttributes ) => ( { ...cellAttributes, content } ),


Why do we need a callback here? Can this not be done directly by updateSelectedCell?

It might be overkill, but I feel it's a more useful API. Being able to read the cell's attributes provides an opportunity for doing things like toggling values or incrementing/decrementing values when updating them.

paaljoachim · 2019-07-30T10:35:56Z

I assume one can then multi select cells in a column and have all of them align in one go.

Fix block.json attributes Add cell alignment to save function Add tests for table cell alignment Tidy up test comments Update JSDocs for new functions Add unit tests Use classnames for cell alignment Use shorthand property Remove alignment styles in favour of global styles Update copy of alignment buttons Rework cell selection border to use an actual border around a pseudoelement instead of box-shadow

Add jsdocs Inherit the alignment property of the first cell in the column when adding new rows Update e2e tests Use consistent letter casing

Update params of getCellAttribute function Do nothing if insertRows is unable to determine the correct cellCount for the insertion

talldan · 2019-07-31T06:42:41Z

I assume one can then multi select cells in a column and have all of them align in one go.

@paaljoachim Sort of, the table still only has cell-based selection, but alignments apply to the column that the selected cell is in.

ellatrix · 2019-07-31T08:05:21Z

packages/e2e-tests/specs/blocks/table.test.js

+ */
+async function changeCellAlignment( align ) {
+	await clickBlockToolbarButton( 'Change column alignment' );
+	const alignButton = await page.$x( `//button[text()='Align Column ${ capitalize( align ) }']` );


Can the clickButton utility function be used here?

Genuinely didn't know that existed. Will do a follow up PR to tidy up the tests.

ellatrix · 2019-07-31T08:06:46Z

packages/e2e-tests/specs/blocks/table.test.js

+		await page.keyboard.type( '4' );
+
+		// Create the table.
+		const [ createButton ] = await page.$x( createButtonSelector );


Also here, could clickButton be used?

* Initial step at adding alignment options in table block edit component Fix block.json attributes Add cell alignment to save function Add tests for table cell alignment Tidy up test comments Update JSDocs for new functions Add unit tests Use classnames for cell alignment Use shorthand property Remove alignment styles in favour of global styles Update copy of alignment buttons Rework cell selection border to use an actual border around a pseudoelement instead of box-shadow * Make cell alignment work across columns instead of individual cells Add jsdocs Inherit the alignment property of the first cell in the column when adding new rows Update e2e tests Use consistent letter casing * Address review feedback Update params of getCellAttribute function Do nothing if insertRows is unable to determine the correct cellCount for the insertion

talldan added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Block] Table Affects the Table Block labels Jun 12, 2019

talldan requested review from aduth, ajitbohra, gziolo, jorgefilipecosta, nerrad, notnownikki, ntwb, Soean and youknowriad as code owners June 12, 2019 08:43

talldan self-assigned this Jun 12, 2019

talldan mentioned this pull request Jun 12, 2019

Table block: Text alignment (none, left, center, right) #15823

Closed

talldan force-pushed the add/table-block-cell-alignment branch from 63a55e4 to 61f19ed Compare June 12, 2019 09:41

mapk removed the Needs Design Feedback Needs general design feedback. label Jun 15, 2019

talldan added the [Status] In Progress Tracking issues with work in progress label Jun 17, 2019

mtias added this to the Gutenberg 6.1 milestone Jun 25, 2019

mapk mentioned this pull request Jun 26, 2019

Table block: Allow selection of entire rows and columns #16294

Open

talldan force-pushed the add/table-block-cell-alignment branch from 61f19ed to 7fdde45 Compare June 27, 2019 12:51

talldan removed the [Status] In Progress Tracking issues with work in progress label Jun 27, 2019

talldan force-pushed the add/table-block-cell-alignment branch from 7fdde45 to e4cdc2f Compare July 1, 2019 16:41

youknowriad reviewed Jul 4, 2019

View reviewed changes

ellatrix requested changes Jul 5, 2019

View reviewed changes

gziolo removed this from the Gutenberg 6.3 milestone Jul 30, 2019

ellatrix reviewed Jul 30, 2019

View reviewed changes

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

ellatrix reviewed Jul 30, 2019

View reviewed changes

packages/block-library/src/table/state.js Outdated Show resolved Hide resolved

ellatrix reviewed Jul 30, 2019

View reviewed changes

packages/block-library/src/table/state.js Outdated Show resolved Hide resolved

ellatrix reviewed Jul 30, 2019

View reviewed changes

talldan force-pushed the add/table-block-cell-alignment branch from 72a11ec to 1dc0a87 Compare July 31, 2019 05:46

talldan added 3 commits July 31, 2019 13:48

Make cell alignment work across columns instead of individual cells

37a4e06

Add jsdocs Inherit the alignment property of the first cell in the column when adding new rows Update e2e tests Use consistent letter casing

Address review feedback

f00dd4e

Update params of getCellAttribute function Do nothing if insertRows is unable to determine the correct cellCount for the insertion

talldan force-pushed the add/table-block-cell-alignment branch from 1dc0a87 to f00dd4e Compare July 31, 2019 05:49

talldan requested a review from ellatrix July 31, 2019 07:07

ellatrix reviewed Jul 31, 2019

View reviewed changes

ellatrix approved these changes Jul 31, 2019

View reviewed changes

talldan merged commit c59cda8 into master Jul 31, 2019

talldan deleted the add/table-block-cell-alignment branch July 31, 2019 08:35

talldan added this to the Gutenberg 6.3 milestone Aug 1, 2019

talldan mentioned this pull request Aug 2, 2019

Improve code quality of table e2e tests #16872

Merged

5 tasks

snyk-io bot mentioned this pull request Aug 13, 2024

[Snyk] Upgrade @wordpress/element from 5.28.0 to 6.3.0 Playgirlkaybraz11/wp-xeet#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add table block column alignment #16111

Add table block column alignment #16111

talldan commented Jun 12, 2019 •

edited

Loading

mapk commented Jun 15, 2019

talldan commented Jun 17, 2019

mtias commented Jun 25, 2019

mapk commented Jun 26, 2019

talldan commented Jun 27, 2019 •

edited

Loading

youknowriad left a comment •

edited

Loading

youknowriad Jul 4, 2019

aduth Jul 9, 2019

talldan Jul 12, 2019

ellatrix Jul 30, 2019

talldan Jul 30, 2019

ellatrix left a comment

mtias commented Jul 5, 2019

ellatrix Jul 30, 2019

talldan Jul 30, 2019 •

edited

Loading

ellatrix Jul 31, 2019

talldan Jul 31, 2019

ellatrix Jul 30, 2019

talldan Jul 30, 2019 •

edited

Loading

ellatrix Jul 31, 2019

ellatrix Jul 30, 2019

talldan Jul 31, 2019

ellatrix Jul 31, 2019

ellatrix Jul 30, 2019

talldan Jul 30, 2019

paaljoachim commented Jul 30, 2019

talldan commented Jul 31, 2019 •

edited

Loading

ellatrix Jul 31, 2019

talldan Jul 31, 2019

ellatrix Jul 31, 2019

	// Text alignments.
	.has-text-align-center {
	text-align: center;
	}

	.has-text-align-left {
	text-align: left;
	}

	.has-text-align-right {
	text-align: right;
	}

	/**
	* Determines if a cell is selected.
	*
	* @param {Object} cellLocation The cell to check.
	* @param {Object} selection The selection data.
	*
	* @return {boolean} True if the cell is within a selection, false otherwise.
	*/
	export function isCellSelected( cellLocation, selection ) {
	if ( ! cellLocation \|\| ! selection ) {
	return false;
	}

	switch ( selection.type ) {
	case 'cell':
	return hasSingleCellSelection( cellLocation, selection );
	case 'table':
	return true;
	case 'row':
	return hasRowSelection( cellLocation, selection );
	case 'column':
	return hasColumnSelection( cellLocation, selection );
	}
	}

Add table block column alignment #16111

Add table block column alignment #16111

Conversation

talldan commented Jun 12, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

mapk commented Jun 15, 2019

talldan commented Jun 17, 2019

mtias commented Jun 25, 2019

mapk commented Jun 26, 2019

talldan commented Jun 27, 2019 • edited Loading

youknowriad left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix left a comment

Choose a reason for hiding this comment

mtias commented Jul 5, 2019

Choose a reason for hiding this comment

talldan Jul 30, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Jul 30, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paaljoachim commented Jul 30, 2019

talldan commented Jul 31, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Jun 12, 2019 •

edited

Loading

talldan commented Jun 27, 2019 •

edited

Loading

youknowriad left a comment •

edited

Loading

talldan Jul 30, 2019 •

edited

Loading

talldan Jul 30, 2019 •

edited

Loading

talldan commented Jul 31, 2019 •

edited

Loading