Fix table block alignment

[talldan]

Description

Fixes #9778 - alignment styles not working as expected for the table block.

There were a few issues:

1. Table blocks generally default to 100%, so floating/centering might not have an effect
2. .alignleft and .alignright classes were setting the table element to display: inline - we've established on other PRs that its a bad idea to override the display property of the table block, as it tends to cause other table specific css properties to stop working (like table-layout: fixed).
3. Similarly, .aligncenter was setting the table element to display: block.
4. A block level rule sets text-align: center when content is centered, but causes text in cells to be centered instead of the entire table.

Fixes:

1. When the table block is floated or centered, use width: auto; so that the table's width collapses to that of its content.
2. Override the display property for the table block when aligned so that it's always table.
3. In the editor, add some specific styles for centering the table using margin: 0 auto so that it replicates what the user sees when viewing the post.
4. Set text-align: initial for a centered table block.

How has this been tested?

• Manual testing

Screenshots

Left alignment


Center alignment


Right alignment

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

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

[jasmussen]

Nice!