Builder Overview

UiCore Blocks is a modern, lightweight builder designed to extend the native WordPress block editor (Gutenberg). It combines intuitive controls, a powerful design system, and a library of ready-made layouts to help you create professional websites visually — without leaving the block editor.

This overview walks you through each part of the UiCore Blocks builder so you can understand how it works and start designing confidently.

Blocks

UiCore Blocks adds a curated set of custom blocks on top of the default Gutenberg ones. You can access them from the [+] button or by typing / and the block name on the canvas.

Main block categories:

Default blocks – core layout elements like Container, Heading, Paragraph, Image, Button.
Composite blocks – pre-built structures such as Icon Card Grids, Testimonials, Lists.
Advanced blocks – unlocked versions of composite blocks, with full control over every sub-element.
Dynamic blocks – data-driven blocks (e.g. Post Grid, Query Loop, ACF fields) that pull live content from your site.

You can add blocks by dragging them from the sidebar or by using the /block-name shortcut.

See the Blocks page for a full breakdown of each block type.

Every block has a contextual toolbar that appears when the block is selected. This toolbar contains the actions you use most often, for example:

Transform – switch between compatible block types (e.g. grid ↔ carousel, composite → advanced).
Position / drag handles – move the block or reorder it in the layout.
Highlight text tools – inline font, color, underline and effects for selected text.
Dynamic text – insert dynamic content (post title, meta, ACF, user data, etc.).
Inline image – place small images/icons directly inside text.
Text controls – bold, italic, inline code, keyboard input, language, sub/superscript and more.
Options menu – copy, duplicate, group, lock, create pattern, delete, copy/paste styles.

Some of these controls (like Transform and Copy Styles) are only available from the toolbar.

See the Toolbar page for detailed explanations and examples.

Settings & Style Panels

When a block is selected, the right sidebar shows its configuration. It is split into two main tabs:

Settings tab

Controls structure and behavior. You’ll find:

Specific Settings – options unique to that block (for example Post Grid query, Slider settings, etc.).
Shortcut Settings – a small set of frequently used layout options pulled from the Style tab.
Advanced – HTML tag, visibility, ID, custom class and attributes.

Style tab

Handles all visual customization and works the same for every UiCore block. From here you can control:

Layout & Size – display mode (block, flex, grid, inline), alignment, gaps, margin, padding, width/height and min/max constraints.
Background – multiple layers of color, gradient or image.
Typography – font, size, line height, letter spacing, alignment, transforms and breaking options.
Border & Shadow – border style (including custom animated borders), radius and box shadows.
Position – static, relative, absolute, fixed, sticky and z-index.
Effects – opacity, filters, transforms, transitions, blend modes and cursor.
Animations – entrance/scroll animations with duration and delay.
Mask – built-in or custom masks applied to any block.
Custom CSS (UiCore PRO) – block-scoped CSS using the {{SELECTOR}} placeholder.

See the Settings & Style page for a full tour of each section.

Responsive View

Responsive View lets you design for desktop, tablet and mobile directly in the editor.

You can:

Switch breakpoints using the device icons.
Override settings per device (most options support device-specific values).
Recognize overridden values via the green dot indicator and reset them with a single click.

Settings that cannot be changed per device are greyed out and remain global.

See the Responsive View page to learn which settings can be customized per breakpoint.

States View

States View controls how a block looks in different interaction states:

Normal – default appearance.
Hover – styles applied when the user hovers over the block.
Active – styles used when the block is in an “active” or selected state (e.g. current tab, pressed button).

In each state, almost all style options remain available. Modified properties are marked with a green dot and can be reverted individually.

The Inherit Hover option lets child elements react when hovering their parent container, ideal for card-style hover effects where icon, text and background change together.

See the States View page for detailed hover/active workflows and examples.

Global Settings

Global Settings help you control the overall design system and editor behavior.

Two main areas:

Global Styles – site-wide colors, typography, and layout defaults.

With UiCore PRO, Global Styles are fully synced with the theme’s Theme Options (two-way).

Editor Settings – customize the editing experience:

Quick Actions Bar on/off
Editor Dark Mode
Small Left Sidebar

See the Global Settings page for a full overview of style sync and editor options.

Quick Actions Bar

The Quick Actions Bar is a vertical shortcut bar for your most used blocks. It’s designed to speed up content creation:

Add, remove or reorder blocks in the bar.
Insert a block into the page with a single click.
Configure the bar from its settings icon to match your workflow.

Design Cloud (UiCore PRO)

Design Cloud is a library of ready-made sections and full page layouts that you can import with one click.

From the editor you can:

Open Design Cloud via the cloud icon in the top toolbar.
Browse collections of hero sections, feature grids, footers, full pages and more.
Insert a layout and then customize it like any other UiCore Blocks content.

Design Cloud is available exclusively when using the UiCore PRO theme.

See the Design Cloud page for usage tips and best practices.

BUILDER