Kadence Blocks Editor Gutenberg – WordPress a few months ago brought a major update to version 4, which completely changed the part of the WordPress editor which was originally a WYSIWYG which was very familiar to all users and changed to a more fresh and modern Gutenberg editor.
This big change brought by WordPress brings its own pros and cons for WordPress users because they have to learn again from scratch and for developers of course have to adjust many things to suit WordPress Gutenberg both from themes and plugins. The Gutenberg editor is a WordPress editor that carries a block format for building pages, you can read a more complete explanation of the Gutenberg WordPress Editor at the link below.
Although Gutenberg brings many amazing features, there are still many things that need to be added so that it can work optimally and produce the beautiful pages you want because currently Gutenberg Editor only has Column Blocks which allow you to put your content in columns and it doesn’t even have. some of the basic features you need to make your content more attractive and stand out. One of the block containers that can make the most of the Gutenberg WordPress editor is the Kadence Blocks plugin.
What are Kadence Blocks?
Kadence Blocks is a Plugin that adds a custom block feature to extend Gutenberg’s editing capabilities to build better custom layouts and make the Gutenberg editor work the way popular page builders can. With “Kadence Row Layout Block”, you can control the column better for different screen sizes plus it gives you full row editing tools to produce beautiful looking layouts by adding like padding, background, gradient overlay, vertical alignment, and much more. You can use this plugin or toolkit for free and you can download it directly from the WordPress.org plugin library here → Kadence Blocks – Gutenberg Page Builder Toolkit.
Kadence Blocks contains important features such as:
- Variable Column Layout / Width
- Padding & Margins
- Background Color & Image
- Responsive Control
- Individual Column Styling & Customization
It even has cooler and more advanced features. As:
- Background Overlay
- Divider shape (this is really cool).
- HTML Container Tag. You can set it to div, section, article, main or side.
- Minimum height
- Maximum content width
Some Key Kadence Blocks Features
Row Layout Block: You can have multiple columns from one to six columns and other blocks can be nested in them. So as a single column block it is a strong wrapper as you can create very custom backgrounds and define padding and margins for desktop and mobile layouts.
Advanced Heading Block: This feature provides full control of your headings, including text selection from various font families (all google fonts), font weight, font style, font size (with tablet and mobile controls), line height, color, letter spacing, alignment and margins.
Advanced Button Block: This feature allows you to have up to 5 buttons side by side. Plus, you can control each one separately, both in static and hover styles, and each button can have an additional icon next to the text as well as a wide variety of interesting button options.
Tabs Blocks: This feature is highly customizable with unique tab title settings for spacing, color, icon, and text. You can set the tabs vertically or horizontally, plus there is an option to switch to accordion settings for mobile, there is a beautiful set of tabs you can create with this feature. Each tab content is a blank canvas which can contain other blocks within it.
Icon Block: This feature allows you to add an SVG icon right onto your page. There are more than 1500 icons to choose from and with each one you can control the size, color, background, borders and add links. You can beautify your page by using this feature.
Spacer / Divider Block: This is a really interesting feature as it allows you to optionally display the divider inside a draggable height area. The divider has styling options that allow you to set the width, height, color, line style, and opacity.
Info Box Block: This is a box link feature that contains an icon or image and you can optionally fill in a title, description and add more text. Configure padding, font, background, outline, and static style and hover color to even reveal box shadows. This is an important feature that users will certainly use.
This block even offers you a collection of pre-made container designs by Kadence Block which you can easily insert for direct use.
This block is literally full of lots of amazing features that let you easily create parts, containers or wrappers without needing to create your own from scratch. Also, this plugin brings more useful blocks in addition to the row layout blocks I described above.
Max Width editor
One of the challenges when creating custom column and row layouts in the Gutenberg Editor is the editor width in your admin. By default, Gutenberg uses a maximum width of 650px for the content editor. When adding text to the template this section of the sidebar works fine, as the max width in the editor is proportional to the width of the content when using the sidebar. However, for content that goes to a page where you don’t have a sidebar, that’s a poor representation of what you’re actually getting on the front end of your site. Not to mention that it leaves a lot of space to work on if you’re trying to manage rows by three columns.
In an effort to create an easier way to use Gutenberg for a more “page building experience”, Kadence created a simple way that allows you to change the default max width for pages and for posts and individually change it via page-by-page settings.
Of course, this is a very important feature and has also been taken into account by experienced developers and they know what the weaknesses are when using Gutenberg, with this feature, you will be more comfortable when creating pages that were previously a problem when using the Gutenberg Default editor.
Another challenge with Gutenberg is not having a precise representation of how your content will look at the end of your site’s font. Gutenberg doesn’t quite give you this because it’s not a front end editor and thus doesn’t include all the css that your themes and plugins add to styling your content. Many of these can be reconciled as the theme writer added support for Gutenberg and added the main style of the theme to Gutenberg. We’ve already done this with our theme and it greatly enhances the editing experience.
But Gutenberg adds space between blocks that is not on the front end of your site. This spacing can have a negative impact on how you design your content because it doesn’t represent how your page will look on the front end of your site or the front end. This is especially true when you start using Gutenberg for more advanced page creation.
Kadence Block has added in a Less margin setting which aims to remove a lot of extra space to give you a more accurate representation of how your content will look on the front end of your site.
And those are some of the cool features that Kadence Block brings to complement Gutenberg, and you will really get more benefits when using the Gutenberg Editor and equipped with Kadence Block. Please feel free to try and make things much easier with Kadence Blocks.