Getwid – Gutenberg Blocks

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

Getwid features a lot of Gutenberg blocks, many of them passing synthetic accessibility tests, but failing manual tests with keyboard navigation and screen reading. So pick your block carefully, and remember to test. Most of the fancier animated blocks, don’t play well with screen readers, but the Table Of Contents block is pretty nice.

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
This is an hot spot
Another hotspot

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:

Nothing found.

Getwid Progress Bar block

How are we progressing?

96%

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. X

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

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. Z

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

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

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