How to Use each and every Gutenberg Block in WordPress

Gutenberg Editor or Block Editor has brought about an ultimate change in WordPress posting idea and technology. I can bet if you start using Gutenberg, you would never intent to go back to the old Classic Editor.

Previously we contributed a bunch of articles focusing and clarifying the process how to use Block editor effectively to write WordPress post. Some of them are linked below this section.

If you’ve simply followed those, you must get accustomed to using Gutenberg editor. Then you can yourself discover how to use each individual block most skillfully. If you didn’t, read-out those first.

When any users are sure of the primary functionalities of the the blocks, he/she must be able to master using any block. However at the beginning level, Gutenberg users must halt every now and then while using a particular block.

So, for beginners, we’ve arranged this tutorial pinpointing each and every Gutenberg block that will help them get ensured-

• What to do with a particular block.
• How to do that
• How to make the best use of any block

Essential to remember that all are changeable. What and how we’ve shown by this tutorial, might be changed in the upper version of WordPress. So, start your Block learning expedition keeping these words in mind.

Common words for the Gutenberg blocks

Each block has its own characteristic and formatting and customizing options. But there are some common facts that are applicable for any Gutenberg block-

• Each block has a toolbar above the content area. There is also another More Setting (formatting and customizing) options source on right sidebar under Setting >> Block.
• In right sidebar option, there lists a common ‘Advanced’ option where you have scope to apply additional CSS and HTML anchor link for that particular block.
• On left of the above-toolbar, each block has a Drag icon and Up and Down arrow to move the block up and down.
• On left of the above-toolbar, each block has option to change block to similar type.
• On right of the above-toolbar, each block has More options (Three-dot) menu. These options include-

• Hide/Show more Setting
• Convert to Blocks
• Copy
• Duplicate
• Insert Before
• Insert After
• Move to
• Edit as HTML/Edit Visually
• Add to Reusable Block
• Group
• Remove Block

• Each Block Toolbar has option to Convert Reusable block to Regular.

Now let’s focus on individual block–

Paragraph Block

Paragraph is the Default block. When you start writing on an empty block, it turns into a Paragraph block. Alternatively, you can insert a Paragraph block from the Block window.

On insertion, you see Paragraph block with the following toolbar above-

Now let’s see at a glance what are the options (from left) that furnish the Paragraph block-

• Change block type: By clicking leftmost icon, you can change block to similar type or style such as Paragraph to Heading. This is common to every block.
• Dragging: Hold the Dragging icon by mouse and drag the block up and down. This is common option.
• Arrow: Move the block by clicking up and down arrow. Common.
• Alignment: Align selected text to left, right or center.
• Bold:
• Italic:
• Link: Select Anchor Text from the paragraph, click the Link icon. Now Type or paste the Url in the text box. If the link is within your site, put search term in the box to find the associated post and select. At last hit Enter sign.
• Down arrow: This includes a number of formatting options like Strikethrough, Subscript, Superscript etc.
• Three-dot menu: This is also common to each block. We explained this previously.

Now let’s have a look at the Right sidebar option for this Paragraph block. Click on the text field of the block. You see the sidebar options under Setting >> Block.

Here you have four configuring option- Typography, Color Setting, Text Setting and Advanced.

Let’s clarify-

• Typography or Type setting: From here you can set font-size either by predefined way (small, medium, large etc. on left) or inserting custom px value (right).
• Color: From here, you can specify text color and Background-color. You can use both Predefined and Custom way to pick color.
• Text: Here you find only the Drop cap option (first letter of the paragraph large). Click it to switch the function on.
• Advanced (HTML anchor): The first portion of this option offers to set HTML anchor for this paragraph. HTML anchor is essential when you want to specify the paragraph as one of the sections of the post in order to link to it from other posts or sites. For details of Anchor Link, follow this link. This is a common part of each Block.
• Advanced (Additional CSS class/es): If you’re knowledgeable of HTML and CSS, you can style a paragraph fantastically to your heart’s content by adding one or more extra CSS class/es in this field. Contextual to say, your CSS declaration (Property-value settings) will go on ‘Additional CSS’ section of your Theme customizer.

