Animating Gutenberg Blocks: Two Approaches

Last Updated on

Adding a little motion to your content can work miracles by literally making it “pop-out”. As with other functionalities there are several plugins that will allow you to add CSS animations using shortcodes, but they can be a little clunky to use. Seeing this feature translated into Gutenberg blocks is really interesting.

I have found several plugins that help animate blocks, and notices they use two strategies: The Container and the Extra Settings Panel.

Continue reading “Animating Gutenberg Blocks: Two Approaches”

Table of contents (Summary) Blocks: A comparison

Last Updated on

Summary Block by Advanced Gutenberg Blocks

This plugins has no options and it has a small glitch which makes it render HTML links inside headings, as you can see below:

Summary Block by Advanced Gutenberg

This plugins has some very basic settings, you can have the summary open or close and you can select the color for the links:

Table of contents Block by Ultimate Blocks

This plugins offers the option to select de “depth” of the headings we want to use for the table of contents, but little else:

Table of contents Block by Ultimate Addons Blocks

We have a clear winner here, this plugin offers the most options by far, both in terms of style and regarding functionality, including “smooth scroll”, speed, offset and even a “back to top” option.

And here is the table in action:


Below is some dummy post content to populate the tables of content above:

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit

In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit.

In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dolor in reprehenderit.

In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Reprehenderit in voluptate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit.

In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Advanced Gutenberg

Last Updated on

This one’s a bit confusing, as there is already another plugin called Advanced Gutenberg Blocks.

This plugin offers a balanced list of blocks, including some not too common, such as the “Advanced list” and the “Summary” blocks.

Continue reading “Advanced Gutenberg”

Tab Blocks: a comparison

Last Updated on

Historically tab blocks have been something relatively tricky to do, requiring fiddling around with shortcodes or, worse even, inserting them into theme templates (I have a dark past, I will admit that).

Fortunately there are many block collections which come with built in tab blocks and that will make it a lot simpler to manage your tabs.

Continue reading “Tab Blocks: a comparison”

Kona – Instagram Feed for Gutenberg

Last Updated on

A fairly straightforward and light-weight block to add an instagram feed. If need want extra options & settings please check other options, such as the block offered by Ghost Kit.

I quite like to, when you first insert it, the block provides a link right there to go get a IG token:

Ghost Kit – Gutenberg Blocks and Templates Collection

Last Updated on

This is one of may favourite block collections because it offers block management and extra display/spacing/animation settings.

Continue reading “Ghost Kit – Gutenberg Blocks and Templates Collection”

Carousel Block

Last Updated on

This block works similarly to Ben’s Slider for Gutenberg but has more settings/options as it uses columns and horizontal scroll, making it a lot more detailed, flexible and intuitive to use:

This is what it looks like in the editor:

I also noticed the block throws a generic error when trying to add image or gallery blocks:

I had to disable it due to the aforementioned issue of breaking image blocks (not just within it, but everywhere) but I like the approach and the simple, yet flexible and intuitieve design. I will keep an eye for future versions of this block.

Update: The block is working again:

I revisited this post and it seems to be working now, here is what it looks like with some images

And here with some text and images:

Page Builder Gutenberg Blocks – Kioken Blocks

Last Updated on

A block suite that includes claims certainly includes custom queries for post lists and which does extend Gutenberg in two interesting ways: custom inline color and fonts.

If you need to display Custom Post Types I also would recommend you take a look at Archive Mapping and Post Selector in general or Product Blocks in the case of WooCommerce products.

Continue reading “Page Builder Gutenberg Blocks – Kioken Blocks”

Meow Gallery (+ Gutenberg Gallery Block)

Last Updated on

A well thought out plugin that offers several layout options, including Masonry. It is practical and very well thought out, you can tell it was a photographer who built it. It is also important to note that this plugin works both as a Gutenberg block and with the classic “shortcode” gallery.

Continue reading “Meow Gallery (+ Gutenberg Gallery Block)”