DOCSEARCHbyAlgolia
Submit Docs

Lazy Blocks

website·Indexed 34 days ago

https://www.lazyblocks.com/docs/

A WordPress plugin for building custom Gutenberg blocks. Lazy Blocks allows developers to define blocks via the wp-admin interface rather than in a code editor, supporting custom HTML or PHP output and a wide variety of block controls including repeaters, conditional logic, and media library integration.

Tokens
66K
Snippets
222
Records
386
Agent score
71%

What's inside Lazy Blocks

  1. Overview of Lazy Blocks for WordPress

    Lazy Blocks is a WordPress plugin that allows developers to build custom Gutenberg blocks via the WordPress admin interface instead of writing React code. It eliminates the need for a build step. Blocks are defined by 'controls' (fields) and rendered using Handlebars, PHP, or theme template files.

  2. Overview of Lazy Blocks for WordPress

    Lazy Blocks is a WordPress plugin used to build custom blocks without a build step, block.json files, or React. Blocks are defined within the WordPress admin (wp-admin) and consist of three main components: Controls (input fields for the user), Code (the markup for output), and Settings (metadata like title, icon, and category for the block inserter).

  4. Manage blocks via the Lazy Blocks screen

    Access the blocks management list by navigating to WordPress Admin → Lazy Blocks → Blocks. This screen allows you to view all blocks on the site, including their Icon, Title, Slug, Category, and Description. Use the Add Block button to open the block builder.

  5. Reference for lzb.components.PreviewServerCallback.onChange props

    The onChange action receives a single props object containing details about the preview component and the block being rendered.
    interface PreviewServerCallbackProps {
  block: string;             // Block name (e.g., 'lazyblock/slider')
  attributes: Object | null;  // Attributes sent for rendering
  urlQueryArgs: Object;       // Extra fields merged into the REST request body
  onBeforeChange: Function;   // The component's own teardown callback
  onChange: Function;         // The component's own callback, called immediately before this action
  withBlockProps: boolean;    // Whether rendered markup is wrapped with block props (default: false)
  context: Object;            // Block context sent to the server
  clientId: string;           // Unique client ID of the block
}

  6. Create dynamic groups of controls with the Repeater

    The Repeater control allows you to create groups of controls that users can add multiple times, which is ideal for lists, slides, or repeatable content structures. All controls except 'Inner Blocks' can be used inside a repeater. Note that nested repeaters (a repeater inside another repeater) are not supported and may cause unexpected behavior.

  7. Use Handlebars for Lazy Blocks output

    The Handlebars output method allows you to build a block's HTML using a template. You can inject control values directly into the HTML and use Handlebars syntax for conditionals and loops. Use Handlebars for simple templates with basic logic; for complex dynamic content, PHP output is recommended.
    {{#if control_name}}
  <div class="message">
    {{control_name}}
  </div>
{{/if}}

  8. Choose a block output method in Lazy Blocks

    Lazy Blocks provides three primary methods to define how a block displays its content on the frontend and in the editor. The choice depends on the required code complexity, development workflow, and team expertise:

    1. HTML + Handlebars: Uses HTML with Handlebars syntax. Ideal for simple static content and frontend developers preferring template-based approaches.
    2. PHP: Allows writing PHP code directly within the block builder. Best for dynamic content, complex logic, and deep WordPress integration.
    3. Theme Template: Uses template files located within the theme. Best for teams using version control and professional development workflows.

  9. Implement Rich Text (WYSIWYG) control in Lazy Blocks

    The Rich Text control provides a native WordPress editor interface for formatted text content, supporting bold, italic, and links. It does not have unique settings of its own but does support WPML Translation. To enable on-canvas editing instead of using the inspector, you must use a Rich Text component in your block code; setting disableLineBreaks on that component will result in a single-line field.

  10. Reference for lzb/register_block_type_data filter attributes

    The lzb/register_block_type_data filter accepts two arguments:

    • $data (Array): The arguments about to be passed to register_block_type().
    • $block (Array): The block data (same as returned by lzb/block_data).

    Default keys present in the $data array before handlers run:

    • api_version (Int): Always 3.
    • attributes (Array): Control entries plus reserved attributes (lazyblock, className, anchor, blockId, blockUniqueClass).
    • supports (Array): The block's supports array.
    • render_callback (Callable): Closure calling render_callback() with the render location.
    • example (Array): Empty by default.
    • styles (Array): Block style variations.
    • editor_script (Array): Defaults to lazyblocks-editor.
    • editor_style (Array): Defaults to lazyblocks-editor.

  11. Use the Divider control to organize block settings

    The Divider control is a layout-only tool used to organize the block inspector by adding visual separators between other controls. It does not have any configurable settings, does not store a value, and does not output any content to the block's frontend. Because it is purely for visual organization, it does not require a 'Name' and does not pass any data to the block code.

  12. Implement a URL control in Lazy Blocks

    The URL control provides a link input field that allows users to either enter a custom URL or search for and select existing WordPress posts and pages. For advanced link options such as title, target, nofollow, or CSS classes, use the Link control (available in the Pro version).