Skip to content
Block Code & Assets

Relationships

The Relationships feature allows you to create interconnected blocks that share data and enforce hierarchical rules. Found in the "Condition" panel under "Relationships", this powerful feature enables parent blocks to pass context to child blocks and control block placement restrictions.

Relationships panel in Lazy Blocks editor

Relationship Settings

Provide Context to Blocks

Select specific blocks that will receive all attributes from the current block as context data. This allows child blocks to access and display parent block data dynamically.

Context Custom Slug (Optional)

Define a custom context namespace. By default, uses the block slug format like lazyblock/my-custom-block.

Ancestor

Specify which blocks can contain the current block. This restricts where the block can be inserted, ensuring proper hierarchical structure.

Allowed Blocks

Control which blocks can be inserted as children when using <InnerBlocks />. This helps maintain content structure and prevents layout issues.

Context Data Access

In PHP access context data using the $context array:

PHP
$value = $context['parent-block-slug/control-name'] ?? 'default';

In Handlebars use square bracket notation for context variables:

Handlebars
{{[parent-block-slug/control-name]}}

Square brackets are required in Handlebars when the context name contains a slash: {{[parent-slug/control-name]}}

Example: API Data Dashboard

Let's create an API data dashboard where a parent block manages API configuration and multiple child blocks display different views of the same data source. This solves the common problem of duplicating API settings across multiple data display blocks.

Step 1: Create Parent Block

Create a new block lazyblock/api-dashboard:

  1. Add these controls:

    • api-endpoint (URL control)
    • refresh-interval (Number control)
    • api-key (Text control)
    • data-format (Select control: JSON, XML, CSV)

  2. In Relationships panel:

    • Provide Context to Blocks: Select lazyblock/data-table, lazyblock/data-chart, lazyblock/data-summary
    • Allowed Blocks: Add core/paragraph, core/heading, lazyblock/data-table, lazyblock/data-chart, lazyblock/data-summary

Block Code:

PHP
<div useBlockProps>
  <div class="dashboard-header">
    <h2>Data Dashboard</h2>
    <p>Source: <?php echo esc_url($attributes['api-endpoint']); ?></p>
    <p>Updates every <?php echo esc_html($attributes['refresh-interval']); ?> seconds</p>
  </div>
 
  <InnerBlocks
    template="[
      [ 'core/heading', { content: 'Key Metrics', level: 3 } ],
      [ 'lazyblock/data-summary' ],
      [ 'core/heading', { content: 'Detailed View', level: 3 } ],
      [ 'lazyblock/data-table' ],
      [ 'lazyblock/data-chart' ]
    ]"
  />
</div>

Step 2: Create Child Blocks

Create data display blocks that inherit API configuration:

Data Table Block (lazyblock/data-table)

  1. In Relationships panel:
    • Ancestor: Select lazyblock/api-dashboard

Block Code:

PHP
<?php
 
$api_endpoint = $context['api-dashboard/api-endpoint'] ?? '';
$api_key = $context['api-dashboard/api-key'] ?? '';
$data_format = $context['api-dashboard/data-format'] ?? 'json';
 
?>
 
<div useBlockProps>
  <?php if ($api_endpoint): ?>
    <div class="data-table">
      <table>
        <thead>
          <tr><th>Data Table</th><th>Format: <?php echo esc_html($data_format); ?></th></tr>
        </thead>
        <tbody>
          <tr>
            <td>API Source:</td>
            <td><?php echo esc_url($api_endpoint); ?></td>
          </tr>
          <!-- Table data would be populated via JavaScript/AJAX using the context values -->
        </tbody>
      </table>
    </div>
  <?php else: ?>
    <p>Configure API endpoint in the parent Dashboard block...</p>
  <?php endif; ?>
</div>

Data Chart Block (lazyblock/data-chart)

Similar structure but displays data as charts:

Block Code:

PHP
<?php
 
$api_endpoint = $context['api-dashboard/api-endpoint'] ?? '';
$refresh_interval = $context['api-dashboard/refresh-interval'] ?? 30;
 
?>
 
<div useBlockProps>
  <?php if ($api_endpoint): ?>
    <div class="data-chart"
         data-endpoint="<?php echo esc_attr($api_endpoint); ?>"
         data-refresh="<?php echo esc_attr($refresh_interval); ?>">
      <canvas id="dashboard-chart"></canvas>
      <p>Auto-refresh: <?php echo esc_html($refresh_interval); ?>s</p>
    </div>
  <?php else: ?>
    <p>Configure API settings in the parent Dashboard block...</p>
  <?php endif; ?>
</div>

Using Handlebars:

Handlebars
<div useBlockProps>
  {{#if [api-dashboard/api-endpoint]}}
    <div class="data-chart"
         data-endpoint="{{[api-dashboard/api-endpoint]}}"
         data-refresh="{{[api-dashboard/refresh-interval]}}">
      <canvas id="dashboard-chart"></canvas>
      <p>Auto-refresh: {{[api-dashboard/refresh-interval]}}s</p>
    </div>
  {{else}}
    <p>Configure API settings in the parent Dashboard block...</p>
  {{/if}}
</div>
Previous ArticleStyles & ScriptsNext ArticleuseBlockProps

Was this article helpful?