Noob Guide to Gutenberg

Learn how to (easily) build super-fast custom WordPress sites with Gutenberg blocks.

• create, edit, and style blocks
• move, duplicate, and reuse blocks
• export and import blocks (across different sites)
• create fancy pagebuilder-ish layouts
• build custom archive/category pages
• add animations

Basically, everything you need to wean off your Guten-free diet!  There’s no excuse not to use Gutenberg because it’s super fast, really easy, and so damn flexible!

I wrote this guide because I got tired of hearing people complain about how they can’t do this (basic task) or that (basic task) in Gutenberg. While Gutenberg isn’t perfect, I’ve had no issues using it whatsoever for 1.5 years now. I’ve used the default blocks, 3rd-party blocks, also my own custom-developed blocks. And the result is beautiful!

• EXTREMELY lightweight
• SUPER easy to use (even for clients)
• So much more flexible than bloated pagebuilders.
• Gutenberg is the way of the future and keeps getting better.

But all that is for naught if people still don’t know how to use it. I hope to bridge the gap with this guide. Bucket your seatbelts and prepare for a wild ride, my friend!

You’ll go from Gutenberg ZERO to HERO in just a few videos!

Important notes:

• Watch the videos, they show/explain many things that words can’t.
• Don’t ask me any questions unless you watched the videos.
• This guide is not here to talk about Gutenberg benefits or to persuade you to use it. I have other guides for that.

1. Enabling Gutenberg on (new and old) WordPress sites

Gutenberg is just a content editor.

In case you didn’t know, Gutenberg is simply a (new) content editor for WordPress. For many years, WordPress used a text-based content editor (now called “Classic Editor”). Then about 2 years ago, they started using a new block-based content editor called Gutenberg.

• Gutenberg revolutionizes the mindset of building content in blocks rather than in text.
• It allows you to see your content as being more than just simple text. Which is one of the pillars of current “modular web design” trends.

New WordPress sites already use Gutenberg by default.

If your WordPress site was set up recently, it’s probably already using the Gutenberg editor and you don’t have to do anything else. It’s nice for new WordPress users as well as they don’t have to learn anything new. It’s the existing WordPress users that need more time to overcome their hesitance with a new workflow.

Old WordPress sites (may) need to enable Gutenberg.

• If Gutenberg isn’t already enabled by default…go to Settings > Writing, and enable Gutenberg.
• You may also have to allow users to switch editors (between Classic and Gutenberg).
• Enabling Gutenberg doesn’t automatically convert or break your existing content. Don’t worry.

Once Gutenberg is enabled, you can start to use it for new posts. You can also convert old posts. You don’t have to convert old posts but it’s a good idea of you want Gutenberg benefits on that specific page (faster speed, ability to use Gutenberg blocks, or simply removing dependence on pagebuilder).

2. Default Gutenberg blocks

Now, let’s learn how to use the default Gutenberg blocks that come with WordPress.

There’s actually about 30 of them or so but I go over only the main ones for you to get started. Let’s play!

• Text – paragraph, list, heading, quote, classic
• Media – image, gallery
• Design – columns, buttons, spacer, more
• Widgets – custom HTML, latest comments, latest posts, search

ADD Gutenberg blocks:

• Hover mouse around right side of a blank and click the + sign.
• Hover mouse near center-bottom edge of an existing block, and click the + sign.
• Click on 3 dots on the toolbar for an existing block and choose “Insert Before” or “Insert After”.
• Type / from an empty block.

EDITING Gutenberg block options:

• Using the block toolbar – hover over the block and a toolbar appears right above it.
• Using the block settings sidebar – look on the right panel and you’ll see options there. Make sure the “Block” TAB is chosen at the top (sometimes, it’s on “Document”).

MOVE Gutenberg blocks:

• Hover over the block and click the UP or DOWN arrow.
• Can also click and hold the UP/DOWN arrow space and drag around.
• Can also highlight and CUT/PASTE using your keyboard hot keys.
• Can also use Block Navigation plugin.
• Click the 3 dots at top-right, and select “Code Editor” instead of visual editor. Then move the Gutenberg block you want.

