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…
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
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
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 ευχαριστώ