### Handlebars math Helper Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Demonstrates the 'math' Handlebars helper for performing basic arithmetic operations on values, such as calculating a price.

```handlebars
<div class="price">
  ${{math price "*" quantity}}
</div>
```

--------------------------------

### Select Control: Single Selection Example

Source: https://www.lazyblocks.com/docs/blocks-controls/select

Demonstrates how to implement a single selection from the Select control in both PHP and Handlebars. This is useful for basic choices where only one option can be active at a time.

```PHP
<div class="layout-<?php echo esc_attr( $attributes['control_name'] ); ?>">
  Content
</div>
```

```Handlebars
<div class="layout-{{control_name}}">
  Content
</div>
```

--------------------------------

### Select Control: Multiple Selection Example

Source: https://www.lazyblocks.com/docs/blocks-controls/select

Shows how to handle multiple selections from the Select control using PHP and Handlebars. This is ideal for features or options where users can select more than one item.

```PHP
<?php if ( $attributes['control_name'] ) : ?>
  <ul class="features">
    <?php foreach( $attributes['control_name'] as $value ): ?>
      <li class="feature-<?php echo esc_attr( $value ); ?>">
        <?php echo esc_html( $value ); ?>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>
```

```Handlebars
{{#if control_name}}
  <ul class="features">
    {{#each control_name}}
      <li class="feature-{{this}}">{{this}}</li>
    {{/each}}
  </ul>
{{/if}}
```

--------------------------------

### Handlebars compare Helper Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Illustrates the use of the 'compare' Handlebars helper for conditional rendering based on comparing two values with various operators.

```handlebars
{{#compare price ">" 100}}
  <span class="premium">Premium Item</span>
{{/compare}}
```

--------------------------------

### Handlebars do_shortcode Helper Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Explains how to process WordPress shortcodes within Handlebars templates using the 'do_shortcode' helper, passing necessary attributes.

```handlebars
{{{do_shortcode "my_shortcode" this}}}
```

--------------------------------

### Handlebars date_i18n Helper Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Shows how to format dates using the 'date_i18n' Handlebars helper, leveraging WordPress's localization settings for date display.

```handlebars
<time datetime="{{control_date}}">
  {{date_i18n "F j, Y" control_date}}
</time>
```

--------------------------------

### Handlebars Basic Usage Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Demonstrates basic conditional rendering using Handlebars syntax. It checks if a control's value exists and displays it within a div.

```handlebars
{{#if control_name}}
  <div class="message">
    {{control_name}}
  </div>
{{/if}}
```

--------------------------------

### Handlebars wp_get_attachment_image Helper Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Illustrates using the 'wp_get_attachment_image' Handlebars helper to output WordPress images with responsive srcset attributes for optimal display.

```handlebars
{{{wp_get_attachment_image image_control "large"}}}
```

--------------------------------

### Handlebars truncate Helper Example

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Shows how to use the custom 'truncate' Handlebars helper to shorten text to a specified character limit, with an option to add ellipsis.

```handlebars
{{truncate control_name 100 "true"}}
```

--------------------------------

### Select Control: Array Output Format Example

Source: https://www.lazyblocks.com/docs/blocks-controls/select

Illustrates the 'Both (Array)' output format for the Select control, displaying both the value and label of the selected option in PHP and Handlebars. This provides richer data for display.

```PHP
<?php if ( $attributes['control_name'] ) : ?>
  <div class="option-<?php echo esc_attr( $attributes['control_name']['value'] ); ?>">
    <?php echo esc_html( $attributes['control_name']['label'] ); ?>
  </div>
<?php endif; ?>
```

```Handlebars
{{#if control_name}}
  <div class="option-{{control_name.value}}">
    {{control_name.label}}
  </div>
{{/if}}
```

--------------------------------

### Register Custom Handlebars Helper in PHP

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Provides a PHP code example for registering a custom Handlebars helper named 'format_price'. This helper formats a given price value.

```php
function my_custom_handlebars_helper($handlebars) {
    $handlebars->registerHelper('format_price', function($price) {
        return '$' . number_format($price, 2);
    });
}
add_action('lzb/handlebars/object', 'my_custom_handlebars_helper');
```

--------------------------------

### Basic List Repeater Usage (Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/repeater

Shows how to iterate over repeater data using Handlebars templating. This example assumes your repeater data is accessible via 'control_name' and each item contains 'title' and 'description' fields.

```handlebars
<ul class="items-list">
  {{#each control_name}}
    <li>
      {{title}}
      <p>{{description}}</p>
    </li>
  {{/each}}
</ul>
```

--------------------------------

### Post Meta Repeater Usage (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/repeater

Illustrates fetching and displaying repeater data saved as post meta using the `get_lzb_meta` function. This example iterates through items, expecting 'title' and 'description' for each, and renders them within an unordered list. It includes a check to ensure data exists before rendering.

