How to Create a Testimonial Block with ACF Blocks

We'll demonstrate how you can create a testimonial block using ACF Blocks. There are many ways to WordPress, and we'll show you four different examples to achieve the same block output.

We’ll touch on some of the following:
- Register an ACF Block in a WordPress plugin
- Register ACF fields, assign them to an ACF Block, and store them in a plugin
- Create the template markup to output the block
- Apply CSS to the frontend and editor experience

Contents:
00:06 Intros
05:19 Overview
08:12 WordPress installation overview
08:53 Create a child theme
10:43 Create a functions.php and register blocks
11:44 Start creating the first ACF Block
11:59 Q1: why a theme and not a plugin?
13:17 Q2: connect VS Code with a WordPress site?
14:12 Continue first block progress with block.json
16:32 Q3: using Sass for block?
16:52 Q4: blocks vs Flexible Content field?
17:34 Continue first block progress (CSS, PHP)
18:05 Register & assign ACF fields for first ACF Block
19:00 Sync ACF fields to theme's /acf-json/ folder
19:44 Walk through template logic for fields and block (PHP)
21:40 Create a testimonial example with native WP blocks
23:28 Add the first block to the editor
27:22 Quick peek at the first block's CSS
27:48 Start creating second ACF Block (using InnerBlocks)
46:11 Start creating third ACF Block (using Block Styles)
53:18 Start creating fourth ACF Block (using block Variations)

Resources:

Final GitHub codebase:
https://github.com/colorful-tones/acf...

ACF Blocks documentation:
https://www.advancedcustomfields.com/...

- https://developer.wordpress.org/block...
- https://github.com/WordPress/gutenber...
- https://wpengine.com/builders/curate-...

About the presenter:

Damon Cook is a Developer Advocate at WP Engine. Previously, he navigated the WordPress agency land for a decade.

Damon’s Articles: https://wpengine.com/builders/author/...
Follow on Twitter:   / dcook