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 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
  • Spacing - Add spacing (padding/margin) controls
  • Dimensions - Enable width/height controls
  • Shadow - Enable shadow controls
  • 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
• 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 />