```php
<?php
$items = get_lzb_meta( 'control_meta_name' );

if ( $items ) : ?>
  <ul class="items-list">
    <?php foreach ( $items as $item ) : ?>
      <li>
        <?php echo esc_html( $item['title'] ); ?>
        <p><?php echo esc_html( $item['description'] ); ?></p>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>
```

--------------------------------

### Multiple Checkboxes Output: Both Format in PHP

Source: https://www.lazyblocks.com/docs/blocks-controls/checkbox-toggle

Provides a PHP example for handling multiple checkboxes when the 'Both (Array)' output format is enabled. It iterates through an array of arrays, each containing a 'value' and 'label' for a selected choice. Uses WordPress esc_html for security.

```PHP
<?php
// Returns array of arrays with value and label
foreach ( $attributes['control_name'] as $choice ) {
    echo '<p>Value: ' . esc_html( $choice['value'] ) . '</p>';
    echo '<p>Label: ' . esc_html( $choice['label'] ) . '</p>';
}
?>
```

--------------------------------

### PHP Callback for Advanced Team Member Block

Source: https://www.lazyblocks.com/docs/blocks-code/php-callback

This advanced example demonstrates a PHP callback for a 'team-member' block. It handles attributes like name, role, image, and bio, sanitizes them, and constructs a detailed HTML output for the team member profile. It includes checks for required attributes and uses buffer output for clean rendering.

```php
add_filter('lazyblock/team-member/frontend_callback', 'render_team_member', 10, 2); 

function render_team_member($output, $attributes) {
    // Ensure required data exists
    if (!isset($attributes['name']) || !isset($attributes['role'])) {
        return '';
    }
 
    // Prepare data
    $name = esc_html($attributes['name']);
    $role = esc_html($attributes['role']);
    $image = isset($attributes['image']['url']) ? $attributes['image']['url'] : '';
    $bio = isset($attributes['bio']) ? wp_kses_post($attributes['bio']) : '';
 
    ob_start();
    ?>
    <div class="team-member">
        <?php if ($image) : ?>
            <div class="photo">
                <img src="<?php echo esc_url($image); ?>"
                     alt="<?php echo esc_attr($name); ?>">
            </div>
        <?php endif; ?>
 
        <div class="info">
            <h3 class="name"><?php echo $name; ?></h3>
            <div class="role"><?php echo $role; ?></div>
            <?php if ($bio) : ?>
                <div class="bio"><?php echo $bio; ?></div>
            <?php endif; ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
```

--------------------------------

### Initialize Custom JS with onChange Action (JavaScript)

Source: https://www.lazyblocks.com/docs/js-actions/lzb-components-previewservercallback-onchange

This JavaScript code snippet demonstrates how to use the `lzb.components.PreviewServerCallback.onChange` action to initialize custom JavaScript after new block content is rendered in the Lazyblocks editor preview. It logs the received props to the console. No external dependencies are required beyond the Lazyblocks library.

```javascript
wp.hooks.addAction(
  "lzb.components.PreviewServerCallback.onChange",
  "my.custom.namespace",
  function (props) {
    console.log(props);
  }
);
```

--------------------------------

### PHP Basic Link Output with LinkPro

Source: https://www.lazyblocks.com/docs/blocks-controls/link

Demonstrates how to render a basic HTML link using data from the LinkPro control in PHP. It handles URL, title, new tab, nofollow, and CSS classes, ensuring proper escaping for security.

```php
<?php
$link = $attributes['control_name'];
if ( $link && $link['url'] ) :
    $target = $link['opensInNewTab'] ? ' target="_blank"' : '';
    $rel_parts = [];
    if ( $link['opensInNewTab'] ) {
        $rel_parts[] = 'noopener';
        $rel_parts[] = 'noreferrer';
    }
    if ( $link['nofollow'] ) {
        $rel_parts[] = 'nofollow';
    }
    $rel = $rel_parts ? ' rel="' . implode( ' ', $rel_parts ) . '"' : '';
    $classes = $link['cssClasses'] ? ' class="' . esc_attr( $link['cssClasses'] ) . '"' : '';
    $title = $link['title'] ?: __( 'Click here', 'your-text-domain' );
?>
    <a href="<?php echo esc_url( $link['url'] ); ?>"<?php echo $target . $rel . $classes; ?>>
        <?php echo esc_html( $title ); ?>
    </a>
<?php endif; ?>
```

--------------------------------

### Retrieve and Display Audio Using File Control (Post Meta - PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/file

This snippet illustrates how to retrieve file data from post meta using `get_lzb_meta` and then display an audio player. It securely outputs the file URL using `esc_url`.

```PHP
<?php
$file = get_lzb_meta( 'control_meta_name' );
?>
<audio src="<?php echo esc_url( $file['url'] ); ?>" controls>
</audio>
```

--------------------------------

### Usage of Custom Handlebars Helper

Source: https://www.lazyblocks.com/docs/blocks-code/handlebars

Shows the Handlebars syntax for utilizing a custom helper, specifically the 'format_price' helper, to display a formatted product price.

```handlebars
<div class="price">
  {{format_price product_price}}
</div>
```

