What is Gutenberg Block: How to use Block Editor in WordPress

WordPress has introduced an exceptional Post Editor called Gutenberg Editor or Block Editor. It was added with WordPress Core from WordPress version 5.0 and was set as the default Post Editor replacing the traditional Classic Editor.

In the old Classic (still exists), we created post on a undivided whole HTML page where all Formatting and Inserting tools were placed on top of the Post Screen. There were options on right of toolbar to switch between GUI mode (for visual users) and HTML mode (for web developers).

However, Gutenberg editor is structured on the basis of Block. There is separate block for each essential HTML element and Probable structure which users can easily insert in their post by clicking an Insertion (+) sign. Each block has options separately to switch between Visual mode and HTML mode.

Gutenberg is an exclusively upgraded system of WordPress posting with unimaginably rich features and flexibility. As blocks can easily be inserted, moved, edited, saved and copied independently, Posting by block is really more convenient, time-saving, hassle-free and smarter than posting in an in-separated long page in Classic.

In this tutorial we’re going to pinpoint what this Gutenberg block is and how to use Block editor to write WordPress post skillfully.

However, previously we contributed a number of posts regarding WordPress post editor. If you haven’t gone through those yet, follow the links below-

What is this Gutenberg Block

Before we enter the main flow of the topic, let’s have a look at some important blocks that are available in Block Editors’ collection–

This is not the complete list. However, all provided blocks in the Block window are divided into a number of categories- Common, Formatting, Layout Elements, Widgets, Embeds and Reusable.

Each of the items listed above is a separate Block. After you enter the Block Editor’s screen, you can Insert any Block on the Posting work-area by clicking Insertion Sign (+) located on upper-left of the screen, left to a block and other places which we’ll focus on next step.

To insert a block, you need to do the followings-

• Click the Insertion sign (+). You reach Inserter Window.
• Find desired block
• Click to Select. The block is inserted on the fixed point.

Suppose, first, we insert a Paragraph block which will look as shown below. Note, Paragraph is a default block. Whether you insert or not an Empty block is ready at the beginning of New Post saying ‘Start Writing or type / to choose a block’. If you start writing, it turns into a Paragraph block.

This is the Paragraph block. This is the Visual mode. If we open HTML mode by clicking ‘Edit as HTML’ from Three-dot menu, we find the following code-

<P>PARAGRAPH BLOCK</P> 

However, in visual mode, we see the Block Toolbar above which includes the tools (from left)-

• Change block type option to change this block to other similar blocks
• Text alignment
• Bold
• Italic
• Link
• Down-arrow with strikethrough or other options

On the right is Three-dot menu. It is common to each block. By clicking it, you can Duplicate and Remove block, Add block before and after of the current block, Edit as HTML/Edit Visually and do other things.

On the left is the Handle icon (middle) with up and down arrow. With this you can easily Move this block Upward and Downward.

There is Other options source for this Paragraph block as well as any other block in the right panel. When you click any Block’s work-area, you see those options on right panel under Block. If you don’t see this option selected, Click Setting menu on upper-right of the Block Editor’s screen and click Block.

Here you’ll find options to change font-size, Text color, Background-color, Use Drop Cap and Add additional CSS in case of Paragraph block.

This is, in-short, the Paragraph block which is self-sufficient with all the formatting and other features.

Now let’s have a look at another block ‘List’-

Here in List toolbar, we see different options like Ordered list, Unordered list, Outdent list item, Indent list item etc.

Put the cursor on writing area. Then hit Enter to add more list items. By default, this list block shows Unordered list. You can switch to Ordered list by clicking ‘Convert to Ordered list‘ option from the toolbar above.

Options on right panel for this List block are also different.

How to do it in Classic Editor?

This is the timely question that may arise in any readers’ mind. How did/do we perform all of these tasks in the environment of Classic Editor?

Actually Classic Editor has a common Toolbar with Formatting, Inserting and Structuring options above the Editor’s screen.

Formatting tools like Bold, Italic, Alignment, Indenting, Text-color, Background-color, Strike-through etc. are common. Beyond these, by Classic Editor-

• You can directly do a little things like inserting Paragraph (default), Heading, Image, Image Gallery, Link, Horizontal line and something.
• You need Plugin to include many blog-items like Table, Column, Categories etc.
• You need web language and coding to include many items like Cover, Button, Preformatted, Iframe, File etc.
• For additional styling of any elements, you have to depend only on the own CSS.

In Gutenberg Editor, beyond WordPress default block collections, you have unlimited possibility of collecting blocks through Sharing and from Block Directory in WordPress.org.

How to use Block Editor and get skilled in

In the previous steps, we clarified about Block. Creating post and editing it involves not only working with blocks but there are other factors also.

