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

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

23/29

Lectura

En esta clase vas a poder mejorar la experiencia para la edición de tus bloques. Para eso aprenderás a utilizar el componente
<InspectorControls> que nos permitirá desplazar nuestros campos a la sidebar del editor y renderizar la vista previa en el espacio del bloque.

Para ello lo primero que tienes que hacer es importarlo con la siguiente línea:

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

Además, necesitarás tres componentes más para ordenar tus campos dentro del panel y renderizar el bloque desde el servidor. Estos son PanelBody, PanelRow y ServerSideRender.

Para esto modifica la importación de componentes del paquete @wordpress/components de la siguiente manera:

import { TextControl, PanelBody, PanelRow } from '@wordpress/components'; // Esta librería está disponible desde que instalamos el paquete "wordpress/scripts desde NPM

y agregar este nuevo paquete:

import ServerSideRender from '@wordpress/server-side-render'; // Esta librería está disponible desde que instalamos el paquete "wordpress/scripts" desde NPM

Ahora sólo necesitas modificar un poco el código que ya tenías armado en la función edit:

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

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

    return <>
        <InspectorControls>
            <PanelBody // Primer panel en la sidebar
                title="Modificar texto del Bloque Básico"
                initialOpen={ false }
            >
                <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>
        </InspectorControls>
        <ServerSideRender // Renderizado de bloque dinámico
            block="pg/basic" // Nombre del bloque
            attributes={ props.attributes } // Se envían todos los atributos
        />
    </>
}

Como se puede ver en el ejemplo, utilizamos el componente <></> (Fragment) para contener toda la UI. Dentro creamos el primer componente estructurándolo con InspectorControls, PanelBody y PanelRow. Dentro colocas el componente TextControl que ya habías utilizado previamente, sin aplicarle ningún cambio en su configuración.

Debajo del elemento InspectorControls, agregamos el componente ServerSideRender al que le pasamos el nombre del bloque y los atributos del mismo.

En el último paso para que se genere el renderizado también tienes que modificar la función PHP que creaste en el archivo functions.php para que el servidor sepa cuáles debe esperar. Para lograrlo modificamos la función de la siguiente manera:

// 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'
                )
            ),
            'render_callback' => 'pgRenderDinamycBlock' // Función de callback para generar el SSR (Server Side Render)
        )
    );
}

De esta forma, construiste un panel de edición en la sidebar y una vista previa del render, en el espacio que ocupará el bloque, dándole al usuario una mejor experiencia para construir sus webs.

Ejemplo de SSR

Para conocer más sobre los componentes que la comunidad de WordPress pone a tu disposición, puedes ingresar a este link.

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 10

Preguntas 2

Ordenar por:

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

Para instalar wordpress/scripts en la carpeta blocks en el terminar del vs code poner el comando en el terminal npm install @wordpress/scripts --save-dev

Esto es una belleza!

Ya me imagino construyendo un editor en bloques al estilo DIVI 😲😲

Los bloques de Gutenberg junto a los custom post types y taxonomías puede permitir construir maquetadores personalizados según los tipos de post. Esto facilitaría el desarrollo de LMS o sistemas de reserva a medida.

Todo clarísimo. Gracias

WOOOOOOOOOOOW!!! D=

Hermoso y practico.

Gutenberg de WordPress 5.0 es el editor visual de la herramienta para gestionar contenidos WordPress mediante bloques de forma sencilla e intuitiva.
Es importante destacar que la versión antigua de WordPress no desaparecerá y por tanto no es obligatorio la implementación de Gutenberg, se puede utilizar como pluging.

El editor Gutenberg es un plugin que va a permitir la maquetación de páginas para que podamos construir nuevos proyectos web en la plataforma de WordPress 5.0.

Entendemos los bloques de Gutenberg como un conjunto de contenidos que dan lugar a los elementos de los cuales se compone una página web, y pueden contener títulos, textos, párrafos, imágenes, etcétera.