Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(block): Add support for InnerBlocks templates #159

Merged
merged 2 commits into from
Jul 28, 2023

Conversation

Log1x
Copy link
Owner

@Log1x Log1x commented Apr 21, 2023

This PR adds native support for the InnerBlocks template property making it easy + clean to add block templates to your ACF blocks.

A simple template adding a heading and paragraph would look something like:

public $template = [
    'core/heading' => ['placeholder' => 'Hello World'],
    'core/paragraph' => ['placeholder' => 'Welcome to the Example block.'],
];

I couldn't get block nesting as pretty as I wanted (e.g. when using core/column and core/columns) but it can be done using the innerBlocks attribute.

public $template = [
    'core/heading' => ['placeholder' => 'Hello World'],
    'core/columns' => [
        'innerBlocks' => [
            ['core/column' => [
                'innerBlocks' => [
                    ['core/heading' => ['level' => '3', 'placeholder' => 'This is a column heading.']],
                    ['core/paragraph' => ['placeholder' => 'This is a column paragraph.']],
                ],
            ]],
            ['core/column' => [
                'innerBlocks' => [
                    ['core/image' => []],
                ],
            ]],
        ],
    ],
];

After adding the $template property to your block class you would then pass $block->template to template in <InnerBlocks />.

<InnerBlocks template="{{ $block->template }}" />

Open to feedback/suggestions.

@mike-sheppard
Copy link
Sponsor Contributor

Perfect 👌

We currently do very similarly by passing through the with() method + we usually include allowed_blocks to restrict which blocks can be added (if relevant):

// app/Blocks/SomeBlock.php

public function with() {
  return [
      ...
      'allowed_blocks'    => $this->allowed_blocks(),
      'template'          => $this->block_template(),
  ];
}

public function block_template() {
  return esc_attr(wp_json_encode([
      ['core/heading', [
          'level'       => 2,
          'placeholder' => 'Your heading',
          'fontSize'    => 'sm',
      ]]
  ]));
}

public function allowed_blocks() {
    return esc_attr(wp_json_encode([
        'core/heading',
        'core/buttons',
    ]));
}
{{-- some-block.blade.php --}}

<InnerBlocks
  template="{!! $template !!}"
  allowedBlocks="{!! $allowed_blocks !!}"
/>

@Log1x Log1x merged commit 34c4652 into master Jul 28, 2023
@Log1x Log1x deleted the feat/innerblock-templates branch July 28, 2023 23:09
@Log1x Log1x mentioned this pull request Mar 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants