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

Crea un bloque igual al de ACF pero de forma nativa

25/29

Lectura

La construcci贸n de un bloque nativo con SSR (Server Side Render) lleva algunos pasos:

  1. Modificar los atributos del componente
  2. Agregar los componentes necesarios para poder editar todos los campos del bloque
  3. Crear las funciones necesarias para establecer los atributos de cada componente
  4. Modificar la funci贸n PHP de registro para que espere todos los atributos
  5. Modificar la funci贸n PHP de renderizado din谩mico

Ab贸rdalo paso a paso.

Modificar los atributos del componente

Tu componente debe tener dos atributos, el texto del titular y la imagen de portada. En el ejemplo 鈥淏asic Block鈥 solo hab铆as generado el atributo content (que te va a servir para el t铆tulo), pero no ten铆as ning煤n lugar donde guardar la imagen.

Para seguir las buenas pr谩cticas, vas a agregar 2 atributos. Uno para la URL de la imagen y el otro para el texto alternativo de la misma, para colaborar con el SEO y la accesibilidad.

Ahora vamos a nuestro archivo index.js y modifiquemos los atributos de la siguiente manera:

attributes: {
    content: {
        type: 'string', // Definimos el tipo de dato que debe esperar el componente. En este caso es un texto, por eso lo declaramos como string.
        default: 'Hello world' // Definimos el valor por defecto.
    },
    mediaURL: {
        type: 'string' // Definimos el tipo de dato que debe esperar el componente. En este caso es un texto (URL de la imagen), por eso lo declaramos como string.
    },
    mediaAlt: {
        type: 'string' // Definimos el tipo de dato que debe esperar el componente. En este caso es un texto (Texto Alternativo de la imagen), por eso lo declaramos como string.
    }
}

Como vemos, agregamos mediaURL y mediaAlt con las caracter铆sticas que sirven para que el componente sepa que tipo de dato esperar.

Agregar los componentes necesarios para poder editar todos los campos del bloque

Ahora que ya configuraste los nuevos atributos, tienes que analizar qu茅 componentes vas a utilizar. En este caso, es un componente que se denomina MediaUpload y que te permitir谩 elegir la imagen de portada.

Para ello vamos a importarlo desde el paquete @wordpress/block-editor de la siguiente manera:

import { InspectorControls, MediaUpload } from '@wordpress/block-editor'; // Esta librer铆a est谩 disponible desde que instalamos el paquete "wordpress/scripts" desde NPM

Por otro lado, necesitas un bot贸n que pueda desencadenar el evento para elegir la imagen, por eso importaremos el componente Button desde el paquete @wordpress/components.

Luego vas a modificar la UI en la sidebar para incorporar el elemento dentro de la clave edit:

<InspectorControls>
    <PanelBody
        title="Modificar texto del Bloque B谩sico"
        initialOpen={ true }
    >
        <PanelRow>
            <TextControl
                label="Complete el campo" // Indicaciones del campo
                value={ content } // Asignacin del atributo correspondiente
                onChange={ handlerOnChangeInput } // Asignacin de funcin para gestionar el evento OnChange
            />
        </PanelRow>
    </PanelBody>
    <PanelBody
        title="Seleccion谩 una imagen"
        initialOpen={ true }
    >
        <PanelRow>
            <MediaUpload 
                onSelect={ handlerOnSelectMediaUpload } // Asignacin de funcin para gestionar el evento OnSelect
                type="image" // Limita los tipos de archivos que se pueden seleccionar
                // Se enva el evento open y el renderizado del elemento que desencadenarla apertura de la librera, en este caso un botn
                render={ ({open}) => {
                    //Agregamos las clases de los botones de WordPress habituales para que mantenga el estilo dentro del editor
                    return <Button className="components-icon-button image-block-btn is-button is-default is-large" onClick={open}>Elegir una imagen</Button>;
                }}
            />
        </PanelRow>
    </PanelBody>
</InspectorControls>

Crear las funciones necesarias para establecer los atributos de cada componente