In this step, we’re going to highlight the different essential points that needs to be clarified before you enter Block Editor’s screen to start writing post.

Multiple ways to Insert Blocks

In the upper step, we showed the way how to insert a block in the posting area from Inserter Window by clicking an Insertion icon (+). There are multiple points where Insertion signs are located-

• Right of an Empty block.
• Top-left toolbar of the Editor’s screen.
• In the middle point between blocks.

Beyond Insertion sign, here are two other ways to insert block-

• You can enter Inserter Window by Slash (/) command from keyboard keeping cursor on empty block.
• Click Three-dot menu from toolbar of any block. From the options list, click ‘Insert before’ or ‘Insert after’ to insert an empty block before or after the current block.

Clicking ‘+’ sign will send you to the listed-blocks window from where you can scroll down or use Search box to find desired blocks. Blocks from installed plugins are also listed there.

Common More Options (Three-dot menu) with each Block

You see Three-dot menu with each block on right of toolbar. On clicking it, you find the following options-

• Show Block settings / Hide block settings This is to show or hide More options for individual block on right panel.
• Convert to Blocks: to convert Classic editor’s post or a big html file into Gutenberg Blocks.
• Copy: To copy a block-content in the same or different posts. For this, click ‘Copy’. Next insert a block where you want to Paste. Put the cursor in the block’s content area. Right click the mouse and Paste.
• Duplicate: to copy the whole block not only content. Just click ‘Duplicate’ A duplicated block will be shown below the original. Now Move it where you like by using Moving handle or up-down arrow.
• Move to: To move individual block toolbar to upper toolbar position.
• Insert before: To insert an empty block before the current block.
• Insert after: To insert an empty block after the current block.
• Convert to Regular Block: You find this option when you insert a Reusable block. By this you can convert it to regular block. This means you can edit it as regular block.
• Add to Reusable Block: to add or save a block for future use.
• Group: to group multiple blocks. In a group, you can add as many blocks as you need. For Group, you get a common Three-dot menu.
• Remove Block: To delete a block.

Block Editor’s Setting options

Block Editor’s Setting icon is located on top-right corner of the Editor’s screen. Here are two options- Document/Post and Block.

In the meantime, we briefed about Block option. When a block remains selected, Block tab shows the additional customization options about that individual block.

Document tab shows the options which apply to the whole Document. They are Options relating to Visibility and Publishing, Post format, Permalink, Categories, Tags, Featured Image, Excerpt, Discussion etc. These are options most of which we see on the right panel of Classic Editor.

Block Editor’s More Options (Three-dot menu)

This option is located on top-right of the Editor’s screen. Here are the three main categories of options- View, Editor, Tools each of which includes multiple options.

Here are different types of options which are usually essential at the starting of post and during Posting work, especially, for fixing overall screen situation, Editor’s mode (Visual or Code), Block management and copying the whole document.

Let’s explain-

View

• Top Toolbar: Select if you like to put the individual Block-toolbar on top of the document.
• Spotlight Mode: Select if you want to put only the working block highlighted and others are dimmed.
• Fullscreen Mode: In case of the above two options, WordPress Dashboard left-panel is visible. If you choose Fullscreen, you’ll get fullscreen posting area.

Editor

• Visual Editor: Visual Mode of the whole document.
• Code Editor: HTML mode of the whole document.

Tools

• Block Manager: Fix category-wise which blocks you like to show on Inserter Window.
• Manage all Reusable Blocks: Reusable Block Management page.
• Keyboard Shortcut: This is self-explanatory
• Copy All Content: Click to copy only all contents of the whole document which is Pastable preferably on Newly-added Post.

Starting a new Post

While you Add a new Post, the things you need to do first are as follows-

• Add Title: Fix-up title located above the Post screen.
• Document/Post option: From right panel, click Setting >> Document/Post. Fix up Permalink, Category, Tag if you need now. Note, Permalink option is below post tile in Classic Editor.
• Three-dot Menu: Click Three-dot from right panel and fix-up View Mode, Editor Mode and Block permission however much you require.
• Block Insertion: Insert Block and start writing post.

Editing individual Block

When working on individual Block, follow these tips-

• If you edit Visually, make the best use of individual Block-toolbars that are located in two places- above block and on right-sidebar.
• If you want to edit as HTML beyond Visual editor, it is better to use an HTML Block.
• Before confirming any block-content, Preview the whole Document (Preview button is on upper-right) and check the desired block.
• If your document is too large, use Spotlight mode to easily work on a block.
• If you want to add a free structuring code, use HTML block.

Handling individual Block

The advantage of handling a block different way is, I think, the great discovery of WordPress. Grasp the handling tricks and work like the skilled.

