In the year 2018, WordPress moved away from its long-running editor to one it called “Gutenberg”.

As opposed to the editor of old, WordPress users now use modern drag-and-drop block editors to create and modify sites, create content and even sell their products and services online.

If you’re an experienced user struggling to get the hang of the brand new editor or if you’re new to WordPress This guide will help you master the basics. Learn:

How do Gutenberg Blocks differ from traditional editor.
How can you utilize the block builder to edit and create pages.
What are the Gutenberg blocks can do.
How do you unlock additional options using the sidebar.
How can you use the toolbar to become more efficient.

The Classic Editor The Classic Editor. Gutenberg Blocks

The move from the traditional editor blocks to Gutenberg blocks is an enormous step for WordPress. Let’s examine which editor features have developed.

The Classic WordPress Editor

From 2003 until the year 2018, WordPress provided its users with a text editor that was basic.

The original WordPress editor was the standard WYSIWYG (“what your eyes see are what receive”) editor.

That is you entered your content in the open field and formatted it using the toolbar available and that’s the way your text appears on your site.

It’s an easy interface, and one that a lot of WordPress users became familiar with over time. However, it was not without its flaws.

For instance

This is the way that content will appear on the site after it was published. But you’ll only be able confirm that everything was properly translated from the editor’s point of view to the website via”Preview” “Preview” option.

There was no way to create content in the environment of the webpage. Additionally, it required an understanding of HTML or a heavy reliance on plugins to develop more sophisticated layouts and designs.

In the year 2018, WordPress began to address these issues by releasing the latest WordPress editor (i.e. Gutenberg).

The Gutenberg Block Editor

The latest WordPress editor features a drag-and drop block editor.

This means that content can no longer be created by a single editor. Blocks are dropped in an area to make up the contents of a page.

Once each block has been selected, it is accompanied by an individual toolbar. This makes for a simpler and personalized editing experience since you only see the editing options you’ll need at that moment.

The Gutenberg editor also makes it much simpler to add different types of layouts and contents which would otherwise be long or complicated for the WordPress novice to create independently.

Furthermore, there’s no more guessing games. What you create in the block editor determines what you will see on your site. The fonts, styles, and layouts all align:

Is One WordPress Editor Better Than the Other?

Which one is more effective either the traditional editor, or Gutenberg You’ll need to determine that by yourself.

While WordPress is automatically installed with Gutenberg Users can also use an additional Classic Editor plugin if they’re not quite ready to transition towards the block editor at this point.

There are additional editor add-ons available as well. Elementor and Beaver Builder are two of the most well-known editors that drag and drop, Block Categories though they’re most suitable for developers and designers who want to access additional options.

Let’s now look deeper into Gutenberg and provide you with a clearer understanding of what you can expect from Gutenberg, WordPress Drag-and-Drop editor.

How to Use the Gutenberg Block Editor?

Let’s look at our experience with the Gutenberg block editor and set up an entirely new webpage (or posting).

Begin by selecting the WordPress menu that is located on the left-hand side of the screen. If you’d like to create a new website page, click on “Pages” and then select “Add New”. If you’re looking to create a blog post, click on “Posts” and then select “Add New”.

Add a Title

When you have your new page or post that you have created and titled, you must give it a title within”Add Title. “Add title” block:

Create Your First Block

Paragraphs are typically the mainstay of the content that we include on our web pages This is the reason The first block Gutenberg provides to us will always be a paragraph block.

If you’d like to begin with a paragraph, simply add your cursor in the empty block which says “Start writing or type to select an option”. When you write, your text can fill up the entire block.

Customize Content in a Block

To change the style for your article, make use of the toolbar that appears above it.

Alignment

For the majority of Gutenberg blocks You’ll be able to alter the orientation of the content within the block:

The left side is the default. You can also decide to align your content in the center or right. content.

Formatting

If there’s a text inside a block that you want to format, you can do so by using bold

Make the text bold

Add a hyperlink to:

