How to Build Custom Gutenberg Blocks with Advanced Custom Fields — iThemes Online Training

During this online training workshop, you will learn how to build custom Gutenberg blocks for WordPress utilizing a plugin called Advanced Custom Fields. We'll start off by learning some “hidden” features of the Advanced Custom Fields plugin and then move into creating 2-3 custom blocks that you can use on existing WordPress websites or future client projects.

You Will Learn...

- How to build a Hero Gutenberg block with a title, description & call-to-action
- How to create your very own custom Gutenberg blocks for the new WordPress 5.0 editor
- A few neat tricks and tips about the Advanced Custom Fields Pro plugin

Transcript

1. HOW TO BUILD CUSTOM GUTENBERG BLOCKS WITH @TESSAK22 BIT.LY/ACF-ITHEMES
2. FOUNDER & CEO DIRECTOR OF BUSINESS DEVELOPMENT • Love Obsessed with Dogs • Shoot Archery • Passionate about teaching others • Slinging code since 2008 @tessak22 all over the internet @TESSAK22 ABOUT ME BIT.LY/ACF-ITHEMES
3. ACF PROMO! Use Coupon Code: ITHEMES 25% OFF ACF PRO
4. LET’S GET SETUP ➤ Download Advanced Custom Fields (You need the Pro version) ➤ Open your favorite code editor ➤ Open your favorite local development tool ➤ Follow along with these slides at bit.ly/acf-ithemes @TESSAK22 BIT.LY/ACF-ITHEMES
5. WHAT IS ACF? @TESSAK22 BIT.LY/ACF-ITHEMES
6. WHAT IS ACF? ‣ Stands for Advanced Custom Fields ‣ Makes content editing easier ‣ Easy to learn and use ‣ Allows you to add custom meta fields to content ‣ Free & Pro Versions @TESSAK22 BIT.LY/ACF-ITHEMES
7. WHAT CAN IT DO? ‣ Add custom data to your pages, posts & custom posts. ‣ Collect theme setting values that you can use globally in your theme. ‣ Create a custom page builder- esque layout editor ‣ Capture entries through a frontend form ‣ Extend your theme capabilities and features ‣ Data is stored in the postmeta table @TESSAK22 BIT.LY/ACF-ITHEMES
8. TEMPLATE 101 ‣ functions.php - allows you to add functionality to your theme ‣ style.css - your CSS (styling) for your theme ‣ page.php - page template file ‣ single.php - single post file ‣ single-postname.php - Custom post type @TESSAK22 BIT.LY/ACF-ITHEMES
9. AWESOME FEATURES @TESSAK22 BIT.LY/ACF-ITHEMES @TESSAK22 BIT.LY/ACF-ITHEMES
10. REPEATER FIELD This field is really nice for sliders, carousels or anything that someone may want to use an unpredictable number of times. @TESSAK22 BIT.LY/ACF-ITHEMES
11. FLEXIBLE CONTENT My favorite feature of all… With flexible content you can essentially make your own page builder with just the blocks that you need! @TESSAK22 BIT.LY/ACF-ITHEMES
12. OPTIONS PAGE <?php the_field('header_title', 'option'); ?> Options page allows you to have global fields that can be used where ever you want in your theme! @TESSAK22 BIT.LY/ACF-ITHEMES
13. <?php acf_form(); ?> Edit your ACF data on the frontend of your site! Add where form should be: <?php acf_form_head(); ?> Add before get_header FRONTEND FORMS @TESSAK22 BIT.LY/ACF-ITHEMES
14. ACF Register Block acf_register_block( $settings ); *acf_register_block is only available to Pro members @TESSAK22 BIT.LY/ACF-ITHEMES
15. acf_register_block @TESSAK22 BIT.LY/ACF-ITHEMES
16. $settings • Name
 Unique name that identifies the block • Title
 The display title for the block • Description
 Short description explaining what the block can do • Category
 Category it appears under [ common | formatting | layout | widgets | embed ] @TESSAK22 BIT.LY/ACF-ITHEMES
17. $settings • Icon
 This can be chosen from a WordPress Dashicon or custom SVG • Keywords
 Search terms to help users looking for a block • Post Types
 Post type to restrict the block to • Mode
 Edit or Preview @TESSAK22 BIT.LY/ACF-ITHEMES
18. $settings • Align
 Default block alignment: “left”, “center”, “right”, “wide” and “full” @TESSAK22 BIT.LY/ACF-ITHEMES
19. $settings • render_callback
 Instead of providing a render_template, a callback function name may be specified to output the block’s HTML. • render_template
 The path to a template file used to render the block HTML. This can either be a relative path to a file within the active theme or a full path to any file. IN FUNCTIONS.PHP (OR FUNCTIONS INCLUDE) IN A TEMPLATE FILE OUTSIDE OF FUNCTIONS @TESSAK22 BIT.LY/ACF-ITHEMES
20. Preview vs Edit @TESSAK22 BIT.LY/ACF-ITHEMES
21. LET’S BUILD SOME BLOCKS @TESSAK22 BIT.LY/ACF-ITHEMES @TESSAK22 BIT.LY/ACF-ITHEMES
22. 4 Easy Steps 1. Register Your Block 2. Create your field group 3. Create your template 4. Beautify it with CSS @TESSAK22 BIT.LY/ACF-ITHEMES
23. Hero Block https://gist.github.com/tessak22/ a81398621b32c23358cae5f3a 1d31379 render_callback @TESSAK22 BIT.LY/ACF-ITHEMES
24. Testimonial Block https://gist.github.com/ tessak22/797fae407d1b2bbb2 b8a02de0d24e13f render_template @TESSAK22 BIT.LY/ACF-ITHEMES
25. Team Member Bio https://gist.github.com/tessak22/ a13c720e59347026cdbae3c8 5cc3d808 Register block in an inc file @TESSAK22 BIT.LY/ACF-ITHEMES
26. I WANT TO HEAR WHAT YOU THINK AND HOW IT WENT FOR YOU! SHARE YOUR THOUGHTS HERE: https://tessakriesel.com/contact/ HELPFUL RESOURCES https://www.advancedcustomfields.com/blog/building- a-custom-slider-block-in-30-minutes-with-acf https://www.billerickson.net/building-gutenberg-block- acf/ @TESSAK22 REACH OUT BIT.LY/ACF-ITHEMES