The Gutenberg editor is the most significant upgrade to WordPress since it was born in 2003. While there have been several changes and updates on the platform since then, none compares to when WordPress released Gutenberg with version 5.0 back in December 2018. Then, it improved through constant changes, standing as one of the best competitors among the elite drag-and-drop page builders – Elementor and Beaver Builder.
While not being a traditional drag-and-drop builder, it is somewhat similar to the builder Gutenberg offers; thus, it is very useful for WordPress users. So, if you are new to Gutenberg, keep on reading. I promise this article will guide you through creating a webpage with Gutenberg step by step. So, worry no more, and we will be walking you through every single thing, from creating a page and adding a title and content block to images and links.
And just because we can, we’ll add a YouTube video embed, show you how to use shortcodes, and even add a button linking your page somewhere else. Oh, and remember those fiddly tables in the previous version of WordPress? Never fear – we’ll cover how to make those with ease. But wait, there’s more. We’ll go deep into block editing, grouping, column layouts, and creating reusable blocks, for absolutely turbocharged speed while building your pages. And when you are all finished, we will help you hit that Publish button to see the masterpiece you have just created. Get ready to unleash that creativity with Gutenberg!
What is Gutenberg Editor (aka WordPress Block Editor)?
Gutenberg Editor is also referred to as the WordPress Block Editor in the official documentation. It’s not merely a new shiny coat for content editing within WordPress but a new experience. Say goodbye to the old TinyMCE post content editor; welcome to a world where “editing” denotes something much bigger than tweaking text. This block editor sets the stage for handling shortcodes, widgets, menus, or custom fields.
Why the change? Well, WordPress had been doing some looking around and realized that some of the competing platforms were offering elegant writing experiences; others, like Wix and Squarespace, were showing off some easy site builders. Gutenberg brings the best of both worlds into WordPress, creating a user-friendly package.
Technically, the Gutenberg editor is a JavaScript interface built with React and the WordPress REST API. In simple words, it is all about those numerous stacks of small building blocks that make life flexible, dynamic, and very lively within your content.
Exploring the Key Differences Between Gutenberg and Classic Editor
Gutenberg, the new editor, replaces the old TinyMCE-based editor with a modern block-based approach.
Imagine! Instead of staring at a blank canvas with a menu bar hovering overhead, wondering where to start, Gutenberg hands you a toolbox of WordPress blocks. You’re free to grab, drop, and rearrange them anywhere on your page.
Here’s where things get interesting. Let’s explore the major differences:
1) Drag and Drop Content Blocks Anywhere on the Page
The game-changer? You bet. No more staring at a daunting blank space. With Gutenberg, you start with a clean slate and a bunch of blocks at your disposal. Want text here, an image there, and maybe a video below? Just drag and drop – it’s that simple. Once you get the hang of it, you’ll wonder how you ever lived without it.
2) Adding and Embedding Media
Remember the old editor’s cumbersome process for adding media? Say goodbye to that headache. With Gutenberg, it’s as easy as pie. Want to embed a video or an image? Grab the embed block, drop in the URL, and voila – you’re done! No more fiddling with code or worrying about design mishaps. Gutenberg handles it all seamlessly.
3) Reusable Blocks
Here’s where Gutenberg shines. Say you’ve got a killer call-to-action (CTA) that you want to use across multiple pages. In the classic editor, that meant a tedious copy-and-paste job, with lots of tweaking to make it fit each page. Not anymore. With Gutenberg, you create your CTA once, save it as a reusable block, and boom – it’s ready to go whenever you need it. Need to tweak it later? No problem. Just update the reusable block, and it’ll update everywhere it’s used. Talk about a time-saver!
In essence, Gutenberg isn’t just a new editor – it’s a game-changer. With its intuitive block-based approach, adding and styling content has never been easier. Say hello to a whole new world of WordPress editing!
How the WordPress Gutenberg Editor Works
If you’ve used page builders like Elementor or Beaver Builder, Gutenberg works similarly by allowing you to drag and drop blocks onto your page and customize them instantly.
Gone are the days of tediously typing or pasting content into an editor and wrestling with HTML to get it looking right. With Gutenberg, it’s as easy as selecting a block, dragging it onto your page, filling it with your content, and customizing it to match your design aesthetic.
It’s so straightforward that even someone new to WordPress could set up a website, pick a theme, and start crafting pages and posts in under 10 minutes.
# All About Blocks
Let’s dive a bit deeper into blocks – the heart and soul of Gutenberg. Think of them as individual building blocks, each ready to be dropped onto your page and filled with whatever content you desire.
With blocks, you can choose, drag, drop, add content, and style to your heart’s content. And the best part? You don’t need to be a coding whiz or a WordPress guru to make it happen.
Whether you’re adding text, images, videos, or more, Gutenberg’s blocks make building posts and pages a breeze. Plus, with a growing library of third-party blocks, the possibilities are endless. Say hello to easy website creation without the headaches!
Gutenberg in WordPress 5.8 [Full Site Editing and much more]
The WordPress team has been putting much work into expanding on the great Gutenberg editor with their latest work of art, WordPress 5.8.
In WordPress 5.8, exciting new features include Full Site Editing, an enhanced widgets editor, and the introduction of theme.json – apart from a bunch of other tweaks and improvements.
# Full Site Editing (FSE)
Did it ever feel like Gutenberg was one step away from becoming a complete page builder? With Full Site Editing, that line gets even blurrier. Now, you can harness that same power of Gutenberg to design entire websites. The work is continuous, and new features are added as they are polished. Now, you’ll need a compatible theme – like Twenty-Twenty-One Blocks – to get started. But keep your eyes peeled for more options popping up soon.
If you can’t wait to get into FSE already, the template editor is just raring to go; it’s live and waiting on your creativity.
# Widgets Editor
WordPress 5.8 also gave us a snazzy new block-based widgets editor.
Accessed from the Appearance > Customize > Widgets area, this slick system lets you fine-tune your headers, footers, and sidebars with the same ease you’d edit your posts and pages. Not to worry, your old widgets are still here; they’re just now known as Legacy Widgets. Using the widgets editor allows you to direct a page builder on areas that were pretty restrictive before – literally, a massive step forward in terms of design and the pursuit of complete site editing.
# theme.json
Lastly, we have theme.json, a new file with WordPress 5.8, which can be used to do extensive customization within the editor and of styles in WordPress. The downside is that it’s slightly advanced, so not everyone might appreciate the feature immediately. But for developers and power users, this is something that can take control of literally everything – the looks and feel of the website – to an absolutely brand-new level.
Get Started with Gutenberg Block Editor
First things first, get to the basics. Once you update to WordPress 5.0 or later, Gutenberg awaits you. There’s nothing to install; it’s already in the core.
# Interface Exploration
Once you’re in the Gutenberg Editor, take a minute to orient yourself with the interface. You will notice that your content has been broken down into different blocks; each represents a different type of element: from paragraphs and headings to images and quotes.
# Adding Blocks
Now, let’s start building! Click the “+” icon here or type “/” to add a new block. You’ll see this list of blocks pop up; pick out the one you need, and poof – it’s added to your page.
# Editing Blocks
Editing blocks has never been easier with Gutenberg. Click on a block to select it, and then above, use the toolbar to make the adjustments you want in the current block: change text styles, insert links and change alignments—you name it.
# Arranging Blocks
Want to reorder your content? No problem, just click and hold on a block, then drag and drop it in place. It’s as simple as moving furniture – only more accessible.
# Store and Reuse Blocks
One of the most exciting features of Gutenberg is saving blocks for reuse. Found a layout that you just love? Save it as a reusable block so you can use it repeatedly on your site.
# Publishing Your Content
Once satisfied with your masterpiece, you can hit “Publish,” and it goes live for the entire world to view.
# Keyboard Shortcuts for Gutenberg Editor
The Gutenberg editor also has a range of keyboard shortcuts to help users work with the blocks.
Keyboard shortcuts for Blocks
Add new block: Ctrl+Shift+Alt+T or Cmd+Shift+Alt+T
Duplicate block: Ctrl+Shift+D or Cmd+Shift+D
Remove block: Ctrl+Shift+Alt+Z or Cmd+Shift+Alt+Z
Keyboard shortcuts for Navigation
Move to the next block: Ctrl+Alt+Right arrow or Cmd+Alt+Right arrow
Move to the previous block: Ctrl+Alt+Left arrow or Cmd+Alt+Left arrow
Keyboard shortcuts for Formatting
Bold: Ctrl+B or Cmd+B
Italic: Ctrl+I or Cmd+I
Underline: Ctrl+U or Cmd+U
Strikethrough: Alt+Shift+5
Gutenberg Alternatives
When it comes to customizing your website, you have a wide range of options. You can choose from WYSIWYG (what you see is what you get) text editors, drag-and-drop page builders, and visual editor tools.
There’s always a suitable WordPress plugin available to fulfil the specific needs of your website, whether for the front-end or the back-end. Here are some top alternatives to the Gutenberg block editor:
1) Elementor
At its very core, Elementor is an affordable website-building tool, and its free version is one of the best on the market. The basic plan has fewer features than the premium version but still assures a good experience building a beautiful website through simple drag-and-drop features. Elementor is currently one of the best WordPress builders to help create sites easily and fast. It is among the most popular page builders, with over four million active installations. The user interface is quite simple to learn, yet it’s robust in features – this makes it a preference for many users.
2) Beaver Builder
Beaver Builder is a remarkable beginner-friendly page builder for learning to build and customize a WordPress website. This page builder has over 500,000 users with active installations of over 1,000,000; it’s super easy to use and very friendly. Having been developed by a former agency in the business of building websites on WordPress, Beaver Builder strives to make further this process easier and more efficient. The front-end editor is live and works in real time, so you’ll be able to see any changes while making them without ever having to refresh the page. In its extensive library, there are professionally designed, pre-made, responsive, and easily customizable templates that can be imported to your site with just a few clicks. The rest of the clean code makes it even easier to build friendly SEO websites.
3) Visual Composer
Visual Composer is a drag-and-drop page builder that allows you to create custom pages and posts without one line of coding. You can drag text, images, buttons, audio, and many other elements to be part of a page layout in just a few clicks. It delivers a library that provides a complete set of pre-designed templates and modules, making your work very easy. For a beginner and professional alike, Visual Composer is the best tool for creating the most attractive website. Easy and loaded with features to tailor pages perfectly.
End Note
As you can see, the Gutenberg editor, despite all its features, is straightforward and user-friendly. It’s the future of WordPress, giving you a glimpse of what’s ahead.
Change can be challenging, but we believe the Gutenberg editor is a step in the right direction. It democratizes web design, placing powerful tools in everyone’s hands, regardless of prior web design or coding experience.
This accessibility makes a strong case for using the Gutenberg editor, and we encourage everyone to give it a try!
What are your thoughts on the Gutenberg editor? Did you initially dislike it but have since grown to love it? Are you still unsure or sticking with the older TinyMCE editor? Feel free to contact our expert WordPress team to address any doubts about the Gutenberg editor or other WordPress-related questions.
Girish Panchal
Technical Architect
A Technical Architect, proficient in WordPress, Drupal, Laravel, and DevOps tasks, crafts robust IT solutions with a blend of expertise and versatility in web development and infrastructure management.
