gutenberg blocks

Meet Getwid: WordPress Gutenberg Blocks by MotoPress

Probably the fiercest Gutenberg blocks competition is in full swing. We are observing the rise of Gutenberg add-on plugins that are quickly growing in popularity.

However, I believe this time there is one important thing that unites all the block providers – and it’s the Gutenberg editor itself. The editing environment of Gutenberg made it much easier to combine different blocks from different companies and use them together with the core blocks, literally on one page. The matter of styling, performance and development approaches in general still differ, of course, but at least you as a WordPress user can benefit from this freedom of choice and flexibility.

Now the most interesting part! With years of crafting WordPress content building tools under the belt, MotoPress has also made its contribution!

Today we are introducing Getwid – a free Gutenberg blocks plugin that ships with the bundle of extra complex and simple blocks for all types of websites.

Before we list the blocks, let’s try to take a closer look at the plugin from different angles.

Also read: How Twenty Twenty works with Getwid

Major concepts of Getwid WordPress Blocks

When it comes to choosing a Gutenberg blocks add-on, it’s not only the number of blocks that matters. So what have we done differently? What best practices have we followed? Here are some basic principles underlying Getwid:

  • A great number of useful custom blocks (34+ blocks and counting). Of course, we’ve tried to include maximum blocks in order to make the plugin a one-stop solution for many website building purposes. However, if you lack any block, Getwid can be easily used with other third-party Gutenberg plugins and core Gutenberg WordPress blocks.
  • Multiple little tricks to handle the styling better: minified CSS in the effort to keep your website fast-loading.
  • An awesome interplay with your current WordPress theme styles.
  • Smart and flexible block configuration settings in accordance with the block purpose: more necessary configuration settings for advanced blocks, fewer settings for simple blocks.
  • Easy inline editing with tons of settings within each block.
  • November’s update! Getwid now comes with a huge collection of pre-made templates with multiple layouts crafted by our designers. That means you can start easier and build even more awesome content in Gutenberg. The colors, typography and overall styles of those templates are inherited from your WordPress theme so just click a button to insert the needed template and start replacing content!

getwid templates

Since there are lots of blocks in the plugin, we’ll try to present them in the organized way so you can easily see what blocks exactly are offered, how to make use of them and get an idea of the customization system of each block.

To illustrate blocks with examples, I’ve primarily used the Getwid Base free Gutenberg theme, which was completely designed with Getwid (make sure to give it a try!)

Getwid Base Theme Demo

Read more details on each block.

Section Block

getwid section block featured

The Section block is one of the most advanced and important Gutenberg blocks by Getwid. Its main purpose is to help you create a multi-element section that can be controlled as a single block.

This block is highly flexible! Apart from custom Getwid blocks, you are free to add any content into the Getwid Section block, including core Gutenberg blocks and even third-party Gutenberg blocks you may use.

We bundled this particular block with loads of settings that will open up great customization opportunities for designers as well as non-tech WordPress users.

getwid section block wordpress gutenberg blocks

The UI of the block is quite straightforward: to add content into the section block instead of the default Gutenberg editor area, you hit the “+” icon to the right.

getwid add section block gutenberg blocks

Use:

  • Full-width website sections (perfect for no-sidebar pages)
  • Wide-width website sections
  • Splitting a regular theme width into multiple hierarchical parts
  • Custom-styled reusable sections and pages
  • Professional and diverse landing pages.

Main settings:

  • Different section width settings, including custom width (customizable for different devices).

section block width in gutenberg blocks

You can change that in clicks right in the editor:

getwid section width in gutenberg blocks

You can also start by choosing the needed layout:

getwid layouts alignment

So you get the needed look without much tinkering (your theme must support the chosen width) –

full width layoutwide screen layout gutenberg

section block background options in gutenberg blocks

By default, the color system of this block supports theme brand colors to help you keep visual consistency and distinction between content elements sitewide. So you should be pretty fine with the default palette! If you switch the theme, the block will use brand colors of your new theme to ensure you don’t need to go manually about changing each and every design piece.

