Recently, WordPress has gone from a Classic Editor (screenshot below) to
a Block Editor (named Gutenberg). Many tools are missing or hidden within “intuitive” features (which fail to be intuitive). Justify is still missing and can’t easily be added unless you install a plug-in which forces the Block Editor to be disabled and defaulted back to the Classic Editor.
Justified text can still be forced into your pages with a plug-in, but you’ll need to mess with many plug-ins until you find the one which works for you. Currently even TinyMCE can’t force justify with the new Block Editor. You may use straight CSS & HTML and force your page to justify, but it isn’t a WordPress approved method and will generate errors. The best method is to use the Block Editor “Additional CSS Class” feature. I have implemented this feature to justify this paragraph. Keep reading to learn more.
Click on the paragraph you wish to customize and look to the right of your screen for the settings side. Click Advanced to expand the section. Type in the name of your new class. I’ve typed “justify”. Next, you’ll need to add some custom CSS to your Theme (this custom CSS will be lost if you change your Theme). You can do this in Appearance/Customize. You’ll notice that I also made this class turn any justified paragraph green.
You can switch between HTML and Visual modes by clicking the 3 dots and choosing the correct menu item. The image below shows how the justify class has been implemented into my HTML. NOTE: You most likely will NOT see the justification or the color in Block Editing mode. You can, however, preview your page. Look for the button in the upper right of your screen.
You may have noticed that only one paragraph in this post was justified. You must apply your new “Additional CSS Class” to every paragraph. I understand there is a way to add reusable blocks. I’ll explore that in my next post.