If you’d like to open your links in a new window, simply click the down-arrow inside the bar for hyperlinks. Once you’re finished making your modifications and are done, press the “Return” button to save the hyperlink.

Additional Style Options

If you click the downward arrow on the toolbar you’ll see additional options for text stylization:

“Code” style your text to look like it was written using a code editor:

“Inline image” lets you connect your message to images:

As you can see, this isn’t an effective way to put texts and images with each other in Gutenberg (we’ll look at a different way to achieve this in the near future).

The final option lets you add an option to strikethrough highlighted text:

More Block Options

The final button on the toolbar is always the one that shows more block options.

The options are identical no matter what type of block is being edited.

Let’s recap briefly what they are:

block settings to hide The sidebar to the right go away.
Duplicate Creates an exact copy from this block.
Add Before adds a new empty block on top of this one.
Insert after Insert After: Creates a brand new empty block underneath this one.
Edit to HTML This transforms the block into an editor for code, if you intend you to type in HTML.
add to Reusable Blocks The block is saved so that you can reuse it elsewhere on the website.
Eliminate Block: Removes the block.

Transform Block

There’s another button in the toolbar you have to know about:

The button may not always appear like this, but keep in mind this first option lets you to convert the block in question into one that is related to it.

For instance, you could transform a text-based block such as Paragraph into Heading or List. However, you cannot transform something similar to the paragraph in to an image, or a separator line. It will require a new block to do this.

Add a New Block

If you want to add a new block to your website there are a variety of choices.

Insert Before/After

You’ve noticed your Insert Prior to/Insert After options on the toolbar of your block. This is one method to accomplish it.

If you leave the block you’re currently in and hover over top of it, you’ll notice an elongated plus-sign appearing:

If you click on it the screen will show your blocks:

Choose the one you prefer to put to the block that is above that you have already.

If you look at the bottom of the brick, you’ll notice the same plus sign. The only different is that it will add a second block below the one you currently have.

Use Your Keyboard

Another method to add an additional block is using”Return,” or pressing “Return” keys on your keyboard.

This will instantly create a new paragraph block onto the web page.

If you’d like to alter the block to a different type of block, make use of the plus-sign to the right of your new block

You can also use the indentation (or) and then the block’s name you’d like to make use of:

For instance, if would like to add an image, you’d enter “/image”. This block feature will automatically populate when you type the appropriate name.

Add a Block From the Toolbar

It is always possible to make use of the add block feature on the toolbar

Browse through the choices or type in the code of the building that you’re looking for.

Move a Block

When you’ve created blocks, you may discover that you’re not happy with the order they are displayed. Maybe you’ve put one above the other instead of below.

There’s no need to remove blocks or copy-paste information from one block to another. The solution is easy.

Gutenberg is an editor that drags and drops blocks. It allows you to move your blocks where you’d like without difficulty.

There are two ways to accomplish this:

1- Use the Move Arrows

The best option is to make use of the move-arrows on the left-hand side of each block. If you hover over the block you’d like to move and you’ll see an up and down-arrow:

If all you wish only to move blocks up or down at a time this method is ideal.

2- Use the Drag-and-Drop

If you’re looking to do an even more dramatic alteration to your blocks it is recommended to use drag-and-drop.

It’s in the same location as the Arrows. Place your cursor on the block you’d like to move, and grab one from the dot that are visible at the center. The cursor will shift to a hand once you complete:

If you are moving the block to another area of the page ensure that you can notice a dark line appearing before dropping it:

This tells you it’s moving your block in the space that is available. Without this line, the drag-and-drop will not function.

Delete a Block

If you decide you’d like to eliminate the block completely there are options for this, too.

You’ve seen one before. It’s in your block’s extra options. Click “Remove Block” and it will be removed.

You can erase it using an traditional method as well. Put your cursor in the block, and then use the mouse’s “Delete” option to eliminate it.

Be aware, however, that if you’re using a text-based block, you’ll need remove the content before you can remove it in this way. For other types of blocks like an image, embeddable widget or embedded widget, etc. It is easy to hit your “Delete” button.