--------------------------------

### Basic Image Output (PHP and Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/gallery

Demonstrates how to loop through saved gallery images and output them as HTML `<img>` tags. It uses the `url` and `alt` attributes of each image. This method directly uses the image URL provided by the control.

```php
<?php foreach( $attributes['control_name'] as $image ): ?>
  <img src="<?php echo esc_url( $image['url'] ); ?>"
       alt="<?php echo esc_attr( $image['alt'] ); ?>">
<?php endforeach; ?>
```

```handlebars
{{#each control_name}}
  <img src="{{url}}" alt="{{alt}}" />
{{/each}}
```

--------------------------------

### Text Control HTML Attribute Output - PHP

Source: https://www.lazyblocks.com/docs/blocks-controls/text

Shows how to use the text control's value as an HTML attribute, specifically a 'title' attribute in this example. Uses esc_attr() for secure attribute output.

```php
<a href="#" title="<?php echo esc_attr( $attributes['control_name'] ); ?>">
    Link with title
</a>
```

--------------------------------

### Conditional Meta Value Display using PHP

Source: https://www.lazyblocks.com/docs/examples/display-custom-fields-meta

This example demonstrates how to conditionally display content based on whether a meta field has a value. It uses an if-else structure with `get_lzb_meta()` to check for truthiness.

```php
if (get_lzb_meta('control_meta_name')) {
    ?>
    <p>The value is True</p>
    <?php
} else {
    ?>
    <p>The value is False</p>
    <?php
}
```

--------------------------------

### PHP Image Handling: Displaying Featured Images

Source: https://www.lazyblocks.com/docs/blocks-code/php

Shows how to check for and display an image attribute, including its URL and alt text, as an HTML img tag. It ensures the image data is present before rendering. Proper escaping for URL and attribute is used.

```php
<?php
if (isset($attributes['image']['url'])) : 
    $image_url = esc_url($attributes['image']['url']);
    $image_alt = esc_attr($attributes['image']['alt']);
    ?>
    <img src="<?php echo $image_url; ?>"
         alt="<?php echo $image_alt; ?>"
         class="featured-image">
<?php endif; ?>
```

--------------------------------

### PHP Post Meta Link Handling with LinkPro

Source: https://www.lazyblocks.com/docs/blocks-controls/link

Demonstrates fetching and rendering a link from post meta using the LinkPro control's structure in PHP. It securely outputs the URL, target, rel, and CSS classes, adhering to security best practices.

```php
<?php
$link = get_lzb_meta( 'control_meta_name' );
if ( $link && ! empty( $link['url'] ) ) {
    $target = ! empty( $link['opensInNewTab'] ) ? '_blank' : '_self';
    $rel = [];
 
    if ( ! empty( $link['opensInNewTab'] ) ) {
        $rel[] = 'noopener';
        $rel[] = 'noreferrer';
    }
    if ( ! empty( $link['nofollow'] ) ) {
        $rel[] = 'nofollow';
    }
 
    printf(
        '<a href="%1$s" target="%2$s"%3$s%4$s>%5$s</a>',
        esc_url( $link['url'] ),
        esc_attr( $target ),
        $rel ? ' rel="' . esc_attr( implode( ' ', $rel ) ) . '"' : '',
        ! empty( $link['cssClasses'] ) ? ' class="' . esc_attr( $link['cssClasses'] ) . '"' : '',
        esc_html( $link['title'] ?: __( 'Read More', 'your-text-domain' ) )
    );
}
?>
```

--------------------------------

### Filter Plugin Path using lzb/plugin_path in PHP

Source: https://www.lazyblocks.com/docs/php-filters/lzb-plugin_path

This filter allows you to modify the plugin folder path. It takes the current plugin path as a string argument and expects a string to be returned. This is useful for custom plugin directory setups.

```php
function my_lzb_plugin_path( $plugin_path ) {
  return $plugin_path;
}

add_filter( 'lzb/plugin_path', 'my_lzb_plugin_path' );
```

--------------------------------

### Get Term by Slug (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/taxonomy

This PHP code retrieves a single term from a taxonomy (e.g., 'category') based on its slug. It then displays the term's name. This is useful for displaying selected single terms in your WordPress frontend.

```PHP
<?php
$term = get_term_by('slug', $attributes['control_name'], 'category');
if ($term && !is_wp_error($term)) {
    echo '<span class="term">' . esc_html($term->name) . '</span>';
}
?>
```

--------------------------------

### Disable Inner Blocks Wrapper for Specific Block (PHP)

Source: https://www.lazyblocks.com/docs/php-filters/lzb-block_render-allow_inner_blocks_wrapper

This example demonstrates how to specifically disable the inner blocks wrapper for a particular block identified by its slug, e.g., 'lazyblock/my-custom-block'. The filter targets the specific block's wrapper logic.