Heading

Heading block has almost the same toolbar as Paragraph except the Heading parameters (h1 to h6) where default is h2.

Fix up by clicking which heading you need. From the left option of h2, set whether you like to use ‘wide width‘ or ‘full width‘ of the Heading.

On the right panel, Heading has the three setting options among four included in Paragraph block. They are Typography, Color setting and Advanced.

List

For this List block, the exceptional formatting options (beyond common ones and those discussed previously) are (from left)-

• Convert to Unordered list: Unordered list means list items are marked by bulleted icon like circle, square etc. It is default. If your item list is selected ‘Ordered’, click it to change to ‘Unordered’.
• Convert to Ordered list: Ordered list means list items marked with number like 1,2,3, or A,B,C etc. If your item list is selected ‘Unordered’, click it to change to ‘Ordered’.
• Outdent list item backspace: Use this option for Outdenting a list item when Indenting is selected.
• Indent list item space: Use this option for Indenting a list item when Outdenting (default) is selected.

Remember Indent and Outdent works only from the second item and when one is highlighted, another is dimmed.

By default, one item is showed with a new List block. For adding additional item, put the cursor next to item text and hit Enter from Keyboard.

The right panel options for List block includes Typography, Color Setting and Advanced what we’ve already clarified.

Table

On insertion of Table block, you see options to specify the number of Columns and Rows (see left part of screenshot). After fixing it, click Create Table. A table will be created with specified Columns and Rows with changed Toolbar above.

Now let’s see what are our new options (form left) to interact with the table-

• Alignment changing: Right of up-down arrow, by this option, you can align selected text to left, right and center.
• Edit Table: By this option you can insert column and row before and after of any column and row your cursor is put on. You can also Delete any column and row from here.
• Change column alignment: Use this option to change the texts of the whole selected column.

On the right you’ve the following options-

• Style: Fix whether you like your table be simple (default) or striped.
• Table Setting: Fix whether your table will be with fixed cell width, Header section or Footer section.
• Color Setting: pre-clarified
• Advanced: pre-clarified.

HTML

You can add a Custom HTML block to include in the post any element of content part by using free language (HTML, CSS).

This is a great scope to add any structure in the post whether it is created or collected from other media or tutorial.

Custom HTML block has no formatting options on right. The only functions that it include above the block are HTML to write html and Preview to check preview.

When any block shows ‘error’ due to invalid edit, you can convert that block to Custom HTML.

Classic

Classic block is actually a miniature of old Classic Editor. If you, though using block editor, want to edit a part of the post content by following the Classic editor’s style, just insert a Classic block. You’ll have the whole Classic Editor’s environment in this block.

If your contents on Classic block is too long and you ever want to separate them in different regular Gutenberg blocks, you can do that easily by using ‘Convert to blocks‘ options above the toolbar.

Columns

Use this Column block if you like to write a part of your content in multiple columns.

When you insert this block, you find the first part of the block (upper part in screenshot) asking you to specify the number of column. However, you can do that from here or skip it.

When you skip it you have the working block (lower part of the screenshot) with two columns. Now you can add more columns specifying the column number from the right menu.

Now each column has Insertion sign to add block on.

If you click top-border of any column, you get a column specific toolbar with option horizontal alignment and the vertical alignment of the text.

Again if you click between the column, you get a common toolbar for all the columns with option horizontal alignment and the vertical alignment of the text.

On the right sidebar, this block provides the option- Typography, changing number of columns, Color Setting and Advanced.

Image

Insert an Image block first and you get the options- Upload, Media Library and Insert from URL. You can use any of the options to insert the image.

After image insertion completes, you get several options on upper toolbar to configure the image-