COPY Gutenberg blocks from one site to another:

• Use EditorsKit plugin – it also has tons of other features as well.

CUSTOM STYLING Gutenberg blocks:

• Add a custom class to the block and then add custom CSS to your theme stylesheet or in the Customizer > Additional CSS.

Reusable Gutenberg blocks:

• You can make any block reusable by clicking on the block toolbar and selecting “Add to Reusable blocks”. Once you’ve done this, editing any of them will automatically synchronize all the others. (You can think of this function as a simple “reusable block template”.)
• You can also remove blocks to make them un-reusable and therefore separate on their own (without synchronizing changes).

3. Third-party Gutenberg blocks

You can have more Gutenberg block options by installing plugins.

It used to be (back in the days before Gutenberg) that you could only add plugins to your frontend by enabling them in widgets, or via shortcodes in your content. Thanks to Gutenberg…now you can add plugins directly to your content using Gutenberg blocks.

Just about any plugin (with frontend feature) you install today, will have a Gutenberg block option:

• WooCommerce
• membership
• tables, forms, sliders, etc

Simply add the block, maybe even choose from your settings and there you go!

There are also Gutenberg block libraries.

These are plugins with the sole function of only adding more Gutenberg block options to your site.

• Some are more minimal, and lightweight (GenerateBlocks). Just a few essential options.
• Others are more full-featured (Kadence Blocks). Tons of block options for many specific use cases.
• Some are even like full-functioning pagebuilders (Qubely, Stackable). Many pre-built templates and designs to choose from.

You will have to play around to find the ones you like best. Some have more widget options (feels like 10 little plugins in one). Others are have more design options (many layouts). Some even have both. It’s incredible and so much fun to use. There are so many new block plugins coming out every single day. And yes, you can mix and match!

You may also notice that many Gutenberg plugins seem to have mostly the same blocks, and even blocks that you already have by default in WordPress. But if you look closer, you will notice they might have different options available. Maybe more styling options and such.

Please check my guide for: 10 BEST Gutenberg block libraries

• Just check it out and you will see!!!!!
• I’m tired of stupid questions from people who haven’t even tried it.
• Try some of the libraries before you ask me anything. It takes you only 2 minutes.

4. Custom Gutenberg blocks

No, I don’t teach you how to do that here.

But just know it’s possible to make your own blocks. There are tons of resources out there (Google it or search my site). You can learn how to code them from scratch and using CPT. You can also build from a Gutenberg block template. Building your own Gutenberg blocks has many benefits:

• Customized for your use. Unique design, unique function.
• Can control what parts are editable or not.
• Just fun to do instead of installing a bloated plugin when you only need a specific function.

If you ever feel the need to install some bloated plugin only for one little function, I suggest hiring a developer to code a custom Gutenberg block for you. It’ll be so much leaner this way.

5. Enable Gutenberg editor for custom post types (CPT)

• CPT pages – use snippet below
• WooCommerce product single pages – use snippet below or try the WooBuilder by PootlePress

You can add my snippet below to your theme functions.php file. Make sure to change product to whatever your CPT is called (e.g. portfolio, recipe, reviews, etc).

/**
 * Enables Gutenberg editor for "product" CPT.
 */

function wpjohnny_gutenberg_cpt($can_edit, $post_type){
	if($post_type == 'product'){
		$can_edit = true;
	}
	
	return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'wpjohnny_gutenberg_cpt', 10, 2);

If the snippet above doesn’t work, it means you have to enable the editor for your custom post type. Which is done by adding 'show_in_rest' => true, 'supports' => array('editor') inside the function that registers your CPT.

Read this for more details:

• How to Use Gutenberg with WordPress Custom Post Types – Cloudways

6. Custom Archive/Category pages or other dynamic pages in Gutenberg

All you need is a Gutenberg block plugin for showing posts:

• WP Show Posts – very minimal, there’s a pro version too. Made by Tom Usborne (GeneratePress theme developer).
• Gutenberg Post Blocks – tons of features for showing posts
• Ultimate Addons for Gutenberg – has tons of Gutenberg blocks, not only related to showing posts.