Como puedes ver en el c贸digo anterior, vamos a crear la funci贸n handlerOnSelectMediaUpload para establecer los atributos del componente.

Por eso, vamos a crearla dentro de tu clave edit:

const handlerOnSelectMediaUpload = (image) => {
    setAttributes({
        mediaURL: image.sizes.full.url, // El objeto image cuenta con todas las propiedades de los archivos de la Media Library de WordPress, entre ellas los diferentes tama帽os
        mediaAlt: image.alt // Tambi茅n cuenta con el Texto Alternativo definido en la Media Library para cada archivo
    })
}

Dentro de image vas a poder acceder a todas las caracter铆sticas de las im谩genes de la galer铆a de WordPress, es decir, a toda la informaci贸n del archivo y a todos los metadatos.

Es por eso que vas a asignar el image.alt que es el campo que se completa en la librer铆a de medios de WordPress. Por otro lado, asignamos el valor de la URL de la imagen del tama帽o completo, por eso utilizamos image.sizes.full.url.

El c贸digo del tu clave edit quedar谩 as铆:

edit: (props) => {
    const { attributes: {content}, setAttributes, className, isSelected} = props;

    // Funci贸n para guardar el atributo content
    const handlerOnChangeInput = (newContent) => {
        setAttributes( {content: newContent})
    }

    // Funci贸n para guardar el atributo mediaURL y mediaAlt
    const handlerOnSelectMediaUpload = (image) => {
        setAttributes({
            mediaURL: image.sizes.full.url,
            mediaAlt: image.alt
        })
    }

    return <>
        <InspectorControls>
            <PanelBody // Primer panel en la sidebar
                title="Modificar texto del Bloque B谩sico"
                initialOpen={ true }
            >
                <PanelRow>
                    <TextControl
                        label="Complete el campo" // Indicaciones del campo
                        value={ content } // Asignaci贸n del atributo correspondiente
                        onChange={ handlerOnChangeInput } // Asignaci贸n de funci贸n para gestionar el evento OnChange
                    />
                </PanelRow>
            </PanelBody>
            <PanelBody // Segundo panel en la sidebar
                title="Seleccion谩 una imagen"
                initialOpen={ true }
            >
                <PanelRow>
                    <MediaUpload 
                        onSelect={ handlerOnSelectMediaUpload } // Asignaci贸n de funci贸n para gestionar el evento OnSelect
                        type="image" // Limita los tipos de archivos que se pueden seleccionar
                        // Se env铆a el evento open y el renderizado del elemento que desencadenar谩 la apertura de la librer铆a, en este caso un bot贸n
                        render={ ({open}) => {
                            //Agregamos las clases de los botones de WordPress habituales para que mantenga el estilo dentro del editor
                            return <Button className="components-icon-button image-block-btn is-button is-default is-large" onClick={open}>Elegir una imagen</Button>;
                        }}
                    />
                </PanelRow>
            </PanelBody>
        </InspectorControls>
        <ServerSideRender // Renderizado de bloque din谩mico
            block="pg/basic" // Nombre del bloque
            attributes={ props.attributes } // Se env铆an todos los atributos
        />
    </>
}

Modificar la funci贸n PHP de registro para que espere todos los atributos

Ahora que tu JS est谩 listo, tienes que hacer los cambios necesarios en las funciones PHP. Para ello lo primero es anticiparle al servidores, cuales son los atributos que recibir谩 el bloque.

Para ello se debe modificar la funci贸n de registro del bloque de la siguiente manera en el archivo functions.php:

// Asignaci贸n de la funci贸n de registro del bloque al Hook "init"
add_action('init', 'pgRegisterBlock');

