Gutenberg blocks development for programmers with NO time [EN] - Mauricio Gelves

Gutenberg blocks development for programmers with NO time [EN] - Mauricio Gelves

WordCamp Athens 2019

His prayers were heard. He knew that sooner or later the WordPress Community would create a software to ease the creation of Gutenberg Blocks. Elliot Condon and his team, from the well known ACF plugin, were responsible for this miracle that has saved Mauricio lots and lots of hours of work in his projects.

He invites you to come and see how easy is to implement them and be proud to call yourself a Gutenberg Block Developer.

Transcript

  1. #WCATH2019 Gutenberg Blocks Development for programmers with NO time Mauricio

    Gelves - @maugelves
  2. #WCATH2019 Mauricio Gelves @maugelves Software Engineer Freelance WordPress Developer Brand

    Ambassador at Web: maugelves.com YouTube: mauriciogelves Instagram: @maugelves Twitter: @maugelves
  3. #WCATH2019 Disclaimer ⚠ Just to avoid misunderstandings

  4. #WCATH2019 The time of a freelancer

  5. Budgets Project Development Project Management Maintenances WordCamps Gutenberg React Webpack

    Js ES6
  6. #WCATH2019 I don’t work alone WordPress & Plugins A Community

    that helps and allows me to grow as a Freelance Developer.
  7. #WCATH2019 WordPress & Plugins The best programmers of the world

    ensure that the WordPress Core is always free of security bugs. Security I use plugins that save me money & time in my projects. Plugins Advanced Custom Fields is one of my pillars plugins to develop with WordPress. ACF
  8. #WCATH2019 WordPress 5.0 & Gutenberg = ⏰

  9. #WCATH2019 ACF Flexible Layout

  10. #WCATH2019 In the meantime…

  11. None
  12. None
  13. #WCATH2019 Let’s see how it works

  14. #WCATH2019

  15. #WCATH2019 Register the Gutenberg block Which are the steps? Create

    custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
  16. <?php function wcath_create_talk_gb_block() { // register a testimonial block acf_register_block(

    [ 'name' => 'talk', 'title' => __( 'Talk', DOMAIN_NAME ), 'description’ => __('Block with basic info of the talk.', DOMAIN_NAME), 'render_callback' => 'talk_block_render_callback', 'category' => 'wcathens', 'icon' => 'image-filter', 'mode' => 'auto', 'keywords' => [ 'talk', 'quote' ], 'enqueue_style' => get_template_directory_uri() . 'blocks/testimonial/ testimonial.css', ] ); } add_action('acf/init', 'wcath_create_talk_gb_block');
  17. #WCATH2019 Register the Gutenberg block Which are the steps? Create

    custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
  18. #WCATH2019 Custom Fields with ACF

  19. None
  20. #WCATH2019 Register the Gutenberg block Which are the steps? Create

    custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
  21. None
  22. #WCATH2019 Register the Gutenberg block Which are the steps? Create

    custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
  23. <?php // Title. ?> <div class="talk__meta"> <h3 class="talk__h"><?php the_field( 'wcath_gb_talk_title'

    ); ?></h3> <p class="talk__b"><?php the_field( 'wcath_gb_talk_description' ); ?></p> </div><!-- END .talk__meta -->
  24. #WCATH2019 Quick Demo

  25. #WCATH2019 WCAthens Theme http://bit.ly/2VNOTPJ

  26. #WCATH2019 THANKS ευχαριστώ