Gutenberg: All You Need to Know About WordPress’ Latest Editor

Author Keith Marchal

Posted Mar 5, 2023

Reads 8.2K

Selective Focus Photography of Woman Using Macbook Pro

WordPress has recently introduced a new editor called Gutenberg that is set to revolutionize the way we create content on WordPress. The Gutenberg editor, named after Johannes Gutenberg who invented the printing press, is an abstract term used to describe units of content that are composed in a form of blocks. The idea combines concepts from shortcodes, custom HTML, and embed discovery into one single consistent API that improves the user experience.

With the powerful Gutenberg WordPress block editor, users can customize their WordPress editor styles by using various blocks such as text, images, videos, galleries and much more. Gone are the days when creating a simple blog post involved copying and pasting various codes into the backend of your website. Now, with Gutenberg, you can drag and drop different types of media onto your page and they will automatically be arranged into neat blocks for easy editing. If you're new to WordPress today or have been using it for years, this article will give you all you need to know about how to use the Gutenberg editor effectively.

Discover the Powerful Gutenberg Wordpress Block Editor

Are you ready to take your website to the next level? If you haven't heard about the WordPress Gutenberg Editor, then you're in for a treat. This revolutionary block editor was launched back in December 2018, as part of WordPress 5.0 release. It replaces the default page builder integrated into WordPress and makes it so much easier to build pages.

Anonymous men in swimming trunks performing tricks in air while jumping into ocean against lifeguard tower under light sky

WordPress blocks include everything you need for a web page, including paragraphs, headings, subheadings, lists, images, videos and widgets. These gutenberg blocks are refreshingly simple to use and can be added with just a few clicks. For example, if you wanted to add a door block or window blocks to your page design - it's easy! With just a click of a button on the title block or content block area, you can add images or video blocks to any web page.

With the Gutenberg WordPress Block Editor's creative idea of building websites with its unique approach of using gutenberg blocks - website building has never been more fun! The possibilities are endless when it comes to designing your web pages with this powerful tool. So what are you waiting for? Dive into the world of Gutenberg and start creating beautiful websites today!

The New Template Editor in WordPress 5.8

The latest update of WordPress 5.8 introduced full site editing (FSE), which made the work building a website much easier and efficient. One of the goodness introduced in this new template editor is the ability to edit widgets visually, which was not possible before with the classic editor.

Thanks to the Gutenberg editor, it's now possible to customize your website without touching any code. The WordPress team has been working hard to improve the editor's functionality, and their efforts have paid off with this new template editor. With FSE, you can now create custom templates for your pages, control all aspects of your layout using blocks, and even design custom post templates to showcase your content in a unique way. All these features combine to make WordPress 5.8 an excellent choice for anyone looking to build a professional-looking website with ease!

How the WordPress Gutenberg Editor Works

The WordPress Gutenberg editor is a page builder that allows users to create pages with ease. It works by using blocks, which are small pieces of content that can be added to a page. These blocks can include text, images, videos, and more. Users can simply select the block they want to add and drag it onto the editor screen.

Photo of Woman Taking Notes

One of the great things about the Gutenberg editor is that it makes it easy to paste content from other sources into your page. For example, if you have text on a word document or website that you want to use in your page, simply copy and paste it into a new block. The editor will automatically format the content for you.

If you're new to creating pages with WordPress or don't have much experience with page builders like Beaver Builder Gutenberg, don't worry! The Gutenberg editor is very user-friendly and easy to use. You can literally install WordPress on your web host and be creating pages in just 10 minutes. With its simple block drag-and-drop interface, you'll be able to create beautiful pages in no time.

1. All About Blocks

Blocks are essentially individual page elements configured to work seamlessly with the WordPress Gutenberg editor. These self-contained blocks allow a user to add content to a page in an exceptionally easy and intuitive way. The list drag and drop functionality makes it possible for anyone, regardless of previous experience building websites, to build posts or pages with ease. The wide range of blocks included within the editor, as well as those created by third-party developers, allows for an almost infinite spectrum of creative possibilities.

