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.
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
14. ¿Cómo crear un bloque de Gutenberg con ACF?
AHORA SÍ
VAMOS AL LÍO
15.
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?
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?
22.
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?
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?