Kadence and the Block Editor: Running Theme and Kadence Blocks as One Design System

Fifteen color variables that the theme and every block share

Most theme and block-plugin pairings share colors by copying them. Kadence shares them by reference. The theme's Color Palette, under Customizer > Colors & Fonts > Colors, now holds fifteen colors: the original nine (Accent, Accent alt, four text tones and three backgrounds), plus an Accent Complement and five notice colors for success, info, alert, warning and rating. Each one becomes a CSS variable, --global-palette1 through --global-palette15, and the theme's theme.json exposes them to the block editor as theme-palette1 through theme-palette15.

Because blocks store a reference to the variable rather than a hex value, changing the Accent in the Customizer recolors every Kadence and core block that uses it, on every page, without opening a single post. That is the most valuable thing about this pairing, and it only works if editors pick palette swatches instead of typing custom colors. Kadence's docs also point to the Style Guide icon at the top left of the Customizer, which shows the palette beside typography and button styles in one view.

The Performance switch that is really a theme.json switch

Under Customizer > General > Performance sits a setting called Enable Optimized Group Block. Kadence's doc says it exposes layout controls for the core Group block and was introduced in theme version 1.2.1. That undersells it. In the 1.5.2 code the setting decides whether the theme's full theme.json loads, including the content and wide widths that give Group blocks their constrained and wide layout options. With it off, Kadence injects only a minimal palette and a few appearance tools.

Two consequences follow. Sites first installed on Kadence 1.3.0 or later have it on by default; older sites have it off unless someone switched it. So a Kadence site from 2021 can show narrower Group controls in the editor than a new one, and pages built with full-width Groups may behave differently after the switch is flipped. Turn it on for new work, but flip it on staging for an old site and click through pages that rely on Group blocks first. Editor and front-end widths that disagree are covered in block editor not matching the theme.

Turning Kadence Blocks into a house style editors cannot break

Kadence Blocks, at version 3.7.12.1 with 600,000+ installs as of October 6, 2026, offers a long list of free blocks: Row Layout and Section for structure, Advanced Text (the block once called Advanced Heading), Advanced Button, Advanced Image, Info Box, Icon List, Tabs, Accordion, Testimonials, Table of Contents, forms, Header (Adv) and Navigation (Adv) among them. Pro adds an Advanced Query Loop, sliders, modals, a Repeater and dynamic content. Every one of those blocks has dozens of styling options, which is wonderful for a designer and dangerous for a busy office manager.

1. 1

   Switch off blocks you will not use

   Under Kadence > Settings, deactivate unused blocks. Fewer choices in the inserter means fewer one-off designs.

2. 2

   Save a default for each block you keep

   Style a button, heading or row exactly as the brand wants, then use Save as Default in the block's Advanced tab. Every new copy starts there.

3. 3

   Make Advanced Text the default editor block

   In Kadence Blocks Controls, the Default Editor Block option can make Advanced Text the block a new paragraph becomes, so typography stays consistent.

4. 4

   Hide styling controls from editor roles

   Block Visibility in Kadence Blocks Controls lets you hide block settings from certain user roles, so editors change words and images, not padding.

5. 5

   Export the settings

   Import/Export Block Settings saves the whole configuration, which makes it repeatable on the next site and recoverable after an accident.

Done properly, this turns a block plugin into something close to a component library. It is the closest WordPress gets to what a coded design system does by default. If you want the setup done to a brand guide, our Kadence developers build exactly this, and the theme customization team handles smaller adjustments.

Header (Adv) or the classic header builder: two headers, one site

Kadence now offers two ways to build a header, and its docs call the Customizer one the classic header builder. The classic builder lives in Customizer > Header, with separate Desktop and Tablet/Mobile headers and a breakpoint fixed at 1,024 pixels in the theme CSS. The newer route is the Header (Adv) block from Kadence Blocks, created under Kadence > Headers and switched on site-wide in Customize > Header with Enable Block Header and the Header Block dropdown. Conditional block headers need Theme Kit Pro's Hooked Elements set to replace the header.

Kadence's own best-practices doc for Advanced Headers is a useful warning label. It cautions against query blocks, galleries, heavy animations and info boxes in the header because the header loads on every page above the fold, and recommends the Navigation Link block for items with icons or descriptions. Our rule follows: stay on the classic builder unless the design truly needs blocks. When a mobile drawer opens empty, Kadence header builder mobile issues covers both systems.

The Design Library is a starting point, not a design system

The Design Library button sits at the top left of the editor, next to List View, and it also appears when you add a Row Layout. It offers patterns and full pages, by design or with Kadence AI, and some items are marked Premium and need Kadence Creative Kit or Kadence Blocks Pro. Pattern Hub libraries can be connected too, which agencies use to share their own sections between sites.

Patterns are copies. Once inserted, a pattern's blocks are ordinary blocks on that page, with whatever colors and spacing the pattern carried. If the pattern uses palette references, it adapts to your brand; if it carries custom values, it does not. Insert a pattern, check its colors against the palette, save what you like as block defaults, and resist building a site from twenty patterns with twenty slightly different paddings. That drift is how block sites end up as messy as builder sites.

Where Kadence block sites break

• Content after a Kadence Blocks update. One owner reported an update removing internal links from posts, with a lifetime license showing UNKNOWN and six tickets unanswered in six days. Keep backups that can restore single posts, and see Kadence Blocks invalid content for blocks that will not validate.
• Editor and front end that disagree. Usually a palette or width mismatch, or fonts that load on the site but not in the editor. Start with Optimized Group Block above, then block editor not matching the theme.
• Styles that will not refresh. Optimization plugins that combine or delay files are the common culprit; Kadence keeps a doc on broken styles with caching plugins. Our version is Kadence CSS not updating.
• Fonts that fall back. Load Google Fonts Locally, in the theme's Performance panel, plus its preload option, fixes most cases; the rest are in Kadence fonts not loading.

Support is the other half of the story. The community forum was retired in favor of tickets through Liquid Web, so search results from before 2026 may describe products under old names. Every Kadence fix we have written lives in the Kadence repair hub.

What per-block loading saves, and what it cannot

Kadence says Kadence Blocks loads CSS and JavaScript only when a page uses a block, and only for the blocks on that page. Combined with the theme's component CSS, that is a sound foundation: a text-heavy article pays for very little. The savings shrink as pages fill with sliders, galleries, Lottie animations and forms, each with its own assets, and the header, which loads everywhere, magnifies every choice made there.

The theme's Performance panel adds Load Google Fonts Locally with Preload Local Fonts, Enable CSS Preload and a Microdata Schema switch you should turn off if your SEO plugin outputs schema. Measure an article, a service page and the home page separately, then work through the Kadence speed guide. If a release slowed things down, Kadence slow after an update shows how to prove it.

When the block stack is the ceiling, not the floor

Kadence in the block editor is one of the better ways to run WordPress in 2026, and for a brochure site, a course site or a modest store we will often say stay. The ceiling arrives with custom data and logic: member areas that carry revenue, quote tools, location pages generated from a database, or a Pro plan stacked with Shop Kit, memberships and security plugins from one vendor's patch queue. As of October 2026 those plans run from $99 to $499 a year; see Kadence pricing.

Block content is friendlier to migrate than builder content, because each block records its type and settings in the post itself. Kadence vs Next.js compares the stacks, and Kadence to Next.js maps Row Layouts and Info Boxes to components with every URL kept. Teams who like the locked-down editing described above will recognize the idea in Athena CMS, where editors fill in approved components and Picasso checks every image is described and sized. Comparing themes first? Read the Kadence review, Kadence vs GeneratePress and the WordPress themes section.