Introducing Blocks 3.0

This is the exciting news you’ve been waiting for: Kadence Blocks 3.0 is here!

We are proud to announce the release of Kadence Blocks 3.0, the latest version of our popular WordPress page builder plugin. If you’ve been following along throughout the development and beta process, you’re probably aware that this latest update brings a number of fundamental changes to Kadence Blocks, all of which make for a better site building experience. As well, this foundational rewrite creates new structures that allow our development team to better add new features, including new blocks. There’s an exciting road ahead for everyone building fast and effective sites with Kadence. 

What’s New?

Code rewritten, modernized, cleaned, and improved.

Kadence Blocks was built in the early days of the WordPress block editor. In fact, it was initially released over three months before the block editor was part of WordPress core. In a lot of ways, we’ve been all in on the block editor since the beginning, but this has also meant we’ve had to do lots of refactoring as the code base in core and the block editor itself have changed drastically over the years. As much as we refactored in places, we hit a moment where it was clear that we needed to restructure most of the plugin to make it more compatible with the current path of WordPress core and open up future opportunities to innovate in the block editor. Here are a few of the highlights:

• Updated build structure completely and now use component libraries 
• Updated React structure of blocks to be functional and use API v2
• Rebuilt how we compile and output frontend CSS for block customizations
• Refactored the way we save and output SVG icons to prevent wp_kses stripping
• Rebuilt our front-end Javascript to not use any jQuery sliders

A New User Interface for Block Settings

Kadence Blocks 3.0 brings new improvements to the user interface of the block settings. These changes were made to optimize how quickly and easily you can create and manage the blocks on your page.

Organized by Tabs

Block settings are intuitively organized into sections: General, Style, and Advanced. This will make finding the right setting to tweak your layout and design faster and easier. No more scrolling through lots of settings!

New and Updated Settings Controls

We wanted to make it easier to edit block styles. While WordPress core had developed some new controls that were really nice, we found issues that prevented us from simply adopting their components. For example, WordPress core has a beautiful gradient control, but it doesn’t work with global variable colors, which are really important for Kadence users looking to make building sites faster and easier. Not to mention WordPress core doesn’t have any components with responsive setting controls, which is also important for modern site building. Insert mind-blowing emoji here.

We built quite a few of our own controls for our component library. Some of these controls are based on WordPress core and others depart in a few small ways where we felt like we could provide better direction with customized Kadence controls. All of these have responsive design in mind and bring a lot more consistency to our block controls. Below are some images of some of these new controls.

Visual Padding and Margin

Kadence Blocks has always given you the ability to set top and bottom padding visually in the Row Layout Block. Kadence Blocks 3.0 improves this experience in the Row Layout and in many of our other blocks. With highlighted areas that show when you are hovering over the padding and margin settings, it’s now a lot easier to see how your settings are affecting the page layout.

Changes with the Row Layout Block

One of the cornerstones of the Kadence Blocks plugin has been the Row Layout Block. The Row Layout Block is a container that groups sections together and makes building with blocks easier. We focused a lot of attention on making this foundational block easier to use.

Easily Move Sections within a Row Layout

One frustration we’ve all experienced within the Row Layout (yes, us, too) is the difficulty of moving a section from one area to another. Building with blocks has often meant a tedious copy-and-paste movement of one section on the right to move it to the left. With many Section Blocks in a Row Layout Block, it’s often been necessary to rebuild a Row Layout from scratch to make sure that moving a Section Block can be done easily. 

Now, moving Section Blocks within a Row Layout Block is easier than ever. With the click of an arrow, you can quickly move a section around anywhere as well as drag them from one Row Layout block to another.  

New Row Grid Layout Options

A row layout can now contain a grid of sections. For example, if you want a three-column grid that has two rows, you can do this with one Row layout block. What’s great about that is you can make it a two-column grid on a tablet.

Row Layout uses Grid CSS and other Optimizations

