Justify Text in WordPress Gutenberg

Posted by

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

You should know a little bit of CSS or at least possess some basic understanding of the CSS to achieve this. Do not panic if you are unaware of what is CSS and how it works. We will share all the needed steps through this article to make it easy for you.

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)
Justify Text in WordPress Gutenberg
  • Now go to the CSS section under Customize under Personalize and add the following CSS code
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.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.