Cómo crear un bloque Gutenberg personalizado en WordPress (forma fácil)

¿Quiere crear un bloque Gutenberg personalizado para su sitio de WordPress? Después de la actualización de WordPress 5.0, debe usar bloques para crear contenido en el nuevo editor de bloques de WordPress.

WordPress se envía con varios bloques útiles que puede usar al escribir contenido. Muchos WordPress plugins también vienen con sus propios bloques que puedes usar.

Sin embargo, a veces es posible que desee crear su propio bloque Gutenberg personalizado para hacer algo específico.

Si está buscando una solución fácil para crear bloques Gutenberg personalizados para su sitio de WordPress, entonces está en el lugar correcto.

En este tutorial paso a paso, le mostraremos la manera fácil de crear un bloque de WordPress personalizado para Gutenberg.

Nota: Este artículo es para usuarios intermedios. Deberá estar familiarizado con HTML y CSS para crear bloques Gutenberg personalizados.

Paso 1: Empiece

Lo primero que debe hacer es instalar y activar el Laboratorio de bloques plugin.

Es un WordPress plugin que le permite crear bloques personalizados desde su panel de administración sin mucha molestia.

Complemento de WordPress de Block Lab

Para instalar el plugin, puede seguir nuestra guía para principiantes sobre cómo instalar un WordPress plugin.

Una vez el plugin está activado, puede continuar con el siguiente paso para crear su primer bloque personalizado.

Paso 2: crea un nuevo bloque

Por el bien de este tutorial, crearemos un bloque de ‘testimonios’.

Primero, dirígete a Block Lab »Agregar nuevo desde la barra lateral izquierda de su panel de administración.

En esta página, debe dar un nombre a su bloque. Puede escribir cualquier nombre de su elección en el cuadro de texto “Ingrese el nombre del bloque aquí”.

Ingrese el nombre del bloque personalizado

Nombraremos nuestro bloque personalizado: Testimonios.

En el lado derecho de la página, encontrará las propiedades del bloque. Aquí puede elegir un icono para su bloque y seleccionar una categoría de bloque del cuadro desplegable Categoría.

El slug se completará automáticamente según el nombre de su bloque, por lo que no tiene que cambiarlo. Sin embargo, puede escribir hasta 3 palabras clave en el campo de texto Palabras clave, para que su bloque se pueda encontrar fácilmente.

Propiedades de bloque personalizadas

Ahora agreguemos algunos campos a nuestro bloque. Puede agregar diferentes tipos de campos como texto, números, correo electrónico, URL, color, imagen, casilla de verificación, botones de radio y mucho más.

Agregaremos 3 campos a nuestro bloque de testimonios personalizado: un campo de imagen para la imagen del revisor, un cuadro de texto para el nombre del revisor y un campo de área de texto para el texto del testimonio.

Haga clic en el + Agregar campo para insertar el primer campo.

Opciones de campo de imagen

Esto abrirá algunas opciones para el campo. Echemos un vistazo a cada uno de ellos.

  • Etiqueta de campo: Puede utilizar cualquier nombre de su elección para la etiqueta del campo. Nombramos nuestro primer campo como Imagen de revisor.
  • Nombre del campo: El nombre del campo se generará automáticamente en función de la etiqueta del campo. Usaremos este nombre de campo en el siguiente paso, así que asegúrese de que sea único para cada campo.
  • Tipo de campo: Aquí puede seleccionar el tipo de campo. Queremos que nuestro primer campo sea una imagen, así que seleccionaremos Imagen en el menú desplegable.
  • Ubicación del campo: Puede decidir si desea agregar el campo al editor o al inspector.
  • texto de ayuda: Puede agregar texto para describir el campo. Esto no es necesario si está creando este bloque para su uso personal.

También puede obtener algunas opciones adicionales según el tipo de campo que elija. Por ejemplo, si selecciona un campo de texto, obtendrá opciones adicionales como texto de marcador de posición y límite de caracteres.

Puedes hacer click en el Cerrar campo una vez que haya terminado con el campo de imagen.

Siguiendo el proceso anterior, agreguemos otros 2 campos para nuestro bloque de testimonios haciendo clic en el + Agregar campo botón.

Campos de bloque personalizados finales

En caso de que desee reordenar los campos, puede hacerlo arrastrándolos usando el icono de hamburguesa en el lado izquierdo de la etiqueta de cada campo.

Para editar o eliminar un campo en particular, debe pasar el mouse sobre la etiqueta del campo para obtener las opciones de edición y eliminación.

Una vez que haya terminado, haga clic en el Publicar , presente en el lado derecho de la página, para guardar su bloque Gutenberg personalizado.

Paso 3: crea una plantilla de bloque

Aunque ha creado el bloque personalizado de WordPress en el último paso, no funcionará hasta que cree una plantilla de bloque llamada block-testimonials.php y la cargue en su carpeta de temas actual.

Crear una plantilla de bloque

