Adding a flexible content block

There are a few steps involved when adding a flexible content block.

1. Create the block in ACF

We'll create a block for an image gallery, following the naming conventions:

Block › Image Gallery

2. Add it to the Flexible Content

Add a new layout to the Flexible Content field group:

• Label: Image Gallery
• Name: image_gallery

Add one field:

• Label: Clone
• Name: clone
• Type: Clone
• Fields: search for the field and select All fields from Block › Image Gallery field group

3. Create a block template

We'll create a new template for the block, following the file & folder structure:

templates/blocks/image-gallery-block.twig

This is the block that will be rendered by the server.

4. Create a flex template

We'll create a flex wrapper template:

templates/flexibles/image-gallery-flex.twig

... which will render the real block:

{% include 'blocks/image-gallery-block.twig' with {
    title: flex.title,
    images: flex.images,
} only %}

This forces you to make the real block accept arguments that aren't necessarily coming from flexible content. This allows you to reuse the block in contexts which aren't 'flexible content'. The flex wrapper only acts as a wrapper shell to render the real block, and this also allows you to render multiple blocks based on decisions made in the flexible content settings for that block.

---

See also:

• ACF Naming conventions & modularity
• Template file & folder structure