Inner blocks

When creating custom blocks in PorterWP, you can easily define default templates and allowed inner blocks directly in your block's template.php file. This allows you to control what blocks are allowed within your custom block and what default content should be preloaded when a user inserts the block.

Example: The Default template.php

The basic structure of a block's template.php file might look like this:

<?php
/**
 * Dummy_Title Template
 * 
 **/
extract( \$args ); ?>
<div <?php echo \$anchor; ?> <?php echo \$class; ?>>
    <?php // Inner Blocks
    \$allowed_blocks = [];
    \$template = [];
    \$allowed_blocks_attr    = !empty( \$allowed_blocks) ? 'allowedBlocks="'.esc_attr( wp_json_encode( \$allowed_blocks ) ).'"' : '';
    \$template_attr          = !empty( \$template) ? 'template="'.esc_attr( wp_json_encode( \$template ) ).'"' : '';
    echo '<InnerBlocks class="inner-content" '.\$allowed_blocks_attr.' '.\$template_attr.' templateLock=false />'; ?>
</div>

This code uses the $allowed_blocks array to define which blocks are allowed to be inserted inside your custom block, and the $template array to set default inner block content.

Example: Defining Allowed Blocks and Default Template

Here’s an example where you specify the allowed blocks and set up a default template:

<?php
/**
 * Badge Template
 * 
 **/
extract( \$args ); ?>
<div <?php echo \$anchor; ?> <?php echo \$class; ?>>
    <?php // Inner Blocks
    \$allowed_blocks = [
        "core/paragraph",
        "acf/meta"
    ];
    \$template = [
        [
            "core/paragraph",
            [
                "placeholder" => "e.g. Applications open"
            ]
        ]
    ];
    \$allowed_blocks_attr    = !empty( \$allowed_blocks) ? 'allowedBlocks="'.esc_attr( wp_json_encode( \$allowed_blocks ) ).'"' : '';
    \$template_attr          = !empty( \$template) ? 'template="'.esc_attr( wp_json_encode( \$template ) ).'"' : '';
    echo '<InnerBlocks class="inner-content" '.\$allowed_blocks_attr.' '.\$template_attr.' templateLock=false />'; ?>
</div>

Key Concepts:

• Allowed Blocks ($allowed_blocks): This array defines the block types that are permitted to be added inside your custom block. In the example above, only core/paragraph and acf/meta blocks are allowed.

• Default Template ($template): This array defines the default block(s) and attributes that are automatically inserted when the block is added to the page. In this case, a core/paragraph block with a placeholder text "e.g. Applications open" is preloaded.

• Attributes for InnerBlocks:

  • allowedBlocks: This attribute defines which blocks are allowed to be added inside your block.

  • template: This attribute specifies the default template for the block.

  • templateLock: Setting templateLock=false allows the user to add, move, and remove blocks inside your custom block.

How It Works

In the above example, when a user inserts the "Badge" block:

• The only blocks they can add are core/paragraph and acf/meta.

• A default core/paragraph block with the placeholder "e.g. Applications open" is already present in the block when it is inserted.

By customizing the $allowed_blocks and $template arrays, you can fully control the inner content and user experience for your custom blocks.

---

This setup allows for powerful customization of your blocks and ensures that they can come with pre-defined structures, making it easier for content creators to use them.