While WordPress doesn’t yet officially allow you to edit category/archive pages with Gutenberg, it doesn’t matter. Thanks to Gutenberg’s block-based content editor, you can choose from a variety of plugins (I listed a few above) to output dynamic content right from your editor. This allows you to turn any page into a custom archive/category page.

• Adjust what shows (title, featured image, date, author, etc)
• Adjust the order (title first or image first? etc)
• Create cool layouts (magazine, masonry, etc)

7. Using Gutenberg to replace pagebuilders

Replace your traditional pagebuilder (BeaverBuilder, DIVI, Elementor, WPBakery, etc) with a full-featured Gutenberg block library plugin (Qubely, Stackable, Kioken Blocks)…aka “Gutenberg pagebuilders”.

• Install either Qubely, Stackable, Kioken Blocks. There are other great ones as well. The paid ones will have even more fancy options and layouts. (Try installing multiple free ones, compare, then buy your favorite one.)
• Go through their starter sites from the plugin or check from their websites.
• Then work off the starter sites.
• Or simply build your your own using prebuilt parts instead of entire pages.

You can install Gutenberg pagebuilders alongside the traditional pagebuilders. And use different ones for each page. And slowly convert pages over. Not too hard to do. Just takes time.

• Replace BLOATED PAGEBUILDERS with Gutenberg blocks

Prebuilt layouts and starter sites with Gutenberg

• Install one of the full-featured block libraries I mentioned above.
• Click on their layout importer (usually at the top of the of the editor).
• Then select an existing design.
• Or you can use your starter site options that come with your theme (and make sure to pick the Gutenberg starter sites).

Template parts in Gutenberg

• Header/footer – not yet available with Gutenberg. But will soon be a native function in WordPress core once FSE (full-site editing) feature is released. FWIW, you can always use a theme like Blocksy, Kadence, or Neve to custom-build your header/footer. This would be much lighter than having a pagebuilder just for this function. Or just pay a dev to hard-code it.
• Archive template – use a posts block plugins and turn any page into a custom archive template page. (As shown above in previous section.)
• Template parts – easy as heck. Use the reusable blocks feature and group multiple blocks together if you need.

Global settings in Gutenberg – color palette & typography

• Use a Gutenberg block library that has a global settings feature.
• Then use its built-in color and typography settings to override your theme settings or settings you may have had anywhere else.
• You can decide which blocks to use global settings and which blocks to have their own unique settings.

Animations in Gutenberg

• Use built-in animation settings (available in full-featured block libraries like Stackable or Kioken Blocks). I will say that Stackable was much easier than Kioken Blocks.
• Apply manual CSS animations to your blocks through a custom CSS class. This is the most lightweight and native-browser method that doesn’t require any additionally-loaded CSS or JS library.
• Kadence Blocks also has simple parallax effects.
• Can also use Animate It! plugin to apply any animation you want. Gutenberg blocks are not yet officially supported but you can use the class generator and paste the classes into your block “Additional CSS class(es)” like this.
• I didn’t check all available Gutenberg blocks out there so look around in the wild, I’m sure there are more that have animations.

Transitions, parallax, any kind of movement with items or blocks. Gutenberg can do that stuff using native block plugins or in a manual way. I’m sure existing Gutenberg block plugins will add many more very very soon. By next year, they should rival existing pagebuilders easily.

But personally, I much prefer sites without animations. They look so cheesy and unprofessional. I don’t know of any high-end million dollar corporate site using them. They distract from your content, and utterly non-essential. Your design should look great without needing any gimmicky effects.

Did I miss anything?

List your questions and comments:

• If you’re having any basic trouble with Gutenberg, please let me know and I’ll add some workarounds to the guide.
• Please do not ask questions without having tried Gutenberg for more than 5 minutes. I’ve noticed many people are asking extremely basic questions that easily answered with a Google search.

Gutenberg is improving rapidly anyway. So many more options and flexibility of use. I can’t wait to see where it goes. All the beta stuff I’ve been playing with is really exciting. It’s the future of WordPress for developer users. We now just have to get all the newbies on board. And it may take a little more time until Gutenberg is truly intuitive enough…but it is oh, so worth it!