This document provides instructions for creating a Gutenberg block with Advanced Custom Fields (ACF) in 5 steps: 1. Export custom fields to JSON and PHP 2. Register the Gutenberg block 3. Create custom fields with ACF 4. Create HTML and CSS to render the block 5. Enqueue the theme style in the backend

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?