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
   

   View Slide

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
   

   View Slide

3. ACF PROMO!
   Use Coupon Code: ITHEMES
   25% OFF ACF PRO
   

   View Slide

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
   

   View Slide

5. WHAT IS ACF?
   @TESSAK22
   BIT.LY/ACF-ITHEMES
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. AWESOME FEATURES
   @TESSAK22
   BIT.LY/ACF-ITHEMES @TESSAK22
   BIT.LY/ACF-ITHEMES
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. OPTIONS PAGE
    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
    

    View Slide

13. 
    Edit your ACF data on the
    frontend of your site!
    Add where form should be:
    
    Add before get_header
    FRONTEND FORMS
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

14. ACF Register Block
    acf_register_block( $settings );
    *acf_register_block is only available to Pro members
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

15. acf_register_block
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. $settings
    ● Align

    Default block alignment: “left”, “center”, “right”, “wide” and “full”
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

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
    

    View Slide

20. Preview vs Edit
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

21. LET’S BUILD SOME
    BLOCKS
    @TESSAK22
    BIT.LY/ACF-ITHEMES @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

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
    

    View Slide

23. Hero Block
    https://gist.github.com/tessak22/
    a81398621b32c23358cae5f3a
    1d31379
    render_callback
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

24. Testimonial
    Block
    https://gist.github.com/
    tessak22/797fae407d1b2bbb2
    b8a02de0d24e13f
    render_template
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

25. Team Member
    Bio
    https://gist.github.com/tessak22/
    a13c720e59347026cdbae3c8
    5cc3d808
    Register block in an inc file
    @TESSAK22
    BIT.LY/ACF-ITHEMES
    

    View Slide

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
    

    View Slide