Kadence Blocks – Gutenberg Page Builder Toolkit

Description

This plugin adds custom blocks to extend Gutenberg’s editing capabilities to better build custom layouts and make Gutenberg able to do more closely what popular page builders can do. With the Kadence Row Layout Block you can better control columns for different screen sizes plus it gives you full row editing tools like padding, backgrounds, overlays with gradients, vertical align and much more.

Try Kadence Blocks

Demo Testing

Custom Blocks Include

  • Row Layout – demo
  • Advanced Heading – demo
  • Advanced Button – demo
  • Tabs – demo
  • Icon – demo
  • Spacer / Divider – demo

Key Block Features

The Row Layout block can have 1-6 columns and any other blocks can be nested inside. So as a single column block it’s a powerful wrapper because you can create very custom backgrounds and define padding and margin both for desktop and mobile layouts.

The Advanced Heading block provides full control for your heading, including font family (all google fonts), font weight, font style, font size (with tablet and mobile control), line height, color, letter spacing, alignment and margin.

The Advanced Button block allows you to have up to 5 buttons side by side. Plus, you can control each individually, both with static and hover styles, and each button can have an added icon next to the text.

The Tabs Block is highly customizable with unique tab title settings for spacing, color, icons, and text. You can set up vertical or horizontal tabs, plus there are options to switch to an accordion setup for mobile. Each tab content is an empty canvas able to contain any other block within it.

The Icon block allows you to add an SVG icon right into you page. There are over 1500 icons to choose from and with each you can control the size, color, background, border and add a link.

The Spacer / Divider block allows you to optionally show a divider inside an area with a drag-able height. The divider has style options allowing you to set the width, height, color, line style, and opacity.

Editor Max Width

One of the challenges with creating custom column and row layouts in Gutenberg is the width of the editor in your admin. By default, Gutenberg uses a 650px max width for the content editor. When adding text to a sidebar template this works great, as the max width in the editor is comparable to the content width when using a sidebar. However, for content going into pages where you don’t have a sidebar, it is a poor representation of what you are actually going to get on the front end of your site. Not to mention it makes for a cramped space to work in if you are trying to manage a row with three columns.

In an effort to create an easier way to use Gutenberg in a more “page building experience” we created a simple way that allows you to change the default max width for pages and for posts as well as individually change that through a page by page setting.

Less Margin

Another challenge with Gutenberg is not having an exact representation of how your content is going to look on the font end of your site. Gutenberg does not quite give you this becuase it’s not a front end editor and therefor doesn’t include all the css that your theme and other plugins add to style your content. Much of this can be reconciled as theme authors add support for Gutenberg and add key styling from the theme into Gutenberg. We’ve already done this with our themes and it greatly improves the editing experience.

But Gutenberg adds in spacing between blocks that simply doesn’t exist on the front end. This spacing can negatively effect the way you design your content because it doesn’t represent how your page will look on the font end of your site. This is especially true as you start to use Gutenberg for more advanced page building.

We’ve added in an optional less margin setting that removes a lot of this extra spacing to give a more accurate representation of how your content will look on the front end. We think it helps a great deal with the overall experience in Gutenberg and encourage you to try it out.

Source files

github

Support

We are happy to help as best we can with questions! Please use the support forums.

Screenshots

  • Initial Row Layout editing

  • Example single column Row Layout with gradient Background overlay

  • Three column Row Layout example

  • Icon Block example

  • Advanced Button example

  • Editor Width settings inside Gutenberg

Installation

Install the plugin into the /wp-content/plugins/ folder, and activate it.

Reviews

Six stars. Thank you!

omg. Someone actually doing it right. This plugin has saved me from completely hating Gutenberg. The row and columns functionality should be in core. Core columns are terrible. These work.

I haven’t tried any features other than the rows/columns, but that’s all I need to see at this point. Everything else is gravy.

I love that each component can be enabled or disabled individually, and how the plugin focuses on layout without bad, opinionated styling. This is for developers.

Row Layout is da bomb

You can’t build serious layouts with Gutenberg. Row Layout feature alone from Kadence Blocks completes the equation. Row Layout allows you to set columns of various sizes. It also lets you set margin, padding, background options for each layout row. Fantastic.

This Gutenberg thing really isn’t working properly

Hi,

I am giving the Kadence plugin 3 stars because I see the intentions are good. What lets it down is Gutenberg itself. After testing it thoroughly along with other block plugins I have come away frustrated for the following reasons.