Alternatively, you can go with a color picker to create some fancy color schemes for specific sections. Since Getwid version 1.5.0, you can apply a background color by using a pre-made color palette:

gradient changes

That doesn’t mean you can’t set different colors! To apply custom colors for gradient, simply click on the “Custom Gradient”.

Since images are very often used for backgrounds, the customization attributes for them are holistic (you have pretty much the same list of options for many Getwid image-related blocks).

getwid background image settings

  • Handle foreground using a rich panel of settings: select colors, apply opacity, set an image, etc.

getwid foreground colors in gutenberg blocks

  • Customizable margins, paddings, and alignments. To display section blocks uniformly on different screen sizes, you can leave default values for all spacing methods. To create different experiences, you can manually fine-tune spacing for desktops, mobiles and tablets.

getwid spacing section block in gutenberg blocks

Since Getwid version 1.5.0, you can use draggable angles of the blocks to set the needed margins and paddings for blocks:

spacing getwid base

It gives a tool to see changes you make in real time instead of manually “guessing” the needed sizes.

  • Awesome dividers to separate content into groups using variety of classic and fanciful shapes. Top and bottom divider styles come in different flavors:

getwid section dividers

  • Different entrance animation effects.

getwid section animation gutenberg blocks

To improve your productivity, the UI of the Section block was updated with three semantic sections to change the general settings, design and advanced configuration for animation and dividers.

settings ui getwid blocks

The system of colors, typography, media, buttons and more elements within one unified Section block will help you communicate visual content hierarchy letting you create meaningful designs. Since it’s a multifunctional and multidimensional reusable Gutenberg block, you can create eye-catching sections and embed them on other pages with a click.

Post-related Blocks

Getwid allows you to add three different types of post-related blocks. They allow you to automate the process of featuring content sourced from already existing posts, pages, and custom post types.

All of them come with different settings and layout control you can discover in dedicated posts:

  1. Post Slider block allows you to feature posts in a custom-made slider:

post-slider-featured

2. Post Carousel block is perfect for showcasing portfolio items or products:

store slider-min

3. Custom Post Type block gives you full control over the post/custom post types presentation:

custom post type getwid

Icon Block

getwid icon block featured

The Icon WordPress block is a perfect tool to create simple and expressive interfaces using a collection of Font Awesome icons.

Use:

  • Different types of product and system icons (that generally don’t require extra explanation).

Settings:

  • You can apply different shapes to icons to draw attention to specific sections: you are free to choose from a plain icon, with background or outlined one.

getwid icon block in gutenberg blocks

For example, you can use a similarly-shaped set of icons for presenting different sets of services or skills.

  • Set up colors (default theme colors are available).
  • Designate the icons size and spacing between icons or other content blocks on a page.

icon blocks in gutenberg blocks

  • Play with the radius and border width to create square or round-cornered icons. You can also set something in between with the custom border radius.

getwid icon radius

  • Link icons to external URLs.
  • Apply animation effects.

Icon Box Block

getwid icon box block featured in gutenberg blocks

Think of the Icon Box block as an advanced version of the icon block. In addition to the icon itself, it comes with extra heading and text containers.

Use:

  • Icons to support content (services, offerings, experiences, amenities, etc.)

Settings:

  • All icon block settings, including icon styles, spaces and animation (see the previous block).

icon box block settings

  • Default heading and text settings, including a choice of heading types for headings and customizable font size for text.

Image Hotspot Block

image hotspot

The Image Hotspot block by Getwid is a cool tool to make your images more descriptive by adding custom markers and tooltips on any custom image areas (just like you do with Google Maps).

Use:

  • Culinary guides.
  • Details for panorama images.
  • Architectural design and floor plans, etc.

Settings:

hotspot settings

  • Add multiple tooltips with titles and subtitles.
  • Change position of pointers.
  • Choose the popup width.
  • Font Awesome icons.
  • Tooltip styles

setting tooltip theme

  • Animation effects.

Image Box Block

getwid image box block featured