// Funci贸n de registro del bloque
function pgRegisterBlock()
{
    // Tomamos el archivo PHP generado en el Build
    $assets = include_once get_template_directory().'/blocks/build/index.asset.php';

    wp_register_script(
        'pg-block', // Handle del Script
        get_template_directory_uri().'/blocks/build/index.js', // Usamos get_template_directory_uri() para recibir la URL del directorio y no el Path
        $assets['dependencies'], // Array de dependencias generado en el Build
        $assets['version'] // Cada Build cambia la versi贸n para no tener conflictos de cach茅
    );

    register_block_type(
        'pg/basic', // Nombre del bloque
        array(
            'editor_script' => 'pg-block', // Handler del Script que registramos arriba
            'attributes'      => array( // Repetimos los atributos del bloque, pero cambiamos los objetos por arrays
                'content' => array(
                    'type'    => 'string',
                    'default' => 'Hello world'
                ),
                'mediaURL' => array(
                    'type'    => 'string'
                ),
                'mediaAlt' => array(
                    'type'    => 'string'
                )
            ),
            'render_callback' => 'pgRenderDinamycBlock' // Funci贸n de callback para generar el SSR (Server Side Render)
        )
    );
}

Como puedes ver, es la misma estructura que ya hab铆as generado en tu JS.

Modificar la funci贸n PHP de renderizado din谩mico

El 煤ltimo paso es modificar el renderizado din谩mico del bloque para que tenga en cuenta todos los atributos.

Para ello vamos a utilizar de base el que generaste con ACF y vamos a reproducir esa misma estructura en la funci贸n de renderizado en el archivo functions.php. Haciendo esto, tu c贸digo deber铆a quedar de la siguiente manera:

// Funci贸n de callback para el SSR (Server Side Render)
function pgRenderDinamycBlock($attributes, $content)
{
    return (
        '<h1 class="my-3">'.$attributes['content'].'</h1>
        <img src="'.$attributes['mediaURL'].'" alt="'.$attributes['mediaAlt'].'" />
        <hr>'
    );
}

De esta forma, est谩s incorporando todos los atributos y componentes a tu bloque nativo.

Si todo sali贸 bien, esto es lo que deber铆as ver en tu navegador al incorporar tu Basic Block:

Recuerda que siempre que hagas cambios en tu c贸digo JS tienes que volver a compilar o tienes que tener activado el comando npm run start para que cada vez que guardes compile nuevamente tu bloque.

Aportes 7

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Espectacular!! la ruta de cursos de WordPress me ayud贸 a entender, en un paneo general, c贸mo funciona el mundo de la web en general.
Est谩 espectacular tener en un sola ruta de aprendizaje tanto cosas fundantes de los pilares del desarrollo web como lo son API REST, AJAX, JQuery y PHP (Tremenda introducci贸n a los modelos cliente-servidor), como tambi茅n tecnolog铆as cuting-edge como React, Node y Javascript. Adem谩s de que te permite salir con un producto terminado para empezar a desarrollar tu portafolio con una perspectiva full stack simplificada (o quiz谩s centrada en el frontend pero con una m铆nima idea de backend que desconoc铆a por completo).
La escuela de WordPress queda recomendad铆sima para quien no entiende mucho de desarrollo web y quiere adquirir los conocimientos fundamentales.

Esta hermoso,

seria bueno un a帽adido de como crear galer铆as con post personalizados.

Hola Lucio!!

No veo donde se agrega el c贸digo de la secci贸n 鈥淢odificar los atributos del componente鈥, cre铆 que iban dentro de
edit: (props) => { const { attributes: {content}, setAttributes, className, isSelected} = props;

Pero no veo que hayas incluido el codigo ahi. En el repo de github tampoco el c贸digo de esta clase, puedes actualizar el repo por favor para saber donde va este c贸digo?

Gracias!!

import { TextControl, PanelBody, PanelRow, Button  } from '@wordpress/components'

Tener en cuenta que dentro de los 鈥榗omponents鈥 debe incluirse ```
Button

Todo clar铆simo. Gracias

Respuesta:
SSR deber铆a estar activado de forma predeterminada en las p谩ginas AMP. Para verificar, eche un vistazo a la fuente de la p谩gina de una p谩gina AMP y deber铆a ver el transformed="self;v=1"atributo en el <html>elemento.

Los bloques ACF son un marco PHP y no requieren JavaScript. Esto se diferencia de la API de bloques de WordPress, que se basa en gran medida en t茅cnicas modernas de JavaScript, sintaxis y herramientas de compilaci贸n.