Crea un Bloque Personalizado para Gutenberg en WordPress • Silo Creativo

1638880646 Crea un Bloque Personalizado para Gutenberg en WordPress • Silo

Cuando le mostramos a un cliente del servicio de qué manera marcha el nuevo editor de WordPress, Gutenberg, muchos se sorprenden de lo simple que es añadir bloques con diferentes funcionalidades sencillamente seleccionándolos de una lista. Pero siempre y en toda circunstancia llega un punto en el que preguntan: ¿Y no hay un bloque con el que pueda hacer una sección de testimonios?. ¿O bien ese bloque con imagen y texto de CTA en una predisposición concreta?. Y ahí es cuando vemos el necesita crear un bloque personalizado para Gutenberg que nos deja cubrir determinadas necesidades.

Y podríamos hacer esto desde cero si tenemos algún conocimiento de Javascript. Afortunadamente, tenemos múltiples complementos en el repositorio de complementos de WordPress con los que, visualmente y con algunos conocimientos de HTML y CSS podemos edificar nuestros bloques de una forma fácil. Y eso es lo que haremos el día de hoy, merced a Lazy Blocks.

Como siempre y en toda circunstancia, ya antes de zambullirnos en la creación de bloques adaptados, decidamos qué deseamos hacer. En persona, Decidí configurar un bloque de testimonios, con diferentes secciones. Veamos de qué manera hacerlo desde cero.

