Getwid – Gutenberg Blocks

Looking for an image hotspot block for Gutenberg? Getwid by MotoPress has got you covered with 40 blocks to enhance your editing experience. The initial impression is good, there is a design boilerplate for developers with CSS classes, and even a Getwid base theme if you are into that.

Getwid Table of Contents block

Getwid screenshot

Getwid Tabs block

Nulla in justo vitae justo semper egestas eget ac dui. Donec scelerisque eget sem sed iaculis. Donec lobortis lectus non pretium ornare. In eget maximus quam. Mauris pulvinar molestie sapien sit amet egestas. Morbi dictum nunc quis tellus blandit, tincidunt eleifend mi tincidunt.

Etiam est sapien, viverra et justo vitae, pharetra lobortis dolor. Pellentesque nec auctor augue, sit amet placerat ex. Phasellus porttitor dolor dolor, imperdiet porttitor urna fringilla sit amet. Suspendisse potenti. Proin erat arcu, rutrum et metus ac, iaculis placerat risus.

Pellentesque maximus sollicitudin pharetra. Mauris eu rutrum arcu, quis lobortis ante. Ut sollicitudin, erat eget ultricies laoreet, nisi nunc rutrum leo, ac finibus massa elit et felis. Sed et rhoncus augue, vel lacinia sem. Aliquam a dignissim ante, sed ullamcorper est. Cras tellus odio, dapibus mattis velit nec, fermentum ullamcorper metus.

Getwid Image Hotspot block

Person on bike, stock, unsplash
Direction of motion
Healthy

Getwid Custom Post Type block

I was asked if there were an alphabetical list of all the posts tested on this site. There isn’t. Weirdly enough, the native Gutenberg Block editor features a “Tik Tok” block, but not a block that lists posts?! Fortunately Getwid offers a Custom Post Type block, allowing you to list any post type in many ways. So here is a basic alphabetical list of all PHP 8 compatible plugins on this site:

Activity Log banner

Activity Log

Activity Log keeps a log of all actions on the site, keeping track of who is doing what and when.

Admin Columns banner

Admin Columns

Customize the looks of your posts and media, showing excerpt, featured image, filesize and more.

Admin Menu Editor banner

Admin Menu Editor

Re-arrange the dashboard menu, create sub menus and dividers and even hide menu items.

Advanced Custom Fields banner

Advanced Custom Fields (ACF)

A widely supported way to add custom fields to posts, pages, custom post types and more.

Ajax Search Lite banner

Ajax Search Lite

Search post, pages and custom post types, using this highly configurable live search plugin.

Fjern kommentar-spam automatisk, uden captchas, uden at sende data til 3.part. Gratis og GDPR compliant.

Antispam Bee

Filter out comment spam quietly and automatically while ensuring privacy.

Asset Cleanup banner

Asset CleanUp

Load only the CSS style sheets and JavaScript files needed on your pages and posts, and trim the page size.

Erstat automatisk problematiske tegn i filnavne fx mellemrum og danske tegn med servervenlige alternativer

Clean Image Filenames

This plugin cleans up filenames of files uploaded to the media library, making them url and server friendly.

Code Snippets banner

Code Snippets

Add code snippets including HTML, PHP, CSS and JS to your site easily without touching functions.php.

Content Aware Sidebars banner

Content Aware Sidebar

Create individual sidebars or widget areas for different types of content, making aside content more relevant.

dFlip 3D Flipbook banner

DearFlip 3D Flipbook

You can display pdf files as an animated flipbook with page turning sound effects 😮

Automatisk eller manuel lightbox til billeder, video, inline html og meget mere, for bedre performance og privacy.

Easy FancyBox

Show images, galleries and videos in a lightbox with minimum effort and possible improved privacy.

Enhanced Media Library banner

Enhanced Media Library

Organize your media using categories, add titles to grid view and allow uploads of more file types.

EWWW image optimizer banner

EWWW Image Optimzer

EWWW Image Optimizer offers options to automatically resize high resolution images, conversion to WebP versions of JPG and PNG files

Formidable Forms banner

Formidable Forms

Another form builder with good Gutenberg support, build in style editor and focus on performance.

Getwid banner

Getwid – Gutenberg Blocks

A collection of 40 blocks for the Gutenberg editor, some which are quite unique.

Lasy Blocks banner

Lazy Blocks

Basic HTML and CSS skills are enough to create your own Gutenberg Blocks with Lazy Blocks.

LiteSpeed Cache banner

LiteSpeed Cache

A very capable and possible overwhelming caching plugin with extra LiteSpeed server integration.

