What you need to know:

The WordPress Block Editor allows you to move blocks up and down the document structure in order to rearrange the content contained within those blocks. The most popular way of moving blocks is by dragging a block from one position and dropping it in another. You can also use the Move Handles (two small up/down buttons) in a block’s Contextual Toolbar in order to move it. Lastly, the third popular way to move a block in WordPress is via a keyboard shortcut. On Windows/Linux use Ctrl + Shift + Alt + T or Y and on macOS you can use ⌘ + ⌥ + ⇧ + T or Y.

Have you ever published your WordPress post or page only to later realize that it would look better if its contents were rearranged? In Gutenberg, such issues can be fixed by moving the blocks that contain your content. In this tutorial, we’ll show you all the ways in which this can be accomplished.

Table of Contents:

• What Is Gutenberg?
• What Are Blocks in WordPress?
• What Is the Benefit of Moving Blocks?
• How to Move Blocks in WordPress?
  • Via the Move Handles
  • Via a Keyboard Shortcut
  • Via Drag and Drop
  • Via the Move to Option
  • Via the Tools Button
• How to Move Blocks in and Out of Block Groups?
• Next Steps

What Is Gutenberg?

Gutenberg, called also the WordPress Block Editor, can be used to create content in WordPress such as posts, pages, and widgets. Unlike the classic WordPress blog editor, Gutenberg uses blocks to encapsulate every piece of content. This allows you to make edits to one block with minimal negative effects on the surrounding blocks.

If you are new to Gutenberg, you should learn the basics of the WordPress Block Editor as well as its interface. And if you have prior experience, you can further your knowledge by learning the various keyboard shortcuts available in Gutenberg, the different ways to customize the block editor interface, and the best third-party plugins that add new functionality to Gutenberg.

Tip:

If you don’t have a WordPress website yet, you can build one in seconds using our free hosting package. And in case you need additional resources or features, you can go with one of our premier WordPress hosting plans.

What Are Blocks in WordPress?

Unlike most document editors that are based on free-form text, Gutenberg uses blocks to encapsulate every piece of content. In other words, you can have a heading block, followed by a paragraph block, followed by an image block, then another three-paragraph block, a quote block, and so on. Every block acts as a container for its respective content. This allows you to make edits to one block without worrying about how this will affect the other blocks in your document.

WordPress offers blocks for many different types of content. All of these blocks, along with your block patterns and reusable blocks, are stored in the WordPress Block Library.

Tip:

If you wish to have even more blocks, try updating WordPress as new WordPress versions often include new types of blocks. In addition, you may be interested in our roundup of the best plugins that add new blocks to Gutenberg.

What Is the Benefit of Moving Blocks?

By moving WordPress blocks up and down your document structure, you will be able to rearrange the content that is contained within those blocks. So, if you wish to keep the same content on your post or page and simply reorder it, you can do so by moving the blocks that make up the document.

How to Move Blocks in WordPress?

There are several different ways in which you can move blocks in WordPress. In the next few sections, we’ll take a closer look at each option.

Via the Move Handles

The most straightforward way of moving blocks in WordPress is to use the Move Handles from the Contextual Toolbar of the selected block. Simply select the block that you wish to move and use the arrow-like buttons to move the block up or down.

Via a Keyboard Shortcut

If you value speed and efficiency, you’ll be happy to learn that WordPress also has keyboard shortcuts that allow you to move the selected block up or down your document structure. On Windows and Linux, the shortcuts are Ctrl + Shift + Alt + T and Ctrl + Shift + Alt + Y to move the selected block up and down, respectively. On macOS, the shortcuts are ⌘ + ⌥ + ⇧ + T and ⌘ + ⌥ + ⇧ + Y.

Tip:

Did you know that WordPress supports even more keyboard shortcuts? If you are interested, check our tutorials on how to use keyboard shortcuts to work with Gutenberg, moderate comments, and navigate the WordPress back-end.

Via Drag and Drop

Another popular way of moving blocks in WordPress is by dragging a block from one location and dropping it in another.

Via the Move to Option

This next alternative offers a blend of using the mouse and keyboard. You start by clicking on the three-dot icon at the end of the Contextual Toolbar. From there, choose the Move to option. Now, use the Up and Down arrow keys on your keyboard to move a blue horizontal line up and down your document. Once you find the perfect spot, press Enter, and your selected block will be moved to the spot where the blue line was located.

Via the Tools Button

Lastly, you can also move blocks in WordPress using the Tools button from the Top Toolbar. Here are the steps that you need to follow:

1. Click on the Tools button from the Top Toolbar.
2. Choose the Select option.
3. Click on the block that you wish to move.
4. Use its Move Handles to reposition the block via drag and drop.

You might have noticed that this approach is very similar to the Move Handles one. The main difference is that when you are in Select mode, there are fewer buttons on the Contextual Toolbar.

How to Move Blocks in and Out of Block Groups?

If you have been using the WordPress Block Editor for a while, you are likely familiar with block groups. Block groups allow you to work with several blocks at once by treating the entire group as a single entity.

If you try to move a block that is part of a block group, you will notice that some methods of moving allow you to move the block in and out of the block group while others will let you only reposition the block within the block group itself. More specifically, if you try to use Move Handles, keyboard shortcuts, or the Move to option, you will be able to move the block within the bounds of the block group only. Conversely, the drag and drop and Tools button approaches will allow you to move a block in and out of the block group.

Next Steps

The ability to move blocks in WordPress is one of the fundamental skills that you will be using on a regular basis as you create and maintain your website. If you have found this tutorial helpful, we recommend checking our other fundamental tutorials that will show you how to insert, edit, and delete blocks in WordPress. Once you have done so, you can also check our guide on how to publish in WordPress so that others can discover your content.

The post Gutenberg Tutorial: How to Move Blocks in WordPress appeared first on AwardSpace.com.

What you need to know:

WordPress allows you to add blocks through the Gutenberg Block Library. You can access the Block Library by clicking on the “+” button in the Top Toolbar or one of the “+” buttons scattered throughout your document. Then, add a block to your post or page by dragging it out of the Block Library and dropping it in your document. Additionally, you can bring up the Block Library by pressing / when your text cursor is located in an empty paragraph block.

Arguably, the most important skill that you need to have when it comes to running a website is the ability to insert new content. In WordPress, this can be done by adding new blocks to your posts and pages. In this tutorial, we’ll show you the various ways in which this can be accomplished.

Table of Contents:

• What Is Gutenberg in WordPress?
  • How Do I Access Gutenberg?
• What Are Blocks in WordPress?
• How Do I Add a Block in WordPress?
  • Via the Block Library
  • Via a Keyboard Shortcut
• How Do I Choose Where the New Block Is Inserted?
  • In the Beginning of the Document
  • In the Middle of the Document
  • At the End of the Document
• Next Steps

What Is Gutenberg in WordPress?

WordPress uses a document editor called Gutenberg. Known also as the WordPress Block Editor, Gutenberg differs from other classic editors in that it uses blocks to store your content. If you are new to the Block Editor, you can read our guide on the Gutenberg basics and our overview of the Block Editor interface. And if you have prior experience already, then you can further your knowledge by learning all of Gutenberg’s keyboard shortcuts, customizing the editor to meet your needs, and finding out what are the best plugins that add new functionality to Gutenberg.

How Do I Access Gutenberg?

WordPress will provide you with access to Gutenberg when you create a new post, page, or widget, or you opt to edit an existing one. In time, the WordPress Block Editor will be used to manage even more aspects of your website.

Tip:

Don’t have your own WordPress website yet? Sign up for our free hosting plan or one of our premium WordPress hosting packages and install WordPress today!

What Are Blocks in WordPress?

Unlike most document editors where you can write text anywhere you want and insert images and other media within your text, Gutenberg encapsulates each piece of content in its own block. So, you can have a heading block, followed by an image block and three-paragraph blocks. This separation makes for easier editing where adjusting the properties of one block will have minimal negative effects on its neighboring blocks.

All blocks available in Gutenberg are stored in the WordPress Block Library. If you wish to expand this selection, you can create custom reusable blocks, check the WordPress Pattern Library for new block patterns, and see our roundup of the best plugins that add new blocks to WordPress.

How Do I Add a Block in WordPress?

There are two main ways in which you can add blocks in WordPress. We will explore them in the next two sections.

Tip:

You can insert block patterns and reusable blocks in the same way you would add a block in WordPress!

Via the Block Library

The main way of adding blocks in WordPress is via the Block Library. To access the Block Library, click on the “+” button in the Top Toolbar.