Índice

    Diseñando nuestro bloque de testimonios personalizado

    Fui a Affinity Designer, mi programa de edición de vectores preferido, para conseguir una primera aproximación de cada uno de ellos de los elementos que tendré y su predisposición. Es aconsejable efectuar este primer boceto, así sea en papel o bien digital, para tener una idea precisa de lo que deseamos por adelantado. Esto nos ahorrará bastante tiempo después.

    bosquejar testimonios de boca

    Puedes ver que es algo simple por el hecho de que no deseamos edificar un bloque muy complejo esta primera vez. Seremos simples y vamos a hacer trucos reales con los bloques. Una vez que tengamos claro nuestro diseño, pasemos a Lazy Blocks y empecemos a trabajar en WordPress.

    Creando nuestro bloque adaptado en bloques perezosos

    En primer sitio, vayamos a la sección Bloques perezosos del panel de administración de WordPress y hagamos click en agregar nuevo para crear nuestro primer bloque. esta nueva ventana tiene una interfaz afín a Gutenberg, con lo que si está habituado a trabajar con él, no va a tener muchos inconvenientes para orientarse en cada una de las secciones.

    Miramos al inspector situado en el lado derecho, donde comenzaremos a ingresar al bloquear información general deseamos edificar. Le vamos a dar un título y una babosa con la que va a ser simple de reconocer. También podemos incorporar un icono entre las decenas que nos ofrece este complemento, para que nuestro bloque tenga buena presencia.

    En la una parte de categoría, designamos en qué sección deseamos que aparezca entre las designadas por Gutenberg. En nuestro caso, podemos considerarlo un elemento de diseño. Si el bloque es utilizado por otras personas, es importante añadir una descripción ayuda saber qué hace el bloque.

    Finalmente, en el apartado de Enfermedad en el inspector, podemos decidir si este bloque se puede emplear en todo género de publicaciones y páginas, o bien si va a ser restringido a algún género de modelo solamente. Esto es realmente útil si creamos un bloque muy concreto para emplear solo en un cierto género de página que emplea una plantilla. Por lo tanto, garantizamos que no se puede emplear en ningún otro sitio de la página web.

    Una vez que hayamos terminado esta parte, empecemos a edificar nuestro bloque adaptado.

    Añadiendo campos de nuestro bloque

    Nuestro bloque de testimonios adaptado consta de cuatro campos diferentes, en este orden de presentación: sentencia del testimonio, imagen del autor del testimonio, nombre del autor del testimonio y profesión del autor del testimonio. En resumen, tenemos 3 campos de texto y un campo de imagen. Algo fácil para comenzar.

    controles de opciones de wordpress de bloques perezosos

    Y cada uno de ellos de estos 4 campos son los que debemos ingresar como Control S en los Lazy Blocks. Hagamos click en + Agregar control para añadir un nuevo campo, y vamos a ver de qué manera cambia nuestro inspector en el lado derecho. Veamos de qué manera marcha pieza a pieza:

    • Etiqueta - es el título que va a tener el campo. Por ejemplo, pongamos este primero sentencia de testimonio. Como siempre y en toda circunstancia, es esencial seleccionar un título gráfico para que no haya margen de fallo.
    • Nombre - Este campo se va a llenar por defecto conforme a lo que ingresamos en el precedente. Esta parte es esencial puesto que es la que usaremos en nuestro HTML más adelante.
    • Modelo -Aquí viene lo esencial, y es que con lo que vamos a designar qué género de elemento tenemos a mano. Para el enunciado en el enunciado, como sabemos que es un texto que puede tener cierta longitud, escogeremos área de texto. Para la imagen testimonial usaremos la opción Imagen. Y los otros 2 campos que quedan, siendo de menor longitud, con Texto vamos a tener más que suficiente. En esta parte debes explorar un poco para ver la cantidad de opciones libres en el momento de crear tu bloque: campos para introducir correos, selector de color, URL, galerías de imágenes, ficheros ...
    • texto de ayuda - fundamental si el bloque que creamos será empleado por terceros. Aquí podemos redactar un texto que explique qué hace esto. Al control en particular, o bien si es una imagen, podemos redactar la resolución recomendada que debería tener.
    • Colocación - podemos seleccionar si deseamos las opciones de este Al control, como el campo para ingresar el texto, o bien lugar desde donde vamos a subir la imagen, aparece en la una parte de contenido del editor de Gutenberg (Contento), en el panel lateral derecho (Inspector), en los dos, o bien continuar ocultos.
    Te puede Interesar  Guía de cómo migrar WordPress a otro hosting o servidor [2022]

    Estos campos cambian conforme el Modelo que elegimos. Si es un texto, podemos añadir un marcador de posición o bien una restricción de carácter. O bien, si carga ficheros, puede designar el género de extensión del archivo que deseamos cargar.

    Para nuestro bloque de testimonios adaptado, nos queda algo como esto:

    Inserta algo de HTML en el bloque

    Ahora procedamos a agregar el html, que nos va a ayudar a decidir el orden de cada sección de nuestro bloque y darle estilo más tarde con CSS.

    opciones html de wordpress de bloques perezosos

    Como afirmamos ya antes, tomemos el Nombre de cada uno de ellos de nuestros Control S. Una vez que los tenemos, vemos que justo bajo nuestro Control S vamos a tener una sección llamada Código. En la pestañita HTML de Frontend, es ¿Dónde comenzaremos a redactar nuestro código?. Aquí, debemos presentar cada uno de ellos de los nombres que empleamos, con 2 tirantes de apertura y cierre. Tendremos algo afín a este código:

    {{frase-testimonio}}
    {{imagen-testimonio.url}}
    {{autor-testimonio}}
    {{profesion-autor-testimonio}}

    Eso sería suficiente puesto que te vamos a estar contando todos y cada uno de los elementos que deseamos ver. Pero si introducimos algo de HTML, vamos a tener más simple de peinar. Si no está muy al día con este lenguaje, le aconsejamos que lea nuestro artículo propedéutico en HTML, que indudablemente responderá a muchas preguntas.

    Lo que haremos es crear un contenedor general donde va nuestra libreta de testimonios y demos una clase para cada uno de ellos de sus elementos. Este sería el código HTML final:

    <div class="testim-container">
    <p class="testim-content">{{frase-testimonio}}</p>
    <img class="textim-img" src="https://www.silocreativo.com/crea-bloque-adaptado-gutenberg-wordpress/{{imagen-testimonio.url}}" />
    <p class="testim-author">{{autor-testimonio}}</p>
    <p class="testim-job">{{profesion-autor-testimonio}}</p>
    </div>

    Ahora solo tenemos un paso más para concluir nuestro bloque: aplicar CSS para que se vea como lo vemos.

    Para diseñar nuestros bloques

    El código CSS que vamos a emplear es muy básico, mas si tiene alguna pregunta, puede preguntar nuestro artículo CSS para solucionar cualquier duda si comienza. Simplemente, lo que haremos es aplicar un degradado de color en el fondo del bloque, afinar los textos y hacer que la imagen tenga un marco circular. Este sería el CSS precisamos para esto:

    .testim-container {
        padding: 30px;
        max-width: 500px;    
        border-bottom: 5px solid #159de2;
        background: #485563;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to bottom, #29323c, #485563);  /* Chrome diez-veinticinco, Safari cincuenta y uno-seis */
        background: linear-gradient(to bottom, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .testim-container .testim-content {
        font-size: 16px;
        font-style: italic;
        color: #ffffff;
        text-align: center;
    }
    
    .testim-container .testim-img {
        margin: 20px auto;
        max-width: cincuenta%;
        border-radius: cincuenta%;
        border: 5px solid #ffffff;
    }
    
    .testim-container .testim-author {
        margin-bottom: 10px;
        font-size: 26px;
        color: #ffffff;
        text-align: center;
    }
    
    .testim-container .testim-job {
        margin-bottom: 5px;
        color: #159de2;
        font-weight: 700;
        text-align: center;
    }

    Con eso ya tendríamos el bloque testimonial completamente configurado. Aunque pueda parecer un proceso largo, agradecemos que no debas acoplar cada uno de ellos de los elementos de este género de bloques uno a uno.

    Y ahora podemos emplear nuestro bloque en Gutenberg.

    Ahora solo deberíamos crear o bien editar una nueva entrada o bien página, buscar nuestro bloque, y esto es lo que debería aparecer:

    boca testimonios vacíos en gutenberg

    Ahora tan simple como llenar los campos de texto, seleccionar una imagen y listo.

    testimonios de bloques personalizados de apariencia final

    Por supuesto este bloque podemos emplearlo en otros bloques, como la columna uno, si deseamos ver múltiples testimonios en exactamente la misma fila.

    Con estos conceptos básicos, podemos crear prácticamente cualquier género de bloque para Gutenberg no es preciso redactar una sola línea de Javascript. Además de Lazy Blocks, hay otros burladores de bloques visuales para Gutenberg como Block Lab o bien Advanced Custom Fields. Te aconsejamos que le eches un vistazo, puesto que tienen una operación afín, y consigues el que te hace sentir más cómodo.

    Como siempre y en toda circunstancia, sus comentarios están abiertos a cualquier pregunta, sugerencia o bien adición que pueda tener. Esperamos que este artículo te haya ayudado y que puedas empezar a crear tus bloques adaptados para Gutenberg.

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información