Loco Translate banner

Loco Translate

Translate strings from themes and plugins right within the WordPress dashboard.

Pods Framework banner

Pods – Custom Content Types and Fields

Create custom post types, custom taxonomies or custom fields, or extent existing post types, with this all-in-one free plugin.

Post SMTP banner

Post SMTP mailer

Use a dedicated email address for sending email using SSL/TLS, improve SMTP email delivery and log any errors.

Post Type Switcher banner

Post Type Switcher

Easily change post to pages and vice versa, to display your content in blog modules or pin evergreen content.

Aktivér HTTPS når dit webhotel har genereret SSL certifikat og få den grønne hængelås, helt enkelt.

Really Simple SSL

Easily activates https on your WordPress provided you’ve already got an SSL certificate.

Redirection banner

Redirection

Redirection is a mature and robust redirection plugin, for managing 301 redirections and logging 404 errors.

Save Post Check Links banner

Save Post. Check Links.

Simple plugin that checks for and warns about broken links when you save a post.

Simple Custom CSS and JS banner

Simple Custom CSS and JS

Add CSS and JS snippets to your site, and activate them on demand with this syntax highlighting editor.

Skift rækkefølgen dine indlæg vises i, blot ved at trække og slippe dem, og vis dine mest aktuelle indlæg først.

Simple Custom Post Order

Drag and drop your posts, pages, categories and more into the order your want them to be displayed.

Temporary Login Without Password Banner

Temporary Login Without Password

Give a supporter, a colleague or client temporary access to your website, without creating a user account

The SEO Framework banner

The SEO Framework

Simple yet feature-rich SEO plugin, providing the markup needed for effective search engine optimization.

Wordfence banner

Wordfence Security

An endpoint firewall and malware scanner, including password pro­tection and two-factor authentication.

WP Extended Search banner

WP Extended Search

With WP Extended Search you can configure the native WordPress search to your hearts content.

WP htaccess editor banner

WP Htaccess Editor

Perform quick changes to .htaccess file, directly from the WordPress dashboard.

WP Mail SMTP banner

WP Mail SMTP

An SMTP plugin allows you to configure proper email delivery of your website forms receipts etc.

Matomo banner

WP-Matomo (WP-Piwik)

Matomo Analytics can be paired with the WP-Matomo WordPress plugin for easy configuration.

WS Form LITE banner

WS Form Lite

Built with HTML5, performance and accessibility in mind, WS Form Lite is definitely worth a closer look.

Getwid Progress Bar block

How are we progressing?

95%

What we are going for?

100%

Getwid Accordion block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Experiment: Add custom icons to Getwid

Getwid only load fonts on demand, and thus it’s possible to reduce the page size a bit by adding a custom icon font only including the icons needed. Using the code snippet below, I added four icons from IcoMoon.

add_action( 'getwid/icons-manager/init', 'my_theme_getwid_add_custom_icons' );

function my_theme_getwid_add_custom_icons( $manager ) {
	$custom_icons = [
		'icons' => [
			"Icomoon-icons" => array(
				'icon-plus',
				'icon-minus',
				'icon-arrow-left',
				'icon-stethoscope'
			)
		],
		'handle' => 'Icomoon-icons',
		'src' => '/wp-content/uploads/icomoon/style.css',
		'deps' => null,
		'ver' => '1.0.0'
	];

	$manager->registerFont('Icomoon-icons', $custom_icons);
}

How to add icons from IcoMoon to Getwid

  1. Download custom icon font from https://icomoon.io/app/
  2. Extract and upload contents of icomoon.zip to /wp-content/uploads/icomoon
  3. Modify $custom_icons in snippet above to include all icon names
  4. Add snippet to functions or use Code Snippets
  5. Edit posts with Getwid blocks to use IcoMoon Icons instead.

Optional: Convert TTF to Woff2 using transfonter.org for better compression. Modify style.css accordingly.

More info: https://gist.github.com/mototeam/0072b6d064ae90afd15ecba8dfca366c

Getwid Testemonial block

Write text…

Write heading…Write subtitle …

Write text…

Write heading…Write subtitle …

Getwid Icon block

Just testing som random icons, with background and outline options.

Extract from motopress

Getwid is a two-in-one free blocks plugin: a bundle of the multipurpose WordPress blocks for Gutenberg and the Template Library. The plugin supplies you with a lot of customization cogs for each block: control layouts, typography, colors, iconography, media, motion and more to build tailor-made websites of any scale.

https://motopress.com/products/getwid/

Leave a Reply