Create Block

Lazy Blocks allows you to create custom blocks with HTML or PHP output. You can build blocks for content display or create custom meta fields that can be accessed in your theme code.

Getting Started

1. Navigate to WordPress Admin → Lazy Blocks

2. Click Add New button

   

Setup Wizard

When creating a new block, you'll first see the Setup Wizard screen where you can choose from predefined starter blocks:

• Basic - Simple content block with basic controls
• Hero - Hero section with background and text controls
• Testimonials - Testimonial block with author and quote controls
• Alert - Alert/notice block with message and type controls

Each preset comes with its controls, code and styles already filled in.

With Pro active the four presets keep their names and generate different code. Their text controls become <RichText /> components, so a new block is edited in place on the canvas and comes out looking like the finished section rather than an empty one. Colors, links, images and repeater children keep their inspector controls. The generated CSS goes into the Style editor field, where the free plugin puts an inline <style> block in the markup instead.

Block Builder

After completing the Setup Wizard, you'll see the Block Builder screen where you can customize your block further.

Controls

Configure the options available in your block. Controls determine what users can customize when using your block. Learn more about controls

Block Code

Choose between HTML + Handlebars, PHP or Theme Template to determine how your block code displays. See detailed code documentation

• block.html / block.php - code that displays in editor and frontend
• frontend.html / frontend.php - code that displays in frontend only
• editor.html / editor.php - code that displays in editor only
• Output Method - Choose between HTML + Handlebars, PHP or Theme Template

Assets settings:

• block.css - styles loaded in the editor and on the front end, on pages where the block is used
• editor.css - styles loaded in the editor only
• view.js - script loaded on the front end, on pages where the block is used

Additional settings:

• Unified Block Code - use a single editor (block.html / block.php) with code that displays in editor and frontend
• With Editor Style - additional CSS enqueued in editor only
• Code Output in Editor - Control when the block code appears in editor

Preview and Code Editors

The Preview tab renders the block from the code you are looking at, saved or not, filling each control with its default value rather than with real content.

A block whose Output Method is PHP previews only for users allowed to run unfiltered HTML, which on a single site means administrators. Everyone else sees Not allowed to execute PHP code. in its place. The preview of any block needs the edit_lazyblocks capability, the same one the builder itself takes.

The code editors autocomplete as you type and expand Emmet abbreviations. Typing $ in a PHP editor offers $attributes['name'] for every control, { in an HTML editor offers {{name}}, and the CSS editor offers the block's generated class.

Block Settings

• Title - The block's name in the inserter

• Collection & Namespace Pro - Put the block in a collection and give it your own namespace. Learn more about collections

• Slug - Unique identifier (lowercase letters, numbers, and dashes only)

• Description - Brief explanation shown in the inspector

• Icon - Pick from around 900 icons, searchable by name and grouped into 16 categories

• Category - Group your block with similar blocks

• Keywords - Search terms (max 3) to help users find your block

• Style Variations - Alternative visual styles

• Supports

  • Color - Enable color controls
  • Typography - Add typography controls, including text columns and text shadow (text shadow needs WordPress 7.2)
  • Spacing - Add spacing (padding/margin) controls
  • Dimensions - Enable aspect ratio, minimum height, width and height controls
  • Border - Add border color, radius, style and width controls
  • Background - Add a background image and its size
  • Shadow - Enable shadow controls
  • Duotone - Add a duotone filter to the block
  • Sticky Position - Let the block stick to the top of the screen while the page scrolls
  • Layout - Add layout options
  • Align - Add alignment options
  • Anchor - Add ID attribute support
  • Class Name - Enable custom CSS classes
  • Multiple - Allow multiple instances per page
  • Inserter - Show in blocks inserter
  • Reusable - Allow conversion to reusable block
  • Lock - Enable block locking
  • Interactivity - Process Interactivity API directives in the block output

  Every support is off in a new block. The style supports (Color, Typography, Spacing, Dimensions, Border, Background, Shadow, Duotone and Sticky Position) style the element that carries useBlockProps. When the frontend code has no such element, the builder shows a notice, and the styles go to an extra <div> wrapper around your code.

• Supports Ghost Kit - Enable Ghost Kit compatibility

• Condition - Restrict block to specific post types. If no post types selected, the block will be shown everywhere

• Relationships Pro - Create connected blocks with advanced settings:

  • Provide Context to Blocks - Share current block's attributes with selected child blocks
  • Ancestor - Restrict where this block can be inserted (parent block requirements)
  • Allowed Blocks - Control which blocks can be inserted as children in <InnerBlocks />