!Hablemos! vevox.app Click en Join.

Presentación del tema: "!Hablemos! vevox.app Click en Join."— Transcripción de la presentación:

1

2

3 !Hablemos! vevox.app Click en Join

4 Acerca de Leandro Gómez Desarrollador web en Monchito
Miembro de la comunidad WP Nicaragua

5 ¿Qué es Gutenberg?

6 ¿Qué es Gutenberg? Gutenberg es el nuevo editor de bloques de WordPress Trae un enfoque completamente diferente para la creación de contenido en forma de bloques Fácil e intuitivo para usuarios nuevos Basado en JavaScript/React.js

7 ¿Qué es Gutenberg?

8 ¿Qué es Gutenberg?

9 ¿Qué es ACF?

10 ¿Qué es ACF? Advanced Custom Fields es un plugin de WordPress que te permite agregar campos de contenido extra a tus pantallas de edición de WordPress Estos campos de contenido extra se conocen más comúnmente como campos personalizados o custom fields

11 ¿Ya no debo aprender JavaScript?

12 ¿Qué podés hacer con ACF?
Añadir datos personalizados a tus páginas y entradas Capturar valores de configuración para luego usarlos en tu tema Crear páginas personalizadas Extender las capacidades y carácteristicas de tu tema

13 Vamos a lo bueno...

14 acf_register_block La función acf_register_block es similar a la función utilizada para registrar un tipo de entrada personalizado Te permite registrar un tipo de bloque personalizado en tu archivo functions.php

15 acf_register_block

16 acf_register_block

17 acf_register_block Name: Un nombre único que identifica el bloque
Title: El título que se va a desplegar al mostrar el bloque Description: Una breve descripción explicando lo que hace el bloque

18 acf_register_block

19 acf_register_block Category: La categoría bajo la cual va a aparecer el bloque Icon: El ícono del bloque, puede ser un Dashicon de WordPress o un ícono SVG Keywords: Términos de búsqueda para ayudar al usuario a encontrar el bloque

20 Crear un grupo de campos

21 Crear un grupo de campos

22 Crear un grupo de campos

23 Crear un grupo de campos

24 acf_register_block

25 Renderizar el bloque Necesitamos decirle a ACF como va a renderizar el bloque El parámetro render_callback es la función que renderiza el HTML de tu bloque y dónde podés poner tu código personalizado

26 Renderizar el bloque

27 Renderizar el bloque

28 Renderizar el bloque

29 Demo

30

31 ¡Gracias! @leogg en Twitter hola@monchito.net
Presentación en monchito.net/WCMGA2019