Once the Block Library is open, simply drag a block out of it and drop it somewhere in your document.

Tip:

As you drag the block over your document, you will see some blue separator lines. These indicate where your block would be inserted if you drop it.

If you are not a fan of drag-and-drop, you can insert new blocks in your post or page by first placing your text cursor in the spot where you wish to add a new block and then clicking on the desired block from the Block Library.

Tip:

Have you noticed that there are “+” buttons scattered throughout your document? You can use those to quickly bring up the Block Library and insert a block in that specific location.

Tip:

You can speed up the process of choosing a block by taking advantage of the search functionality that is present in the WordPress Block Library!

Via a Keyboard Shortcut

WordPress also allows you to add blocks via a keyboard shortcut. To do so, begin with an empty paragraph block. Then, type / followed by the name of the block that you wish to insert. As soon as the desired block gets highlighted, press the Enter key.

To learn more, check the tutorial where we explain how to use keyboard shortcuts to work with blocks. Additionally, Gutenberg also offers a few keyboard shortcuts inspired by Markdown. Learning these Markdown-inspired keyboard shortcuts will help you quickly convert a paragraph block into another type of block.

How Do I Choose Where the New Block Is Inserted?

So far, we have discussed the various ways in which you can add blocks to a WordPress document, but not every approach can insert a block in every part of the post or page. In the next few sections, we will highlight the ways in which you can insert a block in the beginning, middle, and end of your document.

At the Beginning of the Document

When it comes to adding a block to the very beginning of your WordPress document, you have two options:

• You can drag a block out of the Block Library and drop it above your first block.
• You can add a new block using the contextual “+” button that appears between your first and second blocks. Once the new block is created, move it up, so it switches places with the first block in your document.

In the Middle of the Document

If you ever find yourself needing to add a new block between two existing blocks, you can take one of two approaches:

• You can drag a block out of the Block Library and drop it between the two blocks.
• You can add a new block using the contextual “+” button that appears between the two blocks.

At the End of the Document

Lastly, we’ll discuss the various ways in which you can add a block at the end of your WordPress post or page. You have three options:

• You can drag a block out of the Block Library and drop it at the end of your document.
• You can add a new block at the end of the document using the contextual “+” button that appears to the right of your content.

• Your last available option is to click in the space below your last element. Doing so will create an empty paragraph block. From there, you can press the / key and type in the name of the block that you wish to use followed by the Enter key.

Next Steps

Congratulations! At this point, you should be aware of the various ways in which you can add a block in WordPress. What is more, you should be able to add new blocks in the beginning, middle, and end of your document. Going forward, you should consider learning other essential Gutenberg skills such as editing, moving, and deleting blocks. And, of course, the steps involved in publishing your WordPress content.

The post Gutenberg Tutorial: How to Add a Block to a WordPress Post or Page appeared first on AwardSpace.com.

What you need to know:

You can delete a block in WordPress by selecting it and pressing the Delete key on your keyboard. Alternatively, you can press the three-dot button in the Contextual Toolbar to access the Remove block option. Lastly, it is also possible to delete blocks in WordPress using the keyboard shortcut Shift + Alt + Z on Windows/Linux and ⌃ + ⌥ + Z on macOS.

Deleting blocks in WordPress allows you to remove the content that is contained within those blocks. And while such actions are not performed regularly, at some point you will find yourself having to remove one or more blocks from a post or a page. In this tutorial, we’ll show you the various ways in which you can delete blocks in WordPress.

Table of Contents:

• What Is Gutenberg in WordPress?
  • How Can I Access Gutenberg?
• What Are Blocks in Gutenberg?
• How to Delete Blocks in WordPress?
  • Via the Contextual Toolbar
  • Via the Delete Key
  • Via a Keyboard Shortcut
• Next Steps

What Is Gutenberg in WordPress?

Gutenberg, also known as the WordPress Block Editor, is the default way of creating content in WordPress since version 5.0. Gutenberg differs from its predecessor in that it uses blocks to store your content. If you are new to the block editor, you can check our tutorials on the basics of Gutenberg and its interface. And if you already have prior experience, you may wish to further your knowledge by learning to customize the block editor, learning its shortcuts, and finding out the best Gutenberg plugins.

How Can I Access Gutenberg?

You are automatically given access to Gutenberg whenever you create a new post, page, or widget, or you opt to edit an existing one. And if you don’t have your own WordPress site yet, you can take advantage of our premier WordPress hosting plans or even our free hosting package and install WordPress in just a few clicks.

What Are Blocks in Gutenberg?

Before we learn how to remove blocks in WordPress, let’s take a moment to see what WordPress blocks are and how they are used.

Unlike most free-form document editors where your main content is text and you insert other elements within this text, Gutenberg uses blocks to encapsulate every piece of content in its own block. This separates your various types of content and allows you to manipulate one element in your document without negatively affecting the neighboring elements.

There are many different types of blocks available in Gutenberg. Some of the most used types include paragraphs, headings, images, quotes, code, and more. All of these blocks are stored in the WordPress Block Library along with your block patterns and any reusable blocks that you might have created.

Tip:

If you ever feel that the number of available blocks in the WordPress Block Editor is too low, you can check our article where we outline the best plugins that add new blocks to Gutenberg.

How to Delete Blocks in WordPress?

There are three possible ways in which you can delete a block in WordPress. We will outline each method in detail in the next few sections.

Via the Contextual Toolbar

Every block comes with a Remove block option that can be accessed through the Contextual Toolbar. Follow the steps below in order to remove a block via this method:

1. Select the block that you wish to remove. Once you do so, a Contextual Toolbar should appear right above it.
2. Click on the three-dot button at the end of the toolbar in order to access a few additional options.

3. Choose the option called Remove block. It is located at the end of the dropdown menu.

Via the Delete Key

Arguably, the most efficient way of deleting blocks in WordPress is via the Delete key. Here is how you can accomplish this:

1. Select the block that you wish to delete. You can tell that a block was successfully selected by its thin blue outline.

2. Press the Delete or Backspace key on your keyboard.

Via a Keyboard Shortcut

Lastly, you can use a keyboard shortcut to delete blocks in WordPress. Here’s what you need to do in order to perform this shortcut:

1. Select the block that you wish to remove.
2. Press Shift + Alt + Z on Windows/Linux and ⌃ + ⌥ + Z on macOS.

Overall, this method is very similar to using the Delete key. In fact, we recommend using the Delete key method since it is easier to perform.

Next Steps

Now that you know how to delete blocks in WordPress, you should find it a bit easier to create content on the platform. Other essential skills that you need to learn include inserting, moving, and editing blocks. And, of course, publishing your content.

Once you have mastered the basics, we recommend optimizing your workflow by customizing the Gutenberg interface, learning the WordPress Block Editor keyboard shortcuts and also the keyboard shortcuts for comment moderation, and navigating the WordPress admin panel.

The post Gutenberg Tutorial: Deleting a Block in WordPress appeared first on AwardSpace.com.

What you need to know:

A block pattern in WordPress is a group of two or more regular WordPress blocks. These blocks come in a sensible layout that you wouldn’t need to modify in most cases. Instead, you just need to add your own content to the block pattern. You can insert block patterns through the Block Library and also through the WordPress Pattern Library. Once a block pattern is inserted, you can work with it in the same way you would edit regular blocks.

Have you ever found yourself spending countless hours designing and building the same common elements for most of your pages and posts? If so, allow us to take you on a brief tour of the block patterns available in WordPress. These block patterns will save you time and effort since they are professionally designed and cover many types of content such as image galleries, multi-column texts, page or post headers, social media buttons, and a lot more.

Table of Contents:

• What Is the WordPress Block Editor?
• What Are Blocks in WordPress?
  • What Are Block Patterns in WordPress?
• Using Block Patterns in WordPress
  • Inserting Block Patterns
  • Editing Block Patterns
  • Deleting Block Patterns
  • Adding New Block Patterns
• Conclusion

What Is the WordPress Block Editor?

The WordPress Block Editor, known also as Gutenberg, is the default way of creating content such as posts, pages, and widgets in WordPress. It is the successor to the classic WYSIWYG editor and it uses blocks to store content. If you have not used it in the past, you can check our guides where we explain the basics of Gutenberg, its interface, and the various ways in which you can customize the block editor.

Tip:

If you don’t have a website yet, you can sign up for our free hosting package or one of our premier WordPress hosting plans and install WordPress in just a few minutes.

What Are Blocks in WordPress?

