Add table cell text alignment options to table block toolbar

[SymbolicallyMe]

Description

This PR addresses #6699 which requested that the left, center and right text alignment control be added to the table block toolbar.

How has this been tested?

This solution was tested using the following steps:

1. Create a new page and add a Table block.
2. Add text to each of the four initial table cells.
3. Locate the new text alignment controls in the toolbar and adjust the alignment of text in all four cells.
4. Ensure that selecting the same text alignment control, twice or more times in a row, toggles both the highlight of that specific control in the toolbar and the value of the table cell's CSS text-align property.
5. Ensure that each adjustment of text alignment creates an undo level for the TinyMCE instance by checking changes that occur when pressing the Undo and Redo action buttons.
6. Ensure that all text alignment changes save correctly by previewing the page.

Screenshot

Types of changes

Added dependencies:
In order to have functioning text alignment controls for the Table block, the following dependencies were added:

• External: Lodash's find function
• WordPress: AlignmentToolbar
• Internal: domToFormat function from the rich-text editor component group.

Added TinyMCE event handler:
A nodechange TinyMCE event handler was added within the handleSetup method of the table-block component in order to update the alignment toolbar to match the CSS text-align property of the table cell that is being focused.

Added new method to the Table block:
The textAlign method was added to the table-block component to serve as the onChange callback function for the AlignmentToolbar component. This allows us to update the focused table cell's text alignment when the user clicks on either the left, center or right text alignment control.

This was tested in:

• WordPress 4.9.6
• Gutenberg 2.9.2
• Apache/PHP 7.1.16
• MySQL 5.7.22

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[nfmohit]

I believe you'll want to move the alignment setting from the block toolbar to the sidebar, because that long toolbar might not fit in mobile devices.

[ZebulanStanphill]

Yeah, the block alignment toolbar should be moved to the inspector/sidebar. Having both it and the text alignment options in the toolbar make it too long for mobile.

[SymbolicallyMe]

@nfmohit-wpmudev @SuperGeniusZeb The block alignment toolbar was moved to the inspector sidebar.

It would be nice to have all related toolbar controls in the same area for desktop and mobile. Seems like the toolbar container would have to allow controls to wrap to the next line, sort of how the Classic block controls works.

[aduth]

Is it likely this will be resumed, or can it be closed? Or is it needing a fresh review?

[aduth]

Closing as stale without response. It can be reopened if development is expected to continue, or a new pull request can be submitted.

[MrSwed]

in WP 5.2,4 there is no way to align cell content

how to can align cell content in WP 5.2.4 ?