El archivo de plantilla de bloque le dirá al plugin cómo mostrar sus campos de bloque dentro del editor. La plugin buscará el archivo de plantilla y luego lo usará para mostrar el contenido del bloque.

Si no tiene este archivo, mostrará un error que dice “No se encontró el archivo de plantilla blocks / block-testimonials.php”.

Creemos el archivo de plantilla de nuestro bloque.

Primero, cree una carpeta en su escritorio y asígnele un nombre bloques. Creará su archivo de plantilla de bloque dentro de esta carpeta y luego lo cargará en su directorio actual de temas de WordPress.

Para crear el archivo de plantilla, puede utilizar un editor de texto sin formato como el Bloc de notas.

Cada vez que agrega un nuevo campo a su bloque personalizado, debe agregar el siguiente código PHP a su archivo de plantilla de bloque:

<?php block_field( 'add-your-field-name-here' ); ?>

Solo recuerda reemplazar agregue-su-nombre-de-campo-aquí con el nombre del campo.

Por ejemplo, el nombre de nuestro primer campo es reviewer-image, por lo que agregaremos la siguiente línea al archivo de plantilla:

<?php block_field( 'reviewer-image' ); ?>

Simple, ¿no es así? Hagamos lo mismo para el resto de nuestros campos:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

A continuación, agregaremos algunas etiquetas HTML al código anterior con fines de estilo.

Por ejemplo, puede envolver la imagen del revisor dentro de una etiqueta img para mostrar la imagen. De lo contrario, WordPress mostrará la URL de la imagen que no es la que desea, ¿verdad?

También puede agregar nombres de clases a sus etiquetas HTML y envolver su código dentro de un contenedor div para diseñar el contenido de su bloque (lo que haremos en el siguiente paso).

Así que aquí está nuestro código final para nuestra plantilla de bloque:

<div class="testimonial-block clearfix">
    <div class="testimonial-image">
        <img src ="<?php block_field( 'reviewer-image' ); ?>">
    </div>
    <div class="testimonial-box">
        <h4><?php block_field( 'reviewer-name' ); ?></h4>
        <p><?php block_field( 'testimonial-text' ); ?></p>
    </div>
</div>

Finalmente, nombre el archivo como block-testimonials.php y guárdelo dentro del bloques carpeta.

Paso 4: Diseñe su bloque personalizado

¿Quieres darle estilo a tu bloque personalizado? Puedes hacerlo con la ayuda de CSS.

Abra un editor de texto sin formato como el Bloc de notas y agregue el siguiente código:

.testimonial-block {
    width: 100%;
    margin-bottom: 25px;
}

.testimonial-image {
    float: left;
    width: 25%;
    padding-right: 15px;
}

.testimonial-box {
    float: left;
    width: 75%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Una vez hecho esto, nombre el archivo como block-testimonials.css y guárdelo dentro del bloques carpeta.

Paso 5: Cargue el archivo de plantilla de bloque a la carpeta de temas

Ahora carguemos el bloques carpeta que contiene nuestro archivo de plantilla de bloque personalizado a nuestra carpeta de temas de WordPress.

Para hacer eso, necesita conectarse a su sitio de WordPress utilizando un cliente FTP. Para obtener ayuda, puede consultar nuestra guía sobre cómo cargar archivos en su sitio de WordPress mediante FTP.

Una vez que esté conectado, vaya a la carpeta / wp-content / themes /. Desde aquí, debe abrir su carpeta de temas actual.

Ingrese a la carpeta del tema usando FTP

Ahora sube el bloques carpeta, que contiene el archivo de plantilla de bloque y el archivo CSS, a su directorio de temas.

Una vez hecho esto, puede continuar con el paso final para probar su bloque personalizado.

Nota: Laboratorio de bloques plugin le permite crear bloques de temas específicos. Si cambia su tema de WordPress, entonces necesita copiar la carpeta de bloques a su nuevo directorio de temas.

Paso 6: prueba tu nuevo bloque

Es hora de probar nuestro bloque de testimonios personalizados. Puede hacer esto dirigiéndose a Paginas » Agregar nuevo para crear una nueva página.

A continuación, haga clic en el Agregar bloque (+) y busque el bloque Testimonios. Una vez que lo encuentre, haga clic en él para agregar el bloque personalizado a su editor de página.

Agregar bloque personalizado al editor de páginas

Ahora puede agregar un testimonio a esta página usando su bloque personalizado. Para agregar más testimonios, siempre puede insertar nuevos bloques de testimonios.

Una vez que haya terminado, puede obtener una vista previa o publicar la página para comprobar si funciona correctamente o no.

¡Eso es todo! Ha creado con éxito su primer bloque de WordPress personalizado para su sitio.

¿Sabías que puedes ahorrar tiempo con bloques reutilizables en tu editor? Consulte nuestra guía sobre cómo crear fácilmente bloques reutilizables en el editor de bloques de WordPress y utilizarlos en otros sitios web.

Es posible que también desee ver nuestra guía sobre cómo crear un tema de WordPress personalizado sin escribir ningún código.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

.

Fuente: wpbeginner

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *