New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix table block alignment #10468

Merged
merged 3 commits into from Oct 10, 2018

Conversation

Projects
None yet
2 participants
@talldan
Contributor

talldan commented Oct 10, 2018

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
screen shot 2018-10-10 at 4 52 33 pm
screen shot 2018-10-10 at 4 53 39 pm
Center alignment
screen shot 2018-10-10 at 4 52 45 pm
screen shot 2018-10-10 at 4 53 27 pm
Right alignment
screen shot 2018-10-10 at 4 52 54 pm
screen shot 2018-10-10 at 4 53 13 pm

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.

@talldan talldan requested a review from jasmussen Oct 10, 2018

@talldan talldan self-assigned this Oct 10, 2018

@jasmussen

Nice!

@talldan talldan changed the title from Fix/table block text alignment to Fix table block alignment Oct 10, 2018

@talldan talldan merged commit 085a605 into master Oct 10, 2018

2 checks passed

codecov/project 49.48% remains the same compared to c0b9c05
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@talldan talldan deleted the fix/table-block-text-alignment branch Oct 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment