Inline Justify text not reflected in editor

[pauljacobson]

Update 2023-04-05 - This issue was closed as completed on Feb 26, 2021, but was reopened on Dec 25, 2022, and user reports have been steadily coming in since then. Please see my latest comment for newest triage/scrubbing notes.

---

Older notes

Update Nov 18, 2019: This is now broken only for Atomic sites on all browsers.

This is feedback on an issue I came across while testing Jetpack v7.3-alpha-9688-g91a3f01 (also happens in WPCom Simple)

This is currently broken for Simple, Jetpack and Atomic sites, but only in Firefox and only in the Editor.

Steps to reproduce

Update 2023-04-05 as previous report did not include steps, and included now-expired screenshots

1. Open page or post and add text in a paragraph block
2. Use the block's floating toolbar to Justify
3. Save the content and view the live site

What I expected

The paragraph to appear justified in the editor, and the "Justify" button in the menu to be highlighted

What happened instead

Text appears justified in the live site, but the editor does not reflect the change. The only change seen in the editor is the floating toolbar's v icon is highlighted, indicating a change has been made there.

[mattwiebe]

Firstly, underline is working fine. The red spellcheck dots seem to be obscuring it in the editor. I'm going to edit out that portion for clarity.

Secondly, the justified text is oddly broken, but only in Firefox, and only in the Editor. Having devtools open shows that the paragraph is receiving the correct inline style attribute but it's not reflected in the editor:

The same behaviour was observed on both Jetpack and WPCom Simple, which is to be expected given that both rely on the same script.

Given that this is only affecting Firefox and a little light Googling didn't turn up any results, I'm going to bump this to lower priority.

[mmtr]

According to this, it seems that the white-space: pre-wrap style is causing the issue.

[gwwar]

If this rule is coming from Gutenberg we may need to make a PR to reduce CSS specificity for this case.

[tijosh]

Another report of this via WPcom ticket #2106996-zen

Please ping me when resolved so I can follow up with the user.

[tanjoymor]

Another report here: #2145106-zen

[geekinthegirl]

One more report here: #15531608-zen

The user's going to check back in with us in a few days.

[susanjanec]

A report here 15496168-hc - in this case, the Justified option is applied to the text, but is not showing up on the user's site. Provided CSS as a workaround for now.

[smithkyle45]

I had a report of this recently in 14764602-hc

I provided CSS as a workaround. I would like to notify them of the fix when available.

[mikeicode]

Another in 15020826-hc the class is added to the text but not applied. They say it stopped working the same day 6.5 was released.

[susanjanec]

Added new GH report regarding specific issue here - #36391

[chatoxz]

Another #2398420-zen.

Fixed it with:

.has-text-align-justify{
   text-align: justify;
} 

[davipontesblog]

Here is another report, on an atomic site running Gutenberg 6.6 plugin - #2414777-zen

[hacchism]

Another report: #2415200-zen
Gave them a CSS code as a temp solution.

[ccwalburn]

This is an instance where the justified text displays correctly in the editor, but not on the front end.

The user said that it worked when they added the text, but then after they edit it, it changes to left-justified. The issue can be seen on their home page.

I added CSS as a workaround:

.has-text-align-justify{
   text-align: justify;
} 

#2471641-zen

[mikeicode]

Another in 16387878-hc I gave the CSS fix for now.

[danielbachhuber]

I wasn't able to reproduce this my Simple site with the Livro Theme:

However, I was able to reproduce the issue in the site from 5866007-zd-woothemes

My Simple site seems to have the .has-text-align-justify CSS injected into the DOM:

There doesn't appear to be any equivalent in the user's site:

[danielbachhuber]

I was able to reproduce this on my test Atomic site with the Jackson theme.

Here's where the .has-text-align-justify CSS is injected in Jetpack:

https://github.com/Automattic/jetpack/blob/210e75345653abee7954a11d3669cd56175b9ea5/projects/plugins/jetpack/modules/wpcom-block-editor/class-jetpack-wpcom-block-editor.php#L400-L407

It seems to make it into wp-block-library-inline-css:

However, it some how gets stripped off the end of the blob passed to the iframe:

Changing the priority for enqueue_block_assets doesn't seem to have an impact.

[danielbachhuber]

Somewhat related #66474 (comment)

It seems like there's a history of related issues at the intersection of wp_add_inline_style() and the <iframe> editor https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+wp_add_inline_style

[jamiepalatnik]

Encountered an issue with justify not working in editor or preview on a simple site, Varese theme.

I also tested on a simple test site with Bitácora theme active and was able to recreate this issue for a Paragraph block in a column, but justify worked when the Paragraph block was not in a column.

Chat: 41897993-hc

[tanjoymor]

Another case with Russell theme. Not working in editor, but applying the setting and updating does render it on the live site.

Chat: 33780387-hc

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes (feature powered by Jetpack plugin)

📌 FINDINGS/SCREENSHOTS/VIDEO

• Across my test sites, I'm not seeing any editor changes when using the toolbar's Justify tool:

Screenshots/Recordings

Simple Site Example: Theme Livro - Editor

Screen.Capture.on.2023-04-05.at.14-55-45.mov

Atomic Site Example: Theme Zoologist - Editor

Screen.Capture.on.2023-04-05.at.14-58-13.mp4

Self-Hosted Site Example: Theme Twenty Twenty-Three - Editor

Screen.Capture.on.2023-04-05.at.14-54-13.mp4

Self-Hosted Site Example: Theme Twenty Twenty-Three - Live Site

📌 ACTIONS

• Assigned to Cylon
• CC: @jeherve is this something Jetpack folks can/should help with?

[danielbachhuber]

@cuemarie FYI - @sejas is going to shape a Project Thread (https://github.com/Automattic/dotcom-forge/issues/1913) to 1) add the feature to Gutenberg (WordPress/gutenberg#48202), and then 2) remove the feature from Jetpack (#73455).

Unfortunately, "fixing" the problem is going to take a little effort.

[cuemarie]

Ah, thanks for the insight, @danielbachhuber !

[sejas]

I'm not able to reproduce the issue in any case. Can someone else try to reproduce it?
Here are some recordings:

Simple - Theme Livro - Working as expected on calypso and wp-admin

Simple.site.-.Theme.Livro.mp4

Atomic - Theme Zoologist - Working as expected on calypso and wp-admin

atomic-zoologist.mp4

Atomic - Theme Jackson - Working as expected on calypso and wp-admin

atomic-jackson.mp4

Self-hosted - Theme Twenty Twenty-Three - Working as expected on calypso and wp-admin

self-hosted.-.twenty.twenty.three.mp4

[cuemarie]

Thanks @sejas - It's working for me as well across all test sites. I'll go ahead and close!

📌 ACTIONS

• Closed as resolved