Presentation for WordCamp Athens 2019

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
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

4. <?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');

5. #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

6. #WCATH2019
Custom Fields with ACF

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. #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

10. <?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 -->

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

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