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.

Block mangement

Besides from the new blocks it offers, as any other regular block collection, Ghost Kit has a built-in block management system to allow you to select plugins are available in the editor. If we want to combine several (like I am already doing on this site) it will become a necessity to filter which plugins we want to see in the editor, to avoid clutter and confusion.

This is specially true if we are building sites for clients or non tech-savvy users. Please notice how this tool allows you to toggle visibility for ALL blocks, not just those added by Ghost Kit.

Extending Gutenberg: Display, spacing & animation

Ghost Kit adds three more panels to the block settings, on the sidebar, to manage display, spacing, and animations.

As it turns out the spacing options are limited to Core and Ghost Kit blocks, which may fall a bit short, and even then the preview options are limited.

Animations

Here are a few examples or animated blocks:

Slide in from left
Fade in
Zoom in

The Block Collection

I have only reviewed the most original or relevant blocks here, the complete list is pretty long. They only important block I am missing here is a dedicated Post list, grid or slider block.

Instagram Feed

The Instagram embed has quite a few options. If you want something simpler, and provided by a single block, you can try Kona – Instagram Feed for Twitter instead :

Twitter Feed

The twitter block offer the next few settings. I like how the API data is built right into the panel.

Here is the block in action:

Álvaro Gómez Velasco
6.7K Tweets
981 Following
1.2K Followers
Busy dad @Juliagsvh & @Claragsvh with @xelitolindo. I also help democratize web publishing with @WordPress at @automattic.
Third Rock from the Sun
Oh, dear. If (when) these ads become targeted the “echo chamber” is going to go up to a whole new level . twitter.com/mbrennanchina/…
Escalado automático de imágenes por defecto en el núcleo de WordPress? Yo creo que es buena idea. twitter.com/fernandot/stat…
La documentación dice esto: “Para mostrar los puntos de interrupción de consultas de medios por encima de la vista… twitter.com/i/web/status/1…

Github Gist Block

Below you can see the Github Gist Block. Pasting the link to a GH Gist will automatically embed it here. I should mention that WordPress.com has offered this functionality for many years now.

Grid Block

Ghost Kit has is own Grid Block, which offers a few extra options such as controlling the size of the gap, backgrounds and vertical & horizontal alignment.

You can see the block in action below

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.

Button

Widgetized Area

Again, a great way to recycle existing widgets. This option will probably end up being phased out as widgets are completely replaced by blocks, but for now is a great feature to have.

This is what the block looks like in the editor, it lets you choose an existing widget area:

I added my footer widgets here, notice how they collapse into a single colum:

Price Table

Standard

$77
  • Feature 1
  • Feature 2
Purchase

Standard

$77
  • Feature 1
  • Feature 2
Purchase

Accordion

The accordion is very simple it its design and usage but allows any type of block in the expanded area, which is nice, not all accordion blocks can do this. On the downside, there are no options to decide which elements should be open when the site loads and they are not connected either, so there’s no way to have one of them collapse autoamtically when you open a different one. If you need more advanced features here is a detailed review of different accordion blocks.

Accordion Title

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.

Accordion Item

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.

Tabs

Again, I like this block’s simplicity and the fact that it allows any type of block inside each tab.

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.

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.

Published by Alvaro Gómez Velasco

Alvaro is widely known for his skills at copy-pasting code, activity at which he has excelled since 1997. After ten years freelancing as a WordPress consultant and teacher Alvaro currently works as a Happiness Engineer at Automattic. It is said that in another life he was a professional photographer. Bilbaíno and father of Julia & Clara.

Join the Conversation

2 Comments

Leave a comment

Leave a Reply

%d bloggers like this: