Getwid Blocks Review

Introduction

I’ve been asked by several people to review the Getwid addon for Gutenberg. Getwid is created by MotoPress. They make a well respected booking plugin, so I wanted to take a look at their Gutenberg blocks addon.

Getwid is free and has no premium version at this time. The Getwid plugin has more than 20,000 active installs and a five star rating. I also see that the support team is active on WordPress.org.

I installed Getwid on a site that I’ve been using for Gutenberg testing. I used the FakerPress plugin to add a bunch of posts and have a Books Custom Post Type that I created using CPT-UI and Advanced Custom Fields. The free Kadence theme is the active theme.

Video Version

Settings Area

When you active Getwid there are a number of settings added in the Admin, under the Settings, Writing menu. From time to time I’ve seen other plugins put their settings here and I think it makes sense when it is just one or two settings that don’t warrant an entire page of their own. However, this is a bit of an unusual place for a block addon with a fair number of settings.

You can set the default section content width, add tokens / keys for third party services, and disable blocks individually. I think that being able to disable features you don’t intend to use is a quality option because it helps to keep the block list manageable.

A Look At The Blocks

The List of Blocks and Their Icons

Common Blocks

First, here is a look at some of the more common blocks.

Container and Column Blocks

The first thing I wanted to check was the container and column blocks. I believe that they are key to being able to create page builder like layouts in Gutenberg. Getwid comes with a Section Block. I added it to a page. When you first add it you get a dialog to select one of three layout options which you can find out what they do by hovering the mouse over each one: the first is wide with fixed content, the middle one is wide with content full width, and the last is full screen with content fixed. Fixed in this context means boxed. This puzzled me at first because I wondered, “what about a section that just fit in the content area without going wide or full width”? The “Skip” link in the lower corner does that.

When you click Skip or click away, you get a regular container block. The buttons on the block bar allow you to adjust the block width and set the alignment of the content area. The selected button near the right end is a toggle for showing guidelines.

Guidelines is a nice feature that shows, when you click into the block, the margin and padding. You can adjust those by clicking into the colored area and dragging, which is cool.

The settings for the Section block were fairly extensive. On the General tab you could change the width again, set the section height, section between blocks and block alignment.

The Style tab has options for a color, image, gradient, slider, or video background. You could also set an overlay and adjust the padding and margins.

On the Advanced tab you could set an animation effect, the duration and delay.

There are a good number of animations to choose from.

There is also the option to add dividers to the top and / or bottom of the section and there were a good number to select from.

The big surprise for me was that Getwid does not have any columns block. I expected to be able to select the number of columns for the section, but it is just a single content area. I checked the Getwid blocklist multiple times for a column block. Instead you just need to use the core version, which is very limited. The Section block does not have a z-index option and does not accept negative margins, so it would not be possible to create overlapping designs using just Getwid blocks.

Advanced Heading Block

It seems that every block addon has an advanced heading block. This is sadly a testament to the limited options in the core version. I added the Getwid version to a page. The first thing I noticed is that the heading was very small. Then I saw in the settings that it defaults to an HTML span tag, instead of the common H2 tag, which is the usual default. You have the ability to set the typography settings, which was very complete.

On the Style tab you can set the color and background color, as well as the margin and padding.

Advanced Spacer Block

What makes the Getwid Spacer Block advanced is that you can disable it by device size.

More Advanced or Unique Blocks

I wanted to check out some of the more unique or advance blocks.

Progress Bar Block

The Progress Bar is a nice idea. I could see using this to indicate how far along you are in a process. The bar animates when it comes into view by filling up to the value indicated in the settings. You can set the bar color and background color. There is a place for a heading or text, which I filled in for this example as “Progress So Far” in the screenshot. I didn’t see a way to adjust the size of this text, nor the size of the progress bar. As it is, it is kind of cool, but it seems a bit more limited than I’d expect.

Image Hotspot Block

Most Beaver Builder and Elementor addon packs include an image hotspot module / widget, but this is the first one I’ve seen for Gutenberg. The idea is that you put clickable markers on an image and when the user hovers the mouse or clicks on them then there is a tooltip and possibly a link.

When you add a Hotspot block to the page you get a popup similar to the one when you add an image block. You are prompted to upload or pick and image. Here I’ve added an image to the page. On the block bar there are buttons for adding a pin (the map icon), editing a pin, and duplicating one. On the right in the options panel the General tab has the option to replace the image, the image size, what triggers the tooltip, the icon picker, and positing controls.