Unlike most WYSIWYG editors, Gutenberg uses blocks to store your content. All blocks are independent of one another and you can manipulate one block without negatively affecting its neighbors.

There are many types of blocks available in WordPress. Some of the more popular ones include paragraphs, headings, images, quotes, code blocks, and many more. You can use the WordPress Block Library to view and use your collection of blocks.

What Are Block Patterns in WordPress?

Block patterns are a special kind of block in WordPress. Every block pattern is made up of two or more regular blocks. Each grouping serves a specific purpose. For example, you can find reusable blocks for image galleries, social media buttons, contact forms, headings, multi-column text layouts, and much more.

The thing that makes block patterns valuable is that their layouts are typically created by professional designers. This gives you optimal element arrangement right out of the box. All that you need to do is to customize the content of the reusable block to your liking.

Block Patterns vs Reusable Blocks

If you are familiar with reusable blocks, you may be wondering how they differ from block patterns. At their core, both of these block types allow you to increase your productivity by removing repetitive work. There are, however, two notable differences:

1. You are supposed to create every reusable block yourself. Block patterns, on the other hand, are ready-made and you can use them immediately.
2. Every instance of a reusable block will always have the same content. In contrast, block patterns can be individually customized.

Using Block Patterns in WordPress

Since all WordPress block patterns are essentially groups of regular Gutenberg blocks, you can use them just like you would use any other block in WordPress. In the next few sections, we will give you a brief overview of your options.

Inserting Block Patterns

You can use the WordPress Block Library to insert block patterns into your document. To do so, follow these steps:

1. Open the document where you wish to insert a block pattern.
2. Place your text cursor in the spot where you wish to add a block pattern.
3. Click on the Block Library button from the Top Toolbar.
4. Switch to the Patterns tab.
5. Click on the block pattern that you wish to use. If you do not see your desired block pattern, select a different category from the dropdown menu.

In addition to the regular block patterns described above, there are also contextual block patterns. These contextual block patterns are contained within a block and can be invoked through the block’s Transform menu. Currently, there are two WordPress blocks that contain these contextual block patterns. They are the Query Loop and the Social Icons blocks.

Editing Block Patterns

Editing block patterns in WordPress is no different than editing regular blocks. This is because once a block pattern is inserted in your document, it transforms into a group of regular blocks. As such, you are free to add and remove blocks or edit content as you see fit.

Tip:

Some block patterns include stock images as part of their design. The WordPress developers have declared that these images are royalty-free and as such, you can use them on your website if you want to

Deleting Block Patterns

Similarly, you can delete a block pattern or a portion of it in the exact same way you would delete a regular block in Gutenberg. Even though block patterns are inserted as a group of blocks, it is OK if you delete some and leave the rest present in your document.

Adding New Block Patterns

You might have noticed that the number of block patterns that ship with WordPress isn’t very high. But did you know that there is an official WordPress Pattern Library that holds dozens of additional pattern designs? If you wish to take advantage of these additional designs, perform the following steps:

1. Open the WordPress Pattern Library.
2. Browse the available patterns. When you decide to use one pattern, hover your mouse cursor over it and click on the Copy button in the lower-right corner.
3. Go to your document in WordPress.
4. Place the text cursor where you wish to insert the new block pattern.
5. Paste your clipboard by pressing Ctrl + V on Windows/Linux or ⌘ + V on macOS.

It is also possible to add new block pattern designs to Gutenberg via third-party themes and plugins.

Conclusion

The WordPress block patterns can be very useful when you wish to publish a new page, post, or an entire website, without spending too much time designing every element. By using block patterns for most elements, you will get a sensible design that works right out of the box so that you can focus on content creation, marketing, and other tasks. Of course, you can always come back at a later point and improve this initial design.

If you are interested in other ways of streamlining your workflow, you can learn how to use keyboard shortcuts in Gutenberg, the WordPress Dashboard, and when moderating comments. In addition, you may be interested in the best WordPress plugins that add new functionality and new blocks to Gutenberg.

The post Gutenberg Tutorial: Using Block Patterns in WordPress appeared first on AwardSpace.com.

What you need to know:

Gutenberg features reusable blocks that allow you to quickly insert the same content with one click. You can mark any block or block pattern as reusable. You can find your reusable block collection in the WordPress Block Library.

Have you ever found yourself creating the same piece of content over and over again for every new post or page? If so, you will be happy to learn that Gutenberg has a feature called reusable blocks that can eliminate this tedious and repetitive work. In this tutorial, we’ll show you how to take advantage of the functionality of the reusable blocks in WordPress so you can create more in less time.

Table of Contents:

• What Is Gutenberg in WordPress?
  • How Can I Access Gutenberg?
• What Are Blocks in Gutenberg?
  • What Are WordPress Reusable Blocks?
• How to Use Reusable Blocks in WordPress
  • Creating a Reusable Block
  • Inserting a Reusable Block
  • Editing a Reusable Block
  • Managing a Reusable Block
    • Deleting a Reusable Block
    • Saving a Reusable Block as Draft
    • Publishing a Reusable Block
  • Importing a Reusable Block
  • Exporting a Reusable Block
• Conclusion

What Is Gutenberg in WordPress?

Gutenberg is the default method of creating posts, pages, and widgets in WordPress. Also known as the WordPress Block Editor, Gutenberg is the successor to the classic post editor. If you have not used Gutenberg in the past, we recommend checking our tutorial on the basics of Gutenberg and also our walkthrough of the WordPress Block Editor interface.

How Can I Access Gutenberg?

You can access Gutenberg by creating or editing a page, post, or widget. And if you don’t have your own WordPress site yet, you can sign up for our free hosting plan or one of our premier WordPress hosting packages and install WordPress in a few easy steps.

What Are Blocks in Gutenberg?

Gutenberg is known as the WordPress Block Editor because it uses blocks to encapsulate your content. Every piece of text, every image, and every other form of media is stored in separate blocks. This allows you to effortlessly manipulate a specific piece of content with minimal side effects on the rest of your document.

Tip:

The entire array of blocks is stored in the Block Library and can be accessed from the Top Toolbar and via a keyboard shortcut

What Are WordPress Reusable Blocks?

Reusable blocks are a special type of block that you can create to speed up your workflow. A WordPress reusable block is made up of one or more regular blocks along with the content that is stored within those blocks.

This makes reusable blocks incredibly handy if there is a piece of content that you regularly include in your posts. Instead of creating this repeating content from scratch every time, you can create it once, save it as a reusable block, and then insert it in your future posts with just one click.

How to Use Reusable Blocks in WordPress

Managing the reusable blocks in WordPress is a relatively straightforward process. That said, there are still a few caveats that you need to be aware of. In the next few sections, we’ll take a closer look at creating, inserting, editing, managing, importing, and exporting reusable blocks.

Creating a Reusable Block

You can mark any block as reusable. To do so, follow the steps below:

1. Select the block that you wish to reuse at a later point.
2. Click on the three-dot button at the end of the Contextual Toolbar.
3. Choose the option called Add to Reusable blocks.
4. Give a name to your reusable block.
5. Press the Save button.

Tip:

WordPress doesn’t limit you to marking just individual blocks as reusable. You are free to select an entire block pattern or any arbitrary group of blocks and set it as reusable.

Inserting a Reusable Block

Next, we’ll take a look at inserting reusable blocks in your document. To insert a reusable block, open the Block Library and switch to the Reusable tab. Then, drag your desired block out of the Reusable tab and drop it in your document. You can tell where the block will be inserted thanks to the blue guiding lines that appear as you drag the block across your document.

Tip:

If you are not a fan of drag and drop, then you can position your text cursor in the spot where you wish to insert a new block. Then, open the Block Library and simply click on your desired block.

There’s also a Gutenberg keyboard shortcut that will allow you to use reusable blocks quickly and efficiently. Start with an empty paragraph block and then type / followed by the name of your reusable block. Once your desired block gets highlighted, press Enter to insert it in place of the empty paragraph.

Editing a Reusable Block

Gutenberg allows you to edit reusable blocks in two different ways. In this section, we’ll show you how to edit reusable blocks in WordPress.

The first way is to edit the contents of a reusable block that you have already inserted in your document. To perform this type of edit, follow the steps below:

1. Insert a reusable block in your document.
2. Click on the reusable block within your document.
3. Make your changes.

Important:

When you edit a reusable block, those changes will be applied to all existing instances of that reusable block across all of your documents. This includes both published and unpublished pages, posts, and widgets.

The other way to edit reusable blocks in Gutenberg is via the Reusable Blocks Manager. To access this section, follow the steps below:

