Using with ACF

Generating Blocks is super easy to do with Toolbox Blocks. You can register a block by adding so called headers to your Twig Template Post in Toolbox, which will allow it to identify and register it. Below the headers, you can directly add the template that will be used to output the block.

There are 3 required header settings:

  • Title
  • Category
  • TemplateType
Title

Title is obviously needed to identify your block when wanting to add it.

Category

Blocks are grouped into categories to help users browse and discover them. There are a few code provided categories like [ common | formatting | layout | widgets | embed ].

TemplateType

This is not a block setting, but rather a way for Toolbox to identify the type of Twig template. For use as a block via Toolbox Blocks, it must be set to 'block', always.


{#
  Title: Customer Testimonial
  Category: formatting
  TemplateType: block
  Description: Customer testimonial
  Icon: admin-comments
  Keywords: testimonial quote "customer testimonial"
  Mode: edit
  Align: none
  PostTypes: page post
  SupportsAlign: none left right
  SupportsMode: true
  SupportsMultiple: false
#}
<blockquote data-{{ block.id }}>
    <p>{{ fields.testimonial }}</p>
    <cite>
      <span>{{ fields.author }}</span>
    </cite>
</blockquote>

<style type="text/css">
  [data-{{ block.id }}] {
    background: {{ fields.background_color }};
    color: {{ fields.text_color }};
  }
</style>


More info on other settings

A lot of information about the other settings can be found here, on the acf_register_block_type documentation page.

Adding fields

When the block has been successfully registered it should show up in the "Rules" section for ACF Fieldgroups. Make sure to add the custom fields which you are planning to use in the template. As you can see in the template above, there fields for testimonial, author, background_color and text_color. Add one for each, apply the rule and save it.

afbeelding

Start using your block!

That's it! You can start using your block now. Open up a Gutenberg editor post or page and start by typing - on a new paragraph:

/customer testimonial

Very soon you will see that it search through the registered blocks, after which you can highlight yours.