Justify

Hey @easynt

I’ve re-check this, and it seems to work fine for me. Here’s a quick screencast to show you.
https://share.getcloudapp.com/o0uR14KJ

I guess that has to do with one of your installed plugins or the theme you are using. I advise you to check by disabling all other plugins and changing your theme to test.

Let me know.

Hi there Munir,

Thanks for looking into it. I tried disabling all plugins, I changed the theme to twentytwentytwo, still the same. I figured out what’s the cause, but I don’t see how to prevent it.

A block paragraph in the back end looks something like this:

<p role="document" aria-multiline="true" aria-label="Paragraph block" class="block-editor-rich-text__editable block-editor-block-list__block wp-block has-text-align-justify is-selected wp-block-paragraph rich-text" id="block-f826f922-1633-46ae-94bb-ab7e73c58c29" tabindex="0" data-block="f826f922-1633-46ae-94bb-ab7e73c58c29" data-type="core/paragraph" data-title="Paragraph" data-empty="false" contenteditable="true" style="white-space: pre-wrap; min-width: 1px;">

Now what’s causing the justify to not happen is this part at the end:

style="white-space: pre-wrap; min-width: 1px;"

Somehow the extra style part prevents the justify from happening. It seems this is coming from Word Press (5.93) itself. How does the code on a block paragraph look like on your version of the screencast?

Any ideas what I could do?

Thanks, Juerg

Hey @easynt

I don’t think those styles are added by WP 5.9.3 by default. Here’s another screencast on a fresh WP install with EditorsKit enabled.

https://share.getcloudapp.com/Bluo6L59

I would advise you to test this on a new page as the content on the current page may have been manipulated already by some other plugin.

Let me know.

Hi there Munir,

Thanks again for your response. It took me a while, but I was finally able to track down where this

style="white-space: pre-wrap; min-width: 1px;"

is coming from. It is actually from a WordPress-included JavaScript, /wp-includes/js/dist/rich-text.js:

3778 const whiteSpace = 'pre-wrap';
3779 /**
3780  * A minimum width of 1px will prevent the rich text container from collapsing
3781  * to 0 width and hiding the caret. This is useful for inline containers.
3782  */
3783 
3784 const minWidth = '1px';
3785 function useDefaultStyle() {
3786   return (0,external_wp_element_namespaceObject.useCallback)(element => {
3787     if (!element) return;
3788     element.style.whiteSpace = whiteSpace;
3789     element.style.minWidth = minWidth;
3790   }, []);
3791 }

Actually it’s mimimized form is used, /wp-includes/js/dist/rich-text.min.js. If I remove the contents ‘pre-wrap’ and ‘1px’ from there, everything is fine and justify works in the editor. I don’t know why this is not the case in your screencasts, though. But it’s clearly coming from this JavaScript from WordPress itself. One probably has to dig a little deeper to find out what this JavaScript is intended for and why it’s fireing here and not in your screencasts…