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.
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!
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 block examples, I’ve used the Getwid Base free Gutenberg theme, which was completely designed with Getwid (make sure to give it a try!)
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.
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.
- 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.
- Different section width settings, including custom width (customizable for different devices).
You can change that in clicks right in the editor:
- Diverse background options: apply colors or optionally set an image, slider or video as a background.
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 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).
- Handle foreground using a rich panel of settings: select colors, apply opacity, set an image, etc.
- 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.
- Awesome dividers to separate content into groups using variety of classic and fanciful shapes. Top and bottom divider styles come in different flavors:
- Different entrance animation effects.
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 block, you can create eye-catching sections and embed them on other pages with a click.
The icon block is a perfect tool to create simple and expressive interfaces using a collection of Font Awesome icons.
- Different types of product and system icons (that generally don’t require extra explanation).
- 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.
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.
- 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.
- Link icons to external URLs.
- Apply animation effects.
Icon Box Block
Think of it as an advanced version of the icon block. In addition to the icon itself, it comes with extra heading and text containers.
- Icons to support content (services, offerings, experiences, amenities, etc.)
- All icon block settings, including icon styles, spaces and animation (see the previous block).
- Default heading and text settings, including a choice of heading types for headings and customizable font size for text.
Image Box Block
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.
- Services and portfolio pages.
- 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.
- 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.)
Social Links Block
Using this block you can list all social icons on any post or page – in either simplified or advanced format to mimic your theme brand design.
- Links to your social accounts.
- Link social icon to the appropriate social networks.
- Customize an icon layout (with or without a border and background).
- Alter sizes and spacing.
- Adjust alignment for different devices.
With a perfect image and a catchy text line you can create awesome, fully tunable animated banners for different purposes.
- Effective banner advertising
- Related content suggestions in posts (manually curated)
- All types of calls-to-action.
- Image size and content width.
- Block height and block animation.
- Text options: text and overlay colors, animation, horizontal and vertical text alignments.
Image Slider Block
The image slider 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.
- Website introduction sliders
- Image slider inside a post
- WooCommerce product sliders.
- 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.
- Optional arrow and dots slider controls (inside or outside).
Button Group Block
The main purpose of this block is to speed up your workflow with adding different types of call-to-action buttons throughout the website.
- Any action button or a group of buttons.
- Different button styles: outlined, rounded and squared.
- Background and text color for each button individually.
- Spacing between buttons.
- Custom alignment, direction and width of buttons.
Image Stack Gallery Block
This Gutenberg block by Getwid was designed to enable you to create unique image galleries with creative layouts, without any design skills.
- Portfolios, creative projects
- Photo galleries
- Post galleries.
- Several awesome gallery layout styles.
- Image size settings.
- Image linking options.
Advanced Spacer Block
This 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.
- Optimization block for content manipulation.
- Custom height for different viewports.
Media and Text Slider Block
This is a has-it-all type of slider you can use to create instant calls-to-action and highlight brand messages.
- Hero front page sliders
- Promo sliders.
- Slider height and custom content width.
- Vertical and horizontal alignment.
- Text and overlay colors.
- Adjustable paddings.
- “Slide” and “Fade” slider animation effects.
- Multiple types of text animation.
Google Maps Block
This is a standard Google Maps block to help you feature different location markers.
- Display your locations using interactive Google Maps.
- Set up zoom and plan interaction.
- Enable or disable street views, full-screen enlargement, etc.
- Map center and zoom options.
- Map styles.
- Using your Google Maps API key, you can add unlimited custom map markers.
Advanced Heading Block
This block gives you access to a rich heading configuration panel, where you can tweak all major typography settings of specific headings.
- Diverse page headings.
- 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.
This is a perfect content block for a question-answer format.
- FAQ sections.
- Icons for active and inactive tabs.
- Icon position.
- Default active tabs.
- Heading type.
To create effective FAQ pages and other categorized sections, you can also use tabs and organize them in different layouts.
- Different sections of news, categories (e.g. genres of literature), different archives, etc.
- Title heading type.
- Horizontal and vertical layout types.
- Default active tabs.
This 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.
- Categorized sections.
- 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
As its name suggests, you can display recent posts from your blog dynamically anywhere on the website.
- Showcase blog articles.
- 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.
This is a no-frills Gutenberg block for showcasing team members. 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.
- Team showcase
- Author bio.
- You can edit the block content inline (right in the Gutenberg editor).
- Change the image size.
With this Gutenberg block you can feature client testimonials anywhere on your website.
- Admin-added testimonials.
- Edit avatar, title and testimonials inline.
This block lets you add animated counters to visualize data.
- Showcasing your expertise or any data in numbers.
- Digit preferences.
- Advanced animation settings.
- Color settings.
Price Box Block
Although there are different WordPress plugins for adding pricing tables, you might not need any of them since the 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.
- Different pricing tables (e.g. pricing plans)
- Comparison tables.
- Edit table information inline (prices, features, buttons).
- Adjust pricing table headlines.
- Alter text and background colors.
Progress Bar Block
This is a nice block to add animated progress bars for any purposes.
- To show the percentage of progress in any activity or event.
- Optional animation.
- Progress bar and background color settings.
Circular Progress Bar Block
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.
- Give impression of any activity.
- Customizable values, size and thickness of the bar.
- Optional animation.
- Adjustable background and bar colors.
This 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.
- Connect your Instagram to your WordPress website.
- The number of gallery columns and the number of items to show.
- Show or hide Instagram like and comments.
- Define the spacing (small, normal, medium, large).
Also read: How Twenty Nineteen works with Getwid
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!