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

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

3734ba5f47b3e579b367b4202aaba163?s=128

Tessa Kriesel

October 29, 2019
Tweet

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