You can also mark the block (by clicking your cursor on the block) and then press”Delete” “Delete” button. This is useful when you wish to delete and highlight several blocks at the same time.

Create a Reusable Block

Reusable blocks are useful in the event that you wish to create an element that could be utilized across the entire site, such as an advertising block to promote your blog posts or even a call-to-action.

Instead of trying to recreate the block using the pages that it has to be on, go to your block options, then select “Add blocks that can be reused”. Give the block a name:

Once you’ve saved it the block, you’ll be able access and use it in just like you would use any Gutenberg blocks. It’s in a brand new category “Reusable”:

A Tour of Gutenberg Blocks

The old WordPress editor left a lot to be desired when it came to the ability to help users create complicated layouts and content. Gutenberg blocks eliminate the obstruction.

Let’s take a look at the blocks:

Block Categories

WordPress has done a great job categorizing the blocks of its website into categorizes.

Common Blocks

These are your basic blocks:

The most basic text and other visual elements you’ll need on a page are in this section.

Formatting Blocks

These are the formatting blocks:

A majority of them are block that are designed for developers, which means you may not require them too much. The table blocks and the pull quote blocks may prove useful.

Layout Blocks

They are the layout block

If you’re looking to break up your content (like with a big separator lines or space) or add special elements (like buttons) There are the appropriate elements in this section.

Widgets Blocks

These are your widgets

Most of the time they are the ones that belong in the sidebar of your blog, and not on your webpages. The only exceptions are blocks made by other plugins, such as the one in this WPForms example.

Embeds Blocks

These are the embeds you can use:

They can be used to integrate the content of other social media platforms. This is great to embed content such as YouTube videos SoundCloud videos, as well as tweets.

Most Commonly Used Gutenberg Blocks

As you can observe, there are tons of Gutenberg blocks that are available. However, there are certain components that are used by everyone to make pages or posts within WordPress So, learn the basics of WordPress:

Paragraph Block

Utilize your Paragraph block in order to include plain text on your page.

Heading Block

Add a Heading Block on your website.

They let you introduce new subjects on your page and make your content more readable. The H2 buttons, H3, and H4 buttons allow you to create a hierarchy for the page’s headings, too.

List Block

Utilize Blocks like the List block to include a bulleted or numbers listing to the webpage:

This can also be helpful in increasing comprehension.

Image Block

Use the Image block in order to upload an image to your site.

You can upload images from your computer or choose one already in the media library.

Video Block

Utilize this block of video to place an embedded image onto your site.

You can upload a video select the one you have in your library or download it via a link.

Since videos can take up a significant amount in space, your most efficient alternative is to save the file on a video sharing platform such as Vimeo and YouTube. After that, you can embed it using the help of a hyperlink.

The Video block isn’t the best option. block to do this. Instead, search for the appropriate embed.

YouTube offers one of the following:

As does Vimeo:

It is recommended to do the same for all audio file (like the soundtracks and podcasts) you would like to include on the page. You can either use either the audio block, or related embed (like for Spotify) to add this information.

Button Block

Make use of the buttons block in order to lead your readers or readers to do something:

They could be directed towards: “Schedule Now”, “Sign Up”, “Read More” and so on.

Media and Text Block

As we mentioned previously as previously mentioned, the Inline option for images in the text block can be not a good method of combining images and text. Instead, you should use instead the Media and Text block to accomplish this:

Columns Block

Another method to put two blocks (of the same or a different kind) in front of each other is to use Columns block. Columns block:

To add columns to either the left or right by hovering over the blocks within the column and click the plus-sign. The same process applies to adding a new block however, this time they’ll be added horizontally.

Social Media Embedding Blocks

Instead of using the embed code of social media sites to display the post on your site include the URL to the post in this:

It is possible to embed blocks available for Facebook, Twitter, and Instagram So, find an Embed block that matches your social media posts.

Classic Block

The classic block allows you to continue to make new content in WordPress with the editor of the past:

