Featured

Last Updated on

One of the beauties of Gutenberg is that it creates an ecosystem in which all new blocks and UI elements are fully compatible and interchangeable.

This means that the work of different developers is now recyclable and stackable.

I created this site to test and try and keep some track of new blocks and other Gutenberg related plugins, thank you for visiting!

脕lvaro.

"External API" accordion animation block-management blockquote carousel category columns contact-form container CPT developer-tools fav flickr freemium gallery gist Hero image-filters instagram-feed layout lightbox lists map masonry more newsletter pages pop-up post-grid post-list post-slider pricing-table RGDP shortcode slider summary-table of contents tab tabs testimonials twitter-feed widget widgetized-area woocommerce woocommerce-categories

Secure Blocks for Gutenberg By Matt Watson

Last Updated on

A very simple plugin to limit visibility of your content based on user roles, while offering an alternative area to add the content that will be shown to non logged-in users.

This block could be used to create a simple membership site, for instance.

We could also insert a reusable block in the “public” area with a call to action asking visitors to register, in order to gain access to that content.

This is what the plugin looks like in the backend:

The plugin has a setting to specify the exact user role that will have access to a given instance of the block:

The author of the plugin mentions some features coming down the road:

  • Login Block
  • Register Block
  • Password Reset Block
  • Restrict entire pages / posts, not just inline content

The plugin looks a little bit abandoned at the moment (no updates for the last 9 months) but I was able to confirm it works fine both with the WP core version of the editor (5.2) and with the beta/plugin version (6.6.0)


This is what the plugin looks like in action:

This is the public content

You will only see this, of course 馃檪

Duplicated block dependencies

Last Updated on

I noticed this message below while I was testing performance on gu10.blog (using GTMETRIX via ManageWP). I am curious as if there is already some strategy on the roadmap to address this problem.

The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 request(s) and 46.4KiB.

  • https://c0.wp.com/c/5.2.3/wp-includes/css/dashicons.min.css
  • https://s.w.org/wp-includes/css/dashicons.min.css?ver=5.3-beta1-46336

The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 request(s) and 41.9KiB.

  • https://gu10.blog/wp-content/plugins/carousel-block/dist/assets/slick/slick.min.js?ver=5.2.3
  • https://gu10.blog/wp-content/plugins/gosign-posts-slider-block/src/js/slick/slick.min.js?ver=1

The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 request(s) and 1.3KiB.

  • https://gu10.blog/wp-content/plugins/getwid/vendors/slick/slick/fonts/slick.woff
  • https://gu10.blog/wp-content/plugins/gosign-posts-slider-block/src/block/slick/fonts/slick.woff

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 noticed they use two main approaches: 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: