The New WordPress Block Editor

Read time: 5 minutes

As a business owner, you’re managing your own WordPress site to provide quality content to your users. That means that any time you spend tweaking the alignment, size, layout, and other aspects of your text, images, and other content is time taken away from creating something truly useful. Enter the new WordPress block editor.

How Is Block Editor Different?

Prior versions of WordPress used a classic content editor that looked, more or less, like a word processor window. Complete with formatting buttons, it was relatively easy to add and format text.

However, if you wanted to add a feature like a button, chart, or poll, you’d need to add a plugin or write HTML code. Then would come the real work – making minuscule adjustments to ensure text aligned with your other elements correctly.

WordPress 5.0’s new editor is better referred to as a block editor since it allows you to approach your WordPress site in larger chunks. Each block consists of a content element you can add to your edit screen and change right there in the block editor. You can move content around the page, block by block, and change the look of your site much more easily.

How Do You Use The New Block Editor?

Block editor can perform all the tasks of the classic content editor, as well as many functions that previously required plugins:

Create a new post or page.

To create a new post or page, simply click on posts or pages, and then “add new.” This action will launch the block editor. By default, the first block presented is a title block, which you can edit to your satisfaction.

Once you’re finished editing your title, you may either click below the title block or tab out of the title block. By default, the next block added is a paragraph block. However, if you wish to add something else instead, you may do so manually.

Add a new block. To add a new block, simply click on the add new block button, which appears as a “+” symbol within a small circle. The button appears at the top left corner of the editor, on the left side of an existing block, as well as below your current block.

Clicking on the button will show the add block menu with the most commonly used blocks as well as a search bar. Select the type of block you want to add.

Customizing the block.

Once the new block type is on the edit screen, you’ll see a toolbar at the top of the block featuring buttons custom to the type of block you’re editing. For example, a text block would show word processing buttons, while an image block would show buttons related to image orientation. On the right side of the block, you’ll see block settings relating to text, block color, and more. Adding content to the new block and customizing the block’s look is fairly straightforward and intuitive with block editor.

Saving the block as a reusable block.

When you’re finished adding content and customizing your block, simply add a new block to preserve the content you have so far. If your block contains content you would like to reuse in the future – perhaps a call to action, a signature, or some other feature you plan on repeating – you can save the block to reuse. Click on the block menu (the three vertical dots at the right side of the toolbar) and select “add to reusable blocks.” You’ll be prompted to enter a name for your block, and then save. When you want to reuse the block, simply select it from the add block menu, where it should appear as a frequently used block or with a simple search.

Adding different block types:

In addition to the text block, blocks of many types can be added directly from the block editor or from an alternate source:

  • Images and Video. To add an image or video, simply select the proper block from the add block menu. You’ll be prompted to upload your image, use one from the library, or insert a URL. Or, you can drag and drop an image or video directly into the editor, and the editor will create a block for it automatically. Image galleries work very similarly to image blocks. Select the gallery block, then add multiple images to it. You’ll be prompted to customize the layout once you’ve added your images.
  • Media & Text. If you’d like to add an image right next to a text block, select Media & Text from the add block menu. You’ll be able to enter your text and upload an image, side by side, which was not possible with the original content editor.
  • Buttons. Perhaps one of the most user-friendly additions to block editor is the ability to add buttons without writing code or using a plugin. All you’ll need to do is choose “button” from the add block menu, choose your style, and add a link.
  • Tables. Another option the classic content editor did not offer is the ability to add tables alongside text into WordPress posts and pages. Simply choose “table” from the add block menu, select the proper number of columns and rows you want to insert, select the style, and then you’ll be able to add your data.

Managing Content

Once you’re finished adding new content blocks and customizing them to your liking, you’re free to use one of the best features of the WordPress block editor – drag and drop rearranging. You can move entire blocks of content on your page simply by dragging them to a new position.

In addition, any plugins you need that have not been supplanted by new block editor features are still available for you to use as you wish. Your older content can be edited within the block editor under a version of the classic content editor, or you can choose the option to convert it to a block.

Overall, WordPress’ new block editor “Gutenberg” adds a host of functions that weren’t possible with the classic editor and streamlines rearranging, aligning, and altering the content. Most of the new functions are fairly intuitive, allowing you to experiment with the content you add.

This all fits well with the very reason WordPress developed block editor – you’ll spend less time fussing with the technical details and more time creating content that will benefit your business.

Have you tried using the WordPress block editor yet? What was your experience? Join us on Facebook to continue the conversation.

Sources:

more insights

WordPress Accessibility

When you’re designing a website, you need to keep in mind many factors. You’ll want to think about your page layouts, color scheme, how menus and linking

Read more >