Slides with the code I used in the Workshop for WordCamp Osnabrück 2019 in Germany.

1. Gutenberg blocks development for
programmers with NO time
M A U R I C I O G E L V E S - @ m a u g e l v e s

2. Freelance WP Developer
SiteGround Brand Ambassador
YouTube - Instagram
Hello!
I’m Mauricio Gelves
🎬 youtube.com/c/mauriciogelves
📸 instagram.com/maugelves
🌎 maugelves.com

4. Export fields to JSON y PHP
Register the Gutenberg block
Create custom fields with ACF
Create HTML/CSS to render the block
Enqueue the theme style in the backend
Which are the steps?

5. <?php
/**
* Creates Talk Gutenberg Block.
*/
function wos_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' => 'wcosnabruek',
'icon' => 'image-filter',
'keywords' => [ ‘talk', 'quote' ],
] );
}
add_action('acf/init', 'wos_create_talk_gb_block');

6. Export fields to JSON y PHP
Register the Gutenberg block
Create custom fields with ACF
Create HTML/CSS to render the block
Enqueue the theme style in the backend
Which are the steps?

7. Custom Fields with ACF

9. Export fields to JSON y PHP
Register the Gutenberg block
Create custom fields with ACF
Create HTML/CSS to render the block
Enqueue the theme style in the backend
Which are the steps?

10. Export fields to JSON y PHP
Register the Gutenberg block
Create custom fields with ACF
Create HTML/CSS to render the block
Enqueue the theme style in the backend
Which are the steps?

11. <?php
// Title.
?>
<div class="talk__meta">
<h3 class="talk__h"><?php the_field( 'wos_gb_talk_title' ); ?></h3>
<p class="talk__b"><?php the_field( ‘wos_gb_talk_description' ); ?></p>
</div><!-- END .talk__meta -->

12. Export fields to JSON y PHP
Register the Gutenberg block
Create custom fields with ACF
Create HTML/CSS to render the block
Enqueue the theme style in the backend
Which are the steps?

13. <?php
/*
* Enqueue the stylesheets for Gutenberg.
*/
function wos_admin_styles() {
// Register the styles.
wp_register_style('style', get_bloginfo('template_url') . '/style.css', array(),false);
// Enqueue the styles.
wp_enqueue_style('style');
}
add_action( 'enqueue_block_editor_assets', ‘wos_admin_styles' );

15. Now it’s our turn to create some Gutenberg Blocks with ACF
WORKSHOP

16. goo.gl/yigK2u
Download and import this file

17. WP Backend
User: admin
Password: admin

18. WordCamp Osnabrueck needs…
Create a new Gutenberg block to add and show the event
attendees in the Homepage.
Add Custom Fields for name, picture and Twitter account.
Show (as you can/prefer) the attendees in the Homepage of the
site.
🚨 goo.gl/KYU5Cr
Code Snippets
📂 goo.gl/yigK2u
Import File from
WP Backend
User: admin
Password: admin

19. Mauricio Gelves | @maugelves
Thank you!
You can find me everywhere as: @maugelves
Any question?