I clicked the add marker option on the button bar and put a marker above the left most blind man. I was able to drag and drop it and then even move it around with the mouse. When you add one, or click on one already added, then you get a popup edit point window with three tabs. I gave it a title, added a URL and a description.

Here is what the result looks like when I click on the hotspot. The title becomes the link. You cannot see it in the screenshot, but by default the border around the hotspot pluses.

You can use the edit point popup to edit the markers individually, or the option panels on the right side. I changed the icon to be a map marker. The Style tab lets you choose the colors and opacity. I set the icon to blue and the background to gray.

On the Advanced panel you set the animation options.

If you don’t want to set the colors yourself then you can select a “theme”. There are also several animation options.

The Tooltip block seemed pretty complete.

Content Timeline

From the block name I expected that I was going to show posts in a published time line. However, when you add this block you get two text boxes, one on the right and one on the left. There is the place for a title over one of the content boxes.

I added a heading and text in the two boxes. When I did that I saw that there was the option to add an image. The Alignment setting switches the position of the two boxes.

I thought that maybe the image would replace the text on the right, but it added it above the title on the left.

I added two more sections by clicking the small circle plus icon. Here is the result on the front. As you scroll down the line down the middle animates to black to indicate your progress.

Custom Post Type Block

I added the Custom Post Type block to the page and by default it picked up the posts.

In the Content Settings dropdown on the right I changed the post type to Books. I also selected the Grid display option, instead of the other choice for list.

There are some sorting and filtering options.

Here are the Display options. Here you can switch between list and grid view and set spacing. There is a dropdown for Post Template, but Default is the only option. There a New button, and Getwid has a cool feature in that it allows you to create your own display template. Let’s take a look at that and see what we can do.

I clicked the New button and a new tab opened into an editor. There were some predesigned layout options showing.

I clicked the Two columns option and it showed me the layout with placeholders. The layout is using the core columns block, which is too bad as it is not very flexible.

When you are in the template editor there are some post blocks which are all placeholders.

I added the Meta block to get the post meta.

I’m not using the Tags or Comments, so I was able to just click on them and hit the delete button to remove them.

I saw that there is a Custom Field block, so I added it. There is an Advanced Custom Field for Books with the URL to the author’s website, so I added that.

Back in the editor, I clicked the Update button for the Post Template settings.

The new template showed and I picked it.

I went to preview it on the front end and saw that the featured image was too big.

I went back to the template editor. There were no custom size options, so I added a custom class to the Advanced tab.

I then went to the Customizer and added some custom CSS.

I refreshed the preview and it looked better.

One thing to note is that this custom template feature can be used with the other Getwid Post blocks, so that is something that makes those more flexible also.

Other Features

Templates

Getwid comes with some predesigned templates. You access these from the Template Library link at the top of the page.

There are a fair number of templates. There are found pages. On the first page there are full width sections.

Other templates utilize their Getwid blocks and serve as examples. Here are some using the pricing blocks.

Style Kits

The plugin has a page on Github with code snippets and instructions for developers if they want to customize the blocks.

Discussion and Conclusions

I liked that the Getwid addon has the ability to disable blocks that you don’t intend to use. Also, Getwid has some interesting blocks, like the Image Hotspot block, which was pretty full featured and a unique offering not found in many of the other addons. For me, that block was the standout block in the set. It was easy to use and had about the right number of options. The Custom Post Type block, with the ability to create a template, was pretty cool. I liked the idea, I liked that they had the placeholders and that I could pull in a custom field. However, it wasn’t quite flexible enough to use on its own. You would need to add some CSS or other tweaks to get the result you wanted. It was also nice that you could use the template with the other post listing blocks. Things like the Custom Post Type block and the Github style snippets indicate they want the plugin to be developer friendly. There are some YouTube videos, but no written documentation.

There were a fair number of things that were unusual or too limited. The placement of the plugin settings on the Writing setting page, instead of its own page, seemed odd. It is hard to distinguish the block icons from the core blocks. Those two are small things. More significant was that the Section container block doesn’t have any option for columns or settings that allow you create more advanced layouts. The limitations of the Section block means that Getwid isn’t sufficient on its own to get page builder layout features, but would need to be used with another Gutenberg addon.

I don’t think I will be using Getwid myself, but after taking a look at it I can see why it appeals to its users.