Overview
We will share the steps to Justify Text in WordPress Gutenberg through this article. We will not add fancy text or exciting story around this article and will keep it brief.
Prerequisites
Applies only to sites hosted on WordPress.com
These steps need Custom CSS Options available which are features of WordPress.Com Premium and Business Plans. If you haven’t already brought the WordPress.Com Premium and Business Plan, you should consider one in order to gain more flexibility with your WordPress.com Site/Blog.
Good to have Knowledge
If you follow the steps as directed, you should be good to go.
Steps to Justify Text in WordPress Gutenberg
- Add text block using the WordPress Gutenberg
- Now add a custom class name under Advanced section (Found in the block settings. (in this case, we have added justify as a CSS class)
Where to put the Custom CSS code in WordPress?
p.justify {
text-align: justify;
}
Save the Post/Page and view it in the frontend. We hope you find this procedure of justifying text in Gutenberg helpful.
In case you want to justify all the paragraph/text blocks, use the following code. In this case, you do not need to add any custom class to the Gutenberg blocks.
p {
text-align: justify;
}
We are certain Justify option will soon be available in WordPress Gutenberg, however, in the meantime, you can use this to keep up with your articles.
We hope you find this article useful. In case you are stuck and or need help, feel free to drop a comment below or submit your question. Do share it further and add your feedback about the article in the comments section.
Hi…could you please elaborate, where/how to locate the CSS section
nevermind I found it LOL…did’nt have my coffee before…LOL…thanks anyway great tip….it worked beautifully…
Happy to hear that, let me know if you need any further assistance.
Have a lovely day!
Hello Syed,
Thank you for your tip. It works beautifully.
It works in paragraph but not for bullet points line. Should I change anything?
Giri
Thank you for the feedback. Try
li {
TEXT-ALIGN: justify;
}
It will work for both ordered and unordered lists.
Let me know how it goes.
Thank You Syed for your kind help. Its working as requested. Superb 🙂 .
Hello Syed,
Me again 🙂 . If I selected ‘verse’ in the block, The lines are not coming in to Justify like others. Is it possible to set Justify for Verse too?
It should work with no issues. In case you see it behaving differently, just drop me the link of the page and I can write something for you.
Hello Syed Thanks for your reply.
https://www.giriblog.com/grammarly/ In this link you can see Verse (green lines part) is not in justify format. Logically it should be in justify. I’m not sure why it’s not.
It’s not a BIG problem for me since you already helped me the major part but if you have solution for this too then will be happy 🙂 .
Dear Giriraj,
You may try the following Custom CSS
pre.wp-block-verse {
text-align: justify;
}
Let me know how it goes.
Hello Syed,
Thank you for your help. It’s working fine 🙂 .
I’m using Newspaper theme, and it suggested me to remove “pre” and showed exclamation mark.
So I removed pre and the alert message gone, but both codes are working. FYI
You are helping me a lot. Thank you Syed for your time.
Giri