1. Open the Reusable tab in the Block Library.
2. Click on the link titled Manage Reusable blocks.

Warning:

You will leave Gutenberg after clicking on the Manage Reusable blocks link. So, make sure to save any unsaved changes before clicking on that link!

Tip:

You can also access the Reusable Blocks Manager by clicking on the three-dot button at the end of the Top Toolbar and choosing the option Manage Reusable blocks from the dropdown menu. Alternatively, you can go to the following address: your-website-domain.com/wp-admin/edit.php?post_type=wp_block.

The Reusable Blocks Manager lays out all of your reusable blocks in the same way WordPress would list all of your pages or posts. To edit a reusable block, hover your mouse cursor over it and choose the Edit option.

The Edit option will take you back to Gutenberg, however this time the entire editing experience will be centered on the reusable block itself. The title field will contain the title of the reusable block and the document body will show all content stored in the reusable block.

Here, you are free to use the WordPress Block Editor to customize the reusable block. Once you are happy with the results, press the Update button.

Managing a Reusable Block

WordPress allows you to manage reusable blocks in a way similar to managing posts and pages. Here, we’ll take a look at three common actions: deleting a reusable block, saving a reusable block as a draft, and publishing a reusable block.

Deleting a Reusable Block

To delete a reusable block in WordPress, go to the Reusable Block Manager, hover your mouse cursor over the block that you wish to delete, and choose the Trash option.

Tip:

You cannot delete reusable blocks that are in draft form. To remove such a block, first publish it, and then delete it.

Saving a Reusable Block as a Draft

You can save a reusable block as a draft by following these steps:

1. Access the Reusable Blocks Manager by going to your-website-domain.com/wp-admin/edit.php?post_type=wp_block.
2. Edit a reusable block of your choice.
3. In the Gutenberg interface, press the Switch to draft button.

Warning:

Saving a reusable block as a draft will remove it from the Block Library. As a result, you will not be able to insert it in future documents. That said, already existing copies of the reusable block will not be affected.

Publishing a Reusable Block

You need to publish your reusable blocks that are saved as drafts before you can use them in your documents. We’ll show you how to accomplish this below:

1. Access the Reusable Blocks Manager by going to your-website-domain.com/wp-admin/edit.php?post_type=wp_block.
2. Edit a reusable block that is saved as a draft.
3. In the Gutenberg interface, press the Publish button. If asked for confirmation, press the Publish button a second time.

Importing a Reusable Block

WordPress comes with an option to import reusable blocks from JSON files stored on your computer. This can be especially handy if you wish to use the same reusable block across multiple WordPress sites without having to recreate it every time. Here’s how to import a reusable block:

1. Access the Reusable Blocks Manager by going to your-website-domain.com/wp-admin/edit.php?post_type=wp_block.
2. Click on the Import from JSON button.
3. Choose a file to upload from your computer.
4. Click on the Import button.

Exporting a Reusable Block

The last option that we’ll look at is the ability to export a reusable block as a JSON file. This can be useful as a backup tool or as a way to move a reusable block across WordPress websites. To export a reusable block, follow these steps:

1. Access the Reusable Blocks Manager by going to your-website-domain.com/wp-admin/edit.php?post_type=wp_block.
2. Hover your mouse cursor over the reusable block that you wish to export.
3. Choose the Export as JSON option.

Conclusion

Using WordPress reusable blocks is a great way to save time and effort when creating content in Gutenberg. If you notice that you include the same set of blocks in every post or page that you create, then you owe it to yourself to convert this repeating content into reusable blocks. And if you are about to start a new WordPress site that will use a lot of the same elements as your current one, you can mark these common elements as reusable blocks and import them into your new website.

Looking for other ways to optimize your content creation experience in WordPress? If so, you can check our guides on how to customize Gutenberg, the best Gutenberg plugins, and the best plugins that add new blocks to WordPress.

The post Gutenberg Tutorial: Using WordPress Reusable Blocks appeared first on AwardSpace.com.

What you need to know:

The WordPress Block Library contains all blocks that you can use while working in Gutenberg. To insert a block, drag it from the Block Library and drop it in your document. In addition to regular Blocks, the Block Library also supports Block Patterns and Reusable Blocks. Last but not least, the block selection in the Block Library can be expanded via third-party plugins.

WordPress differs from other content management systems in that it uses blocks to manage content. There are various types of blocks available and all of them are housed in the Block Library. In this article, we’ll show you how to use the Block Library. In addition, we’ll share the various ways in which you can customize it.

Table of Contents:

• What Is Gutenberg?
• How Can I Access Gutenberg?
• What Are Blocks in WordPress?
• Exploring the WordPress Block Library
  • Blocks Tab
  • Patterns Tab
  • Reusable Blocks Tab
• Inserting Blocks From the Block Library
• Customizing the WordPress Block Library
• Next Steps

What Is Gutenberg?

Gutenberg, also known as the WordPress Block Editor, is the successor to the classic WordPress WYSIWYG editor. Unlike the classic editor, Gutenberg uses blocks to encapsulate all content. If you are new to Gutenberg, we recommend going through our tutorials on the basics of Gutenberg and the WordPress Block Editor interface.

How Can I Access Gutenberg?

You can access Gutenberg by creating or editing a post, page or widget.

Tip:

Don’t have a website yet? Sign up for our free hosting plan or for one of our premium WordPress hosting packages and install WordPress with just a few click.

Gutenberg Blocks, Explained

Most document editors that we use can be classified as free-form text editors, meaning that you can place text anywhere in the document. Other elements, such as images or video, are embedded within the text itself. Gutenberg, on the other hand, is a block-based text editor and every piece of content is encapsulated in its own block.

The benefit of this block-based approach is that your embedded media is no longer directly tied to the written text or the other multimedia elements. Instead, every element in the document is completely independent and can be modified without negatively affecting neighboring blocks.

Tip:

We have a separate article where we list all available blocks in Gutenberg.

Exploring the WordPress Block Library

You can access the WordPress Block Library by pressing the “+” button in the Top Toolbar.

Once you click on the WordPress Block Library button, you will see a new panel open up on the left side of the screen. It will be divided in up to three tabs – Blocks, Patterns, and Reusable. We will explore each of these tabs in greater detail later in this tutorial.

By default, the WordPress Block Library lists all available blocks which may make it hard to find the block that you need. Fortunately, there is a search bar near the top of the Block Library that allows you to quickly find your desired block.

Another useful feature, especially for those who are just beginning to learn Gutenberg and the various blocks it has to offer, is the ability to preview what a block looks like and what its function is. To take advantage of this feature, simply hover your mouse cursor over it and the preview will appear to the right.

Blocks Tab

Here, we’ll explore the Blocks tab. It is the tab that is shown by default when you open the WordPress Block Library. It simply contains a list of all available Gutenberg blocks grouped by their type.

We’ll show you how to customize the Blocks tab a bit later in this tutorial. And if you are wondering what the various blocks do, you can check the article where we list all available blocks in Gutenberg and their function.

Patterns Tab

The Patterns tab allows you to insert patterns into your document instead of individual blocks. A block pattern is a group of blocks that go well together. While block patterns typically have very few customization options, they make up for it by having a nice layout and design from the outset.

Unlike the Blocks tab, the Patterns tab features a dropdown menu where you can select the category of block patterns that you wish to browse. Among the options, you’ll find the default block patterns that ship with WordPress, any block patterns added by your theme and plugins, and any custom block patterns that you may have created.

Tip:

Intrigued by Gutenberg’s block patterns? If so, check out our complete guide to block patterns in Gutenberg for more information on this feature.

Reusable Blocks Tab

The last tab that we’ll look at is called Reusable and it houses all of your reusable blocks. Unlike the other tabs, this tab is shown only when you have at least one reusable block and as such, it may be hidden.

To learn more, you can read our complete guide on reusable blocks in WordPress.

Inserting Blocks From the Block Library

Now that we have explored the WordPress Block Library interface, we’ll show you how to insert a block into your document. Generally speaking, there are two ways to do it.

The first method of inserting blocks from the Block Library is to drag a block from the library and drop it into your document. You will notice a blue line that appears near your mouse cursor as you are about to drop the block. The line represents the spot where the new block will be inserted.

Warning:

The drag-and-drop method does not work for block patterns!

The other way of inserting blocks from the Block Library simply involves clicking on the spot in your document where you wish to place your new block and then clicking on the block itself within the Block Library.

Tip:

