Select Page

WordPress Blocks and How to Use(Gutenberg)

WordPress Blocks and How to Use(Gutenberg)

WordPress Content Blocks and How to Use (Gutenberg), WordPress has become one of the most popular CMSs for building websites. We’ve watched them make several improvements to their site-building skills over the years. Since 2018, WordPress has included a block system (Gutenberg) that allows you to create pages and articles without knowing how to code.
In this post, we’ll walk you through how to utilize it quickly. You will be able to create aesthetically pleasing articles and pages without any coding experience.

What is Gutenberg

WordPress’s site-building and publishing tool is known as Gutenberg. WordPress’s highly useful tool is presented in the second of four phases and already provides an excellent authoring experience. Gutenberg includes pre-made blocks, patterns, and layouts for your WordPress website design.

The Classic Editor

If you’ve used WordPress previously, you’ll recognize the ‘Classic Editor’. The first editor was comprised of a single WYSIWYG. For many years prior to the arrival of popular plugins such as Elementor and DIVI, WordPress authors had extremely limited alternatives for populating their websites. When using the Classic editor, you would be working in the WordPress backend and would not be able to see what the page will look like until you clicked the save button.
Gutenberg now allows anybody with no coding experience to contribute content and preview how the page will look once it is online.

Drag n drop editing

For content production, nearly all CMS and many web apps employ a ‘Drag and Drop’ approach. It basically implies that you copy pre-coded pieces from an online toolbar and paste them into your page layout. Once relocated, each block may have a variety of properties applied to it, including padding, margin, color, and font.
Gutenberg makes excellent use of this technology with its user-friendly editor and toolbars.

Getting started with Gutenberg

One of the first things to check is if your WordPress core is up to date with the most recent release and whether your theme supports the ‘Blocks’ function.
You must also install the Gutenberg plugin, which can be found in the Add new plugin area of the WordPress dashboard.
You’re ready to begin after you’ve downloaded and enabled the plugin.

Creating a new post or page

Let’s start with a fresh page/post. Select posts/pages from the main WP dashboard and click ‘Add New’.

WordPress Content Blocks and How to Use Them (Gutenberg)
WordPress Content Blocks and How to Use Them (Gutenberg)

Choose a page title

Your chosen page title will be converted into your page URL (aka Slug). If it needs to be more SEO-friendly, this may be altered in the settings.

WordPress Content Blocks and How to Use Them (Gutenberg)
WordPress Content Blocks and How to Use Them (Gutenberg)

Adding a blocks

It’s time to add a block, which you may find in the ‘Blocks’ sidebar. There are several blocks to pick from in the following categories:
Text\sMedia \sDesign \sWidgets
Theme \sEmbeds
Begin by selecting the type of block you want to use and dragging it into your page. We’ve picked the paragraph block in the example below.

WordPress Content Blocks and How to Use Them (Gutenberg)
WordPress Content Blocks and How to Use Them (Gutenberg)


You’ll be able to add content to the block once you’ve added it. Each block has its own configuration and aesthetic choices. You may find them on the right-hand sidebar.


There are many distinct sorts of blocks with various functionalities. Experiment with various combinations to come up with some unusual and engaging layouts.

Adding a Columns

Columns are the ideal approach to divide up material to make it more visually appealing, simpler to read, and more noticeable to the reader.

WordPress Content Blocks and How to Use Them (Gutenberg)
WordPress Content Blocks and How to Use Them (Gutenberg)


A two-column layout with a paragraph of text next to a supporting image is a common combo.
The column block will automatically organize your columns based on the device of the viewer. If the viewer is using a mobile device, the columns will neatly stack on top of one another.
Follow these instructions to utilize the ‘Columns’ block:
In the editor’s upper left corner, click the Block menu option.
Scroll down the menu until you reach the ‘Design’ blocks.
Choose the ‘Columns’ block.
Drag the other block to the desired location on your page.
Choose the column arrangement you wish to use:
100

50/50
30/70
70/30
33/33/33
25/50/25

Columns will now appear on your website, ready for you to drag blocks into them.

Reusing blocks you’ve created

You can save any layout groups you’ve developed and customized in Gutenberg. This saves time and allows you to keep your website design consistent.
Maintaining consistency in the appearance of your website is critical for a positive customer experience. This does not imply that your website pages must all look the same. You may still produce visually appealing designs that stand out while adhering to your branding approach.
Follow these procedures to save a layout:
Choose the wrapping layout for the group you want to reuse.
Select the three-dot menu.
Scroll down and click the ‘Add to reusable blocks’ button.
Give your menu a name in the popup menu.
Save the file
Your layout is now available in the block menu.
You may access the block sidebar from the block sidebar.

The different types of blocks in the Gutenberg

In the Block sidebar, you may select from a variety of blocks. Some you’ll utilize more frequently, while others offer useful and dynamic capabilities. The following are the core blocks that you can use:

TextDesignMedia

Paragraph
Heading
List
Quote
Classic Block
Code
Preformatted
Pullquote
Table
Verse
Buttons
Columns
Group
Row
Stack
More
Page Break
Separator
Space
Image
Gallery
Audio
Cover
File
Media and Text
Video
WordPress Content Blocks and How to Use Them (Gutenberg)
ThemeEmbedsWidgets
Navigation
Site Logo
Site Title
Site Tagline
Query Loop
Posts List
Avatar
Post Title
Post Excerpt
Post Featured Image
Post Content
Post Author
Post Date
Post Categories
Post Tags
Embed
Twitter
Youtube
WordPress
SoundCloud
Spotify
Flickr
Vimeo
Issuu
Kickstarter
Reddit
Scribd
TikTok
Tumblr
Pinterest
Archives
Calendar
Categories
Custom HTML
Latest Comments
Latest Posts
Page List
RSS
Search
Shortcode
Social Icons
Tag Cloud
Contact Form 7
WordPress Content Blocks and How to Use Them (Gutenberg)

Summary

Building a website on WordPress without any technical skills has gotten incredibly simple in recent years. Wix, Squarespace, and other internet website builders are now available. The scalability possibilities provided by WordPress are the reason to use it.
WordPress is an extremely sophisticated web builder that powers 43% of all websites. WordPress is a stand-alone foundation, making it easy to relocate your website if necessary. If your website has expanded and requires a new set of criteria from your hosting provider, it may be swiftly and easily relocated to a better server.

WordPress restores control of your website to you.

WordPress Content Blocks and How to Use (Gutenberg)

WordPress Content Blocks and How to Use Them (Gutenberg)
WordPress Content Blocks and How to Use Them (Gutenberg)

Leave a reply

Your email address will not be published.