We optimized how the Row Layout Block outputs CSS and what type of CSS it uses. Switching from CSS Flexbox to CSS Grid allows Kadence Blocks to significantly reduce the CSS file size (36kb -> 6kb). Along with that, we’ve decreased the amount of HTML tags in the output from three to two, further helping you optimize your DOM (Document Object Model) size. This improvement dramatically increases page speed and improves the overall user experience.

Typed Text in Advanced Text Block

One feature that is brand new is our Typed Text option inside of the Advanced Text Block. You can now define a series of strings to have typed out and replaced in your content. This is great to bring attention to a specific headline and create engagement on your site.

To add this on your site, select some text and click on the arrow in the toolbar of the Advanced Text Block, in the dropdown click on the typed text. Then, a panel with all the type text settings will open.

Migrating to Inner Blocks

When Kadence Blocks was originally created, the controls around inner blocks were extremely lacking. This meant for several of our blocks we had to create custom array attributes to create a type of inner block that wasn’t actually an inner block. Our Buttons Block was a good example of this. It served a valuable purpose in giving users the ability to easily add two buttons beside each other. As WordPress core has moved forward with its development, the tools for building with inner blocks are much better. Now it makes a lot more sense to have a container block with single buttons as an inner block. This allows you to click on the button to edit it and simplifies the settings panels significantly. In Kadence Blocks 3.0 we’ve migrated four blocks to take advantage of inner blocks for easier development.

• Advanced Button Block
• Testimonial Block
• Icon Block
• Icon List Block

Variables for Settings

One of the many goals of Kadence Blocks 3.0 was to make design decisions more intuitive. For many users understanding the difference between pixels, EM or REM units and which they should use for various settings like font sizes, padding, or gutter is not at the top of their to-do lists.

With Kadence Blocks 3.0 we moved many of our default size settings to use custom variables so you can set small, medium, and large sizes for standard element size settings and let us handle the rest.

It is easy to still set your own custom sizes using pixels, or any other unit you want in the block settings. However, sticking with the default variable options will help you keep consistency in your designs and limit the need for responsive overrides. Plus, your design is easier to manage in the long term. For those times when precise controls are required, Kadence Blocks puts that power in your hands as well.

Responsive Design Through CSS Clamp

To provide a better viewing experience no matter what device you’re on, Kadence Blocks 3.0 has fundamentally changed how designs are loaded. If you’re interested in the technology behind CSS clamp, you can read more about it here.  Essentially, CSS Clamp establishes the high-end viewport size (for example, a desktop browser) and a low-end viewport size (for example, a mobile phone). And no matter how the site is loaded, or how a user resizes their browser window, your site will flexibly change the sizes of these elements based on the detected browser window size. 

While Kadence Blocks will still allow you to set sizing specifications based on desktop, tablet, or mobile, Kadence Blocks 3.0 absolves you of the responsibility for needing to size these views. Now, you can rely on the variable-based settings using Clamp and let Kadence Blocks do the work for you. 

Updates to Copy and Paste Styles

The option to copy and paste styles has been a part of Kadence Blocks for a while, but we’ve revamped it in Blocks 3.0 and included it with all our blocks. This tool takes some intentionality to make it part of your workflow, but we promise it will make your development much faster!

Updates to Block Defaults

If you find yourself always setting something in a Kadence Block you can define what the “default” for the block is. For if you always set your row layout to use theme content max width you can make that the default whenever you add a new row layout block to your page. You can do this with any setting on any block. While you’ve been able to do this on most blocks from before Kadence Blocks 3.0, we have changed the way it works. Now setting block defaults is easier than ever. From within each block, you can click on “advanced” and then click “block defaults” this will allow you to see if any block defaults have been applied. You can even remove certain attributes that you don’t want to be part of block defaults. What makes it so easy is that you can use the current block you are working on to define the new default with a click of a button. You can also export block defaults and import them into other sites.

Full Backward Compatibility

With a major rewrite like this, of course, one of the biggest concerns is ensuring full backward compatibility. We’ve kept this requirement in our sights throughout the development process to ensure that the sites you’ve built with Kadence Blocks 2.* easily migrate to the updated 3.0 plugin. During a lengthy beta period, over 400 people have contributed to testing Kadence Blocks 3.0. Plus, with our large library of starter templates that are built with Kadence Blocks, we have been able to use these to do tons of internal testing. And in case you are curious, we ourselves have been using Kadence Blocks 3.0 on our own website.

