Editorial

Introducing Stag Blocks for Gutenberg

From the past few months, we are on a mission to make a toolkit for the all-new Gutenberg editor. We at Codestag laid down all our design & development skills on the road and created a roadmap, in which we’ve successfully completed our first set of blocks. The next round of updates will cover new blocks and any issues found in between.

There is still a lot to come in Stag Blocks for which we feel passionate and excited, as the Gutenberg editor grows to acquire the most of WordPress industry we’ll also make Stag Blocks ready to use as a better companion for Gutenberg.

Gutenberg & Changes in WordPress

Gutenberg editor aka Block editor is the new big shot in WordPress, it was a long overdue change awaited for WordPress to compete in this evergrowing web industry. With Gutenberg, WordPress has really shown us how content creation becomes super easy with blocks. But wait Gutenberg is not only about its visuals in fact it comes with a great user experience control and super fast workflow. 
Creating a post and publishing has never been easier than this, blocks are just phenomenal when it comes to adding content. There is a huge list of all the features & improvements that are available in Gutenberg, here are some of the noticing features found in the Gutenberg editor.

  • Easy workflow for blocks – A user can easily enough add a block, move a block or delete it. Editing a block is also super easy with the sidebar inspector, ones you start editing a block the sidebar inspector becomes visible with all the available options for you to personalize.
  • Inherits active theme styles & properties – One of the best things about Gutenberg is the fact that its compatible with any theme and inherits most of the theme styles and properties by itself.
  • Human readable & less markup – This has to be the best part of Gutenberg that it doesn’t bloat your content markup with excessive html tags nested one inside another. The markup Gutenberg creates is human readable and easily editable.
  • Formatting & Cloning content – Cloning content from any other website is easier & better than ever, you can simply paste content copied from any site and Gutenberg will automatically format the code to look like the same as it was on the origin page.
  • Default Blocks & Extensions – Blocks available by default in Gutenberg are enough to make a content-focused website. But there is more you can do with blocks than there is to default blocks, this is where custom plugins for enhancing Gutenberg blocks will make you do more with Gutenberg.

Creating content with Stag Blocks inside Gutenberg

With Stag Blocks, you get a set of beautifully designed blocks which will help you in creating content-rich websites in power & speed. Stag Blocks v1 comes with 9 blocks that are designed to fit within any theme/content. Each block will automatically inherit theme provided styles and will produce a rich editing experience with all the Gutenberg features mentioned in the above section. 
To give you more context on the blocks, here’s a quick rundown of each of the blocks that come with Stag Blocks.

Container Block

Container Block in Action

Quick Intro: A contain block which can be used to fit multiple blocks inside it. Further more, you can customize it to have background styles, controlled margin paddings & it gets even better with the max-width control.

Hero Block

Hero Block in Action

Quick Intro: Add a full-width media block to accompany a call to action. With each important options available to customize, notch this hero block up to your style and let the content shine.

Posts Grid Block

Posts Grid Block in Action

Quick Intro: Display a grid or list of customizable posts. Posts Grid block is useful if you want to showcase filtered/personalized posts in a page or even in a post. 

Testimonial Block

Testimonial Block in Action

Quick Intro: Add a testimonial block with text, name, company and picture. Testimonials are useful when you want to showcase users comments or appreciative words on your site.

Pricing Table Block

Pricing Table Block in Action

Quick Intro: Add a pricing table block to showcase different plans and offers. You can also select a featured plan in the block so that it’s highlighted as the best. View the demo below.

Stats Block

Stats Block in Action

Quick Intro: Display useful custom statistics for just about anything. You can even customize them to match it with your site theme.

Alert Block

Alert Block in Action

Quick Intro: Display a notice with customizable icon, title, and description. Alert blocks are super handy when you want to show warnings or messages related to information, tips etc.

Website Card Block

Website Card Block in Action

Quick Intro: Turn a URL into a pretty card style preview. This is handy when you want to promote a site or credit them for something.

Accordion Block

Accordion Block in Action

Quick Intro: Display a toggle-able field that can be expanded and collapsed. Accordions are useful when you’re creating FAQs, notices etc.

That’s not all folks, Presenting Stag Blocks Theme

To accompany our Stag Blocks plugin we’ve also made a custom theme which provides the best of Gutenberg experience for creating beautiful & content-rich websites. Blocks are the suitable way of creating content in our Stag Blocks theme, but you’re free to use it the way you like. Stag Blocks theme is freely available for use, you can get it here.

We’ll continue to post updates here as we go through upcoming changes, we appreciate any feedback given by users and would love to add new crazy features suggested by users at any point of time. We’re constantly working hard to make content-creation easy for our users & for the love of web.

Credits

Huge props to Ahmad Awais for making Create Guten Block which helped us save a big time on speed development of this plugin.


2 thoughts on “Introducing Stag Blocks for Gutenberg

  1. Hello you lovely people,

    Big fan of your themes and the blocks and possibilities. A code block would be great with syntax highlighting.
    Also the blocks work with your themes, yes?

    1. Hey Max!
      Thanks for the kind words, truly appreciate it 👍

      Actually, there is already a code block available and Stag Blocks enhances it by adding the Syntax highlight to it. Now that I notice we haven’t added any documentation for it, we’ll do that right away.

      And yes, these blocks are compatible with our themes.

Leave a Reply

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