• Change alignment: To change image alignment (left, middle or right).
• Link: To create image linking.
• Crop: To resize the image by cropping.
• Replace: To replace the image.

On right sidebar-

• Image style: To make your image default or rounded.
• Image Setting: By this you can fix ‘alt text’ of the image. Moreover, you change the dimension (height and width) of the image predefined way (Thumbnail, Medium, Full size) or by inputting dimension value in pixel or percent.

Gallery

If you want to set multiple images on your post in gallery style, insert Gallery block.

On insertion, you first get options to Upload image or inserting from Media library. In either of the case, select the images one by one by pressing Ctrl from Keyboard and click ‘Add to Gallery’.

After insertion finishes, upper-block option let you change the alignment of the image.

On right sidebar, you have scope to configure number of columns (in case of many images), Crop images (in case of alignment), set Image link and fix-up image size.

Button

You can create Button link by using Button block. Insert a Button block that will look as shown below-

In the text field on button, write the anchor text. From the toolbar, you can specify Button link URL. Moreover, there are options to make the text Bold, Italic etc.

On right sidebar, you have the following options-

• Button style: To make the button Filled or Outlined.
• Color Setting: pre-clarified.
• Border Setting: To specify Border-radius.
• Link Setting: Set here whether you like to open the link in new tab or not. Also set here the Link-rel (relationship between current document and the linked document).

Group

Group block is needed when you like to tie up a number of blocks into Group. It is actually not a featuring block. It might be essential when you want to use multiple block-contents together as a template or as Reusable block for future use.

You can include as many block as you require inside the Group by clicking Insertion sign within Group.

Each block under a Group has its own toolbar. Moreover, there is a common Group toolbar. You can find the Group toolbar by clicking ‘change block’ icon on left of any block under the Group.

Another fact is that you can set any group-free block under a Group by clicking ‘change block’ icon on left of any block.

File

Use File block to create Downloadable link of any file such as .pdf, .html, .css, .docs etc.

Insert a File Block. From the first block options, set the file on post by Uploading from device or selecting from Media library.

After file-insertion completes, you find the block with new tool options as shown below.

We clearly see here are several options to change alignment, Replace the file, Bold, Italic and others.

On right, There are options for Text link setting (Attachment page or Media file), fixing up where to open the link and whether you like to include Download button or not.

Cover

Cover block is essential when you like to input an image on your post with Text field on it.

Insert a Cover block. From the first screen, input the image by Uploading or from Media Library. On insertion, you get the Cover block with new tool options. They are Alignment, Content position (where to put your text) and Replace. All of these are self-explanatory.

On right, you have the following options-

• Media Setting: You can put the image as Fixed background or Repeated background or both. Click the Toggle icon left of the option to confirm this. Here you can also position the text field by specifying left and top border.
• Dimension: Put pixel value on the input box for the minimum height of the Cover.
• Overlay: From here you can set image overlay color with type (solid or gradient) and fix up Opacity of the color.

Media and Text

This is a structure to put Media and corresponding Text (Content) side by side.

On insertion of Media and Text block, you find a structure with two part- left for Media and right for Content. You can change this sequence by clicking ‘show media on left/show media on right‘ option above the block.

Just upload Media from option on Media part and put Text content on Content part. All tools (above and right) are easily understandable and clarified previously.

Embed

In Embeds category of Block Editor’s block list window, there are a number of Social Media embedding block like Facebook, Twitter, Instagram, WordPress etc. Among them one is common Embed block which can be used to embed or display content from other website or Media by URL.

The processes of embedding different Social media posts are the same. You can insert specific Social media block to embed corresponding Social post. But you can use this common Embed block to display any post by URL, even the posts from your own site.

The common process for all the social media block and Embed block is that you just collect the URL of the post, put them on ‘Enter URL to embed here’ field and click Embed. And you’re done.

There is no exceptional customization options above the block or on right sidebar.