The classic block comes into play when a site changes from the traditional editor and onto Gutenberg. Gutenberg editor. Gutenberg will not automatically attempt to transform your text into blocks of its own. It will simply place them in the editor’s classic interface.

If you’d like to convert your block to Gutenberg blocks, click “More Options” and choose “Convert to Blocks”:

It will try its best to convert every element in your editor to a matching block:

Be sure to look over the outputted blocks for issues before saving your modifications.

WordPress Plugin Blocks

Most of the popular plugins used by WordPress users are Gutenberg-compatible. In some instances the plugins have developed special blocks that appear in the editor.

For instance, if you’re using a plugin for contact forms like WP Forms You should be able to find the appropriate block:

Simply create your form within the plugin, and then find it in the dropdown that is provided here. It is not necessary to hunt down and copy and paste your short codes for your form any more.

Yoast is a well-known SEO plugin is another one that’s been added block extensions to Gutenberg:

WooCommerce , WordPress’s eCommerce service has also done similar:

There are “ultimate” Gutenberg plugins that bring a lot of blocks that you can build with for instance, Ultimate Addons that work with Gutenberg:

These plugins can extend the capabilities of your block-building tool. If you’re creating a site that requires special elementssuch as Google Maps or testimonial blocks or eCommerce functions It is possible to integrate them into Gutenberg by using plugins similar to these.

An Overview of the Document and Block Sidebar

Once you’ve got your block editor in place, let’s concentrate on the block sidebar as well as the document.

The Document Sidebar

If your cursor is within the title block or in the document where the block does not exist the sidebar will be pointing to the document settings:

They allow you to manage things like the status or appearance of your page.

Here are the top ones you need to be aware of:

Status and Visibility

In this section you can alter who is able to view the page (Public private, private, or password-protected) and the time it is published (if it is not immediately). If you wish to remove the entire page. It is possible to do this here, too.

Permalink

This panel can be used to alter the URL’s slug (the part that identifies the URL). For example:

https://mywebsite.com/gutenberg-block-builder/

Featured Image

This is the featured that people are presented with when blog content is displayed on your blog’s main feed. This is also the format that social media platforms employ to display previews of your blog posts.

The Block Sidebar

If your cursor is placed in any of the blocks that are on the webpage (except your title) the sidebar switches to an editor for blocks:

This sidebar offers an additional option to edit your block, if you’d like to use to edit them. The block’s sidebar can be different based on the type that block is being worked with.

For example the sidebar for a paragraph shows the editing choices for

You can change the text’s size and the color of your background or text that the block is displayed on. If you are able to utilize CSS classes you can further personalize the appearance of your block by selecting “Advanced settings”.

The image sidebar however provides these options:

You can include alt-text in the image ( crucial for SEO) Change the image’s size, and then link the image to a website page.

Certain blocks don’t have other settings on the sidebars, such as the Twitter embed:

All you are able to create is an individual CSS class in “Advanced Options”.

The bottom line is that if you feel that you aren’t able to edit your block in full with the block toolbars, make sure to check the sidebar to see additional options.

What to Do With the Toolbar?

The final component of the editor that you have to get familiar to is the bar, which can be found at the top of the editor:

It may appear to be an empty space to keep buttons like the “Preview” or “Publish” buttons however there’s a lot more you could as well and should make use of the toolbar.

Let’s look at the fundamentals:

Blocks

The first button on the toolbar is where you will be able to access the following blocks:

Undo/Redo

The following two buttons let you to erase (the left arrow) and redo (the right arrow) the last modification that you’ve made on the webpage:

Page Info

If you’re looking to design pages that are simple for your readers to glance through your content, the “i” (info) icon will give you a quick overview of your pages:

There are:

How many words have you written.
There are many headings along with the breakdown of titles below.
How many paragraphs are there.
How many blocks have you used.

It’s the word and the heading count which are the most significant aspects to be focusing on in this article.

Page Structure

The following section of the toolbar will show every block you’ve constructed to create your webpage:

