Mis plegarias fueron escuchadas. Sabía que tarde o temprano la Comunidad de WordPress se volcaría en crear un software que facilitase la creación de bloques de Gutenberg. Elliot Condon y su equipo de desarrolladores, del reconocido plugin ACF, fueron los responsables de este milagro que me ha ahorrado decenas y decenas de horas (y dinero) en mis proyectos. Acércate para ver lo fácil que es utilizarlo y cómo puedes, tú también, implementarlo en tus desarrollos.

1. Desarrollo de bloques de Gutenberg para
desarrolladores con poco tiempo
M A U R I C I O G E L V E S - @ m a u g e l v e s

2. Desarrollador Freelance WP
Nómade Digital
YouTube - Instagram
Hola!
Soy Mauricio Gelves
RRSS ➡ @maugelves

3. Disclaimer ⚠
Solo para evitar malentendidos

4. El tiempo del Freelance

5. Presupuestos
Desarrollo del
proyecto
Project
Management
Mantenimientos
WordCamps
Gutenberg
React
Webpack
Js ES6

6. WordPress &
Plugins
Una Comunidad que me ayuda y me permite
desarrollarme como Freelance.

7. Los mejores programadores
de todo el mundo se
encargan de que el Core de
WordPress sea seguro.
Seguridad
WordPress & Plugins
Utilizo plugins que me
ahorran tiempo/dinero en
mis proyectos.
Plugins
Advanced Custom Fields es
uno de mis plugins pilares
para desarrollar en
WordPress.
ACF

8. Introducción a ACF @ #WCMadrid

9. WordPress 5.0 | Gutenberg = ⏰🔥

10. ACF Flexible Layout

11. Mientras tanto…

14. ¿Cómo crear un bloque de Gutenberg con ACF?
AHORA SÍ
VAMOS AL LÍO

16. Exportar los campos a JSON y PHP
Registrar el bloque de Gutenberg
Crear campos personalizados con ACF
Crear el mockup (HTML/CSS) para renderizar el bloque
Encolar los estilos del tema en el backend
¿Cuáles son los pasos?

17. <?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' => 'wczaragoza',
'icon' => 'image-filter',
'keywords' => [ 'testimonial', 'quote' ],
] );
}
add_action('acf/init', 'wcz_create_talk_gb_block');

18. Crear campos personalizados con ACF
Exportar los campos a JSON y PHP
Registrar el bloque de Gutenberg
Crear el mockup (HTML/CSS) para renderizar el bloque
Encolar los estilos del tema en el backend
¿Cuáles son los pasos?

19. Campos Personalizados con ACF

21. Crear campos personalizados con ACF
Exportar los campos a JSON y PHP
Registrar el bloque de Gutenberg
Crear el mockup (HTML/CSS) para renderizar el bloque
Encolar los estilos del tema en el backend
¿Cuáles son los pasos?

23. Crear campos personalizados con ACF
Registrar el bloque de Gutenberg
Crear el mockup (HTML/CSS) para renderizar el bloque
Encolar los estilos del tema en el backend
Exportar los campos a JSON y PHP
¿Cuáles son los pasos?

24. <?php
// Title.
?>
<div class="talk__meta">
<h3 class="talk__h"><?php the_field( 'wcz_gb_talk_title' ); ?></h3>
<p class="talk__b"><?php the_field( 'wcz_gb_talk_description' ); ?></p>
</div><!-- END .talk__meta -->

26. Crear campos personalizados con ACF
Registrar el bloque de Gutenberg
Encolar los estilos del tema en el backend
Exportar los campos a JSON y PHP
Crear el mockup (HTML/CSS) para renderizar el bloque
¿Cuáles son los pasos?

27. <?php
/*
* Enqueue the stylesheets for Gutenberg.
*/
function wcz_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', 'wcz_admin_styles' );
/*
* (Se me encendió la lámpara hoy a las 11:24)🤓🤓🤓
* Declare fonts in a different file to avoid changing default typography
* in the backend.
*/

28. Vamos a crear el bloque de Gutenberg paso a paso
DEMO
EN VIVO

29. Mauricio Gelves | @maugelves
¡Gracias!
En todos lados como: @maugelves
¿Hay preguntas?