Image Box is basically an organized block that encompasses an image, heading and text containers. Image boxes are an awesome way to balance text and visual content.

Use:

  • Services and portfolio pages.

Settings:

  • You can select a proper image size in order to fit into your website layout and create consistency for multiple image box blocks (medium, large, full size, etc.).
  • Optionally set up image animation on hover.
  • Select a preferable layout and alignment for mobile devices.

getwid gutenberg image box block

  • Play with margins (margin properties can have negative values).
  • Link images.
  • Separately edit headings and texts within the image box (e.g. change alignments, background colors, add anchors to headings and more.)

image box block

Social Links Block

getwid social links block featured

Using the Social Links Gutenberg block you can list all social icons on any post or page – in either simplified or advanced format to mimic your theme brand design.

Use:

  • Links to your social accounts.

Settings:

  • Link social icon to the appropriate social networks.

getwid social links gutenberg block

  • Customize an icon layout (with or without a border and background).
  • Alter sizes and spacing.

social links block settings

  • Adjust alignment for different devices.

By default, the icons will inherit styles from your WordPress theme so it’s unlikely you’ll need to tinker a lot with it!

Banner Block

getwid banner block featured

With a perfect image and a catchy text line you can create awesome, fully tunable animated banners for different purposes.

Use:

  • Effective banner advertising
  • Related content suggestions in posts (manually curated)
  • All types of calls-to-action.

getwid banner examples

Settings:

  • Image size and content width.
  • Block height and block animation.
  • Text options: text and overlay colors, animation, horizontal and vertical text alignments.

getwid banner block gutenberg settings

Here is one more example of the Getwid Banner block in the Twenty Twenty theme:

banners twenty twenty

Image Slider Block

getwid image slider block featured

The Image Slider WordPress block by Getwid offers much more flexibility and settings in comparison with the core Gutenberg slider block. This block allows for creating beautiful lightweight sliders with both normal (automatic) and click states.

Use:

  • Website introduction sliders
  • Image slider inside a post
  • WooCommerce product sliders.

Settings:

  • Top, bottom and middle image alignment.
  • An option to set different number of slides for different devices.
  • Slideshow speed and animation.
  • Variable slider width.
  • Spacing between slides.

getwid image slider settings

  • Optional arrow and dots slider controls (inside or outside).

Button Group Block

button group featured

The main purpose of this Button block is to speed up your workflow with adding different types of call-to-action buttons throughout the website.

Use:

  • Any action button or a group of buttons.

Settings:

  • Different button styles: outlined, rounded and squared.
  • Background and text color for each button individually.

getwid gutenberg buttons

  • Spacing between buttons.
  • Custom alignment, direction and width of buttons.

getwid button group settings

Image Stack Gallery Block

image stack gallery featured

This Image Gallery Gutenberg block by Getwid was designed to enable you to create unique image galleries with creative layouts, without any design skills.

Use:

  • Portfolios, creative projects
  • Photo galleries
  • Post galleries.

Settings:

  • Several awesome gallery layout styles.

getwid image stack gallery

  • Image size settings.
  • Image linking options.

Advanced Spacer Block

getwid advanced spacer block

This Spacer block provides an easier way to add spaces between content elements – so that you can stick to the visual consistency without a need to go about spacing manually.

Use:

  • Optimization block for content manipulation.

Settings:

  • Custom height for different viewports.

Media and Text Slider Block

media and text slider featured

This Slider block is a has-it-all type of slider you can use to create instant calls-to-action and highlight brand messages.

Use:

  • Hero front page sliders
  • Promo sliders.

Settings:

  • Slider height and custom content width.
  • Vertical and horizontal alignment.
  • Text and overlay colors.
  • Adjustable paddings.

text and media slider gutenberg block

  • “Slide” and “Fade” slider animation effects.
  • Multiple types of text animation.

Google Maps Block

google maps block gutenberg

This is a standard Google Maps block to help you feature different location markers.

Use:

  • Display your locations using interactive Google Maps.

