Overview
Gutenberg is the new WordPress default editor also known as WordPress Block editor. Gutenberg is a Client-side interface designed with React. It is used to create blocks, posts, and pages with more flexibility.
In this blog, We will see how to start a project with Gutenberg in WordPress.
Create a post/page in default Editor (Gutenberg)
First on your WordPress website you need to install the latest version of the Contact Form 7 plugin which is available for free. Now, you create contact form(s) according to your requirement and name according to your choices.
- To Create Post/Page in Gutenberg first
Go to Pages/Posts > Add New - Add title of Page/post and publish it.
Pros & Cons of Gutenberg
Pros :
- Blocks can easily be moved and aligned.
- Every Block has its own settings for customizing
- It is more SEO friendly
- Additional blocks are gallery, quote style, text columns, etc.
- In Gutenberg, You can give CSS styles additionally
- No need of code for formatting and style
- Provide the layout elements(blocks) like button, page break, columns, etc.
- Easy to implement even for beginners.
- In Gutenberg, you can create your own block using custom html tag and instantly preview them.
- Also supports mobile view.
Cons :
- It takes more time to display categories and taxonomies, sometimes it takes more than 5 sec to display 3-5 categories list.
- There is no option for row block, we have to use the Group block element for it.
- No support of columns responsiveness.
- Also, there is no option to use or create a container block.
- It is quite complex to manage or modify blocks.
To manage the editing or adding of content via additional blocks we can use some plugins like
Best block plugins to improve WordPress’s default editor
- 1) Kadence Blocks :First, you need to install & activate this plugin on your site.
You can deactivate blocks which are not useful from their settings.
In this, you can also alter these settings as well. See the below screenshot.Some Blocks :- Row Layout :
There are dozens of layouts that you can choose from options and also there is a pre-built library of pre-designed layouts.
So, you already have a partial power of complete page builder within this plugin.
We can use multiple rows and columns in one group. - Advance Heading :
In kadence block, you can include many different types of google fonts for improving your typography styles. - Accordion Block :
Provides you to create an accordion for your post - Tab block :
Provides the tab list section in this block Upgraded layouts and blocks in terms of Additional CSS styles - Table of Content Block :
Allows you to create a table of content starting with heading block
Many more are Layouts, testimonials, Accordions, and other advanced features.
You can create your own container block- For this, you need to select a group and make it full width
- In a group, select row layout and also make it full width,
- After that again select row layout and make it align-wide
This block gives you a container with responsiveness, so no need to write a separate css style for the responsive container.
Refer to the following video, - Row Layout :
Highlights:
- Pre-built library
- Easy to add inline css styles
- Having Multiple functionalities in Advance Heading
- Make Container Block with responsive
- 2) Ultimate Addons for Gutenberg (UAG)
Here, UAG added more blocks like Advance Headings, Post Grid, Post Masonry, Post carousel, Sections, Multibuttons, infobox, etc.
Some Blocks:- Icon List :
You can add icons in list elements instead of the default points style. - Price List :
It will create a restaurant menu card or any other price list with detailing - Content Timeline :
It will create trendy Timelines, flowcharts, and roadmaps. - Team Block :
Provides you to create team section with image - Multi Buttons :
Allows you to create multiple buttons with different style within a single block
In UAG, you can deactivate blocks that are not in use from its settings.
To Add a container in UAG,
It does not have a Row Element, so we can use Advance Columns.
There are few steps to integrate it:- select the group in the page and make it align full
- select advance columns and make it 1 column and make it align wide
- select the option in ( Container Width ) to customize and make it 100%
- write one media-query
@media(min-width:768px) and (max-width: 1280px)
{
[class*=”__inner-container”] > .align wide { width: calc(100% – 8rem); }
}
It will provide container width
Highlights:- Option to deactivate certain blocks
- Advanced typography features
- Inline spacing editing
- More than 20 block elements
- Icon List :
- 3) Co Blocks for Gutenberg :Co-Blocks is another plugin that you can use to build pages with the Gutenberg editor.Co-Blocks have many unique blocks like link accordion, alert dynamic separator block, Hero block, shape divider block, highlight block, etc.
These are some unique blocks available in co-blocks
Some Blocks :- Carousel Block :
Displays your showcase images and create carousel galleries - Author Block :
Enables to add author profile information to your post/page. - Alert Box :
They have different styles for Alert blocks, info Box , warning, success, error, etc..
Highlights:
- Many unique blocks
- 24+ elements
- Advanced typography features
- Very Lightweight
- Carousel Block :
- 4) Stackable – Page Builder Gutenberg BlocksThis is also a good block editor plugin which comes with many blocks like container, separator block, post block, feature grid block, accordion block, and much more.
Some Blocks :- Video-popup Block:
Allows you to embed youtube videos with various customize options like play button style, border-radius, background, etc. - Notification Block :
Provides a notification box anywhere on the screen with customization options like inline images, strikethrough, and much more. - Container Block :
You can combine your elements in a single row using this block - Feature Grid Block :
Provides you to display your product in a stylish grid layout
Stackable blocks have a limited number of free blocks. To access all of them, you need to buy the Premium version.
Highlights:- More than 23 elements
- Very Lightweight
- Unique icons design
- Variant design layouts
- Video-popup Block:
It may appear to you that all of the above-described plugin blocks are much more of the same and there is no need in choosing which one to install because their functions do not differ greatly. It’s up to you which best fits your website.
Conclusion
I hope that this blog might be useful to newcomers to start a project with New WordPress Editor (Gutenberg) and These additional block plugins for Gutenberg make it even better
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
