Using Widgets in Gutenberg for WordPress | BoldGrid
If you have any questions after reading this article, please be sure to post a comment at the bottom of the page. We're more than happy to help!

Using widgets in Gutenberg does not include all of the normal widgets found within WordPress. The widgets block include shortcode, categories, and latest posts. We will briefly discuss each widget that you can use and the options available.

Note: As of WordPress 5.0, Gutenberg has been integrated directly into the WordPress Administrator.  If you are using a separate editor for your pages and posts, you will need to select the default WordPress editor (Gutenberg) for the steps in the article below.

If you are using BoldGrid you can switch editors by doing the following:
1. Login to the WordPress Administrator
2. Click on Add New or Edit Post/Page
3. In the top right corner next the block labeled “Editor”, click on the drop-down editor indicating the editor that you’re using.  If you’re in BoldGrid, it will show Post and Page Builder.  To use the Gutenberg editor, click on WordPress editor.
4. The page will then re-load and you can start working in that editor.

Using the Widgets block – Shortcode

Shortcode is a specific snippet of code typically enclosed in square brackets used in WordPress. Shortcodes are used for macros in a post’s content that can activate various functions. To use the Shortcode block:

Click on the circled plus sign to the left of your content in order to add the block. Remember that you can easily reposition the block using the up and down arrows
Scroll down in the window that appears and find Widgets. Click on Widgets
Click on Shortcode
Click on the field to add your code
Click on Save Draft or Publish to save your changes

For more information on shortcodes, please see this WordPress Codex page on Shortcode.

Using the Widgets block – Categories

The Categories widget displays a list of your categories.
To use the Categories block:

  1. Click on the circled plus sign to the left of your content in order to add the block. Remember that you can easily reposition the block using the up and down arrows
  2. Scroll down in the window that appears and find Widgets. Click on Widgets
  3. Click on Categories
  4. Click on the alignment options to arrange how you want the Categories to appear
  5. Additionally, in the menu column at right, click on Block. If you don’t see the column at right, then click on the gear icon in the top right corner to make it appear. You will see 3 options: Display as drop down, show post counts and show hierarchy. Click on the slider to enable the item as needed.
  6. Click on Save Draft or Publish to save your changes

Using Widgets – Latest Posts

The latest posts widget simply displays your latest published posts. To use the Latest Posts block:

  1. Click on the circled plus sign to the left of your content in order to add the block. Remember that you can easily reposition the block using the up and down arrows
  2. Scroll down in the window that appears and find Widgets. Click on Widgets
  3. Click on Latest Posts
  4. Select how you want to display your posts using the options in the top left corner of the block: Align center, list view, or grid view.
  5. Additionally, in the menu column at right, click on Block. If you don’t see the column at right, then click on the gear icon in the top right corner to make it appear. You will see the following options for ordering your posts:
    Order by This option lets you order the posts by time or alphabetically
    Category You can display the posts from a specific category
    Number of items Specify the number of posts using a slider
    Display post date Click on the slider to show the post date
    Advanced Add CSS code for additional formatting needs
  6. Click on Save Draft or Publish to save your changes

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

2 thoughts on “Using Widgets in Gutenberg for WordPress

  1. Hi there,

    I need to add a table like a regular table 6×2 row col and there is literally no option for it in the boldgrid editor. Please advise as I need the following format:
    ROW
    COL 1, COL2
    In COL 2 I need:
    ROW: Text
    ROW 1: 3 Col in row
    ROW 2: 3 Col in row
    Row: Button

    • Hello Jordan-
      There’s a couple of ways you can accomplish this. If you really need a table, you can use the TinyMCE Advanced Plugin, which will add some new controls to your editor, including tables. Adding a Table using the TinyMCE Advanced Plugin Keep in mind that using tables as a layout tool isn’t considered best practice anymore. They don’t display well on mobile devices, and they may have a negative effect on your SEO. Another way to accomplish this is to use the Layouts tool in the BoldGrid Post and Page Builder. Once you add a layout, you can adjust the sizes of your blocks as well as add and delete columns. Using the Layouts Tool in the Post and Page Builder

Leave a Reply

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