```php
function my_lzb_block_render_allow_inner_blocks_wrapper( $allow_inner_blocks_wrapper, $attributes, $context ) {
  // Disable inner-blocks wrapper for block "lazyblock/my-custom-block"
  return false;
}
 
add_filter( 'lazyblock/my-custom-block/allow_inner_blocks_wrapper', 'my_lzb_block_render_allow_inner_blocks_wrapper', 10, 3 );
```

--------------------------------

### Disable InnerBlocks Wrapper (PHP)

Source: https://www.lazyblocks.com/docs/blocks-code/inner-blocks

Provides a PHP filter example to disable the default wrapper added by Lazy Blocks around the `<InnerBlocks />` component. This allows for greater control over the HTML output structure of nested blocks.

```php
add_filter(
    'lazyblock/your-block-slug/allow_inner_blocks_wrapper',
    '__return_false'
);
```

--------------------------------

### PHP Button with Link using LinkPro

Source: https://www.lazyblocks.com/docs/blocks-controls/link

Shows how to create a button element with link attributes using data from the LinkPro control in PHP. It constructs the necessary HTML attributes dynamically, including target and rel for new tabs and nofollow.

```php
<?php
$link = $attributes['control_name'];
if ( $link && $link['url'] ) :
    $attrs = [
        'href'  => esc_url( $link['url'] ),
        'class' => 'button ' . esc_attr( $link['cssClasses'] ?? '' ),
    ];
 
    if ( $link['opensInNewTab'] ) {
        $attrs['target'] = '_blank';
        $attrs['rel'] = 'noopener noreferrer';
    }
 
    if ( $link['nofollow'] ) {
        $attrs['rel'] = ( $attrs['rel'] ?? '' ) . ' nofollow';
    }
 
    $attr_string = '';
    foreach ( $attrs as $key => $value ) {
        $attr_string .= sprintf( ' %s="%s"', $key, trim( $value ) );
    }
?>
    <a<?php echo $attr_string; ?> >
        <?php echo esc_html( $link['title'] ?: __( 'Learn More', 'your-text-domain' ) ); ?>
    </a>
<?php endif; ?>
```

--------------------------------

### Register Handlebars Helper in PHP

Source: https://www.lazyblocks.com/docs/php-actions/lzb-handlebars-object

Extends Handlebars functionality by registering a custom helper. This action hook 'lzb/handlebars/object' provides the Handlebars object for helper registration. The example demonstrates registering a helper named 'my_test_helper' which takes a value and returns a formatted HTML paragraph.

```php
function my_custom_lazyblock_handlebars_helper ( $handlebars ) {
  // date_i18n.
  // {{my_test_helper 'test value'}}.
  $handlebars->registerHelper( 'my_test_helper', function( $val ) {
    return '<p>My test helper: ' . $val . '</p>';
  } );
}
add_action( 'lzb/handlebars/object', 'my_custom_lazyblock_handlebars_helper' );
```

--------------------------------

### Get Term Slug from Post Meta (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/taxonomy

This PHP snippet retrieves a term slug stored in post meta using the 'get_lzb_meta' function. It then fetches the corresponding term object and displays its name. This is useful if you are storing term slugs as post meta values.

```PHP
<?php
$term_slug = get_lzb_meta('control_meta_name');
if ($term_slug) {
    $term = get_term_by('slug', $term_slug, 'category');
    if ($term && !is_wp_error($term)) {
        echo '<span class="term">' . esc_html($term->name) . '</span>';
    }
}
?>
```

--------------------------------

### Handlebars Basic Link Usage with LinkPro

Source: https://www.lazyblocks.com/docs/blocks-controls/link

Illustrates how to render a basic HTML link in Handlebars using data from the LinkPro control. It conditionally displays attributes like target, rel, class, and title based on the provided link object.

```handlebars
{{#if control_name.url}}
  <a href="{{control_name.url}}"
     {{#if control_name.opensInNewTab}}target="_blank" rel="noopener noreferrer"{{/if}}
     {{#if control_name.cssClasses}}class="{{control_name.cssClasses}}"{{/if}}>
    {{#if control_name.title}}
      {{control_name.title}}
    {{else}}
      Click here
    {{/if}}
  </a>
{{/if}}
```

--------------------------------

### Alert Block Template Code (PHP)

Source: https://www.lazyblocks.com/docs/examples/alert-block

PHP template for the Alert block. It renders the alert title, content, and a dismiss button if enabled. The 'dismissible' attribute controls the visibility of the close button. Uses `useBlockProps` for block attributes and `esc_html` for safe output.

```php
<div useBlockProps<?php echo $attributes['dismissible'] ? ' class="alert-dismissible"' : ''; ?> >
  <div class="alert-content">
    <?php if ( ! empty( $attributes['alert-title'] ) ) : ?>
      <h4 class="alert-title"><?php echo esc_html( $attributes['alert-title'] ); ?></h4>
    <?php endif; ?>
    <div class="alert-message"><?php echo $attributes['alert-content']; ?></div>
  </div>
  <?php if ( $attributes['dismissible'] ) : ?>
    <button class="alert-dismiss" onclick="this.parentNode.style.display='none';">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/>
      </svg>
    </button>
  <?php endif; ?>
</div>
```