While there may be edge cases where Kadence Blocks 3.0 has not been tested, and bugs might still exist, we’re confident that those cases will be few, and our support team is available to help as you transition to 3.0.

How Updates work in the Block Editor

When you update Kadence Blocks, the content of your posts and pages will not automatically update. Most of the content of those pages are saved as static HTML and are rendered on the front end of your website very similar to how it was rendered before. While we’ve updated how some of that HTML gets rendered, and we’ve updated the external CSS and Javascript files that are output with it, the basic structure of your blocks will remain the same.

For example, the Row Layout Block in Kadence Blocks 2.* uses three HMTL DIVs in its output, and the Row Layout Block in Kadence Blocks 3+ uses just two DIVs. This change won’t immediately take effect on your website. It’s not until you open the page or post that the saved HTML will be regenerated to the latest update.

We limited how many HTML changes we made and tested to make sure we supported both versions. These changes were made to improve your site’s performance.

Updating and Troubleshooting Tips

Below are our suggestions for how to update to Kadence Blocks 3.0 and some things you can check first if you run into any issues.

Before you update

1. Backup your website.
2. Bonus: create a staging site and update there first.

After you update

1. Clear your site cache (Browser, Page Cache, Object Cache).
2. Rebuild your minify scripts for both CSS and Javascript.
3. View the pages of your site to verify everything is running smoothly.

Troubleshooting

1. If a page doesn’t appear correctly on the front end, open the page and try resaving. This will rebuild the static HTML in the page content and update the block formats.
2. If a page doesn’t appear correctly on the front end, review any custom CSS you have added to see if your custom CSS needs to be updated to work correctly.

What’s Next?

You may have noticed that Kadence Blocks 3.0 didn’t come with any new blocks. This ended up being an intentional decision to limit the scope of this update to focus on the core structure, settings, and the editor user interface. The Kadence Blocks 3.0 update provides us with the launching pad for new blocks that should land very soon, as well as other great features. Below is a simplified roadmap to give you an idea of things for Kadence Blocks.

• Kadence Blocks 3.1 – less than a month
  • Advanced Form Block
  • Progress Bar Block
• New Design Library – Q1/Q2
• Kadence Blocks Pro 2.0 – Q1/Q2
  • Structure and UI Updates to match Blocks 3.0
  • Revamp existing blocks.
• Advanced Query Block – Q2
• Dynamic Repeater Field Support – Q2

Advanced Form Block

For most of the development, we planned to launch 3.0 with a new Advanced Form block but decided not to hold up 3.0 any longer. We still expect this block to be out very soon. The first version of this block will provide a much more flexible way of building forms than our current form block. For example, you will be able to group fields into columns using the Row Layout Block, as every field will be its own inner block to the parent form block.

This block also neatly creates its own post in a custom post type so forms can be added to multiple pages and updated from a single location. In the initial version there will be a few long-awaited features like file uploads and Convert Kit integrations, but this will only be the beginning. Later in the year, we plan to release conditional fields, payments and multistep forms.

A Special Thank You

To everyone who contributed time, bug reports, and ideas to the Kadence Development Team during the process of the Kadence Blocks 3.0 Beta, we thank you. This was a complete overhaul of how Kadence Blocks works, and without your bug reports, we would not have been able to fully ensure that Kadence Blocks works well for everyone. 

What will you build with Kadence Blocks 3.0?

We’re excited to bring these new features and improvements to you, and we hope you enjoy using Kadence Blocks 3.0 as much as we enjoyed developing it. What has improved the most in your opinion? What questions do you have about the new update? Share your thoughts and experience in the comments below. Also, plan to join our livestream on Thursday, February 23 on YouTube to get highlights of this release, ask any questions of the Kadence team, and hear more about our upcoming roadmap for building with Kadence Blocks.