How to Create a Testimonial Block with ACF Blocks
Вставка
- Опубліковано 15 тра 2023
- 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:
github.com/colorful-tones/acf...
ACF Blocks documentation:
www.advancedcustomfields.com/...
- developer.wordpress.org/block...
- github.com/WordPress/gutenber...
- 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: wpengine.com/builders/author/...
Follow on Twitter: / dcook
This was very helpful. Would love to see more videos like this.
Good to hear and thanks for the feedback!
Great insight guys, thanks for putting the tutorial together! Looking forward to more of these in the future 🙌
Thanks for this, very helpful!
I have a (hopefully) quick question.
I am creating a custom block similar to this but I have a field of type 'link' and my question is how do I set defaults for this link since this is an array that contains link text, link URL, and link target.
In your quote example you set the default like this:
$quote = !empty(get_field( 'quote' )) ? get_field( 'quote' ) : 'Your quote here...';
how do I do it for links?
Is it possible in ACF normal version
No, ACF Blocks is part of the PRO package.
I'm sorry but this wasn't helpful at all. I was following the tutorial and you keep copy pasting the code. At first you copied them from documentation so I did the same and then there was a huge page of php and your acf field was already prepared . Its like, you didn't build the house live, you built it before and now you are giving a house tour. I was hoping to atleast use the code from github but it wasn't usable for my case because its far beyond being beginner friendly.
Sorry to hear that. It makes sense and I appreciate the feedback and will look to refine the process in upcoming workshops. Thanks for taking the time to leave your input.
Did you get yourself started? I found this video helpful but I don't know exactly what I already knew about block building. I found rolling this into a GeneratePress child theme has been nice. Have you used ACF much before?