--------------------------------

### Text Control Basic Output - PHP and Handlebars

Source: https://www.lazyblocks.com/docs/blocks-controls/text

Demonstrates how to output the text control's value in both PHP and Handlebars for basic display. Ensure proper escaping for security.

```php
<h2 class="title">
    <?php echo esc_html( $attributes['control_name'] ); ?>
</h2>
```

```handlebars
<h2 class="title">
  {{control_name}}
</h2>
```

--------------------------------

### Alert Block CSS Styles

Source: https://www.lazyblocks.com/docs/examples/alert-block

CSS for styling the custom Alert block. It includes base styles for layout, typography, and the dismiss button. Also provides specific styles for different alert types (Info, Success, Warning, Error) using `is-style-*` classes.

```css
.wp-block-lazyblock-alert-block {
  display: flex;
  padding: 16px;
  border-radius: 4px;
  position: relative;
  background-color: #f3f3f3;
  border-left: 4px solid #b3b3b3;
  color: #4a4a4a;
}
.wp-block-lazyblock-alert-block .alert-content {
  flex-grow: 1;
}
.wp-block-lazyblock-alert-block .alert-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
}
.wp-block-lazyblock-alert-block .alert-message p:last-child {
  margin-bottom: 0;
}
.wp-block-lazyblock-alert-block .alert-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.7;
}
.wp-block-lazyblock-alert-block .alert-dismiss:hover {
  opacity: 1;
}
 
/* Alert types */
.wp-block-lazyblock-alert-block.is-style-info {
  background-color: #e8f4fd;
  border-left: 4px solid #3498db;
  color: #0c5d95;
}
 
.wp-block-lazyblock-alert-block.is-style-success {
  background-color: #e8f8f5;
  border-left: 4px solid #2ecc71;
  color: #1b7943;
}
 
.wp-block-lazyblock-alert-block.is-style-warning {
  background-color: #fef9e7;
  border-left: 4px solid #f1c40f;
  color: #9a7d0a;
}
 
.wp-block-lazyblock-alert-block.is-style-error {
  background-color: #fdedec;
  border-left: 4px solid #e74c3c;
  color: #922b21;
}
```

--------------------------------

### Display Audio Using File Control Data (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/file

This snippet demonstrates how to display an audio player using the URL of a file selected via the File control in PHP. It utilizes `esc_url` for security. The control name is dynamically fetched from attributes.

```PHP
<audio src="<?php echo esc_url( $attributes['control_name']['url'] ); ?>" controls>
</audio>
```

--------------------------------

### Add Filter to Checkbox Control Update Value (JavaScript)

Source: https://www.lazyblocks.com/docs/js-filters/lzb-editor-control-updatevalue

This example shows how to specifically hook into the `lzb.editor.control.updateValue` filter for checkbox controls. By targeting `lzb.editor.control.checkbox.updateValue`, you can apply custom logic only when a checkbox's value is about to be updated. The provided function logs the value, control, and index, then returns the original value.

```javascript
wp.hooks.addFilter(
  "lzb.editor.control.checkbox.updateValue",
  "my.custom.namespace",
  function (val, control, childIndex) {
    console.log(val, control, childIndex);
    return val;
  }
);
```

--------------------------------

### Basic useBlockProps Usage in HTML

Source: https://www.lazyblocks.com/docs/blocks-code/use-block-props

Demonstrates the basic application of the useBlockProps attribute to a div element. This attribute automatically generates WordPress block wrapper attributes, including classes and IDs, for the block.

```html
<div useBlockProps>
  {{control_name}}
</div>
```

--------------------------------

### Display Textarea Output in PHP and Handlebars

Source: https://www.lazyblocks.com/docs/blocks-controls/textarea

Demonstrates how to display the content from a Textarea control. In PHP, it uses wp_kses_post and nl2br to sanitize and format the output. Handlebars provides a simpler direct output.

```php
<div class="description">
    <?php echo wp_kses_post( nl2br( $attributes['control_name'] ) ); ?>
</div>
```

```handlebars
<div class="description">
  {{control_name}}
</div>
```

--------------------------------

### Alert Block Template Code (Handlebars)

Source: https://www.lazyblocks.com/docs/examples/alert-block

Handlebars template for the Alert block. It dynamically renders the alert title, content, and dismiss button based on block attributes. The 'dismissible' attribute controls the close button's visibility. Uses `{{{alert-content}}}` for potentially unescaped HTML content.

```handlebars
<div useBlockProps{{#if dismissible}} class="alert-dismissible"{{/if}}>
  <div class="alert-content">
    {{#if alert-title}}<h4 class="alert-title">{{alert-title}}</h4>{{/if}}
    <div class="alert-message">{{{alert-content}}}</div>
  </div>
  {{#if dismissible}}
    <button class="alert-dismiss" onclick="this.parentNode.style.display='none';">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/>
      </svg>
    </button>
  {{/if}}
</div>
```

