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

Enhancement: Add text alignment options to verse block toolbar #6700

Merged
merged 2 commits into from May 23, 2018

Conversation

Projects
None yet
5 participants
@nfmohit-wpmudev
Contributor

nfmohit-wpmudev commented May 11, 2018

Description

This PR addresses #6695 which requested a text alignment option (left/centre/right) in the verse block as we can see in the heading/paragraph/subhead and other blocks.

How has this been tested?

This PR has been tested by adding a "Verse" block in Gutenberg editor and locating the alignment settings of the block in the block toolbar. It was also made sure that the alignment settings were correctly saved and rendered in the front-end. This was tested in WP 4.9.5, Gutenberg 2.8.0, Apache server with PHP 7.2.0 and MySQL 5.6.34. According to initial tests, the code doesn’t seem to affect any other areas.

Screenshots

gutenberg-6695-min

Types of changes

This PR imports the dependencies required for the verse block toolbar and text alignment options ( i.e. Fragment, BlockControls and AlignmentToolbar ), adds the align attributes in the edit and save functions and lastly outputs the block toolbar.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
@@ -29,6 +34,9 @@ export const settings = {
source: 'children',
selector: 'pre',
},
align: {

This comment has been minimized.

@jorgefilipecosta

jorgefilipecosta May 15, 2018

Member

Hi @nfmohit, thank you for your contribution!
The changes look good from the code point of view.
I'm not sure if other people agree with this thought, but in my option, this attribute should be named textAlign. Align attribute is used by the block align hook (supports: align) and maybe in the future we want to add block alignment here so using textAlign attribute we would have the door open to that :)

This comment has been minimized.

@nfmohit-wpmudev

nfmohit-wpmudev May 16, 2018

Contributor

Thank you for reviewing this @jorgefilipecosta! I've added a new commit which changes align to textAlign.

I can see the other core blocks like header, subhead, paragraph etc. blocks are still using the align attribute for text alignment. Do you think they should be updated to textAlign for consistency? Let me know if I should open a new issue for that and submit a PR.

Thank you!

This comment has been minimized.

@jorgefilipecosta

jorgefilipecosta May 23, 2018

Member

Hi @nfmohit-wpmudev thank you for updating the code. I don't think the other blocks should be updated as it would evolve creating migrations and deprecations. If one day the need arises to use supports align in one of the other blocks we will change the attribute and add the migration.

@jorgefilipecosta

This comment has been minimized.

Member

jorgefilipecosta commented May 23, 2018

From the code point of view, things look and test well to me 👍
@karmatosed would it be possible to have a check on the Design/UX?

@karmatosed karmatosed self-requested a review May 23, 2018

@karmatosed

Thanks for this PR. I am going to approve based on design, looks like we have a code review already so let's get this in!

@karmatosed karmatosed merged commit f145991 into WordPress:master May 23, 2018

2 checks passed

codecov/project 46.25% (+<.01%) compared to 165067f
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@mtias mtias added this to the 3.0 milestone Jun 4, 2018

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