The WordPress Block Library can also be accessed via a keyboard shortcut! Place the text cursor on an empty paragraph, type /, and then type the name of the block that you wish to use. Once your desired block is selected, press the Enter key.

Customizing the WordPress Block Library

Gutenberg allows you to customize the WordPress Block Library in two different ways. First, you can use the Block Manager to disable any blocks that you do not need. Doing so will make the Blocks tab less cluttered.

Warning:

Disabling a certain block will hide it not only from the Block Library but from Gutenberg as a whole. As a result, disabled blocks cannot be used at all. That said, disabling a certain block type will not affect its instances that you have already placed within your documents.

The other way in which you can customize the WordPress Block Library is by including a Most Used section in the Blocks tab. The Most Used section sits at the top of the Blocks tab and lists your six most-used blocks.

You can activate the Most Used section by following these steps:

1. Click on the three-dot icon at the right edge of the Top Toolbar.
2. Choose the Preferences option at the bottom of the list.
3. Switch to the Blocks tab.
4. Enable the Show most used blocks option.

Tip:

If you wish to make the WordPress Block Editor truly your own, go through our guide on customizing Gutenberg.

Next Steps

Now that we have gone over the WordPress Block Library, you should have a good understanding of what it is used for, how it functions, and what it looks like. Of course, in WordPress, everything can be further expanded via plugins and Gutenberg is no exception. So, if you wish to further enhance the WordPress Block Editor, you can check our list of the best plugins for Gutenberg as a whole as well as our list of the best block plugins.

The post Gutenberg Tutorial: Using the WordPress Block Library appeared first on AwardSpace.com.

What you need to know:

Gutenberg, the WordPress Block Editor, comes with a few dozen keyboard shortcuts. The great news is that the most commonly used shortcuts like undo/redo, saving changes, and formatting text use the same key combinations as other applications on your computer. Moreover, there are a few Markdown-inspired text shortcuts that make content creation even faster.

Nowadays, Gutenberg is the default way of creating content in WordPress. That means that you’ll spend a considerable amount of time interacting with the WordPress Block Editor while working on your website. Thankfully, there are about two dozen keyboard shortcuts in Gutenberg that will save you time and improve your productivity. In this tutorial, we will go over the various hotkeys that are found in the WordPress Block Editor.

Tip:

Are you still using the classic WYSIWYG editor? If so, you can check our guide where we cover the keyboard shortcuts for the classic WordPress post editor.

Table of Contents:

• What Is Gutenberg in WordPress?
• How Can I Access Gutenberg?
• What Gutenberg Keyboard Shortcuts Are There?
  • Global Shortcuts
  • Text Formatting Shortcuts
  • Block Shortcuts
  • Markdown-Inspired Shortcuts
  • Selection Shortcuts
• Next Steps

What Is Gutenberg in WordPress?

Gutenberg, often referred to as the WordPress Block Editor, is the new way of creating content with WordPress. If you have not used the block editor before, we recommend learning the Gutenberg basics and its interface before proceeding with this tutorial.

Tip:

Are you looking to try Gutenberg, but don’t have a website of your own? No problem! You can sign up for our premium WordPress hosting plans or our free hosting package and install WordPress with just a few clicks.

How Can I Access Gutenberg?

You can access Gutenberg whenever you create a post, page, or widget in WordPress. The Block Editor takes the place of the classic WYSISYG editor that was bundled in WordPress.

What Gutenberg Keyboard Shortcuts Are There?

The Gutenberg keyboard shortcuts can be categorized as global, text, block, selection, and Markdown-inspired shortcuts. In addition, the hotkeys used on macOS computers differ from those used in Windows and Linux PCs. We will explore all these keyboard shortcuts in greater detail in the next few sections.

Global Shortcuts

In this section, we will go over the global keyboard shortcuts that are available in Gutenberg. We’ll sort them from most useful to least useful.

• The hotkey that you will be using most often will likely be the Undo function. You can undo your last change by pressing Ctrl + Z on Windows and Linux and ⌘ + Z on macOS.

Warning:

The undo function will not be available if you reload the Gutenberg webpage or if you close it and reopen it.

Tip:

Are you looking to restore your document to an even earlier state? If so, check out the revisions functionality found in WordPress.

• If you happen to undo an action in error, you can always Redo it. The WordPress hotkeys for redo are Ctrl + Shift + Z on Windows and Linux and ⌘ + ⇧ + Z on macOS.
• Next, we’ll show you the shortcut that can Save your changes. As you might imagine, it is Ctrl + S on Windows and Linux as well as ⌘ + S on macOS.
• The Gutenberg Sidebar houses many essential functions, so you’ll use the Sidebar often. Fortunately, there’s a keyboard shortcut for Showing and Hiding the Sidebar. You can toggle the Sidebar on and off by pressing Ctrl + Shift + , on Windows and Linux or ⌘ + ⇧ + , on macOS.

• Another feature that you’ll use on a regular basis is the Code Editor. You can Switch Between the Visual and Code Editors in WordPress by pressing Ctrl + Alt + Shift + M on Windows and Linux or ⌘ + ⌥ + ⇧ + M on macOS.

• Whenever you wish to get a sense of the structure of your document, you can use a keyboard shortcut to Open the Block List View. On Windows and Linux you can press Alt + Shift + O while on macOS the shortcut is ⌃ + ⌥ + O.

• The next keyboard shortcut on the list is a Toggle for Fullscreen Mode. When you are in Fullscreen mode, you will only see the Gutenberg interface. When Fullscreen mode is turned off, you will also see the back-end WordPress menu as well as the WordPress top toolbar. The shortcut for starting and stopping Fullscreen mode on Windows and Linux is Ctrl + Shift + Alt + F while on macOS the shortcut is ⌘ + ⌥ + ⇧ + F.
• Navigating to the Nearest Toolbar is a feature that you may find useful when trying to use the mouse less often. You can trigger this action by pressing Alt + F10 in Windows and Linux or ⌥ + F10 in macOS.
• Staying on the theme of navigation, you can use keyboard shortcuts to navigate to the next or previous part of the Gutenberg editor. The shortcut for Navigating to the Next Part of the editor in Windows and Linux is Alt + Shift + N, while on macOS the shortcut is ⌃ + ⌥ + N.
• If you wish to Navigate to the Previous Part of the Gutenberg editor, you can press Alt + Shift + P on Windows and Linux or ⌃ + ⌥ + P on macOS.
• Lastly, if you ever wish to bring up a cheat sheet of these keyboard shortcuts within Gutenberg, you can press Alt + Shift + H in Windows and Linux or ⌃ + ⌥ + H in macOS.

Text Formatting Shortcuts

Gutenberg’s text formatting keyboard shortcuts are more straightforward since they closely resemble the hotkeys used in other document editors.

• You can make your selection Bold by pressing Ctrl + B in Windows and Linux or ⌘ + B in macOS.
• Similarly, you can make your text Italic by pressing Ctrl + I in Windows and Linux or ⌘ + I in macOS.
• It is also possible to Underline your selected text by pressing Ctrl + U in Windows and Linux or ⌘ + U in macOS.
• Another very useful shortcut allows you to Convert the Selected Text into a Link. To perform the conversion, press Ctrl + K in Windows and Linux or ⌘ + K in macOS.

• And if you wish to remove a link, you may do so using a text editing shortcut as well. Simply select the link that you wish to remove and press Ctrl + Shift + K in Windows and Linux or ⌘ + ⇧ + K in macOS.

Block Shortcuts

Since Gutenberg uses blocks to store and manage content, learning the available block shortcuts will significantly improve your productivity.

• The keyboard shortcut that you will use most often is the creation of a New Paragraph Block. To activate this shortcut, simply place your cursor at the end of a block and press Enter.

• But what if you don’t want your new block to be a paragraph? This is where this second shortcut comes in. It has the ability to Convert a Paragraph Block into a block of a different type. To use this shortcut, place the cursor in an empty paragraph block and type /. You will see a selection of popular blocks. Use the arrow keys to highlight your desired block and press Enter to confirm your choice. Alternatively, right after you type /, you can continue typing the name of the block that you wish to use. Once it is in focus, press Enter to perform the switch. This essentially places the entire Block Library at the tip of your fingers.