The bugginess of Gutenberg is evident where it throws up a block asking if you want to restore or convert to a HTML block, only to produce something that is not what you started with. I am testing on a clean install and notice this error under a number of circumstances, navigating between viewing the front end page and back to the editing dashboard. I also noticed this on changing between several Gutenberg compatible themes. Gutenberg should be more robust than this considering that it is supposed to be the solution to consistency between themes.

Next on the list is finding and targeting each element on the page, layout and content blocks. This is a game of whack’a’mole. Using the controls to manipulate layout, spacing and sizing is also haphazard with unexpected results.

All of this is a shame as the concept of Gutenberg has some merit and it has seen some good additions and improvements is recent updates. But, it keeps missing the obvious with the above complaints.

On top of this, Gutenberg leaves out something fundamental that should have been addressed years ago, even with the current editor. I refer to the code view. Having warmed to the fact that you can, in Gutenberg, target the HTML of each individual block it is disappointing that what is presented is not usable, not human readable. What we get is a mess of unformatted html, to a degree minified. As fundamental as this is to web design and development we should have at least some form of IDE like environment for users to work in, one that offers colour coded syntax highlighting and proper nested indenting. If Froala editor or Code Pen can do it then so should WordPress. We recently saw the introduction of code mirror in WordPress. It needs to be developed further and pushed into more corners other than the HTML block. This would resolve the big mystery meat of jumbled code intermixed with comment tags delineating blocks.

Coming to WordPress and seeing all this I not only wonder about Gutenberg but WordPress itself and am surprised that many in the community both using the platform and developing for it have accept this without shouting blue murder.

Error Tabs

Hi Team.
tabs block is error please check back. error occurs when changing tab title. when deleting old text and save with new text it only save 1 letter T.

Best row column experience

I was looking for a decent solution for the usage of columns as I find the default build in Column by Gutenberg very poor. Only for this feature alone this plugin deserves five stars as your interpretation of columns in Gutenberg is very spot on. I might use the other features in this plugin as well at some point but I’m sure they will give me the same sort of experience. Thanks!

Read all 11 reviews

Contributors & Developers

“Kadence Blocks – Gutenberg Page Builder Toolkit” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.1.4

  • Fix: nested columns css.

1.1.3

  • Fix: Output CSS for non WordPress 5.0.
  • Tweak Limited Margin CSS.

1.1.2

  • Fix: WordPress 5 stuff.

1.1.1

  • Fix: Update not showing WordPress.

1.1.0

  • Fix: Button link width.
  • Fix: Font weight setting.
  • Fix: Reusable Blocks issue.
  • Update: Add more to Prebuilt Library

1.0.9

  • Updates: Various fixes for Gutenberg 4.2
  • Add: Prebuilt Libray to row block.

1.0.8

  • Updates: Various fixes for Gutenberg 4.1
  • Fix: Nested columns.

1.0.7

  • Updates: Various fixes for Gutenberg 4.0
  • Fix: Typo in layout background.

1.0.6

  • Fix: Tab title not saving.
  • Fix: Button text not always saving.

1.0.5

  • Add: Minimal Margin css option.
  • Add: Waves divider to row.
  • Add: New Tabs Block
  • Update: Option to turn off the editor width settings.
  • Update: Tweak admin google font load so duplicates are not loaded.
  • Fix: Editor Width name issue.
  • Fix: Vertical alignment when minimum height is used.
  • Fix: Typography font when regular is reselected.

1.0.4

  • Fix: Min Height so it doesn’t add to padding.
  • Update: Add extra space when using larger gutter.
  • Update: Change Sidebar to small and No sidebar to Large.
  • Add: New Dividers to Row Layout!
  • Fix: Issue with fullwidth if set as default.
  • Add: Link to Demo Tester.

1.0.3

  • Fix: Row Inner max width.
  • Update: CSS build for Gutenberg update.
  • Fix: Support forms link.
  • Update: Buttons with font family selection.

1.0.2

  • Fix: Small JS error in the admin.

1.0.1

  • Add: github link.
  • Update: Editor width to change image max width.
  • Update: Spacer/Divider block to show height while resizing.
  • Update: Icons Block to copy styles from previous icon when adding more.
  • Update: Button Block to copy styles from previous Button when adding more.
  • Add: New Advanced Header Block with full Google font support.

1.0.0

  • Initial Release.