• Remove a block easily if it is unnecessary (use Three-dot menu).
• When needed, insert block before and after a block by using Three-dot.
• If you’re not satisfied with a block and want to furnish differently, Duplicate it and do newly. At last remove the unnecessary one.
• Drag a block up and Down with Drag handler or up-down arrow to settle in a desired position.
• If your way is too long, don’t drag but copy the block content (Three-dot), insert a similar block in desired place and paste the content.
• When you want to use a block next time, Add it to Reusable block with a name (use Three-dot).
• If you want to edit a reusable block only for the unique purpose, first convert that block into Regular block by using Three-dot.
• If you want to remove an empty block, first write something on it to make the toolbar visible.

Reusable Block chapter of the story

Advantages of using Reusable blocks in the Gutenberg Editor have lifted it to a great height. You can add (save) any block as Reusable block whether it is created or edited. For this-

• Click Three-dot menu on the specific block toolbar.
• From the options list, click ‘Add to Reusable Blocks’

There is a Reusable Block Management page where all of your Added or Saved blocks are stored. From this page you can Add new block, Edit prevailing blocks and Import and Export them when needed.

To reach Reusable block management page, do the followings-

• Click Three-dot menu on top-right of the Editor’s screen.
• Next, under Tools, click ‘Manage All Reusable Blocks’

Remember, you can use a particular Reusable block two ways-

• Without Converting to Regular Block: In this case, editing any of the specific block will apply to all the block-copies in the site.
• By Converting to Regular Block: In this case, you can edit any copy of the block individually that will have no impact on other block-copy. This is like using as a Block Template.

To Convert a Block to Regular, Click Three-dot menu from Block Toolbar. Select ‘Convert to Regular Block‘ from the options list.

Publishing, Drafting, Scheduling

At draft level, it is usual you save the document as Draft. When all are finished and you’re satisfied with the post, you attempt to publish it for worldwide visibility.

To Publish or Schedule a post, reach the publishing related options on the right sidebar. For this-

• Click Setting icon on top-right of the Editor’s screen.
• Next, click Document/Post.

Here, under Status and Visibility, two options Visibility and Publish are directly associated with Post publishing.

Visibility

Despite being published, you can make your post Publicly visible (default), Private and Password Protected. You can select any of the three by clicking the default item.

Publish

You can publish a post immediately (default) or make it scheduled to be published next time.

To schedule a post, click immediately. A Calendar will appear. From this, fix a future date with time. Now click out of the Calendar. You’ll see Schedule option in place of Publish.

When you’re satisfied with the desired configuration, click Publish or Schedule.

Your post is published or scheduled to be published on fixed date.

Edit as HTML

If you’ve even rough understanding of HTML and CSS, you can edit any block in HTML mode. Editing as HTML ensures more flexibility and freedom to style and structure a block.

Note that if you want to apply CSS that is not available in Visual mode; then, this will create error saying ‘This block contains unexpected or invalid content‘ and ask you to Resolve (go back to the original) or Convert to HTML.

Suppose, you want to add border to a Paragraph. But there is no border option in Paragraph in Visual mode. This will create such error. In this case, it is better to Convert it to HTML. For this, click Resolve >> Convert to HTML.

Best Use of HTML Block

HTML Block is for applying free web language HTML, CSS, JS on the post. If you’re, though not skilled in, knowledgeable of these languages, You can make the best use of HTML Block. By using this block-

• You can create parts of content like Table, List, Header, Div, Image placeholder, Iframe, Link and anything as your sweet will and add as Reusable block to use anytime.
• You can modify any block of Block editor as per your sense of styling with CSS.
• You can copy any element codes from Web language tutorial or any source and use it in your post directly or after modification.

Look back through Classic Block

Despite all of these arrangements in Block Editor, you might have the necessity / fascination to try the taste of Classic Editor newly. Yes, you can do it by inserting a Classic Block. Classic block will give you all the features and environment of Classic Editor.

Embed Media with block

In Gutenberg, there is a separate Embed Category of blocks that includes a Embed block and many other Social Media blocks individually. By ‘Embed’ block you can embed different media file like audio, video, Image, .pdf, .gif, .html etc.

Use individual Social media block to embed related Social Media post. For instance, if you require to embed an Instagram post-

• Insert an Instagram block.
• Collect URL of the associated Instagram post.
• Paste it on the URL field.

Plugin-based blocks.

There are plugins that are featured with related Block. For instance, Syntax Highlighter. When you install this plugin, a Syntax Highlighter block is added to the Inserter Window. You can search by name to find out.

Hope you have a lucid understanding of what the Gutenberg editor is and how to use Block Editor to write WordPress post. If you have completed reading the post, hope you’re able to start Posting in WordPress with Block Editor right now.

If you face any problem in practical field, feel free to comment.

 Reach all Block-Editor posts