Categories
Collections Extensions Templates

Ghost Kit part 2: Extending Gutenberg

An overview on how Ghost Kit extends Gutenberg to edit block styles, typography, templating and much more!

I made a review of Ghost Kit a while back but since then this plugin has added several new features, some of which offer extra settings and extend the functionalities of the block editor.

The latest version of Ghost Kit includes the following:

20 more Blocks

Most of these blocks were already reviewed in my previous post, as well as in the comparison posts of Table of Contents, Tabs and Accordions.

  • Grid. Responsive grid block to build layouts of all shapes and sizes thanks to a twelve column system. Visual columns size and order change
  • Progress. Show the progress of your work, skills or earnings
  • Button. Change important links to buttons to get more click rate
  • Divider. Divide your long texts and blocks
  • Alert. Provide contextual feedback messages for user actions
  • Icon Box. Icons are one of the best visual replacement for text descriptions
  • Number Box. Show your progress and rewards using counting numbers
  • Accordion. Toggle the visibility of content across your project
  • Tabs. Separate content on the tabs with titles
  • Countdown. Display countdown for you upcoming events
  • Video. Plain and Fullscreen YouTube, Vimeo and Self-Hosted videos
  • Carousel. Carousel for any type of content – images or other blocks
  • Pricing Table. Sell your products or services and show all features
  • Testimonial. Show how your users love your products and what saying
  • Twitter. Show Twitter feed and user data
  • Instagram. Show Instagram feed and user data
  • Google Maps. Show maps with custom styles, markers and settings
  • GitHub Gist. Embed code parts form GitHub Gist to your site or documentation
  • Changelog. Show the changes log of your product
  • Table of Contents. Automatically generate a table of contents by parsing page headers in content
  • Widgetized Area. Select registered sidebars and put it in any place

Extending Gutenberg

Here are the links to the description provided by the plugin author:

Ghost Kit includes a general settings screen for block management

These general settings also offer typography settings (both local and global)

And inserting JS/CSS.

Ghost Kits side panel in the editor

As well as the global settings mentioned above, this plugins adds a custom panel with extra editing features:

Ready to use templates + a template managing system

This is a great way to inspire and simplify the creation of new pages. I always recommend the Design plugin from the repo, which does this exact same thing, but using only core blocks.

We can also create, save and insert our own templates:

New inline settings for text block

These new inline text options are fairly basic and not dissimilar from those offered by Mighty Blocks and a number of other plugins.

The “highlight” option and the “badge” option in action:

New design settings for all block

These are font, margin/padding, animation and visibility for all blocks.

Below are the settings for each of the panels. I particularly like the fact that these offer mobile / responsive control.

In this case we will need to add the following code to make sure this option works with other blocks as well.

As with inline text styles, there are other plugins out there which extend the editor’s styles in a similar way. I plan to do a comparison post between these soon.

Overriding the customizer

This one’s an odd ball. The plugin offers the option to override the customizer’s settings on a per page/post basis. This is indeed interesting but I am not sure I can think of many practical applications for this from the top of my head.

Leave a Reply