Creating blocks

Because blocks are so common in our websites we've build a tool that helps you creating your blocks automatically. All though we recommend using our tool to prevent any mistakes, it is also possible to create your block manually.

Below we've laid out the steps to take when taking either route.

Creating a block automatically

Navigate to your block folder in the terminal and run npx bp-create-block. This will run a cli tool that will scaffold a new block for you based on the example block in your child theme. Nice and easy!

Creating a block manually

in you child theme there is a blocksfolder in which you'll find _example/. What you want to do is duplicate this folder to a new specific name.

You can now rename the scss, php and twig file to match the folder name.

change the block.json

The block.json file holds the metadata for your new block. You can set an icon, description, tags and much more. For now change name to reflect your folder name. See all the variables you can add to the $block array over here at the ACF docs.

change the php file

After that you want to change the Example_Block class to also reflect your block name and activate the class on the bottom of this file by uncommenting the class call. After that you can update the NAME, constant to also reflect the name. This file automatically gets loaded.

Copy
1<?php
2
3/**
4 * ACF Block declaration
5 *
6 * @package WordPress
7 * @subpackage WP_Lemon
8 */
9
10namespace WP_Lemon\Child\Blocks;
11
12use HighGround\Bulldozer\BlockRendererV2 as BlockRenderer;
13
14/**
15 * Example block that can be copied for making extra blocks.
16 *
17 * Follow the API standard of https://www.advancedcustomfields.com/resources/acf-blocks-with-block-json/
18 */
19class Example_Block extends BlockRenderer
20{
21
22    /**
23     * The name of the block.
24     * This needs to be the same as the folder and file name.
25     */
26    const NAME = 'example';
27
28    /**
29     * Extend the base context of our block.
30     * With this function we can add for example a query or
31     * other custom content.
32     *
33     * @param array $context      Holds the block data.
34     * @return array  $context    Returns the array with the extra content that merges into the original block context.
35     */
36    public function block_context($context): array
37    {
38
39        $args = [
40         // 'InnerBlocks' => self::create_inner_blocks(['core/heading', 'core/paragraph']),
41        ];
42
43        return array_merge($context, $args);
44    }
45
46
47    /**
48     * Register fields to the block.
49     *
50     * @link https://github.com/StoutLogic/acf-builder
51     * @return StoutLogic\AcfBuilder\FieldsBuilder
52     */
53    public function add_fields(): object
54    {
55        return $this->registered_fields;
56    }
57}
58
59/**
60 * Enable the class
61 */
62// new Example_Block();

Check the twig file

After completing the above steps you can check if the twig file has something to show.

Common mistakes

You can now add the block to a page and see if it works. Common reasons why the block doesn't work:

• You forgot to uncomment the block register call in your PHP file.
• You didn't change the classnames on all places.
• The folder name, php file name and twig file, the name in your block.json and the NAME constant in your php file don't match.
• Once verified that the block is working you can continue developing your new block.