--------------------------------

### Rich Text Basic Output (PHP & Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/rich-text-wysiwyg

Demonstrates how to display Rich Text control content. PHP uses `wp_kses_post()` for safe HTML output, while Handlebars uses triple curly braces `{{{}}}`. Supports paragraph tags if multiline is enabled.

```php
<div class="content">
  <?php echo wp_kses_post( $attributes['control_name'] ); ?>
</div>
```

```handlebars
<div class="content">
  {{{control_name}}}
</div>
```

--------------------------------

### Register Alert Block with LazyBlocks (PHP)

Source: https://www.lazyblocks.com/docs/examples/alert-block

This PHP code snippet registers a custom 'Alert Block' for use with the LazyBlocks plugin. It defines the block's appearance, keywords, slug, description, category, supported features, and configurable controls. The code also specifies how the block should render on the frontend.

```php
add_action( 'lzb/init', function() {
  lazyblocks()->add_block( array(
    'title' => 'Alert Block',
    'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>',
    'keywords' => array(
      'alert',
      'notice',
      'message',
      'notification',
    ),
    'slug' => 'lazyblock/alert-block',
    'description' => 'Attention-grabbing alert box, perfect for important announcements and notifications.',
    'category' => 'design',
    'category_label' => 'design',
    'supports' => array(
      'customClassName' => true,
      'anchor' => false,
      'html' => false,
      'multiple' => true,
      'inserter' => true,
      'reusable' => true,
      'lock' => true,
      'align' => array(
        'wide',
        'full',
      ),
    ),
    'controls' => array(
      'control_d4aad34f6e' => array(
        'type' => 'text',
        'name' => 'alert-title',
        'default' => 'Important Notice',
        'label' => 'Alert Title',
        'help' => 'Title of the alert (optional)',
        'placement' => 'inspector',
        'translate' => 'true',
      ),
      'control_3ebbb94850' => array(
        'type' => 'rich_text',
        'name' => 'alert-content',
        'default' => 'This is an important message that you should pay attention to.',
        'label' => 'Alert Content',
        'placement' => 'inspector',
        'translate' => 'true',
      ),
      'control_daeade4589' => array(
        'type' => 'toggle',
        'name' => 'dismissible',
        'default' => 'false',
        'label' => 'Dismissible',
        'placement' => 'inspector',
        'checked' => 'false',
        'alongside_text' => 'Make alert dismissible',
      ),
    ),
    'code' => array(
      'output_method' => 'html',
      'editor_html' => '',
      'editor_callback' => '',
      'frontend_html' => '
        /* INSERT BLOCK CODE HERE */
      ',
      'frontend_callback' => '',
      'show_preview' => 'always',
      'single_output' => true,
    ),
    'style' => array(
      'block' => '
        /* INSERT BLOCK STYLES HERE */
      ',
      'editor' => '',
    ),
    'script' => array(
      'view' => '',
    ),
    'styles' => array(
      array(
          'name' => 'info',
          'label' => 'Info',
      ),
      array(
          'name' => 'success',
          'label' => 'Success',
      ),
      array(
          'name' => 'warning',
          'label' => 'Warning',
      ),
      array(
          'name' => 'error',
          'label' => 'Error',
      ),
    ),
    'condition' => array(),
  ) );
} );
```

--------------------------------

### Link with Custom Text and Attributes (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/url

Renders a link with custom text 'Learn More', and includes 'target="_blank"' and 'rel="noopener noreferrer"' attributes for external links. Ensures the URL is properly escaped.

```php
<?php
$url = $attributes['control_name'];
if ( $url ) : ?>
    <div class="cta-button">
        <a href="<?php echo esc_url( $url ); ?>"
           class="button"
           target="_blank"
           rel="noopener noreferrer">
            Learn More
        </a>
    </div>
<?php endif; ?>
```

--------------------------------

### Add Filter to Specific Control getValue (Checkbox) in JavaScript

Source: https://www.lazyblocks.com/docs/js-filters/lzb-editor-control-getvalue

This example shows how to apply a filter specifically to the `getValue` process for checkbox controls using `lzb.editor.control.checkbox.getValue`. This allows for more granular control over how checkbox values are filtered. Similar to the general `getValue` filter, it accepts the value, control, and child index, and must return the processed value.

```javascript
wp.hooks.addFilter(
  "lzb.editor.control.checkbox.getValue",
  "my.custom.namespace",
  function (val, control, childIndex) {
    console.log(val, control, childIndex);
    return val;
  }
);
```

--------------------------------

### Text Control Post Meta Output - PHP

Source: https://www.lazyblocks.com/docs/blocks-controls/text

Illustrates retrieving and displaying text control data stored as post meta using get_lzb_meta(). Includes a conditional check and HTML escaping.

```php
<?php
$text = get_lzb_meta( 'control_meta_name' );
if ( $text ) {
    echo '<h2 class="title">' . esc_html( $text ) . '</h2>';
}
?>
```

--------------------------------

### Register Custom Post Type with Meta Field Support (PHP)

Source: https://www.lazyblocks.com/docs/examples/custom-post-type-and-save-in-meta-control

This PHP code registers a new custom post type named 'my_custom_post'. It enables Gutenberg editor support by setting 'show_in_rest' to true and explicitly enables custom meta fields support by including 'custom-fields' in the 'supports' array. This setup is crucial for blocks using the 'Save in Meta' option in Lazy Blocks.

```php
function create_my_custom_post_type() {
    register_post_type(
        'my_custom_post',
        array(
            'labels' => array(
                'name'          => __('My Custom Post'),
                'singular_name' => __('My Custom Post')
            ),
            'public' => true,

            // Enable Gutenberg editor support
            'show_in_rest' => true,

            'supports' => array(
                'title',
                'editor',
                'thumbnail',
                // Enable custom meta fields support
                'custom-fields',
            ),
        )
    );
}
add_action('init', 'create_my_custom_post_type');
```

--------------------------------

### Post Meta: Retrieving and Displaying Select Control Value

Source: https://www.lazyblocks.com/docs/blocks-controls/select

Demonstrates how to retrieve and display a value set by a Select control using post meta in PHP. This is useful for associating specific choices with posts or pages.

```PHP
<?php
$value = get_lzb_meta( 'control_meta_name' );
if ( $value ) {
    echo '<div class="option-' . esc_attr( $value ) . '">';
    echo esc_html( $value );
    echo '</div>';
}
?>
```

--------------------------------

### PHP Callback for Basic Block Rendering

Source: https://www.lazyblocks.com/docs/blocks-code/php-callback

This snippet demonstrates how to set up a PHP callback function to render a block's frontend and editor output. It hooks into 'lazyblock/my-block/frontend_callback' and 'lazyblock/my-block/editor_callback' filters. The function accepts default output and block attributes, then returns the custom HTML structure.

```php
<?php
// Frontend output callback
add_filter('lazyblock/my-block/frontend_callback', 'render_my_block', 10, 2);
 
// Editor preview callback
add_filter('lazyblock/my-block/editor_callback', 'render_my_block', 10, 2);
 
if (!function_exists('render_my_block')) : /***
     * Block render callback
     *
     * @param string $output     Default block output
     * @param array  $attributes Block attributes
     */
    function render_my_block($output, $attributes) {
        ob_start();
        ?>
        <div class="my-block">
            <?php if (isset($attributes['title'])) : ?>
                <h2><?php echo esc_html($attributes['title']); ?></h2>
            <?php endif; ?>
 
            <?php if (isset($attributes['content'])) : ?>
                <div class="content">
                    <?php echo wp_kses_post($attributes['content']); ?>
                </div>
            <?php endif; ?>
        </div>
        <?php
        return ob_get_clean();
    }
endif;
?>
```

--------------------------------

### Retrieve and Display Textarea Post Meta in PHP

Source: https://www.lazyblocks.com/docs/blocks-controls/textarea

Shows how to fetch and display data from post meta using the Textarea control in PHP. It includes a check to ensure data exists before outputting and uses nl2br for line break formatting.

```php
<?php
$text = get_lzb_meta( 'control_meta_name' );
if ( $text ) {
    echo '<div class="description">';
    echo wp_kses_post( nl2br( $text ) );
    echo '</div>';
}
?>
```

--------------------------------

### Output Basic Image (Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/image

Outputs a single image using its URL and alt text in a Handlebars template. Assumes the image URL and alt text are available as control_name.url and control_name.alt.

```handlebars
<img src="{{control_name.url}}" alt="{{control_name.alt}}" />
```

--------------------------------

### Display Post Meta as a Link (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/url

Retrieves a URL from post meta using `get_lzb_meta()`, then displays it as a link with the text 'Read More'. The URL is escaped using `esc_url()` and the text is escaped with `esc_html__()`.

```php
<?php
$url = get_lzb_meta( 'control_meta_name' );
if ( $url ) {
    echo '<div class="link-wrapper">';
    printf(
        '<a href="%1$s" class="button">%2$s</a>',
        esc_url( $url ),
        esc_html__( 'Read More', 'your-text-domain' )
    );
    echo '</div>';
}
```

--------------------------------

### LZB Import Block Action

Source: https://www.lazyblocks.com/docs/php-actions/lzb-import-block

The `lzb/import/block` action is executed immediately after a block has been successfully imported. This action provides a hook for developers to inject custom PHP code, allowing for modifications or further processing of the imported block data.

```APIDOC
## lzb/import/block

### Description
Action called right after successful block import. Lets you add custom coding.

### Method
PHP Action Hook

### Endpoint
N/A (Internal Hook)

### Parameters
#### Attributes
- **$post_id** (Int) - The post ID of the imported block.
- **$data** (Array) - The data of the imported block.
```

--------------------------------

### Post Meta Gallery Output (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/gallery