• Gutenberg also makes it easy to Duplicate a Block. To do so, select the block that you wish to duplicate and press Ctrl + Shift + D on Windows and Linux or ⌘ + ⇧ + D on macOS.
• You can quickly Remove Blocks. To remove the block that’s currently active, press Alt + Shift + Z if you are using Windows and Linux or ⌃ + ⌥ + Z if you are using macOS.
• There’s even a faster way of Removing Selected Blocks. To use this method, select one or more blocks and then press Delete or Backspace.
• It’s also possible to make space for new blocks within your document. To Insert a Block Before the Selected Block, press Ctrl + Alt + T on Windows and Linux or ⌥ + ⌘ + T on macOS.
• You can instead Insert a Block After the Selected Block. To do so, press Ctrl + Alt + Y on Windows and Linux or ⌥ + ⌘ + Y on macOS.
• Lastly, Gutenberg also has keyboard shortcuts for moving your selected block up and down the document structure. To Move the Selected Block(s) Up press Ctrl + Alt + Shift + T on Windows and Linux or ⌥ + ⌘ + ⇧ + T on macOS.

• And if you want to Move the Selected Block(s) Down, use the keyboard shortcut Ctrl + Alt + Shift + Y on Windows and Linux or ⌥ + ⌘ + ⇧ + Y on macOS.

Markdown-Inspired Shortcuts

A little-known feature in Gutenberg is that it has limited support for a few Markdown-inspired shortcuts. Here, we’ll list the most popular ones.

• The two most widely used keyboard shortcuts that are inspired by Markdown are the ordered and unordered lists. To create an Ordered List, type 1. followed by a space and some text. When you press Enter, WordPress will insert a number for the next item on the list. You can end the list by pressing Enter twice.

• Unordered Lists work in the exact same way as ordered lists. The only difference is that you start an unordered list by writing * or - followed by a space and your first item. Pressing Enter would insert another bullet for your next item and pressing Enter twice would end the list.
• Another handy shortcut is the Quotation. Simply place the cursor on an empty paragraph block and type > followed by a space. The block will transform into a quote block that allows you to insert a quote and a citation.

• You can also create Headings using hashtags. Place the text cursor in an empty paragraph block and type # followed by a space. This would transform the paragraph block into an h1 heading. Typing two hashtags followed by a space would create an h2 heading and so on.

