How to style and split the text in the post title of the Gutenberg editor

I will show how to split the text row through using HTML code. I will also show how to style the text in the post title.

Here is a video I made showing how to create line breaks in a Gutenberg post title. Written information is just below the video.

Adding BR and styling HTML tags

Styling and Break Row in a Gutenberg Post title
Styling and Break Row in a Gutenberg Post title.

A client told me that in the old Classic Editor he could add a BR break row to adjust the post title.
I tried through the Gutenberg post title but it added the code as part of the title.

Adding BR and styling HTML tags in the Gutenberg Code Editor

I went into the Gutenberg option screen. Top right I clicked the 3 dots and selected the Code Editor in the drop down. There I could add code. As can be seen in this screenshot where I added br and strong HTML tags to shape the post title text.

Break Row and styling of Post titles through the Gutenberg Code Editor.
Styling and Break Row in a Gutenberg Post title

I also used the All Posts Screen Quick Edit option to add BR and other HTML tags to shape the title.

The All Posts screen. Hovering a title and clicking Quick Edit and then styling the title.
The All Posts screen. Hovering a title and clicking Quick Edit and then styling the title.

Resources:
https://www.w3schools.com/TAGS/tag_br.asp
https://www.w3schools.com/html/html_formatting.asp

https://github.com/WordPress/gutenberg/issues/20320
https://www.facebook.com/groups/theadminbar/posts/3962491027333106/

Share the article:

Leave a Reply

Your email address will not be published. Required fields are marked *