1. Sviluppo dei blocchi di Gutenberg per
programmatori senza tempo
M A U R I C I O G E L V E S - @ m a u g e l v e s

2. Sviluppatore Freelance WP
Nomade Digitale
SiteGround Brand Ambassador
Ciao!
Sono Mauricio Gelves
🎬 youtube.com/c/mauriciogelves
📸 instagram.com/maugelves
🌎 maugelves.com

3. Come faccio per creare un blocco di Gutenberg con ACF?
Mani al codice

5. Esportare i campi a JSON e PHP
Registrare il blocco di Gutenberg
Creare campi personalizzati con ACF
Creare il mockup (HTML/CSS) per renderizzare il blocco
Aggiungere i stili del tema nel backend
Quale sono i passi?

6. <?php
/**
* Creates Talk Gutenberg Block.
*/
function wcz_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' => ‘wctorino',
'mode' => ‘auto',
'icon' => 'image-filter',
'keywords' => [ 'talk', 'quote' ],
] );
}
add_action('acf/init', 'wcz_create_talk_gb_block');

7. Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
Creare il mockup (HTML/CSS) per renderizzare il blocco
Aggiungere i stili del tema nel backend

8. Campi Personalizzati con ACF

10. Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
Creare il mockup (HTML/CSS) per renderizzare il blocco
Aggiungere i stili del tema nel backend

11. Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
Creare il mockup (HTML/CSS) per renderizzare il blocco
Aggiungere i stili del tema nel backend

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

13. Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
Creare il mockup (HTML/CSS) per renderizzare il blocco
Aggiungere i stili del tema nel backend

14. <?php
/*
* Enqueue the stylesheets for Gutenberg.
*/
function wtr_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', ‘wtr_admin_styles' );

16. Ora lo faremos passo a passo.
WORKSHOP

17. goo.gl/XKj95b
Scarica e importa questo file

18. La WordCamp ci chiede…
Creare un nuovo blocco per aggiungere gli assistenti dell'evento
nella Homepage del sito web.
Includere campi per il nome, foto e il account di Twitter.
Mostrare (come volete) gli assistenti nel Frontend del sito web.
🚨 goo.gl/KYU5Cr
Code Snippets
📂 goo.gl/yigK2u
Scarica il File da qui
WP Backend
User: admin
Password: admin

19. Grazie
YouTube | Instagram | maugelves.com
Mi potete trovare in tutti posti come @maugelves