Illustrates how to retrieve a gallery from post meta using `get_lzb_meta()` and then output the images using `wp_get_attachment_image()`. This is useful for galleries saved as post meta data.

```php
<?php
$gallery = get_lzb_meta( 'control_meta_name' );
 
foreach ( $gallery as $image ) {
  if ( isset( $image['id'] ) ) {
    echo wp_get_attachment_image( $image['id'], 'large' );
  }
}
?>
```

--------------------------------

### Basic List Repeater Usage (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/repeater

Demonstrates how to loop through repeater data in PHP to render a basic list. It assumes your repeater data is stored in an attribute named 'control_name' and each item has 'title' and 'description' sub-controls. Ensure proper HTML escaping for security.

```php
<ul class="items-list">
  <?php foreach( $attributes['control_name'] as $item ): ?>
    <li>
      <?php echo esc_html( $item['title'] ); ?>
      <p><?php echo esc_html( $item['description'] ); ?></p>
    </li>
  <?php endforeach; ?>
</ul>
```

--------------------------------

### Display Audio Using File Control Data (Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/file

This snippet shows how to display an audio player using the URL of a file selected via the File control in Handlebars. It directly accesses the file URL from the control's data.

```Handlebars
<audio src="{{control_name.url}}" controls>
</audio>
```

--------------------------------

### Display Basic Meta Value using PHP

Source: https://www.lazyblocks.com/docs/examples/display-custom-fields-meta

This snippet shows how to retrieve and display a simple meta field value using the `get_lzb_meta()` function. Ensure the meta field key ('control_meta_name') is correctly specified.

```php
<p>
    <?php echo get_lzb_meta('control_meta_name'); ?>
</p>
```

--------------------------------

### Display Multiple Users by IDs (PHP)

Source: https://www.lazyblocks.com/docs/blocks-controls/users

Iterates through an array of user IDs to display multiple users. For each ID, it fetches the user object and displays their avatar, display name, and website if available. Assumes an array of user IDs is provided.

```php
<?php if ($attributes['control_name']) : ?>
    <div class="team-members">
        <?php foreach($attributes['control_name'] as $user_id) :
            $user = get_user_by('id', (int) $user_id);
            if ($user) : ?>
                <div class="member">
                    <?php echo get_avatar($user->ID, 96); ?>
                    <h4><?php echo esc_html($user->display_name); ?></h4>
                    <?php if ($user->user_url) : ?>
                        <a href="<?php echo esc_url($user->user_url); ?>">
                            Website
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif;
        endforeach; ?>
    </div>
<?php endif; ?>
```

--------------------------------

### PHP WordPress Integration: Fetching and Displaying Related Posts

Source: https://www.lazyblocks.com/docs/blocks-code/php

Demonstrates how to use WordPress functions like get_posts, wp_get_post_categories, and get_the_ID to fetch related posts based on category and a specified count. The output includes a heading and a list of post titles linked to their permalinks. Employs secure escaping functions.

```php
<?php
// Get related posts
$related = get_posts([
    'category__in' => wp_get_post_categories(get_the_ID()),
    'numberposts'  => $attributes['posts_count'],
    'post__not_in' => [get_the_ID()]
]);
 
if ($related) : ?>
    <div class="related-posts">
        <h3><?php esc_html_e('Related Posts', 'your-textdomain'); ?></h3>
        <ul>
            <?php foreach ($related as $post) : ?>
                <li>
                    <a href="<?php echo esc_url(get_permalink($post->ID)); ?>">
                        <?php echo esc_html($post->post_title); ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>
```

--------------------------------

### CSS Padding with UnitsPro (PHP & Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/units

Demonstrates how to apply padding using the UnitsPro control in PHP and Handlebars. The control's value is directly embedded into the inline style attribute. Ensure the attribute value is properly escaped for security.

```php
<div style="padding: <?php echo esc_attr( $attributes['control_name'] ); ?>">
    Content with custom padding
</div>
```

```handlebars
<div style="padding: {{control_name}}">
  Content with custom padding
</div>
```

--------------------------------

### Automatic useBlockProps Wrapper

Source: https://www.lazyblocks.com/docs/blocks-code/use-block-props

Illustrates Lazy Blocks automatically wrapping block content with useBlockProps if the attribute is not explicitly added. This ensures all blocks have the necessary wrapper attributes.

```html
<h2>{{title}}</h2>
<p>{{content}}</p>
```

--------------------------------

### Using WordPress wp_get_attachment_image (PHP and Handlebars)

Source: https://www.lazyblocks.com/docs/blocks-controls/gallery

Shows how to use the WordPress `wp_get_attachment_image()` function to retrieve responsive image markup. This function automatically handles different image sizes and provides accessibility features. It requires the image `id`.

```php
<?php
foreach( $attributes['control_name'] as $image ) {
  if ( isset( $image['id'] ) ) {
    echo wp_get_attachment_image( $image['id'], 'large' );
  }
}
?>
```

```handlebars
{{#each control_name}}
  {{{wp_get_attachment_image this "large"}}}
{{/each}}
```