Comprender las bases y el punto de partida

1

Bienvenida y recomendaciones

2

¿Cómo es un entorno de desarrollo profesional en WordPress?

3

Presentación del proyecto y repaso del curso de fundamentos

Crear Post Types y Archivos

4

¿Cómo se crea y se personaliza una categoría en WordPress?

5

Creemos la UI de un archivo en la web

6

¿Por qué es importante la navegabilidad de la web y cómo se mejora?

7

¿Qué es un Post Type y cómo se pueden personalizar los diferentes tipos?

8

¿Cómo creamos la UI de un Post Type personalizado?

9

Construyamos un loop personalizado

10

¿Qué es una taxonomía y cómo se registra una nueva?

11

¿Qué es un page template y cómo se utiliza?

Utilizar AJAX

12

¿Cómo funcionan los emails en WordPress?

13

¿Cómo utilizar AJAX dentro de WordPress?

14

Empecemos a construir un filtro dinámico para la web

15

Completemos la función AJAX para darle vida a nuestro filtro

La REST-API de WordPress

16

¿Cómo se utiliza la REST-API de WordPress?

17

¿Qué son y cómo funcionan los endpoints?

18

Hagamos el primer llamado a la API

Utilizar Bloques

19

¿Qué es un bloque de Gutenberg?

20

Creando un bloque nativo con React

21

Optimicemos el bloque con componentes de WordPress

22

Creemos el primer bloque dinámico

23

Mejorando la experiencia del usuario en Gutenberg con SSR (Server Side Render)

24

Creando bloques con ACF Pro

25

Crea un bloque igual al de ACF pero de forma nativa

Deployment

26

¿Cómo se lleva un sitio a producción?

27

¿Cómo podemos optimizar la indexación y el SEO de nuestro sitio?

28

¿Cómo defiendo a mi sitio de ataques externos y lo hago más seguro?

Finalizar el Curso

29

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creemos el primer bloque dinámico

22/29
Recursos

Aportes 10

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Hola, no se si más adelante se explica este tema, pero con este ejemplo, no se entiende muy bien la diferencia entre el bloque estático y el bloque dinámico,

¡pero de ahí, todo bien con el curso!

Creemos el primer bloque dinámico


El bloque dinámico deriva el renderizado a una función PHP. La función tendría dos parámetros $attributes y $content

function pgRenderDynamicBlock($attributtes, $content) {
    return '<h2>' . $attributtes['content'] . '</h2>';
}

Además que tenemos que poner en la función que registra el bloque un campo que registre nuestra función PHP para un bloque dinámico.

		register_block_type( 
        'pg/basic', 
        [ 
            'editor_script' => 'pg-block',
            'render_callback' => 'pgRenderDynamicBlock'
        ] 
    );
}

Y dentro del JS, en la función save tenemos que colocar null.

				save: ( ) => null
    }
)

Perfectamente claro. Gracias

No entendí la diferencia entre el render estático y dinámico :¿

Entiendo que, a menos que se trate de información fija e invariable (como un shortcode), los bloques deberían ser dinámicos por defecto.

Muy claro @whoisnegrello … Aunque me hubiera gustado ver el ejemplos como los que mencionabas con contenido dentro del contenido, a lo siguiente!!

Hola. Yo intento replicar tus pasos, y me imprime es una array vacio.

De hecho muestro que contiene attribute y el array esta complemente vacio. Tienes alguna sugerencia como puedo arreglarlo?

Para crear un nuevo bloque, tenemos que registrar con Gutenberg llamando registerBlockType() y pasando el nombre de bloque más un objeto de configuración. Este objeto tiene bastantes propiedades que requieren de explicación adecuada.

add_react
Aquí añadimos el script que webpack nos habrá compilado, en /build/index.js, y con la dependencia wp-element que incluye React

expose_data
Aquí devolvemos un objeto que en este caso solo contiene un dato que es la dirección del directorio (que nos puede ser útil para utilizar imágenes, por ejemplo)

Aquí es donde configuraríamos el exportar datos de las entradas, de los bloques, de lo que sea que queramos exponer para luego consumir con React

Con esto ya lo tenemos todo para empezar el desarrollo con React.