But what exactly are these individual blocks? Well, they're simply pre-designed bits of content that can be inserted into a page or post using the Gutenberg editor. They combine text, images, videos and other media elements to create visually appealing and engaging content. Some popular examples include image galleries, buttons, quotes and video players. And with superb free Gutenberg compatible themes available online, you can make use of these exciting features without breaking the bank!

Using Gutenberg Block Editor

If you're using WordPress, chances are you've heard of the Gutenberg editor. It's a new version of the classic WordPress editor that opens you up to a large white space, like a blank canvas ready for your content. The blue box in the top left select where you want to start, and then use the block pane on the right-hand side to choose what kind of content block you'd like to add.

Man Playing Guitar on Stage

WordPress includes dozens of blocks built into the core system, but there are also third-party block plugins available that support Gutenberg. The main sections where you'll find these blocks are in the widgets and theme section of your site. Depending on which WordPress theme you're using, there may be additional party block plugins installed.

As you start building out your page, you'll notice a familiar sidebar outlining all of the blocks added. This is where you can make changes to each content block as needed – from publishing side settings like permalinks or featured image categories, to more dynamic nature tweaks that change depending on which content block is selected. For example, if you're working with an image block, you'll see options in the typography menu for font sizes and image controls. And if you're embedding YouTube videos or Twitter feeds or SoundCloud tracks or Spotify playlists or Flickr photos or Vimeo clips (the list depends on which third-party addons or Gutenberg block plugins are installed), then those options will show up in a different menu change under each respective content block.

1. Removing Blocks

One of the best features of the WordPress Gutenberg editor is the ability to add and remove blocks easily. Accidentally added a block you didn't need? No problem! Just click on the block menu, select remove block, and it's gone. Want to move blocks around? Simply drag and drop them where you want them to go.

But what if you want to remove multiple blocks at once? That's where shortcut keys come in handy. By using a shortcut key combination, you can select multiple blocks at once and remove them all with just one click. So don't let unnecessary blocks clutter up your pages – use the block menu or shortcut keys to quickly and easily remove them.

2. Adding Headers Using Blocks

Headers are an important part of any typical page as they help readers make sense of the content. With the Gutenberg editor, adding headers is easy and straightforward. All you need to do is select the heading block from the list of available blocks and start typing your header.

Once you've added your heading block, it will be automatically formatted as a header based on the level you choose. Using the small popup menu that appears at the top of each individual block, you can easily change the style, position, heading type, alignment, and even make it bold or italic. With so many options available for customizing your headers, adding a header you'll love has never been easier!

3. Adding Images Using Blocks

When you're creating a WordPress post, adding images can really enhance the visual appeal of your content. Fortunately, adding images is simple with the Gutenberg editor's image block. To add an image to your post, simply click on the blue upload button in the block menu and select an image from your computer. Alternatively, you can select an image from the WordPress media library by clicking on the "media library" link.

Once you've added your image, you'll see a familiar popup menu that allows you to quickly adjust the size and alignment of your image. You can also quickly add image alt text using the "image menu." If you want to get more creative with your images, you can use the "block add" feature to add URL links, crop your image or even add text and effects. With these easy-to-use tools at your fingertips, enhancing your WordPress post with beautiful images has never been easier!

4. Adding Written Content Using Gutenberg Editor

The Gutenberg Editor is a new addition to WordPress that makes editing easier and keeps things tidy. With the Paragraph block, you can quickly add written content to your website without worrying about formatting or spacing issues. Simply click on the Popup Menu and select the Paragraph Block option.

Once you've created your Paragraph Block, you can start editing written content right away. The Popup Menu gives you plenty of options to choose from, including changing font size, block reordering, position changing alignment adding bold italics and much more! So if you're looking for an easy way to add written content to your website, give the Gutenberg Editor a try today!

