How To Add Widgets and Embeds to Your Post Using Gutenberg for WordPress

Earlier this week, I shared a tutorial about how to create posts and pages in the new Gutenberg interface. If you've been blogging using WordPress for any amount of time, then you're familiar with it's WYSIWYG (What You See Is What You Get) Editor so Gutenberg is… a change. However, since WordPress will be forcing a roll out Gutenberg soon, you might as well learn to use it.

Here's how to add #widgets and #embeds to your posts in #Gutenberg for #WordPress. #blogging

If you haven't already, install and activate the Gutenberg plug-in editor. Here's how to add widgets and embeds to your posts in Gutenberg for WordPress.

How To Add A Widget To A Post

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 comes the fun part. One of the awesome things about this new interface is that it's so easy to add widgets and embeds (and other fun bits and bobs) within your post without using extra plugins or coding. It's all right there!

To add a widget within your blog post, click on the spot where you want your widget 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 are also new “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 a specific widget or scroll down the options and click on the arrow next to the widgets option. This will open up icons representing all of the widgets available to you currently.

For right now, click on the icon that looks like a list (Latest Posts). This will automatically add a widget that includes your five latest posts in text form.

You can then use the right side option to select how the posts are ordered, from what category to pull from, how many posts to display, and whether or not to include each post's publish date.

You can also use the toolbar in the block to make the links in a list form or a grid form.

Click “Publish/Update” on the right side.

How To Add An Embed To A Post

Including links within your post to some of your evergreen content is a great way to keep people on your blog and reduce your bounce rate. One great way to do that is to embed specific permalinks within your post.

Gutenberg makes this really easy to do and still pulls the post link, a featured image, and some text (just like it did in the Classic Editor). 

To add an embed within your blog post, click on the spot where you want your embed to appear. From here, there are two ways to add an embed. The first option is to click on “+” which will appear to the left or in the center top of the new block being created.

From there, scroll down the options and click on the arrow next to the embeds option. This will open up icons representing all of the embeds available to you currently. A few options are: YouTube, Twitter, Facebook, and TED.

For right now, click on the Embed icon. This will automatically add a block with a spot for you to paste a permalink. Click “Embed”.

You can use the toolbar in the block to change the alignment or edit the link.

The other way to add an embed into your post is to click on the spot where you want your embed to appear. Then, in the new block, just paste your permalink. Once the link appears, you can edit the block using the toolbar.

Click “Publish/Update” on the right side.

Big Fat Tip: As of right now, adding an embed into your post also creates this huge box around it (with a space for a caption). Unlike with images, it appears that you can't remove this big block of white space. I'm hoping that the developers address that in the next update because it's annoying.

0 Shares