Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Tessa Kriesel

October 29, 2019
Tweet

More Decks by Tessa Kriesel

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. <?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
  10. $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
  11. $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
  12. $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
  13. 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
  14. 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