The best Gutenberg Resources curated - Gutenberg WordPress Editor

Copy Block Template code with 1-click

Just added a nifty little feature in our Chrome Browser Extension that lets you copy the selected block(s) template. What is Block Template? Block Template is simply a collection of blocks with predefined attributes and placeholder content. This is quite a powerful feature of Gutenberg API, using this we can create new custom Gutenberg blocks using the built-in core blocks easily. Read more about Block Templates from the official Gutenberg Handbook. https://developer.wordpress.org/block-editor/developers/block-api/block-templates/ What does this… Read More »

How to use Background Patterns in Gutenberg using CSS only

Background Patterns are a good way to enhance your page design. In this tutorial, I will guide you with an easy way to use patterns in Gutenberg. Ready to Use CSS Patterns I've come across a great CSS Patterns Library, and this is what I am going to use in this tutorial. However, you won't have to install the library or enqueue it. I have extracted the CSS code for each pattern so that you… Read More »

Introducing Gutenberg Template Builder

Following the great success of the Gutenberg Templates Library and the GutenbergHub's chrome browser extension, I am excited to share this Gutenberg Template Builder. The Gutenberg Template Builder 🔥 This is right now, kind of a prototype to gather the feedback and suggestions from Gutenberg WordPress users. The idea is to let you quickly generate full-page layouts by adding desired sections from the Section Templates Library. Try the builder Copy & Paste in Gutenberg When Ready Once you… Read More »

How to create a visual sitemap in Gutenberg without any plugin

In this tutorial, we will create a visual sitemap tree using the default list block with some custom CSS only. First, you need to add a list block and assign the class tree. And add list items to represent your sitemap structure. Indent the list items that need to be the sub-tree items in the sitemap. 📝 Note: You must need to make each list item text Bold. This is an important step; otherwise, you won't see the… Read More »

Introducing Gutenberg Hub Chrome Browser Extension

Following the enormous response to the Gutenberg Templates Library, we launched last week. I am super excited to present to you our very first Chrome Browser Extension. For now, this extension allows you to browse the templates library but stay tuned for more featured added to this extension. Install it to help yourself work faster in Gutenberg! Even though it is already super easier to copy and paste any template from the Templates Library. But to… Read More »

Introducing Gutenberg Templates Library

I am super excited to introduce the one of its kind Gutenberg Templates Library to the awesome WordPressers. This is going to be a vast templates library for Gutenberg users. It already has 100 section templates spread over 12 most needed section types for any websites. The best part of this library is that you do not need any extra WordPress plugin to import these templates. Just Browse the templates, copy the one you want to use… Read More »

How to Create Interactive FAQ Layout Design in Gutenberg

In this tutorial, we will create an interactive yet simple FAQ page design in Gutenberg. This will be a two-column layout with the question placed in the left column. The FAQ question remains sticky until the relevant answer's content scrolls. Here is a sneak peek of how it looks. Notice that the question in the left remains there till the next question gets focused. Also to be noted that we are not using any extra… Read More »

How To Create Flip Cards In Gutenberg Without Any Plugin

In this tutorial, we will create a nice Flip Card / Flip Box in Gutenberg without any extra plugin. Here is a sneak peek of the final result. For the sake of this tutorial, we will create two flip cards that flip in different directions. Let's add a column block with two columns and assign a CSS class flip-box to the column. Next, add a Group Block inside that column and assign a CSS class flip-box-inner to… Read More »

How To Create Rotating Text Animation in Gutenberg

In this quick tutorial, we will create text with rotating words in an easy way without any extra plugin. Here is a sneak peek of how it will look at the end. Let's start creating this nice animated text using default blocks plus a little CSS code. First, take a cover block. Inside the cover block, add a group block and assign the class content. The cover block is just to apply a background color… Read More »

10 Stunning Button Hover Effects for Gutenberg Button Block

Gutenberg button block lets you create a nice button overall. But, if you need a nice interactive button, apply one of the following stunning buttons hover effect. Providing you with ready-to-use CSS to apply a nice hover effect to any default Gutenberg button block. Simply choose an effect you like, assign the class to the button and use the provided CSS. 📝 Few Things Note: Make sure you select "Outline Style" for the button.Make sure… Read More »

How to create Hand-Drawn Buttons in Gutenberg

Let's try to apply a hand-drawn effect to the Gutenberg Button block. Here is a sneak peek of what we are going to create. Let's start applying those effects to the Gutenberg button. Add a button block and assign the CSS class button-1. Choose the outline style and set any color to this button. Then use the following CSS code to style the button. .button-1 a{ border-top-left-radius: 255px 15px !important; border-top-right-radius: 15px 225px !important; border-bottom-right-radius:… Read More »

Apply Animated Striped Effect to Gutenberg Button

Let's try to make Gutenberg Button block little interesting. In this quick tutorial, we will add an animated stip effect to the Gutenberg Button block. Here is the sneak peek of what it will look like. Take a buttons block and assign class btn. Here is the magic CSS which you can use to apply this effect. No JS required. 😇 .btn a{ -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; position: relative;… Read More »