Define Blocks

define_block_type( 'theme/hero', [
    'title'  => 'Hero',
    'icon'   => 'cover-image',
    'schema' => [
        [
            'scope'  => 'content',
            'fields' => [
                'heading' => [ 'type' => 'text' ],
                'text'    => [ 'type' => 'richtext' ],
                'image'   => [ 'type' => 'media' ],
            ]
        ],
        [
            'scope'  => 'inspector',
            'panel'  => 'Layout',
            'fields' => [
                'layout' => [
                    'type'    => 'select',
                    'options' => [ 'default', 'wide', 'split' ],
                ],
                'overlay' => [
                    'type' => 'range',
                    'min'  => 0,
                    'max'  => 100,
                ],
            ]
        ],
    ],
    'render' => 'theme_hero_render',
]);

function theme_hero_render( $attributes ) {
    $v   = $attributes['values'];
    $img = wp_get_attachment_image_url(
        $v['image'], 'full'
    );

    ob_start();
    ?>

    <section class="hero">
        <img src="<?= esc_url($img) ?>">
        <div class="hero__content">
            <h1><?= esc_html($v['heading']) ?></h1>
            <?= $v['text'] ?>
        </div>
    </section>

    <?php
    return ob_get_clean();
}