The document discusses creating a custom Gutenberg block for WordPress. It involves: 1) Creating custom fields using Advanced Custom Fields (ACF) to store block data. 2) Exporting the ACF fields to JSON and PHP. 3) Writing HTML and CSS to display the block using the custom fields.

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