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 👈
In order to use the tt3child theme:
- You have to have the default Twenty Twenty-Three theme installed and activated.
- You have to have ACF PRO plugin installed and activated.
Once those requirements are met then just be sure to activate the tt3child theme.
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.
- ACF PRO Blocks documentation
- WordPress Developer Resources > Metadata in
block.json - WordPress Developer Resources > Nested Blocks: Using InnerBlocks
- Gutenberg
templateLockdocs - WordPress Developer Resources > Custom block styles
- WordPress Developer Resources > Variations
- 3 Ways to Curate the Editor Experience in WordPress