You can use this to scroll quickly towards the page you want to tackle. This can be useful for editing content on pages or posts.

Save Settings

The first three buttons on every page or blog you design:

Make use of “Save Draft” to save any changes private when you are working on a document.

Utilize “Preview” to see the web page you have on your site.

Utilize “Publish” to upload your website to the live site. When the page is published, the link will switch into “Update”. This button lets you save and upload new variants of your page onto the website.

Settings

If it is clicked, the tool (settings) icon clicks, it disappears or displays it the Gutenberg sidebar. This is how it appears as when it’s disabled:

This is how it appears like when it is enabled:

More Options

The final button on the toolbar offers more options as well as tools. You can use this button if you’d like to customize you Gutenberg workspace.

View

First set of options related”View. “View”:

“Top Toolbar” moves the toolbar away from your blocks and puts it on the top of your screen:

The editing options remain the same depending on the block you’ve chosen. The only change is that it’s found on right at the very top.

“Spotlight Mode” eliminates blocks that aren’t being used:

If you’re looking for help to focus on one area at one time, this is an effective tool that can help.

“Fullscreen Mode” is Gutenberg’s writing distraction-free mode:

It also removes the WordPress menus at the left and right and the Gutenberg sidebar that is on the right.

Editor Mode

Next set of options is in editor mode.

By default, Gutenberg allows users in “Visual Editor” “Visual Editor”.

If you’d like to write your website in HTML You can switch into “Code Editor”:

However, a much more efficient and more efficient way to edit your blocks of HTML is to edit each block each one at a time (since there is no have to change the whole code of the page).

You can open the editor for code under “Edit as HTML”:

This converts the block into HTML:

Edit it however you think appropriate. If you’d like to convert it back into visual mode, go to the block options, then select “Edit visually”:

Tools

Gutenberg is also equipped with a suite of tools to help you can simplify your experience using the editor:

One tool that is first is called the “Block Manager”:

In contrast to this block-based navigation system that we previously reviewed, this lets you turn off any blocks you don’t want to use. This way that when the time comes to look for an additional block, you don’t have to go through blocks you won’t make use of.

“Manage Reusable Blocks” will lead you to the blocks that can be reused editor:

This is the location where the blocks you save will be saved. To modify the parent block (or make a brand new one completely) you can do it here.

Although Gutenberg certainly has made it simpler to create content using WordPress however, certain processes can become repetitive. Utilizing Gutenberg’s “Shortcuts” You can make things easier, such as undoing the last edit or duplicate a block highlight highlighted text and save your changes using only your keyboard.

All that the “Copy Content” option does is highlight and copy all the blocks of the page. You can use this option to create a new page identical in terms of content and design. Simply go the Pages menu, select Add New, and then copy and paste your blocks onto the blank page.

The last option in this list is referred to as “Options”. What it does is allow you to disable specific document settings in the sidebar

Also, if you notice that certain elements of the editor that you do not make use of (like Pages Attributes) You can turn them off to ensure they aren’t distracting from the features you’re supposed to work with.

Wrap-Up

Since WordPress had been using an identical editor prior to day one there was a bit of reaction at the time Gutenberg was first launched.

However, if you take a take a look at the drag-and-drop contests growing all over WordPress (Wix, Shopify, Squarespace etc. ) It was the perfect time to switch.

The editor’s evolution has proven to be successful and has allowed WordPress to provide users with services at all levels. Users now enjoy the following benefits from building websites using an editor block:

A customized editor view that will make you more efficient.
Easy to create and personalize content.
The creation of content is more advanced and does not require the technical knowledge previously required.
Blocks that can be reused speed the design process and guarantee consistency across the site.
Easy to include and customize conversion elements (like buttons for call-to-action as well as forms).
Popular plugins and themes are Gutenberg-compatible.
Quicker speed to start.

In 2022, the classic editor won’t be accessible. Therefore, now is the best moment to think about what you can do to get Gutenberg perform for your needs.

How to Use Gutenberg (WordPress Editor)