Testimonial ACF Blocks

This repository contains a Twenty Twenty-Three child theme and was used to demonstrate four different approaches to writing a testimonial ACF Block.

👉 Check out the playback recording from this workshop 👈

Requirements

In order to use the tt3child theme:

1. You have to have the default Twenty Twenty-Three theme installed and activated.
2. You have to have ACF PRO plugin installed and activated.

Once those requirements are met then just be sure to activate the tt3child theme.

What the tt3child child theme contains

There are four different versions of a testimonial ACF Block. Each one is a different take on how one might approach creating a testimonial block.

Block name	Description
Testimonial Example 1 blocks/testimonial-example-1/	Utilizes ACF fields, which are registered and assigned to our ACF Block to assign and output data. ACF field data is stored in acf-json/group_645ba67ec387b.json
Testimonial Example 2 blocks/testimonial-example-2/	Utilizes WordPress core's InnerBlocks component. We pass an array of core blocks to pre-populate the nested block data with <InnerBlocks template="">. We also use templateLock="all" on InnerBlocks to lock down all the blocks. We do this in order to try and set up our editorial team for success.
Testimonial Example 3 blocks/testimonial-example-3/	This largely extends Testimonial Example 2 use of InnerBlocks, but introduces Block Styles to allow for the addition of a class to our final output, which we can target with specific stylistic appearances for our block, e.g. Rounded (makes the image round) and Shadow (adds a box-shadow under the image)
Testimonial Example 4 blocks/testimonial-example-4/	Demonstrates Block Variations to show how one could allow for different testimonial layouts: Image Left and Image Right.

Note: there is also an example theme.json file which includes some custom per-block CSS for each block. This is solely to help debug and demonstrate how one might consider using theme.json to provide unique styling entries for each block.

Screenshot of block editor with all testimonial block examples placed

Resources and further reading

• ACF PRO Blocks documentation
• WordPress Developer Resources > Metadata in block.json
• WordPress Developer Resources > Nested Blocks: Using InnerBlocks
• Gutenberg templateLock docs
• WordPress Developer Resources > Custom block styles
• WordPress Developer Resources > Variations
• 3 Ways to Curate the Editor Experience in WordPress