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

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.

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

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

    Ambassador at Web: maugelves.com YouTube: mauriciogelves Instagram: @maugelves Twitter: @maugelves
  2. #WCATH2019 I don’t work alone WordPress & Plugins A Community

    that helps and allows me to grow as a Freelance Developer.
  3. #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
  4. #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
  5. <?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');
  6. #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
  7. #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
  8. #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
  9. <?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 -->