5. Adding a Link in the Block Editor

One of the key advantages of using the Gutenberg Editor for your WordPress website is its ease of use when it comes to editing and adding links. To add a link in the block editor, simply select the text you want to turn into a link, click on the link icon in the edit menu, and paste the URL into the URL box. You can preview your link by checking out the preview box underneath.

However, if you need to make changes to your link or return to an earlier version, it isn't always clear how to do so. The return icon may not be immediately visible, and sometimes links drop or require further editing. Fortunately, there are several link editing options available through the popup menu that appears when you click on a link. While understandably limited, these options allow for easy url changes and quick access to return links. Overall, adding links with Gutenberg Editor is a breeze that makes websites work easier during page building process.

6. Embed a YouTube Video

If you want to add a YouTube video to your WordPress post, you can easily do so with the Gutenberg editor. Simply click on the "+ Add Block" button and search for the "YouTube" block in the block sidebar. Once you find it, click on it and enter the YouTube URL of the video you want to embed. Alternatively, you can also copy and paste the video URL directly into the editor.

Once you have added the YouTube video block, you can customize its appearance using various editing options such as changing alignment or adding a main image or play button. If you prefer to view the code for your embedded video, click on the "Block" tab in the right-hand menu and select "Code view". With this simple process, embedding a YouTube video has never been easier with WordPress Gutenberg editor!

7. Adding a Button to Posts and Pages

Adding a button to your WordPress posts and pages can be easily achieved with Gutenberg editor's intuitive elements. To begin, click on the 'Add Block' button located at the top left of the editing menu. From there, select 'Buttons block' in the block sidebar, which will add a new white area to your design area.

Next up, you can customize your button style and enter your desired button URL by selecting the newly added 'Button block'. This will open up an editing menu where you can configure various options such as text color, background color, size, and alignment. With these simple steps, adding a button to your WordPress site is now easier than ever before!

8. Creating Tables

The WordPress Gutenberg Editor allows you to add tables to your WordPress post with ease. To create a table, simply select the "Table" block from the blocks sidebar and click on "Create Table". Once you're ready, you can start adding your table entries by typing them into the gray outline provided.

Editing tables is just as simple. You have the editing option in the block toolbar or through the "Edit Table" option in the blocks sidebar. With these tools, you can easily adjust your table's size, add or delete rows and columns, and even change its colors to match your website's theme. With this feature, creating and editing tables has never been easier!

9. Embedding Using Gutenberg

If you're using the WordPress Gutenberg editor, embedding content has never been easier. Instead of having to involve cutting and pasting code into the code view of your post or page, you can now use blocks specifically designed for embedding.

To embed your content, simply navigate to the block sidebar and find the specific block you need - whether it's a generic block that can handle any kind of embed, or a more specific block tailored to your needs. Once you've selected your desired embed block, all you need to do is input the URL or other relevant information and hit "embed". From there, you can adjust settings as needed to make sure your embedded content looks just right in your post or page.

10. Saving and Reusing Blocks in Gutenberg

Have you ever spent a lot of time creating a beautiful layout using the Gutenberg editor, only to find out that you need to use it again on another post or page? Fear not, because the reusable blocks feature is here to save your day!

By clicking on the "add block" button and selecting "reusable", you can create a simple reusable block or an action block that includes buttons, image button calls, or other interactive elements. Once created, the reusable block will be saved in the blocks sidebar. You can then access it anytime by clicking on the "add block" button and selecting "reusable blocks" at the top called "Reusable Blocks". You can even edit it by hovering over it and clicking on the three-dot option inside the editing menu. This feature is truly a time saver and lets you create once and use forever!

11. Publishing Using Gutenberg Block Editor