Settings:

  • Set up zoom and plan interaction.
  • Enable or disable street views, full-screen enlargement, etc.
  • Map center and zoom options.

google maps styling

  • Map styles.

google maps styles

  • Using your Google Maps API key, you can add unlimited custom map markers.

Advanced Heading Block

advanced heading block featured

This Heading block gives you access to a rich heading configuration panel, where you can tweak all major typography settings of specific headings.

Use:

  • Diverse page headings.
  • Use tailor-made headings in other Gutenberg or Getwid blocks.

Settings:

  • Heading preferences.
  • Font configuration: font family (Google fonts), weight, size and style.
  • One-click text case conversion.
  • Line height and letter spacing customization.
  • Color selector (background and text colors).
  • Adjustable margins and paddings.

advanced heading getwid

Accordion Block

getwid accordion block

This is a Accordion block perfect content block for a question-answer format (horizontal).

Use:

  • FAQ sections.

Settings:

  • Icons for active and inactive tabs.
  • Icon position.
  • Default active tabs.
  • Heading type.

Tabs Block

tabs block getwid

To create effective FAQ pages and other categorized sections, you can also use tabs in WordPress and organize them in different layouts.

Use:

  • Different sections of news, categories (e.g. genres of literature), different archives, etc.

Settings:

  • Title heading type.
  • Horizontal and vertical layout types.
  • Default active tabs.

Toggle Block

toggle block featured

The Toggle WordPress block is very similar to the tabs block at the functionality perspective, so you can go with one that provides you with the suitable set of settings.

Use:

  • Categorized sections.

Settings:

  • Icons for active and inactive tabs.
  • Icon position.
  • Default active tabs + an ability to make all tabs active by default.
  • Heading type.

Recent Posts Block

recent post block getwid guteberg plugins

As its name suggests, the Recent Posts WordPress block allows you to display recent posts from your blog (dynamically sourced) anywhere on the website.

Use:

  • Showcase blog articles on other pages in real time.

Settings:

  • Grid and list layouts.
  • Customizable number of columns for a grid layout.
  • Heading types for article headlines.
  • Customizable size of a featured image.
  • Show or hide a featured image and a post meta data.
  • A post ordering settings.

Person Block

person block featured

This is a no-frills Team Gutenberg block for showcasing team members or creating an author profile/bio page. It comes with a pre-designed structure so you can pretty quickly change the photos, description and links to social media accounts of your team, without a need to handle styles and alignments manually.

Use:

  • Team showcase
  • Author bio.

Settings:

  • You can edit the block content inline (right in the Gutenberg editor).

getwid team showcase gutenberg block

  • Change the image size.

Testimonial Block

Testimonials block gutenberg

With this Testimonial Gutenberg block you can feature client testimonials anywhere on your website.

Use:

  • Admin-added testimonials.

Settings:

  • Edit avatar, title and testimonials inline.

Counter Block

counter block featured in gutenberg blocks

 

The Counter block lets you add animated counters to visualize data.

Use:

  • Showcasing your expertise or any data in numbers.

Settings:

  • Digit preferences.
  • Advanced animation settings.
  • Color settings.

counter block settings

 

Price Box Block

Price box block

Although there are different WordPress plugins for adding pricing tables, you might not need any of them since the Price Box block for this purpose is already bundled with Getwid for free. You can use Gutenberg columns block to present different pricing tables side by side.

Use:

  • Different pricing tables (e.g. pricing plans)
  • Comparison tables.

Settings:

  • Edit table information inline (prices, features, buttons).
  • Adjust pricing table headlines.

button styles

  • Alter text and background colors.

Price List Block

columns-price-list

Add this Price List WordPress block, update texts and images and your restaurant menu is ready! It allows you to create a real-life menu with titles, descriptions, images and prices.

Use:

  • Online menus for restaurants and cafes.

Settings:

price list block

  • Add the menu item description
  • Add or hide a dotted line
  • Change or delete the currency sign
  • Upload images
  • Change colors.

Countdown Block

countdown timer block getwid

The Countdown block will help you feature animated countdown timers with animated numbers.