• And if you are dealing with computer code, you will be happy to learn that there’s a quick way to create a Code Block in Gutenberg. To do so, start from an empty paragraph block and type ``` (three grave accent symbols) and then press Enter.

• The last Markdown-like shortcut that we’ll explore is the Separator. To insert a separator, write --- (three hyphens) and then press Enter.

Selection Shortcuts

At this time, there is a modest number of selection keyboard shortcuts. We’ll list those below.

• You can Select all Blocks by pressing Ctrl + A twice on Windows and Linux. On macOS, you would press ⌘ + A twice.
• You can also Clear Your Selection by pressing the escape key.

Next Steps

Thanks to the Gutenberg keyboard shortcuts that we have discussed in this tutorial, you should be able to increase your overall productivity with the WordPress Block Editor. And if you are interested in further improving your productivity in WordPress, you can check our guides on using keyboard shortcuts to moderate comments and how to navigate the WordPress back-end using hotkeys.

The post Gutenberg Tutorial: Keyboard Shortcuts appeared first on AwardSpace.com.

What you need to know:

The WordPress Block Editor comes with a handful of options that allow you to customize Gutenberg’s interface and behavior. These options can be accessed by clicking on the three-dot button in the upper-right corner of the page. There, you can toggle various screen elements on and off, switch between the Visual Editor and the Code Editor, choose which panels are displayed in your document settings, and more.

Gutenberg, the WordPress Block Editor, is a great tool for creators as it is modern, intuitive, and flexible. And yet, it offers a number of options that can be used to customize its interface and behavior. In this WordPress Gutenberg tutorial, we’ll show you how you can customize the behavior and interface of the Block Editor.

Table of Contents:

• What Is the Gutenberg Editor in WordPress?
• How Can I Access the WordPress Block Editor?
• Learning Gutenberg’s View Options
• Learning Gutenberg’s Editor Options
  • Can I Switch Between the Visual Editor and the Code Editor While Working on the Same Document?
• Block Management
• Setting up the Gutenberg Editor Preferences
  • General
  • Appearance
  • Blocks
  • Panels
• Next Steps

What Is the Gutenberg Editor in WordPress?

The release of WordPress 5.0 brought with it a new content creation experience called Gutenberg. Unlike its predecessor, Gutenberg encapsulates every piece of content inside blocks which enables a greater degree of flexibility when making edits. If you have not used the WordPress Block Editor before, we recommend going through our crash-course on Gutenberg.

How Can I Access the WordPress Block Editor?

WordPress will provide you with access to the Gutenberg editor once you start creating a new post, page, or widget. And if you don’t have a website yet, simply sign up for our free hosting package or one of our premium WordPress hosting plans and start building your online presence.

Learning Gutenberg’s View Options

Most of Gutenberg’s settings are hidden in a menu that is activated by the three-dot button at the end of the Top Toolbar. In this section, we’ll take a closer look at the first three settings:

The first setting you’ll encounter is the Top toolbar. When this option is active, as indicated by the checkmark next to it, all Contextual Toolbars will be anchored to the Top Toolbar instead of appearing within the Main Content Area.

The second option in the list is Spotlight mode. When enabled, this option will emphasize the block that is currently active and will fade out the rest.

The last View option is Fullscreen mode. This toggle allows you to show and hide the WordPress back-end interface.

Learning Gutenberg’s Editor Options

The next group of settings deals with the Editor itself. You can use the Visual Editor, which enables you to create content using blocks, or the Code Editor, which lets you write HTML.

Once you switch to the Code Editor, Gutenberg’s interface will change significantly. You will no longer see your blocks and instead, you will be presented with the HTML that makes up those blocks.

Can I Switch Between the Visual Editor and the Code Editor While Working on the Same Document?

Yes, it is possible to seamlessly switch between the Visual Editor and the Code Editor while working on the same document. That said, you should consider the Code Editor an advanced feature and use it only as a last resort.

Also, you may notice that WordPress annotates your various blocks with custom comments. If you insert HTML code that is not annotated, it will be placed inside a Classic block.

Block Management

Next, we’ll briefly look at two options that allow you to manage the blocks that appear in the Block Library.

The first option is the Block Manager. Thanks to the Block Manager, you can enable and disable Gutenberg blocks. The other option is Manage Reusable blocks. To learn more about it, you can check our article on what reusable blocks are and how to use them.

Setting up the Gutenberg Editor Preferences

In addition to the various toggles in the Options menu, the WordPress Block Editor also comes with a full-fledged preference pane. You can access it by clicking on the Preferences button at the very bottom of the Options menu.

The preference pane is divided into four sections. We’ll explore those in greater detail below.

General

The General tab lets you enable or disable the pre-publish checklist. If you are not familiar with this feature we recommend going over our guide on publishing with WordPress.

The second group of options allows you to reduce distractions while working with your content. The toggle called Reduce the interface would hide most buttons from the Top Toolbar and completely remove the Status Bar. That said, you can still reveal the buttons from the Top Toolbar by hovering your mouse cursor over it.

Spotlight mode is the same feature that we discussed earlier which allows you to focus on the currently selected block.

And lastly, the Display block breadcrumbs toggle can show and hide the Status Bar. Note that this option will be hidden if the Reduce the interface toggle is turned on.

Appearance

The Appearance section of Gutenberg’s preference pane contains two options: Display button labels and Use theme styles.

The Display button labels option replaces the glyphs used on buttons with text labels.

Tip:

You can reveal the label for each button as a tooltip by hovering your mouse cursor over it.

The Use theme styles toggle allows Gutenberg to use the visual style of your theme while you’re interacting with your blocks. Turning off this feature would remove all custom styling from the Main Content Area.

Blocks

The third tab in the Gutenberg preference pane is all about Blocks. You’ll find two options here: Show most used blocks and Contain text cursor inside blocks.

The first option adds a Most Used section in the Gutenberg Block Library where you can quickly access your most frequently used blocks. And the second option aids screen readers by stopping the text caret from leaving blocks.

Panels

The last tab in the Gutenberg preferences is called Panels.

Clicking on these toggles will show and hide the various panels that appear in the Gutenberg sidebar.

Next Steps

Now that we have gone over the various settings and preferences that Gutenberg has to offer, you should be able to customize the Gutenberg interface and behavior to your liking. And if you wish to become even more proficient with the WordPress Block Editor, we recommend learning the most popular keyboard shortcuts in Gutenberg, the best Gutenberg plugins, and how to use Gutenberg blocks.

The post Gutenberg Tutorial: Customizing the WordPress Block Editor Interface appeared first on AwardSpace.com.

What you need to know:

The interface of Gutenberg, the WordPress Block Editor, is comprised of a Main Content Area, a Top Toolbar, and a Sidebar. In addition, you will find a Contextual Toolbar and a Status Bar. You use the Main Content Area to work with blocks while the Top Toolbar, the Contextual Toolbar, and the Sidebar help you customize and manage your blocks.

Back in 2018, WordPress 5.0 was released to the public and one of its major features was the introduction of Gutenberg, the new WordPress Block Editor. Unlike other updates which tend to be iterative and simply build on what was already there, Gutenberg was a complete reimagining of the content creation experience in WordPress.

Gutenberg promises to allow greater flexibility while remaining easy to use. While the WordPress Block Editor is indeed intuitive and modern, it can take a bit of time to get used to it and to fully leverage all of its features. And that’s where this Gutenberg tutorial comes in. Read on as we take you on a brief tour around the new WordPress editor and highlight the various useful features and new capabilities.

Table of Contents:

• What Is Gutenberg in WordPress?
• What Are Gutenberg Blocks?
• How Can I Access Gutenberg in WordPress?
• Overview of the WordPress Block Editor Interface
• Opening the Gutenberg Editor for the First Time
• Learning Gutenberg’s Top Toolbar
• Exploring the Main Content Area
• Exploring the Contextual Toolbar
• Learning the Gutenberg Sidebar
• Exploring the Status Bar
• Customizing the WordPress Block Editor
• Reverting to the Classic WordPress Editor
• Next Steps

What Is Gutenberg in WordPress?

Before we dive into Gutenberg’s interface, we’ll provide you with an overview of Gutenberg itself. Gutenberg, known also as the Block Editor in WordPress, is the new way to create posts, pages, and even widgets. If you have never used Gutenberg before, we highly recommend going through our Gutenberg Basics tutorial where we’ll show you how to publish your first post using the WordPress Block Editor.

What Are Gutenberg Blocks?

Unlike most WYSIWYG editors, Gutenberg is not a free-form text editor where you insert images and other media right inside your text. Instead, Gutenberg encapsulates every piece of content in its own block. So, you can have a paragraph block that is next to an image block that is followed by a quote block, for example. Each of these blocks is completely standalone and can be manipulated without affecting the other surrounding blocks.

If you wish to learn more about blocks, you should check our article that describes the blocks available in WordPress.

Tip:

Third-party plugins can greatly expand the number of available blocks in the Block Library. We have a list of the best plugins that would add new blocks for you to use.

How Can I Access Gutenberg in WordPress?

You can access Gutenberg, the WordPress Block Editor when you try to create a new post. In addition, creating new pages and widgets will also bring up Gutenberg.

These block-powered experiences are what the WordPress developers refer to as Full-Site Editing. The goal is to one day be able to create every single element on your website using the Gutenberg blocks.

Tip:

Are you itching to try the WordPress Block Editor but don’t have your own website yet? Then, we invite you to sign up for our free hosting package that will allow you to create a WordPress website absolutely for free! And if you ever need additional features or functionality, you can upgrade to a premium plan, a Semi-Dedicated server, or a VPS instance with just a few clicks.

Overview of the WordPress Block Editor Interface

Broadly speaking, the WordPress editor’s interface can be broken down into five segments:

• The Top Toolbar contains general-purpose options. Here, you’ll find your undo/redo buttons, the Publish button, various Gutenberg settings, and the Block Library.
• The Main Content Area is located right below the Top Toolbar. Here, you can add new blocks to enrich your content.
• The Contextual Toolbar appears within the Main Content Area whenever you select a block. The settings within the Contextual Toolbar will vary depending on the type of block that was selected.
• The Sidebar is located next to the Main Content Area. There are two tabs in the sidebar. The first tab contains general settings about the post or page, such as its categories, tags, featured image, publish status, and more. The second tab, on the other hand, contains different settings depending on the block that you have currently selected.
• Lastly, the Status Bar simply shows you where your selected block is located within the document structure.

Opening the Gutenberg Editor for the First Time

When you open the Gutenberg editor for the first time, you will see a short Welcome Guide tutorial that will highlight the basics of using the new WordPress Block Editor. You can go through the slides or click on the “x” button in the top right to dismiss the Welcome Guide.

Learning Gutenberg’s Top Toolbar

Gutenberg’s Top Toolbar is located at the top of the screen and contains a handful of options:

From left to right, the first button that we come across is the WordPress logo. Clicking on this button will take you out of Gutenberg and back into the WordPress back-end. Depending on what you were creating, you will end up in the All Posts, All Pages, or Widgets section.

Warning:

Clicking on the WordPress logo icon will lose any unsaved changes, so make sure that you have saved or updated your content before navigating away from Gutenberg.

The next button in the Top Toolbar is the Block Library. When you click on this button, you will see a full list of all available blocks that you can work with.

The Block Library consists of two or three tabs – one for single blocks, one for block patterns, and one for reusable blocks (if you have created any). To learn more, check our detailed guide to the WordPress Block Library.

Next, you will see the Tools button. Currently, this option allows you to control what happens when you click on a block with your mouse. You can either start editing the chosen block or you may simply select the block for bulk editing.

The next two buttons are arguably everyone’s favorites – the Undo and Redo buttons. You can use those to undo and redo your edits.

Tip:

Did you know that you can use keyboard shortcuts to perform the Undo/Redo actions? The Windows/Linux shortcuts are Ctrl + Z for Undo and Ctrl + Shift + Z. On macOS, the shortcuts are ⌘ + Z and ⌘ + ⇧ + Z respectively. There are even more keyboard shortcuts available in Gutenberg if you wish to learn them.

After the Undo and Redo buttons, we get an Information popup. This popup will give you an overview of your content such as how many words you have written, how many paragraphs there are, how many blocks you have used, and more. In addition, you will see a Document Outline if your document contains at least one heading.

Going with the theme of content overviews, the List View shows you an outline of the various blocks that are currently in use. This can be especially helpful in more complex layouts where blocks are nested inside of other blocks. You can click on an element in the List View to jump to that element in the Main Content Area.

If you have used WordPress in the past, you will be familiar with the next three buttons: Save Draft, Preview, and Publish. These allow you to save your changes, see how your content would look like when published, and actually publish your content. Once your content is published, Save Draft will become Switch to Draft and Publish will be replaced by Update.

When you are about to publish your post or page, WordPress will provide you with a brief checklist to make sure that there are no issues with your content. We have a separate article where we go over the pre-publishing checklist and provide tips and tricks on other ways to augment the publishing experience.

The last two buttons in the Top Toolbar allow you to toggle the Sidebar and to adjust settings related to the Gutenberg editor.

Tip:

If you are interested in making Gutenberg your own, we highly recommend our tutorial on customizing the Gutenberg editor.

Exploring the Main Content Area

Gutenberg’s Main Content Area is located just below the Top Toolbar. This is the place where you will be inserting, moving, editing, and deleting your blocks.

The Main Content Area is split into two sections by a divider. The upper section holds the title field while the lower section is designed to hold your blocks.

Tip:

If you use plugins that augment the writing experience in WordPress by adding more functionality, you will find this new functionality either in the Sidebar or below the Main Content Area.

When you start adding blocks in the Main Content Area, you will notice that a separator line appears between the blocks. On that line, you’ll see a “+” button. Clicking on that button would allow you to insert a new block where the separator line is located.

Exploring the Contextual Toolbar

As soon as you start working with blocks in the Main Content Area, you will notice an additional Contextual Toolbar that appears every time you select a block.

The Contextual Toolbar lists the most used options. If you cannot find the option that you need, try clicking on the three-dot button at the end of the toolbar. It contains a menu with additional options.

Learning the Gutenberg Sidebar

The Sidebar in the Gutenberg editor is located to the right of the Main Content Area. If your sidebar is hidden, click on the cogwheel icon near the end of the Top Toolbar to reveal it.

You will find two tabs in the Sidebar. The first tab is all about managing the properties of your page or post. If you have used the classic WordPress editor in the past, these options will be familiar to you:

• The Status & Visibility section lets you control the state and visibility of your page or post.
• The Permalink section enables you to customize the permalink for your page or post.
• The Categories section allows you to assign a category to your post.
• The Tags section lets you assign tags to your post.
• The Featured Image section can be used to assign a featured image to the page or post.
• The Excerpt is used to store a summary of your content. Some themes may use the Excerpt.
• Lastly, Discussion has controls for comments, pingbacks, and trackbacks.

Tip:

Plugins that add new functionality to the WordPress Block Editor will also present their options here in this first tab.

Tip:

The number of options in the first tab will vary depending on whether you are creating a post, a page, or a widget.

The second tab contained within the Sidebar is the Block tab. The contents of this tab change dynamically depending on the block that you have selected. When you have selected a block, you can find additional block-related options there.

Exploring the Status Bar

The last element of the WordPress Block Editor that we will note is the Status Bar. Located at the very bottom of the page, the Status bar is used to show you where your currently selected block is located within your document. This can be especially helpful if your page or post has a complex layout with many block groups nested inside one another.

Customizing the WordPress Block Editor

While Gutenberg has a lot going for it already, you can make it even better for your style of work by tweaking its settings. You can find the block editor settings by clicking on the three-dot icon at the end of the Top Toolbar.

Be sure to check these settings once in a while since most new WordPress versions bring improvements and new features to Gutenberg. You can learn what customization options are currently available by reading our WordPress tutorial on customizing Gutenberg. And if you are looking to customize your Gutenberg experience even further, check out our article where we list the five best plugins for Gutenberg.

Reverting to the Classic WordPress Editor

Of course, the new Gutenberg editor will not be to everyone’s liking. Thankfully, the developers behind WordPress have created an easy way to revert back to the classic Post Editor. If you wish to stick to the tried-and-true classic Post Editor, check our article on how to replace Gutenberg with the classic Post Editor.

Next Steps

Now that you know your way around Gutenberg’s interface thanks to this WordPress tutorial, you’re one step closer to creating great-looking content with minimal effort. We recommend going through our tutorial on blocks in WordPress so that you get a better idea of the possibilities afforded by the existing Block Library. Lastly, you can make Gutenberg your own by customizing Gutenberg to your liking and installing plugins that enhance the WordPress Block Editor.

The post Gutenberg Tutorial: The Interface of the WordPress Block Editor appeared first on AwardSpace.com.

What is Gutenberg:

Gutenberg is the name of the new post editor that ships with WordPress. Unlike its predecessor, Gutenberg is entirely block-based. This means that every page element like a paragraph, an image, a video, etc lives inside a block. Gutenberg blocks can be moved around with ease and they tend to more accurately depict how your page will look once it is published.

WordPress has shipped with a free-form post editor since its inception. However, in late 2018, WordPress 5.0 introduced a brand new post editor called Gutenberg. Named after Johannes Gutenberg, the inventor of the printing press, the new post editor promises to revolutionize how we create and publish content in WordPress. Gutenberg’s standout feature is the use of blocks to help you encapsulate and manage your content.

In this article, we will provide you with a crash course on Gutenberg, WordPress’ Block Editor, so you can hit the ground running and start creating right away.

Table of Contents

• The Blocks Concept, Explained
• Getting to Know the WordPress Block Editor
• Adding a Block
• Removing a Block
• Working With Text
• Inserting an Image Into Your Post
• Publishing Your First Post
• Updating an Existing Post
• Next Steps

The Blocks Concept, Explained

As we mentioned in our intro, the biggest difference between the classic WordPress Post Editor and Gutenberg is that the latter uses blocks to manage content. In fact, blocks are so central to Gutenberg that it is also known as the WordPress Block Editor.

The usage of blocks stands in stark contrast to the free-form text layout that was used in the previous post editor. In the past, you would write free-form text and embed images, videos, shortcodes, and other elements into it. But with the WordPress Block Editor, you would encapsulate each piece of content in its own block. In other words, every element on the page such as a paragraph, heading, media, and embedded content is treated as a separate entity and can be independently moved and customized.

You can read our article on Gutenberg blocks if you wish to learn how to take full advantage of the WordPress Block Editor.

Getting to Know the WordPress Block Editor

You can access the WordPress Block Editor by creating a new page or a new post.

Tip:

Gutenberg is also used for editing your existing posts and pages.

Tip:

If you don’t have a WordPress site yet where you can test Gutenberg, you are welcome to sign up for one of our premium WordPress hosting plans or even our free hosting package. They all fully support WordPress and the WordPress Block Editor.

Gutenberg features a more streamlined interface when compared to its predecessor. By default, the only visible elements on the screen will be the Top Toolbar, the Block Settings Sidebar, and the main content area.

 

The Block Editor’s sidebar contains two tabs: Post and Block.

 

The Post tab contains settings related to the post itself, such as its categories, tags, a featured image, publishing options, and others. Overall, if you have used the previous WordPress post editor, the options in this tab will be very familiar to you.

The Block tab, on the other hand, contains options that are specific to the currently selected block. In other words, the contents of the Block tab will change depending on the type of block you are working on.

Tip:

Are you curious what options are available in the Post tab and the top toolbar? If so, you should check out our article on exploring the Gutenberg interface.

Adding a Block

To create a new block and start creating your page or post, click on the “+” button near the top left of the screen. When you do so, you will see Gutenberg’s block gallery. Clicking on any of the available block types would insert the chosen block into your post/page.

 

Removing a Block

The option to remove a block is not as discoverable, but it is still just a few clicks away:

1. First, select the block that you wish to remove.
2. Then, click on the three dots at the end of the Block Toolbar.
3. And finally, choose the last available option which should be Remove block.

 

And just like that, your block is removed.

Warning:

Be careful with the removal option as there is no message asking you to confirm your choice.

Tip:

If you happen to remove a block by accident, you can use the Undo button from the main toolbar to revert your changes. You can also use Ctrl+Z on Windows/Linux or Cmd+Z on Mac to undo the deletion.

Working With Text

Text-related blocks like paragraphs and headings are some of the most widely used blocks, so it’s a good idea to learn how to use those first. And it’s really easy – as soon as you add your preferred block, your cursor will focus on it automatically and you can start typing right away.

 

Tip:

There is an even faster way to create a new paragraph block. Have you noticed the Start writing or type / to choose a block text? If you click on that text and start writing, Gutenberg will create a paragraph block for you automatically.

 

To add a second paragraph to your post or page, simply repeat the steps you took to add your first one. Namely, click on the “+” button, choose the paragraph block, and start typing:

 

Tip:

If you have just finished working on a paragraph block and wish to create a new paragraph, then simply make sure that your text cursor is at the end of the paragraph block. Then, simply press Enter and a new paragraph block will be created for you automatically.

 

Inserting an Image Into Your Post

Images can greatly enhance the quality of your posts, so it’s important to know how to insert pictures, photos, and other graphics.

As you might imagine, Gutenberg allows you to work with images using an Image block. You can add a new Image block by clicking on the “+” button in the top left corner:

 

Once you have added an Image block to your post, you need to specify the image that you wish to use there. The simplest way to do so is to just drag an image from your desktop and drop it into the Image block itself:

 

Of course, you can also use your WordPress Media Library to choose your image. To do so, click on the Media Library button and choose your preferred image.

 

Publishing Your First Post

Once you have finished making your post, it is time to publish. If you have used the classic post editor in the past, you’ll be glad to read that the publishing process remains pretty much the same with Gutenberg. To publish your post, you need to:

1. Click on the Publish button in the top-right of the screen.
2. A short checklist of settings and suggestions will appear. It is recommended to quickly go through those.
3. Once you have gone through the suggestions presented by the WordPress Block Editor, click on the Publish button one more time.

 

Once your post is successfully published, you will see a screen similar to the one shown below:

 

Note the small notification in the lower-left corner. You can click on the link there to open your live post.

Tip:

If you are new to WordPress and wish to learn how to properly publish your posts, you can check our tutorial on post/page publishing for additional information.

Updating an Existing Post

You’ll want to update your published posts sooner or later, either because of an issue you have found or because you wish to add more content. Thankfully, updating your live posts is quick and easy with Gutenberg. To update a post:

1. Open the post in the WordPress Block Editor.
2. Make your edits.
3. Click on the Update button in the top right corner of the screen.

 

And that’s it! Your post will be updated and you’ll see a small notification in the bottom left corner of the screen letting you know that your update was carried out successfully.

Next Steps

Overall, the WordPress Block Editor strikes a nice balance between functionality and ease of use. All common actions are easily accessible while more advanced features are never more than a few clicks away.

Using the information in this tutorial, you should be able to start publishing with Gutenberg right away. Of course, there is a lot more to learn about Gutenberg blocks and the Block Editor in general. If you want to further enhance your knowledge, we recommend going through our tutorials on how to work with Gutenberg blocks, exploring the WordPress Block Editor interface, and customizing and extending the WordPress Block Editor.

The post Gutenberg Tutorial: The Basics of the WordPress Block Editor appeared first on AwardSpace.com.