If you're new to WordPress's Gutenberg editor, don't worry! Publishing a post or page is a simple process. After adding your content and formatting it using blocks, simply click the blue publish button located in the upper right-hand corner of the page you're editing. You'll be prompted to save any changes before publishing, but otherwise, publishing your work is just an extra step away.

Once your work is published, you'll see the end result on the published page you'll directed to automatically. The entire process is streamlined for ease-of-use using Gutenberg's block editor, making it simple and intuitive for all users.

Keyboard Shortcuts for Gutenberg

If you are a regular user of the WordPress UI, then you know how frustrating it can be to navigate through pages and posts. However, with the new Gutenberg editor, things have gotten a little easier. One of the best features of this editor is its keyboard shortcuts. To access these shortcuts, simply click on the dot menu icon in the upper right-hand corner of your post screen.

Brown Framed Eyeglasses

Once you select Keyboard Shortcuts, an entire pane outlining all of the available keyboard shortcuts will appear. This feature is extremely useful as it allows users to perform tasks quickly and efficiently without having to use their mouse or trackpad. By using just a few simple keyboard shortcuts, users can format text, create lists, and even add media elements to their posts.

In conclusion, if you are looking to make your workflow more efficient while using Gutenberg editor in WordPress UI, then be sure to take advantage of its powerful keyboard shortcuts. Not only do they save time and effort, but they also allow you to focus on your content creation rather than navigating through menus and submenus. So next time you're working on a post or page in Gutenberg editor, remember to use these keyboard shortcuts for a smoother experience!

A Comparison of Gutenberg Editor Versus Classic Editor

If you've been using WordPress for a while, you may have noticed that the post editor has changed. The new Gutenberg editor replaces the older TinyMCE-based page and post editor. One key difference is that it uses a block-based setup, where each piece of content is its own block. This can be helpful in organizing your content and making it easier to customize.

When you open up the Gutenberg editor, you'll notice a few changes right away. The top menu now includes options to add blocks instead of just formatting options. You can choose from various types of content sections, such as text, images, and videos. Some other page elements that can be added with WordPress blocks include columns, buttons, lists, and more.

One downside to the Gutenberg editor is that if you want to manually add embeds or HTML code, it can be a bit tricky. However, overall it's an improvement over the classic editor in terms of functionality and ease of use. As someone who works in affordable software products like WordPress to help small businesses grow online (I'm CEO of my own team privately), I think this change will ultimately benefit users who are looking for more flexibility and control over their website content.

Frequently Asked Questions

What is Gutenberg in WordPress?

Gutenberg is the default block editor in WordPress, which provides a modern and intuitive way of creating content. It allows users to create custom layouts using pre-built blocks, making it easier to design pages without needing technical knowledge.

When will Gutenberg become a part of the WordPress core?

Gutenberg became a part of the WordPress core in version 5.0, released on December 6, 2018.

What is the WordPress block editor?

The WordPress block editor, also known as Gutenberg, is a visual editor that allows users to create content using blocks instead of traditional text editors. It offers a more intuitive and flexible way of designing pages and posts without requiring HTML or CSS knowledge.

How do I deactivate the Gutenberg block editor?

To deactivate the Gutenberg block editor, you can install and activate the Classic Editor plugin. This will allow you to switch back to using the old WordPress editor.

Is Gutenberg a good page builder?

Yes, Gutenberg is a good page builder that offers a user-friendly interface, blocks for various content types, and seamless integration with WordPress. Its drag-and-drop functionality makes it easy for users to create custom layouts and designs without needing extensive coding knowledge.

Keith Marchal

Keith Marchal

Writer at Exgenex

View Keith's Profile

Keith Marchal is a passionate writer who has been sharing his thoughts and experiences on his personal blog for more than a decade. He is known for his engaging storytelling style and insightful commentary on a wide range of topics, including travel, food, technology, and culture. With a keen eye for detail and a deep appreciation for the power of words, Keith's writing has captivated readers all around the world.

View Keith's Profile