Connect with us

How To Insert Line Break In New WordPress Block Editor

How To Insert Line Break In New WordPress Block Editor

Blogging

How To Insert Line Break In New WordPress Block Editor

(Last Updated On: October 18, 2021)

Are you using the new and feature-rich Advanced WordPress Block Editor, but struggling to insert Line Break (<br>) or White Space after blocks such as “<ul>”, “<li>”, “Image”, etc? You’re in the right place.

In this tutorial we will guide you step-by-step to how to insert Line Breaks or White Spaces in the new WordPress Block Editor using the “Spacer” block.

Line Break separates one piece of line or content with the other which leads to better page-experience for website visitors. People tend to stay on those pages which provide good page experience that ultimately improves the page rankings in search engines.

In the Classic WordPress Editor the Line Break(<br>) and Non-Breaking Space(&nbsp) would create white spaces anywhere, but they do not work in the new WordPress Block Editor, instead you can use the block called “Spacer”.

In the WordPress Block Editor when you press “Enter” it only inserts the space between Paragraphs(<p></p>), but when you want to insert white space in other places “Enter” or “Shift” + “Enter” does not work, so in that case means where “Enter” does not work you can use the “Spacer” block.

The “Spacer” also provides you the feature to adjust the height of White Space. You can set a height of your choice.

Follow the steps to insert “Spacer” in the WordPress Block Editor:

  • Move your cursor to the end of the text after which you want to insert white space. If you want to insert “Spacer” below an image select the image and hover over it, you will see the Add Block(+) icon there.
Insert Line break in WordPress Block Editor 1
  • Click the “+” Icon located at the top-left corner of WordPress Editor.
Insert Line break in WordPress Block Editor 2
  • Under the “Design” section click “Spacer” icon. You can find it from Search Bar as well.
Insert Line break in WordPress Block Editor 3
  • Here you can see that the “Spacer” has been inserted, we have set its height of 18px. You can increase and decrease its height. To edit or delete the “Spacer” click on the white space where you had inserted. The “Spacer” hides when you click somewhere else in the Editor.
Insert Line break in WordPress Block Editor 4
  • This is the HTML code of the “Spacer”. We are showing this just for the information purpose.
Insert Line break in WordPress Block Editor 5
  • Here is the output. The white space shown in the blue area is the normal space between paragraphs which is created when you press the “Enter”. The white spaces shown in the red areas are the spaces created by the “Spacer”.
Insert Line break in WordPress Block Editor 6
  • You can Copy and Duplicate the “Spacer” as well. Select the Spacer and click the “Options” icon.
Insert Line Break In New WordPress Block Editor 7

So it was all about inserting white spaces in the WordPress Block Editor using the “Spacer” block. If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

Affordable WordPress themes

Also Read

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

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

More in Blogging

To Top