How To Format Blocks In Your Post Using Gutenberg for WordPress

For the past few weeks, I've been sharing some quick and dirty tutorials on how to use the new Gutenberg interface for WordPress: how to create posts and pages , how to add lists and how-tos, and how to incorporate widgets and embeds. If you've been blogging using WordPress up until now, then you've been using the WYSIWYG (What You See Is What You Get) Classic Editor and Gutenberg will feel very different.

You can see more Gutenberg tutorials here.

WordPress is forcing a roll out of the Gutenberg Editor on November 19th – so, you might as well learn to use it. Today, I'm showing you how to use format blocks within your post in Gutenberg.

Here's how to format blocks in your posts in #Gutenberg for #WordPress. #blogging

How To Format Blocks In Your Post Using Gutenberg for WordPress

Be sure to take a moment and install the Gutenberg plug-in editor. Here's how to format blocks in your posts in Gutenberg for WordPress.

How To Edit Or Create A Post Using The Classic Editor

Log in to your WordPress blog.

Click on “Posts” in your WordPress dashboard.

Click on “Add New”. You should see the Gutenberg Editor.

Write your blog post’s title in the box labeled “Add Title”.

Write your post in the box labeled “Add Text or Type / To Add Content” in your Gutenberg Editor.

Now you can opt to create or edit your post using the Classic Editor.

To edit/create your blog post using the Classic Editor, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Big Fat Tip: You can also create new blocks by clicking on the  
“+” in the upper left hand corner. There's also some  “Undo” and “Redo” arrows there. Plus, an icon of an “i” with tons of information including: a word count, number of headings, number of paragraphs, number of blocks, and a breakdown of your title and headers.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that looks like a keyboard (Classic). When you add this, it will create a block with the old WYSIWYG editor toolbar and you'll be able to edit or create a post within that Classic Editor block.

Big Fat Tip: You can also edit any existing block using HTML by clicking on the three dots in the upper right hand corner and selecting the “Edit in HTML” option.

How To Create A Preformatted Post

To create a blog post using the Preformatted post feature, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that looks like a keyboard (Preformatted). When you add this, you'll be able to create a post using predetermined spacing and tabs. You'll also be able to add styling.

How To Create A Post Using HTML

To create a blog post using HTML, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that says H T M L (Custom HTML). When you add this, you'll be able to create a post using HTML (Hypertext Markup Language) code.

The block will allow you to create a post using HTML (under the “HTML” tab). You will also be able to select the “Preview” tab to see your post visually.

How To Create A Pullquote In Your Post

To create a blog post using the Pullquote feature, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that looks like a rectangle with lines on the top and bottom (Pullquote). When you add this, you'll be able to create a pullquote by typing in your text or copying and pasting it. There is a spot for adding a citation.

Make changes to the pullquote's look under “Styling” in the right sidebar. You can also change the main color and text color in the right sidebar.

How To Add Code Within Your Post

To create a bit of code within it's own block in your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that looks like angled brackets (Code). When you add this, you'll be able to add a single block of code to your post (like adding tracking code in a sponsored post).

How To Add A Table Within Your Post

To create a bit of code within it's own block in your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that looks like a table (Table). When you add this, you'll be able to create a table with how ever many columns and rows you'd like. Then, click the red “Create” button and the table will appear.

Click on each section of the table to add text.

Use the block's toolbar to change the alignment and add or remove columns and rows.

Make changes to the table's look under “Styling” in the right sidebar. You can also change the Table Settings (use the toggle to turn the “Fixed width table cells” on or off) in the right sidebar.

How To Add A Verse Within Your Post

To create a bit of code within it's own block in your post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the Formatting option or scroll down and click on the arrow next to the Formatting option. This will open up icons representing all of the options available to you for this option.

Under the Formatting menu, click on the icon that looks like a pencil (Verse). When you add this, you'll be able to create a verse (poem, haiku, whatever) but typing or copying and pasting your text into the block.

8 Shares