Cree plantillas de bloques de Gutenberg para una mejor experiencia

WordPress 5.x es la última versión del CMS más popular del mundo. Una característica interesante de la nueva versión es el Editor Gutenberg que está listo para revolucionar la forma en que los usuarios de WordPress crean contenido en la plataforma. ¡Al menos esa es la versión oficial!

Independientemente de lo que sienta sobre el editor de Gutenberg, es importante darse cuenta de que este editor no desaparecerá en los próximos lanzamientos de WordPress. La razón es simple: el editor de WordPress "Clásico" ha comenzado a mostrar su edad. Además, la nueva generación de usuarios que están familiarizados con los editores disponibles en otras plataformas similares, se sienten más cómodos con el editor de estilo Gutenberg que con el editor clásico.

Personalización de bloques de Gutenberg

El editor de Gutenberg se basa en la idea de 'bloques', componentes discretos que se pueden usar a voluntad para agregar la funcionalidad deseada al contenido. A través de estos bloques de Gutenberg, el usuario puede agregar secciones ajustables y manejables de forma independiente que agregan valor para los lectores.

Dado que la personalización se encuentra en el núcleo de WordPress, el editor de Gutenberg admite plantillas de bloques personalizadas que ayudan a los usuarios a agregar bloques personalizados a su CMS.

Hay dos formas de crear plantillas de bloques de Gutenberg personalizadas. Tenga en cuenta que ambos métodos requieren algunos conocimientos de desarrollo de WordPress.

Registrar bloques de Gutenberg

El primer método implica la creación de plantillas de bloques personalizados que se pueden utilizar para construir bloques precargados. Para esto, agregue el siguiente código al archivo functions.php

 add_action ('init', function () {
    $ args = matriz (
        'public' => cierto,
        'label' => 'Noticias',
        'show_in_rest' => verdadero,
        'template_lock' => 'todos',
        'plantilla' => matriz (
            array ('núcleo / párrafo', array (
                'placeholder' => 'Noticias de última hora',
            )),
            array ('núcleo / imagen', array (
                'align' => 'derecha',
            )),
        ),
    );

    register_post_type ('noticias', $ args);
});

Así es como se vería esta plantilla personalizada para el bloque Gutenberg en acción:

En el fragmento de código anterior, el parámetro de matriz 'núcleo / párrafo' es responsable del contenido del bloque. Del mismo modo, el parámetro de matriz 'núcleo / imagen' le permite cargar imágenes de tres formas: carga directa, selección de la biblioteca de medios e incrustación mediante una URL.

El parámetro 'show_in_rest' indica al núcleo de WordPress que este bloque personalizado debería poder recuperarse a través de la API REST de WordPress.

El argumento 'template_lock', cuando se establece en 'all', evita que los bloques personalizados se agreguen (o eliminen) a la plantilla.

Cuando se trata de agregar un bloque personalizado a esta plantilla, use la submatriz 'plantilla'. Por ejemplo, considere el siguiente fragmento:

 'plantilla' => matriz (
            array ('núcleo / encabezado', matriz ('nivel' => '4', 'contenido' => 'Encabezado')),
            array ('núcleo / párrafo'),
        )

Crear un complemento de Gutenberg

Cuando se trabaja con plantillas personalizadas y plantillas de Gutenberg, la mejor práctica es crear un complemento personalizado para el complemento Gutenberg Editor personalizado.

Como todos los complementos, este complemento se ubicará en el directorio wp-content / plugins que contiene carpetas separadas para todos los complementos instalados en el sitio web.

Para crear el complemento, vaya al directorio wp-content / plugins y cree una nueva carpeta. El nombre de la carpeta debe ser el nombre del complemento de plantilla personalizado de Gutenberg. Para el propósito de este tutorial, he llamado a mi complemento 'Gutenberg Blocks'. Por tanto, el nombre de la carpeta sería ' Gutenberg-Blocks '.

En esta carpeta, cree un archivo llamado Gutenberg-blocks.php y el siguiente código:

 / **
 * Nombre del complemento: Bloques de Gutenberg
 * Autor: Muhammad Owais Alam
 * Descripción: este complemento permite a los usuarios agregar una plantilla personalizada de WordPress Gutenberg para el editor de Gutenberg
 * Versión: 1.0.0
 * /

add_action ('init', function () {
    $ args = matriz (
        'public' => cierto,
        'label' => 'Noticias',
        'show_in_rest' => verdadero,
        'template_lock' => 'todos',
        'plantilla' => matriz (
            array ('núcleo / párrafo', array (
                'placeholder' => 'Noticias de última hora',
            )),
            array ('núcleo / imagen', array (
                'align' => 'derecha',
            )),
        ),


    );

    register_post_type ('noticias', $ args);
});

Tenga en cuenta que este código es solo una guía y puede cambiar los detalles para que se ajusten a sus requisitos. Una vez instalado, este complemento aparecerá en la lista de complementos disponibles.

Ejemplo de tema de WordPress de Gutenberg - Gutenberry

El nuevo editor sin distracciones, Gutenberg, ha sido parte del núcleo de WordPress durante casi un año. Sin embargo, solía ser bastante difícil encontrar un tema de Gutenberg logrado y bien pensado en la web hasta que salió Gutenberry.

Gutenberry es actualmente uno de los mejores temas 100% listos para Gutenberg. Este tema limpio y minimalista fue creado en Gutenberg, brindándole una facilidad de edición sin precedentes y una velocidad ejemplar. Por ejemplo, Google Speed ​​califica a Gutenberry A 97.

Este tema de punta también viene con 5 diseños de página de inicio, todos creados para blogs modernos con integración de medios enriquecidos. Además, Gutenberry le ofrece toneladas de diseños de blogs y publicaciones, más de 10 widgets, formularios de trabajo y una sólida integración con las redes sociales.

Estas son las características notables del tema de Gutenberg:

• Instalador de datos de muestra
• Soporte de por vida 24 horas al día, 7 días a la semana
• Código fuente optimizado
• Listo para MailChimp
• Totalmente receptivo
• Diseños de módulos alternativos
• 3 diseños de blog dinámicos

¡Terminando!

Personalizar las plantillas de Gutenberg es una excelente manera de personalizar el editor de Gutenberg para hacer frente a los requisitos personalizados. Al igual que con todo WordPress, el proceso de creación de una plantilla Gutenberg personalizada es una simple cuestión de agregar código en línea o configurar un complemento personalizado.