How to Use Block Editor Like the Advanced for WordPress Post

Block Editor is the uppergraded WordPress post editor for the future users. Every upper version of a system comes with more advantages, usability and flexibility. Same word goes in the case of Block Editor or Gutenberg editor. Replacing the ancient Classic Editor, Gutenberg has opened the new horizon of probabilities in WordPress posting system.

Creating and Editing WordPress post by Block Editor is easier but getting well-versed in it is not so much easy. Using a software/tools as well as an Post Editor like the professionals requires long-term experience, research and understanding with it which is unimaginable for the beginners.

In this tutorial, we’re going to highlight the hard-earned tricks and strategies in using Gutenberg editor for the general users that will help them handle this posting tools in skilled hand.

Contextually we’re not focusing on the general use of the Block editor but highlighting just about tactical use of it. For details of how to use Block Editor, follow this link first before proceed further. Again if you need to check-out the use of a specific block, follow this link.

Copy and Duplicate

Both ‘Copy‘ and ‘Duplicate‘ option is found on Three-dot menu located on right of each block toolbar.

Copying and Duplicating a block actually the same things in action but they are different in respect of method and functionality.

When you Duplicate a block, system creates another same block just below the original. You can then move (up and down) it to the desired location by clicking Up-arrow and Down-arrow.

On the other hand, When you copy a block, it is first copied in the Clipboard. Then you can Paste it anywhere on your post or site. For this you need to do the followings-

• Insert an empty block in definite location.
• Put the cursor on the editing field
• Now paste it by right-clicking mouse or pressing Ctrl+V from keyboard.

Obviously, when you need to move the block to a distant location, it is easier and safer to Copy it than to Duplicate. Use Duplicate only when you need to reposition the block just to a short distance.

Be careful of saving block

When you attempt to save a block as Reusable, you need to do the followings-

• Click ‘Add to Reusable blocks’ form Three-dot menu of any block.
• Give a name for the Reusable block in the name field.
• Click Save. Your Block will be save in the Reusable Block management page.

But one thing needs to be clarified. After you hit Save button, your original block turns into similar Reusable block. So, to avoid it the editing influence of that Reusable block, click ‘Convert to Regular block‘ from the block toolbar. For more, follow the next step.

Reusing Block- by Converting vs without converting

You can Save any block as Reusable block and reuse it anytime on any position of a post by inserting it from a separate tab of the Block insertion window.

However, you can use Reusable block two ways- by converting it to Regular block and without converting. You must have a clear conception of this fact.

Suppose you saved a Reusable block named ‘70% Bordered Paragraph‘ in which paragraph width is 70% and centered and its border is solid green.

You inserted this reusable block ten times in different points of your posts. Now if you use all of those without converting to Regular block, any change made in any copy of the block will influence all others. Suppose you change the border-color to navy, all the 10 copies will show navy border.

Again if you convert an inserted block to Regular, any change made in that will influence only itself not others. This is actually similar to using that block as a Block Template.

There are obvious reasons for you to use either method in applicable situations. So be careful.

For details of Reusable block, check-out these two links–

Use Link tool promptly

Many a block has a Link option where adding a link is contextual for you such as Paragraph, List etc.

However, you can create link two ways-

By URL

To create a link by URL, do the followings-

• Copy the URL of the post you’re going to create link to.
• Select the Anchor Text (Clickable visual text) from the block content.
• Now click the Link icon from the block toolbar.
• You’ll see ‘Search or type url’field with a number of options below (left of screenshot). Here paste the URL.
• Now have a careful look at the three options below all of which are self-explanatory. Select the first option if you like the linked page to open in a new tab.
• Select the second one if you like Search Engines don’t index this link.
• Select the third if it is a sponsored link or paid link for advertisement purpose.
• When all are done, hit Enter from Keyboard or click Enter icon. Your link is created.

By Searching

To create a link by URL, do the followings-

• Select the Anchor Text (Clickable visual text) from the block content.
• Now click the Link icon from the block toolbar.
• In the ‘Search or type url’ field, type the Search term (suppose-CSS). All of the posts and pages related to the search term in your site will be shown listed below.
• Click the post title which you want to link to. Your link is created. If you don’t select Anchor text, post title will be shown as clickable text.

Make use of HTML Anchor

When we create a link, clicking that link will send the clicker to the destination page which was linked to. But which portion of the page will the clicker reach?

Certainly to the top. And if the page is very large, you’ve to scroll down to reach the desired position of the post.

But you can create link that will send the users to the definite section of a long page directly. How?

By using HTML Anchor. How?

To create such link, do the followings-

• Select the Paragraph or other block on the desired post-content in which you want to apply HTML Anchor.
• On the right panel, go to Advanced >> HTML Anchor.
• Input the Anchor Text in the text field (one or more words without space). Suppose this is myanchor.
• Go to the position from where you want to link tho this post section.
• While creating link, use the HTML Anchor name followed by a # just after the link URL (suppose the url is example.com/post). In this example, this will be example.com/post#myanchor/. This way, complete the process.

Your HTML Anchor link is created. Now when anybody clicks this link, he/she will be sent to the defined section of the post not on top of the post.

However for details of Anchor link, follow this link-

Converting to Block option

There might be three situation when you require to convert your content or part of content to Regular blocks-

• Your content is written in Classic block.
• Your content was created previously by Classic Editor.
• You added multiple content-element with HTML Block.

In any of the above situations, you can convert the contents to Regular blocks if you like. Why to Regular?

Block is always a matter of freedom from the hassle of work. Separated block is easier to edit, enjoyable to handle and lighter to move.

But how to convert the above-mentioned blocks to Regular? Just select the block; click the Three-dot menu and select Convert to block. All are done. You see all or your large contents are divided by logical blocks.

While you make unusual change in Block

When you make unusual change in any block particularly by editing HTML, an error shows in Visual as shown below-

This means you edited the block the way the block system doesn’t support. Above screenshot is a Paragraph block. Now lets see how this issue can be solved-

• Attempt Block Recovery option: If you click this option, all of your changes will be disregarded and this Paragraph block will go back in pre-edited condition.
• Resolve: On clicking Three-dot menu on right, you find three options. If you click the first one ‘Resolve’, this will send you to another page asking whether you like to bring this block back to previous state or Convert to HTML block. Choose which one you like.
• Convert to HTML: You can convert this Paragraph block to HTML block by choosing second option. HTML block is the block that can contain any HTML element with Inline CSS but you cannot edit this block in Visual mode.
• Convert to Classic block: Obviously selecting this will convert your Paragraph block to Classic block. It is, in short, like the previous Classic Editor which we clarified in our previous posts.

Advanced option

About all of the blocks contain ‘Advanced’ option below on right panel. Here lie two options- HTML Anchor and Additional CSS Class(es). We’ve already clarified HTML Anchor in the previous section.

Additional CSS option is for those users who are knowledgeable of Internal and External CSS and feel honorable handling with CSS file rather than clicking ready-made visual CSS properties.

However, by using this feature, you can add CSS independently as you wish on any block contents. You just need to define the Class name here (suppose- mycssclass). Next, you need to describe the CSS property:value declarations by following .mycssclass Selector. Where to do that?

You can do this two ways-

• By Theme Customizer: You find option for adding Additional CSS on a blank file in the Theme Customizer. For this, from WordPress Admin Dashboard, go to Appearance >> Customize and find the option.
• By Plugin: There are a number of WordPress plugins (e.g- Simple Custom CSS) that let you add additional CSS with enormous space. You can make good use of these.

Hope you found a glaring understanding of how Gutenberg or Block Editor can be used for posting in WordPress skillfully.