Use:

  • Marketing purposes (limited time offers)
  • Flash sale promo
  • Coming soon banners.

Settings:

countdown getwid block settings

  • Set up the expiration date up to seconds
  • Configure typography for texts
  • Customize the spacing
  • Customize colors.

Content Timeline Block

content timeline getwid

The Content Timeline block for Gutenberg is a unique tool to create a chronological order of events without extra plugins. Use it to present any custom information with text, images and other types of content in a fancy vertical timeline format. You can customize all elements of the layout separately or even build your own look.

Use:

  • A development and progress journey of any project (a company history).

Settings:

  • Add unlimited content timeline items
  • Apply the needed alignment and spacing for parallel containers
  • Insert more custom blocks inside the default timeline item container

add blocks into timeline

  • Show or hide a progress bar on scroll
  • Animate blocks.

Video Popup Block

gutenberg block video popup video frontend

The Video Popul block for Gutenberg is an easy-to-use solution to add video popups for uploaded videos or for links inserted from external video hosting platforms like Youtube. You can allow website visitors to watch the video in a default of full-screen mode.

Use:

  • Hero sections with videos
  • Product presentation
  • Video galleries.

Settings:

  • The play video button is under your control

video popup buttons

  • A customizable video cover

video popup settings

  • Customizable styles and animation effects.

Linear Progress Bar Block

progress bar featured

There are two progress indicator WordPress blocks in Getwid: the Linear Progress bar and the Circular Progress bar. These are nice blocks to add animated progress bars for any purposes.

Use the Linear Progress Bar:

  • To show the percentage of progress in any activity or event.

Settings:

  • Optional animation.
  • Progress bar and background color settings.

Circular Progress Bar Block

circular progress bar in gutenberg blocks

If you’d like to go with a different design for a progress bar, this one would be just awesome. The bar can be animated or static.

Use:

  • Give impression of any activity.

Settings:

  • Customizable values, size and thickness of the bar.

progress bar getwid gutenberg

  • Optional animation.
  • Adjustable background and bar colors.

Instagram Block

getwid instagram block

This Instagram block allows you to feed images from your Instagram account in real time – you just need to generate an access token with your Instagram credentials.

Use:

  • Connect your Instagram to your WordPress website.

Settings:

  • The number of gallery columns and the number of items to show.
  • Show or hide Instagram like and comments.

instagram block settings gutenberg blocks

  • Define the spacing (small, normal, medium, large).

Mailchimp Block

frontend form mailchimp

Mailchimp block by Getwid is a connection tool for your Mailchimp account and WordPress. It helps you integrate some of the email marketing automation services provided by Mailchimp into WordPress by simply inserting an associated API key.

Use:

  • Add a Mailchimp-powered email subscription form to your website.

Settings:

mailchimp elements

  • First name, last name, email address, and a paragraph default form fields.
  • The option to use this form only for specific Mailchimp lists.
  • Customizable button style.

Contact Form Block

contact form gutenberg

The Contact form block by Getwid will add a simple contact form to your WordPress website. Some fields can be marked as non-required.

Settings:

  • Name, email, message, text and reCaptcha elements
  • Editable placeholders and labels

edit field lablels inline

  • The ability to use multiple forms with different IDs
  • Customizable “Submit” button.

Download Getwid Free WordPress Blocks

If you feel like this suite of blocks is going to satisfy your website building purposes, download Getwid for free on WordPress.org and start playing with the blocks (you’ll enjoy the process!).

For the complementary system of blocks, out-of-the-box styles and a lightweight design, you can go with our Getwid Base free Gutenberg theme designed with Getwid. It’s packed with the demo data package, which will save you hours on creating professional pages and blocks (this is an optional tool).

To sum up, these first versions of Getwid are just the beginning of a huge work. We plan to constantly improve the existing blocks, build new ones and enhance overall editing experiences to make Getwid your major foothold in the Gutenberg era. And at this stage, your feedback is significant, so feel free to share it!

Keep an eye out for upcoming news and releases.

Leave a Reply

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