Change can be scary, but it’s usually for the better. Change is definitely a good thing when it comes to keeping your website up to date. WordPress.org released Gutenberg, the WordPress block editor in 2018, and it has made site building even easier.
If you’ve been using a classic page builder from another site such as SquareSpace or are even still using the Classic Editor on WordPress, then it’s time to make the switch.
What is the difference between WordPress.org and WordPress.com?
First, a quick run through some basics. I mentioned Gutenberg is for WordPress, and by that I mean WordPress.org. WordPress.com and WordPress.org are actually two different platforms.
WordPress.org is often referred to as “the real WordPress.” It’s free, open-source, and self-hosted (i.e. you obtain your own hosting and domain). It’s the leading content management system (CMS) on the internet—powering 40% of all sites across the web—and it is highly flexible and easy to use. We love it because it puts bloggers and website owners in control of their content. You can choose your own domain name, you can pick a theme that is made to showcase your work and style, you can monetize, and you can optimize your site for search engines.
WordPress.com on the other hand is actually a hosting service. There are 6 pricing tiers, one of which is free, but there are a lot of limitations. It’s not a practical solution for anyone trying to monetize or run a high traffic site. While you can get some extended features with the higher end payment plans, the costs are high and not worth the trade-off of sacrificing your control and options. Building on “the real WordPress” will afford you much more flexibility, control, and room for customization and growth based on your needs. Learn more about WordPress.org vs. WordPress.com in this WPBeginner article.
What Is Gutenberg?
Next, let’s talk about the Gutenberg block editor for WordPress.
To start, what is Gutenberg?
With the release of WordPress 5.0, Gutenberg is the now the default WordPress editor.
You need to be on at least WP version 4.8 to use the Gutenberg plugin, but once you update to 5.0, Gutenberg will automatically become the default. (There is a plugin for the classic editor, should you wish to keep it active.)
The goal of this new editor is to make WordPress easier and more intuitive to use, especially for beginners. The distinct difference between the two editors is that Gutenberg brings with it the introduction of “blocks.” The classic editor, on the other hand, is basically a word processing interface—like Microsoft Word. The blocks that Gutenberg is based upon make it much simpler to design web pages and create content with the elements you need with less reliance on shortcodes, HTML, and plugins to make things work.
The experience of using the block editor is akin to a website builder, because you can easily add blocks for styling or features and functionality. WordPress page builder plugins like Elementor or Divi are no longer needed!
How to Install the Gutenberg Block Editor
Previously, you could download Gutenberg as a plugin, but that is no longer required as Gutenberg is now the default editor.
To enable it, first make sure you are updated to at least WordPress 5.0, then go to your plugins area and deactivate the Classic Editor plugin. If you run into compatibility issues you still have the option to go back to the classic editor by re-activating that plugin.
With that said, let’s get down to why you should start using Gutenberg blocks for your WordPress site.
Benefits of the Gutenberg WordPress Block Editor
I don’t want to pretend like Gutenberg is universally loved. It was a controversial change, and for those who are well-accustomed to the classic editor, there can be a learning curve. But Gutenberg is here to stay, and there are a lot of great things about it. Let’s look at some more of the benefits and the top reasons to switch to the WordPress block editor.
Less Clutter
The Gutenberg editor is much less cluttered than the classic editor. This makes it easier for bloggers to write, especially on smaller screens. More screen space, plus less stuff in the way, makes a better experience when you want to add new posts.
I don’t know about you, but I’ve had several incidents with the previous UI where I accidentally clicked away from the post editor because I was hovering over something in the WP dashboard sidebar. No more!
It’s also easier to find certain features and settings since everything is more organized.
Easier to Edit
The blocks make for a better editing experience on your blog posts and web pages. You can move the blocks around, copy/paste blocks, add or delete blocks, and go into the individual block settings for more control.
Pressing enter automatically creates a new paragraph block. This creates a very fluid editing experience as you’re typing. It might seem strange at first that each paragraph is it’s own block, but as you become more accustomed to this you will see that this allows you to easily insert different blocks wherever you want in your content, for example, if you want to drop in a quote block or a call-to-action.
Some other standard blocks that you can integrate easily into your content include heading, columns, embeds (for videos, music, podcasts, social), list, image, gallery, and much more. (Mai Theme 2.0 also offers its own theme-specific blocks for enhanced functionality. I’ll get to further down or jump there now.)
There are even keyboard shortcuts to make editing even quicker and easier, and a handy new toolbar with a way to search or add blocks, editing modes (edit or select), undo/redo, and a list view.
Another convenient aspect of Gutenberg is that when you’re editing, the backend is very similar to what you see on the front end, which makes editing faster and more precise and reduces the need to switch back and forth to see what your content looks like on the front end. (Still, it is not exact, so it’s always a good idea to check your content on the front-end before sharing/promoting it.)
As a bonus, it’s more convenient for mobile too. You can edit your content on the go by making fast edits like adding photos or adjusting paragraphs.
Ditching Reliance on the TinyMCE Editor
WordPress will no longer be as dependent on TinyMCE software as it was with the classic editor. This is considered to be a good thing for the user experience as there will be better integration between developers, plugins, and content creators.
Terminology for Consistency and Clarity with Gutenberg and Mai Theme
Let’s face it, WordPress lingo can get pretty confusing. This is especially true since the introduction of Gutenberg. We designed Mai Theme with these terms in mind. Here’s how they apply to Gutenberg and Mai Theme.
Blocks
Blocks are the smallest, individual content elements that can be added to the editor screen to position content and create pages on a website.
Each item added to a page or post is a content block: a headline, sub-headline, paragraph, bullet list, video, quote, number list, image gallery, audio element, button, list of posts, and more.
Blocks can be static content (like an image) or dynamic (like a list of posts that changes). They can also be used in any order and any configuration to create unique designs.
Sections
Sections are groups of blocks combined to create predefined content areas that serve specific purposes. Think of a section as a row (or content area) of content on a page and everything within that section that creates the design.
Examples are a testimonial section, call to action section, hero section, featured posts section, three columns section, form section, or team members section.
Layouts
Layouts are groups of patterns and/or blocks combined to create and design a template for an entire page or post.
A predefined page layout—like a home page layout, sales page layout, webinar registration page layout, or about page layout—gives you a beautifully designed and well-thought-out page template to start from so creating new, unique pages and posts is fast and easy.
When full site editing (FSE) in Gutenberg is adopted, layouts will include the header, footer, and global or repeating block areas, like sidebars.
Templates
Templates are strategic collections of layouts combined to create an entire website or blog. Templates are a blueprint for an entire website. These website templates help you launch a site quickly while keeping brand consistency between page layouts.
One of the biggest issues of copying/pasting blocks and patterns from random sources is you begin to lose your brand consistency. Maintaining a consistent website layout helps your viewers feel like they are in the right place when they browse your site.
A template simplifies and speeds up the process of creating a new website by bundling all of the blocks, patterns, and layouts together that are needed for a specific type of website.
Templates apply a unifying design style to all parts of a website so it has a uniform, consistent design.
Gutenberg New Features & Block Examples
As mentioned earlier, the new block editor comes with different types of blocks that make it easier to create content. Here are a few of those explained with a little more detail.
Tables & Columns
Tables are more convenient to add than they were in the classic editor. You used to need HTML code, now you can just insert tables as blocks into content. Create a pricing table or clearly represent date or specs with a table.
You can also add responsive column blocks and then put whatever content you want inside those columns (text, images, headings, etc.). There are preset column layouts and widths you can start with, and from there you can customize.
Example of a Columns Block
This is a 3 column layout using the 33/33/33 variation.
Display whatever blocks you want here quickly and easily.
Use columns to change up your design and organize content.
You can add as many rows of columns as you want. This one is a 2 column, 50/50 layout.
Display whatever blocks you want here quickly and easily.
Example of a Table Block
| This is the header section. | Header label 1 | Header label 2 | Header label 3 |
|---|---|---|---|
| This is a table. | Represent data, statistics, facts, and more here. | Use stripes or default style. | Cells auto-adjust based on your content, or, set them to fixed width cells. |
| Data set 1 | Data set 2 | Data set 3 | Data set 4 |
| Data set 5 | Data set 6 | Data set 7 | Data set 8 |
| Data set 9 | Data set 10 | Data set 11 | Data set 12 |
Custom HTML
The custom HTML block can be used to add HTML coded content from right within a block. No more going back and forth between text mode and visual mode to add content and make edits!
Text Options
Gutenberg includes new styles and options for text. Now, you can change the font size, make a drop cap, or change the colors of the text with a custom color palette.
Example of Different Text Styles
This Is Default Text with a Drop Cap & Medium Font Size
This Text Is Using a Heading Style
This text is using a Subheading style
This Text Is Using a Heading Style, a Color from Our Color Palette, and Large Font Size
Autocomplete and Recent Blocks
The new WordPress block editor also allows autocomplete to insert blocks. This means you can quickly format content however you want it. This is great for mobile & tablet editing because it requires less use of a mouse or trackpad.
Recent blocks is another helpful feature because it lists and gathers your most-used blocks so that you don’t have to search for them every time.
Reusable Blocks
Another useful new feature is reusable blocks. In WordPress, these are content blocks that are saved individually to be used later. These allow bloggers to save content snippets right in the editor and reuse them anywhere.
This helps because many bloggers will reuse content in calls-to-action or in a table which they used to have to copy and save in a file elsewhere. Reusable blocks make adding this content much easier now that WordPress users can save content right in WordPress for later and repeat use.
Reusable Block Example
This is an example of a reusable block to join our email list. We can quickly and easily insert this pre-made block anywhere.
Join Our List
Join our list for updates about our themes & announcements, new blog posts and podcasts, blogging tips, and more.
Anchor Links
The WordPress Block Editor makes it easier than ever to add anchor links to sections or headers in posts. These are very useful for adding “jump” links, which I have done several times in this very post. This feature also makes for better sharing and SEO.
How to Create an HTML Anchor
Select the block you want to add an anchor to, and then in the sidebar settings of the editor, make sure you have the Block tab selected. Scroll down until you see Advanced. That is where you’ll find the HTML anchor field.
Using an example from this post, to link to an anchor, it would look like this:
<a href="#mai-theme-block-based">jump there now</a>New Alignment Options
You used to only be able to align center, left, or right. Now you can align wide and full-width on most blocks as you see fit. This gives you more formatting options for design within your posts and pages which is always a good thing.
Example of a Full-Width Block
Below is an example of a full-width reusable block. It contains a Columns block inside a Group block. (If you want add a background color like this, put your blocks inside a Group block.)
Buttons
The most obvious use of buttons are of course for calls-to-action (CTAs) and drawing attention to links. No more complicated HTML just to create a button.
There are also four style you can choose from, default, secondary, outline, and link. If you are using a Mai Theme website template, the colors of these buttons is defined by your site’s colors (which you can edit via the WP Customizer under Theme Settings > Colors.
Examples of Button Styles
Images
There’s a new drag and drop feature for adding images. Drag an image over from whenever it’s saved on your computer (desktop, downloads folder, etc.) and drop right into your content where you want it. This automatically adds the image to your media library as well.
In addition, the image block makes for a faster and cleaner way to put inline images in the middle of content.
There are also blocks for Media & Text, Gallery, or cleanly display your images inside of a columns block.
Example of Gallery Block
Embed
The new Embed block will make it much easier to add videos and audio from all platforms. You will be able to embed media content, not just from YouTube but also Hulu, Vimeo, SoundCloud, Twitter, Imgur, and more.
You could add media from these sites in the classic editor, but it was such a hidden and complicated process that not many people chose to. This, combined with the new alignment options, make media easier to embed within a post or page and make it look nice.
There are also specific blocks for specific media, such as YouTube, Vimeo, Spotify, etc.
Example of a video embedded with a YouTube Block
Watch this video to see how easy it is to build a block-based homepage in Mai Theme 2.0.
Plugins Are Optimized for Gutenberg
All of your favorite WordPress plugins like WooCommerce and Yoast have been updated and optimized for specific compatibility with Gutenberg. You won’t have to worry about finding new plugins. Plus, there are blocks for basically all of the tools, software, and social media you are already using. Here are a few:
- WooCommerce includes blocks for displaying featured products, reviews, categories, new products, sale products and more.
- LearnDash includes blocks for course, lesson, topic, and quiz lists, course progress, student and visitor conditional content, and more.
- Yoast includes blocks for related links, estimated reading time, breadcrumbs, how-to’s, FAQs, and more. (The last three are great for structured data.)
- There is integration and blocks for all sorts of contact form plugins like WPForms.
- There are blocks for Twitter, YouTube, SoundCloud, Spotify, Flickr, Reddit, Kickstarter, Tumblr, Tik Tok, and so much more.
I could go on but the list is vast and virtually endless… You get the point. It’s now easier than ever to tie all your content, marketing, and media together on your website.
Mai Theme 2.0 Is Fully Block-Based
We created WordPress themes for all different types of styles and industries. Our latest version of Mai Theme is made specifically with Gutenberg blocks in mind.
What Will Happen to Your Mai Theme v1 Shortcodes?
We’ve gotten rid of the shortcodes from Mai Theme Classic—these are all now block-based and easier than ever to use. There are a few implications of this change though.
- Version 1 shortcodes like [grid] and [columns][col] are now replaced with Mai Post/Term Grid, Mai Columns, and the built in Columns block in WordPress. These will need to be set again.
- Any pages you’ve built with the Sections Template (or that use the [section] shortcode) will need to get rebuilt with blocks. “Sections” are now even easier with the Group block (solid background colors) and the Cover block (background images) and our custom Spacing and Content Width settings. Super easy and even more flexible.
The [[grid]] shortcode in Mai Theme Classic has been revitalized as two new block types in Mai Theme 2.0—Mai Post Grid and Mai Term Grid.
Adding a grid for pretty much anything—posts, pages, products, favorites, categories—is now extremely intuitive and flexible. Display and organize your content for easy viewing that will look great on any page or within a post. Show off your most popular blog posts, or feature your products for a smoother ecommerce experience. Here’s a quick demonstration of how the Mai Post Grid block works:
Blocks Exclusive to Mai Theme 2.0
Mai Theme 2.0 offers its own blocks that allow you to enhance your content even more. These custom blocks make it easy for beginners to build a website at a professional level.
Built-in Mai Blocks
Some of our Mai blocks are built right into the theme, which means they are included at no additional charge to you.
These include:
- Mai Post Grid & Mai Term Grid
- Mai Icon
- Mai Columns
- Mai Divider
Add-on Mai Blocks
These Mai block plugins add additional block-based features and functionality to your site. Get them ALL with your purchase of the Mai Theme Pro or Lifetime Bundle.
Mai Testimonials Plugin
With Mai Testimonials, show off all the great things your customers have to say about you, while building credibility and increasing conversions.
Mai Notices Plugin
Use our Mai Notices plugin to display custom callout notices to grab attention and share special information in any content area on your posts, pages, and products.
Mai Icons Plugin
Include unique icons on your website with the Mai Icons plugin. There are over 7000 icons to choose from! Customization options include size, color, spacing, and more.
Mai Favorites Plugin
Use Mai Favorites to give your visitors a way to easily browse collections of your favorite things such as affiliate products, recommendations, services, and more.
Mai Table of Contents Plugin
Add the Mai Table of Contents to the beginning of your posts or pages to improve readability. The table is auto-created from your heading structure so readers can jump to the section they want easily.
Mai Ads & Extra Content Plugin
Boost your sales by easily embedding CTAs, display ads, and more anywhere on your site, all from one simple to manage spot with Mai Ads & Extra Content.
Mai Accordion Plugin
Mai Accordion is perfect for displaying expandable FAQs, transcripts, resources, and even research. Add a title/question, then easily insert any block you want into the answer section.
Mai Archive Pages Plugin
Mai Archive Pages plugin allows you to build robust and SEO-friendly archive pages with blocks. Customize the content before and after your archive content to strategically build out your archive pages for SEO.
Mai Display Taxonomy Plugin
Mai Display Taxonomy is a utility plugin that creates a category to use with Mai Post Grid. It gives you total control over your grid content in various areas of your website.
Mai Post and Mai Term Grid
As mentioned above, grids in Mai Theme have undergone an overhaul in our transition from Mai Theme v1 (that utilized the classic editor) to Mai Theme v2. Grids are now handled via the Mai Post Grid and Mai Term Grid blocks, which are built right into the theme.
Mai Post Grid Example
This example shows a grid of three posts by choice (i.e. handpicked) with a full image, title, and read more link.
Mai Term Grid Example
This example shows a grid of items using our “Pattern Categories” taxonomy, showing all items in this taxonomy. Like the Mai Post Grid, you can also display by choice or parent (i.e. parent page). There are so many customization options with both of these grid blocks.
Mai Icon
The Mai Icon block is also built right into Mai Theme 2.0. Quickly add icons to enhance your content. You can adjust size, colors, spacing, and more.
Example of Mai Icon BLocks
In this example, Mai Icon blocks are used inside of a Mai Columns block in conjunction with headings, text, and buttons to highlight our core offerings.
Mai Theme Essentials
Build exactly the website you need with a powerful, secure, optimized, and customizable WordPress theme.
Mai Pro Pack
Get our premium WordPress plugins plus access to our block pattern library.
Mai Divider
Add and customize a full width section divider that draws attention and makes the content inside stand out. Mai Divider can also be great to use in the page header and some of our website templates, such as Mai Reach, have theme already set up for you.
Mai Divider Example
We use Mai Divider as a standard element on our podcast posts to showcase the next episode at the bottom of the page. Below is an example.
Next Episode
005: Choosing the Best WordPress Theme
On today’s episode of Cranktivity, I have two members of the BizBudding team with me to shed some light on how to choose the best WordPress Theme. Tune in and get some behind the scenes insights on how Mai Theme was built and what makes it special.Today’s GuestsMike HembergerMike is co-lead developer of Mai Theme …
More Mai Theme 2.0 Perks
While this is not block-related, it’s worth mentioning that with Mai Theme, there’s no landing page template required! Hide on-page elements (page header, footer, etc.) per page/post to easily create a landing page anywhere, with exactly what you want to show. Here’s how.
Mai Theme is also lightning fast. Its powerful & flexible CSS and Javascript utilizes fewer assets and smaller files to provide extreme performance with the utmost flexibility. Your site will easily score in the high 90s with Google Page Speed Insights out of the box without any caching or optimization plugins.
Another perk is that there’s no reliance on widgets, which can break and slow your site down. Mai Theme uses block-based widget areas (aka Template Parts) like Before Header, Before Footer, Footer, and Footer Credits, for fully customizable global content areas, including content, layout, and colors.
Learn more about how easy Mai Theme and Gutenberg blocks are to use by checking out our FAQ-based tutorials on our docs site.
The Bottom Line
The Gutenberg Editor, with its block-based system, will create an easier process all around for those with a WordPress website. It allows for broader customization and it has better functionality than the Classic Editor. Don’t wait for support to end on the old content editor before making the switch!
The new customization options, speed/performance improvements, and overall ease of use make this process of switching from Mai Theme v1 to v2 (and thus from the Classic Editor to Gutenberg) totally worth it in our opinion. The flexibility of building with blocks in Mai Theme 2.0 unlocks amazing power! Also, global content areas like our Content Areas and Reusable Blocks are game-changers for managing your content and CTA’s throughout your site!
Download the How to Start Blogging Guide
Explore this FREE GUIDE to take a deep dive into how to start blogging to make money. Get a PDF version of this guide right to your email, plus weekly tips from our blogging experts at BizBudding.
