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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Optimicemos el bloque con componentes de WordPress

21/29
Recursos

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Bueno, creo que en esta clase se respondía mi pregunta de npm run build. Mejor dejar el npm run start. Buenísimo el material.

Perfecto!

Optimicemos el bloque con componentes de WordPress


Tenemos que registrar el script, y lo hacemos así:

add_action( 'init', 'pgRegisterBlock' );
function pgRegisterBlock() {
    $assets = include_once get_template_directory(  ).'/blocks/build/index.asset.php';

    wp_register_script( 
        'pg-block', 
        get_template_directory().'/blocks/build/index.js', 
        $assets['dependencies'], 
        $assets['version'] 
    );

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

En el archivo de Js de los bloques, colocamos:

import { registerBlockType } from  '@wordpress/blocks'

registerBlockType(
    'pg/basic',
    {
        title: 'Basic Block',
        description: 'Este es nuestro primer bloque',
        icon: 'smiley',
        category: 'layout',
        edit: () => <h2>Hello world!</h2>,
        save: () => <h2>Hello world en el front!</h2>,
    }
)

⚠ No se olvide de correr el comando npm run build para poder ver los resultados de su código.

También podemos utilizar el comando npm run start se encarga de generarnos un build permanente.

import { registerBlockType } from  '@wordpress/blocks'
import { TextControl } from '@wordpress/components'

registerBlockType(
    'pg/basic',
    {
        title: 'Basic Block',
        description: 'Este es nuestro primer bloque',
        icon: 'smiley',
        category: 'layout',
        attributes: {
            content: {
                type: "string",
                default: "Hello World"
            }
        },
        edit: ( props ) => {
            const { attributes: {content}, setAttributes, className, isSelected } = props
            const handlerOnChangeInput = newContent => {
                setAttributes({ content: newContent })
            }

            return <TextControl
                    label="Complete el campo"
                    value={content}
                    onChange={handlerOnChangeInput}
                    />
        },
        save: ( props ) => {
            return <h2>{props.attributes.content}</h2>
        },
    }
)

muy buena esto de usar react en wordpress

muy importante saber react basico / mid level.

Antes de desarrollar los bloques, hay que tener claro que necesitaremos generar dos archivos

El correspondiente al bloque de Gutenberg

El correspondiente a la aplicación React del frontend

Los dos archivos compartiran el grueso del código (esto es, el componente), pero luego cada uno ira a lo que le toca

Dicho así sería tan sencillo como crear estos dos archivos, pero puesto que queremos compilarlo (con webpack), tenemos que decirle a webpack que nos genere estos dos archivos

Lo hacemos “extendiendo” la configuración que WordPress utiliza para él mismo (que tienes aquí), simplemente añadiendo un par de cosas:

Que genere 2 archivos finales a partir de 2 archivos de inicio

Que genere enlaces “simbólicos” que nos vinculen el React de WordPress con el React verdadero, que tienen nombres distintos (y nos servirá para cuando utilicemos librerías que esperan importar React como habitualmente)

En mi caso no fue necesario eliminar y agregar nuevamente el bloque para evitar el error, mis cambios se vieron reflejados directamente asumo que es un a ventaja de la versión más reciente de Wordpress (5.7.1)

Excelente clase!!!

Todo muy claro. Gracias

Ahora nos falta instalar Composer, que viene a ser lo que es NPM para librerías de JavaScript, pero para php

Es decir, un gestor de librerías para php

Si has instalado WordPress localmente, ya tendrás php instalado y ya puedes instalar Composer.