X-Bar for Kadence

What X-Bar does

X-Bar is a smart command panel for Kadence that gives you quick access to common block controls and live CSS editing without leaving the page you are working on.

You can use X-Bar in two places:

• Block editor: manage classes, rename blocks, pick HTML tags and add block-level custom CSS.

• Frontend: edit page-level CSS that saves directly to WordPress Customize → Additional CSS and measure elements with a page ruler.

X-Bar works with Kadence Blocks and modern WordPress sites and remembers where you place it on screen.

Requirements

Opening and closing X-Bar

Use the same shortcut to open X-Bar in the Kadence block editor or on the frontend.

Using X-Bar in the Kadence block editor

In the block editor, X-Bar focuses on block-level tools so you can adjust structure and styling faster.

Classes mode

Save Time with One-Click Class Control

Classes mode lets you work with CSS classes on any selected block.

• X-Bar lists all CSS classes attached to the currently selected block.

• You can add, edit, or remove classes without opening the block sidebar.

• These classes are stored in the block attributes, just like Kadence’s own class controls, and work with your theme or custom CSS.

Use Classes mode when you want to standardize styling across blocks by sharing class names.

Rename block (List View label)

Edit block names directly from the X-Bar

The Rename block mode updates how a block appears in the WordPress List View.

• Change the List View label for the selected block to something meaningful.

• The new label helps you understand your layout structure when you scan the List View.

This does not change the block type or its frontend output. It only affects the editor label.

HTML tag selector (Row Layout and Section blocks)

Quickly Change HTML Tags

For Kadence Row Layout and Section blocks, X-Bar includes a quick HTML tag selector.

• Choose the HTML tag for the container, such as section, div, header, or footer.

• X-Bar updates the tag in the block attributes, matching Kadence’s own HTML tag controls.

Use this to improve semantics and accessibility without digging through side panels and nested settings.

Custom CSS mode (Row Layout and Section blocks)

Custom CSS Made Effortless

Custom CSS mode lets you attach CSS directly to a Row Layout or Section block.

• X-Bar mirrors the Kadence Additional CSS field for the selected Row Layout or Section.

• CSS is stored in the block attributes and applies only to that block and its contents.

• Changes update live in the editor, so you see the effect immediately.

• The editor uses a CodeMirror-powered code editor for syntax highlighting and better readability.

Using X-Bar on the frontend

On the frontend, X-Bar becomes a page-level CSS editor and measurement tool.

Live CSS editor (Customize → Additional CSS)

Skip the narrow Customizer's CSS-Panel

The frontend CSS editor in X-Bar writes to the WordPress Customize → Additional CSS field.

• Type CSS into X-Bar and see live changes on the page as you type.

• Save from the keyboard, without opening the Customizer.

When you save, X-Bar sends the CSS through the WordPress REST API and stores it in the standard Additional CSS location.

Page Ruler tool

The Page Ruler tool helps you measure elements directly in the browser.

• Activate the ruler to see a crosshair cursor.

• Click and drag on the page to draw a measurement box.

• X-Bar displays the width × height of the drawn area in pixels.

Use this when you need exact dimensions for sections, images, or other layout elements.

Keyboard shortcuts

Keyboard shortcuts keep X-Bar fast to use in both the editor and the frontend.

General shortcuts

• Toggle X-Bar (open or focus)

  • Mac: ⌘ + ⇧ + X

  • Windows: Ctrl + Shift + X

• Close X-Bar

  • Esc

Frontend CSS editor shortcuts

These shortcuts apply when your cursor is inside the X-Bar CSS editor on the frontend.

• Save CSS to Customize → Additional CSS

  • Mac: ⌘ + S

  • Windows: Ctrl + S

• Find text in CSS

  • Mac: ⌘ + F

  • Windows: Ctrl + F

• Go to next search match

  • Press Enter

• Go to previous search match

  • Mac: ⌘ + Enter

  • Windows: Ctrl + Enter

How X-Bar stores data

X-Bar separates layout settings from CSS so you keep control over both.

• Panel size and position

  • Stored in browser local storage per device and browser.

  • Clearing browser data resets X-Bar’s location and height.

• Frontend CSS

  • Saved through the WordPress REST API.

  • Stored in Customize → Additional CSS, so it behaves like CSS added in the Customizer.

• Block editor Custom CSS

  • Stored in block attributes (Row Layout and Section) alongside Kadence Additional CSS.

No cookies or tracking scripts are added by X-Bar.

Troubleshooting

X-Bar does not open with the shortcut

If the shortcut does nothing:

• Click once inside the page content or editor canvas to ensure it has focus.

• Try the shortcut again:

  • Mac: ⌘ + ⇧ + X

  • Windows: Ctrl + Shift + X

CSS changes are not live on the frontend

If you do not see updates when you edit CSS in X-Bar:

• Check for caching or minification plugins that combine or delay CSS.

• Temporarily clear or disable CSS optimization to confirm the issue.

• Remove any unused CSS rules that might conflict or override your new styles.

Once you confirm CSS is applying correctly, re-enable optimization with settings that respect Additional CSS.

CodeMirror editor does not load

If the CSS area looks like a plain textarea without syntax highlighting:

• Confirm that the WordPress core code editor assets are not disabled by a performance or admin plugin.

• Re-enable the core editor scripts and styles so X-Bar can load the CodeMirror-based editor.

Without these assets, X-Bar still accepts CSS but you lose highlighting and advanced editor features.

Support

If you run into issues that you cannot solve with this guide, contact support:

• WP Templater Pro support: https://wptemplater.com/my-account/?tab=pro-support

Include details about your WordPress version, Kadence Blocks version, and what you were doing when the problem appeared to help the team respond faster.