Enable justifying text

[normana10]

What?

Add the "Justify text" option to alignment controls

Why?

I wanted to justify text on some of my pages and was able to get it implemented, so I thought I would share (I even went and made my own SVG until I realized that the align-justify icon already exists 🤦‍♂️)

How?

Adds an option to DEFAULT_ALIGNMENT_CONTROLS as well as the corresponding CSS class (I was trying to follow .has-text-align-left around as it seems to have a bunch of references near blockquotes and vertical writing modes and I wasn't sure if .has-text-align-justify should be put there as well, feel free to let me know and I'll add them)

Testing Instructions

1. Create a paragraph block
2. Open the alignment controls
3. "Justify text" should be available and should justify the text when selected

Testing Instructions for Keyboard

"Justify text" is navigable to via the arrow keys and selectable using space like the other alignment controls

Screenshots or screencast

Thanks!

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: normana10 <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Feature] Rich Text, Needs Decision, [Package] Rich text, First-time Contributor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @normana10! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[carolinan]

Controls for justifying text has a long history in WordPress, where they have been added and removed multiple times.

There is an ongoing effort to add a text alignment block support, including justified text. Because of that I am not sure how to move forward with this pull request.
PInging @t-hamano.

[t-hamano]

Thanks for the ping!

The latest status regarding text alignment in Gutenberg is as follows:

• Try: Add new textAlign block support #59531:
  textAlignadded as block support
• Block Library: Migrate to the new textAlign block support #60763:
  We are considering migrating the textAlign attribute of existing blocks to this block support.
• Block Editor: Add new TextAlignmentControl component #60841:
  We are developing TextAlignmentControl in preparation for adding text alignment UI to the Global Styles.

What is consistent throughout these issues/PRs is that the justfy option should not be allowed at the block level. See the discussion starting with this comment.

@carolinan Do you know core tickets discussed regarding controls for justifying text? I couldn't find it 😅

[normana10]

(Sorry for the delay)

Thanks @t-hamano for all the context

Not sure I understand the hesitance of block-level justify, but I respect the decision

I'll close this PR out

In the meantime, does anyone know if there is an issue I can watch to follow progress on this set of mockups: #59531 (comment)

As I suppose that'd serve my use-case

And/or is there a JS hook I can reach into to to add justify at the block-level on my site? (I'm still somewhat new to the JS-hook side of things)

Thanks!

[t-hamano]

Hi @normana10,

Thanks for the replay.

In the meantime, does anyone know if there is an issue I can watch to follow progress on this set of mockups:

We plan to add text alignment UI to the global style UI at the following two levels.

• Block level (#60762): We plan to utilize the new TextAlignmentConrol component.
• Root level (#48202): This is currently under discussion, including available options.

And/or is there a JS hook I can reach into to to add justify at the block-level on my site? (I'm still somewhat new to the JS-hook side of things)

Via the Formatting Toolbar API, you will be able to freely add controls to the block toolbar.

By the way, WordPress.com sites already have their own Justify option implemented in the block toolbar, so you might find that code helpful as well.

https://github.com/Automattic/wp-calypso/blob/993f32e6ad1f99102620fd93dc2a47a32f62b047/apps/wpcom-block-editor/src/default/features/rich-text.js#L41-L78

[normana10]

In case anyone ever gets here from a Google search

I ultimately just put:

p {
  text-align: justify;
}

In "Additional CSS"

So all text is justified by default and you can easily override it with the normal text-alignment control

Thanks all!

[carolinan]

@carolinan Do you know core tickets discussed regarding controls for justifying text? I couldn't find it 😅

https://make.wordpress.org/core/2016/10/28/editor-changes-in-4-7/
https://core.trac.wordpress.org/ticket/27159