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

¿Le gustaría crear un bloque personalizado de Gutenberg para su sitio de WordPress? Después de actualizar WordPress 5.0, debe usar bloques para crear contenido en el nuevo editor de bloques de WordPress. WordPress se entrega con varios bloques útiles que puede usar al escribir contenido. Muchos complementos de WordPress también vienen con sus propios bloques que puede usar. Sin embargo, a veces es posible que desee crear su propio bloque personalizado de Gutenberg para hacer algo. Si está buscando una solución ligera para crear bloques de Gutenberg personalizados para su sitio web de WordPress, entonces está en el lugar correcto.
En este tutorial de paso, le mostraremos la manera fácil de crear un bloque de WordPress personalizado para Gutenberg.

Nota: Este elemento está destinado a usuarios intermedios. Deberá familiarizarse con HTML y CSS para crear bloques de Gutenberg personalizados. Paso 1: Inicie lo primero que debe hacer es instalar y activar el complemento de laboratorio de bloques. Es un complemento de WordPress que le permite crear bloques personalizados a partir de su panel de administración suave.

Para instalar el complemento, puede seguir nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.
Una vez que se activa el complemento, puede pasar al siguiente paso para crear el primer bloque personalizado. Paso 2: Cree un nuevo bloque en aras de este tutorial, construiremos un bloque de “testimonio”. Primero, vaya a Block Lab »Agregar nuevo desde la barra lateral izquierda del 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 “Escriba el nombre del bloque aquí”.

Llamaremos a 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 puede seleccionar una categoría de bloques en el cuadro de categoría desplegable. La LUG se complementará automáticamente en función del nombre de su bloque, para que no tenga que cambiarlo. Sin embargo, puede escribir hasta 3 palabras clave en el campo de las palabras clave para que su bloque se pueda encontrar fácilmente.
Ahora agregemos algunos campos a nuestro bloque. Puede agregar diferentes tipos de campos, como texto, números, correo electrónico, URL, color, imagen, cuadro de selección, botones de radio y más. Agregaremos 3 campos a nuestro bloque de prueba personalizado: un campo de imagen para la revisión del revisor, un cuadro de texto para el nombre de revisión y un campo de texto para la prueba del testimonio.

Haga clic en el campo Agregar + para insertar el primer campo.
Esto abrirá algunas opciones de campo. Echemos un vistazo a cada uno de ellos.

Etiqueta de campo: puede usar cualquier nombre de nombre para la etiqueta de campo. Llamemos a nuestro primer campo como revisor de imágenes.
Nombre del campo: el nombre del campo se generará automáticamente en función de la etiqueta de 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, por lo que seleccionaremos la imagen en el menú Drop -down.
Ubicación del campo: puede decidir si desea agregar el campo al editor o el inspector.
Texto de ayuda: puede agregar un texto para describir el campo. Esto no es necesario si crea este bloque para uso personal.
También puede obtener algunas opciones adicionales dependiendo del tipo de campo que elija. Por ejemplo, si selecciona un campo de texto, recibirá opciones adicionales, como el texto sustituyente y el límite de caracteres. Puede hacer clic en el botón Cerrar el campo después de haber terminado con el campo de imagen. Después del proceso anterior, agregue otros 2 campos para nuestro bloque testimonial, haciendo clic en el botón de adición del campo +.
Si desea reordinar los campos, puede hacerlo tirando de ellos usando el icono de la hamburguesa en el lado izquierdo de cada etiqueta de campo. Para editar o eliminar un campo en particular, debe cruzar el mouse sobre la etiqueta de campo para obtener las opciones de edición y eliminación. Después de haber terminado, haga clic en el botón Publicar, presente en el lado derecho de la página, para guardar el bloque personalizado de Gutenberg.
Paso 3: Cree una plantilla de bloqueo aunque haya creado el bloque personalizado de WordPress en el último paso, no funcionará hasta que cree un bloque llamado Bloque Testimonials.php y lo cargue en la base actual.

La plantilla de bloqueo le dirá al complemento cómo mostrar los campos de bloqueo en el editor. El complemento 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 “plantilla de plantilla / bloquea testimonials.php no se ha encontrado”. Creemos el archivo de plantilla de nuestro bloque. Primero, continúe y cree una carpeta en el escritorio y asígnele. Creará el archivo de plantilla de bloqueo en esta carpeta y luego lo cargará en el directorio temático de WordPress actual.
Para crear el archivo de plantilla, puede usar un editor de texto simple, como el bloc de notas. Cada vez que agrega un nuevo campo al bloque personalizado, debe agregar el siguiente código PHP a la plantilla de bloque: < ? Por ejemplo, el nombre de nuestro primer campo es la imagen revisor, por lo que agregaremos la siguiente línea al archivo de plantilla: Simple, ¿no? Para hacer lo mismo para el resto de nuestros campos:


Luego agregaremos algunas etiquetas HTML al código anterior para fines de estilo.
Por ejemplo, puede envolver la imagen del revisor en una etiqueta IMG para mostrar la imagen. De lo contrario, WordPress mostrará la URL de la imagen, que no es lo que quieres, ¿verdad? También puede agregar nombres de clases a las etiquetas HTML y puede envolver el código en un contenedor DI para estilizar el contenido de su bloque (lo que haremos en este próximo paso). Aquí está nuestro código final para nuestra plantilla de bloque:
<img src = "”>

Finalmente, nombra el archivo como bloques testimonials.php y guárdelo en el bloque. Puedes hacer esto con la ayuda de CSS. Abra un editor de texto simple como el bloc de notas y agregue el siguiente código: .testimonial-block {
Ancho: 100%;
margen de fondo: 25px;
}
.Mirante testimonial {
Flotador izquierdo;
Ancho: 25%;
Right de relleno: 15px;
}
.Testimonial-box {
Flotador izquierdo;
Ancho: 75%;
}
.Clearfix :: After {
Contenido: “”;
Limpia los dos;
Pantalla: tabla;
} Después de que haya terminado, nombre el archivo como bloques testimonials.css y guárdelo en la carpeta de bloques. Paso 5: Cargue el archivo de plantilla de bloqueo en la carpeta temática ahora para cargar la carpeta de bloque que contiene nuestra plantilla de bloque personalizada en la carpeta temática de WordPress.
Para hacer esto, debe iniciar sesión en su sitio de WordPress utilizando un cliente FTP. Para obtener ayuda, puede consultar a nuestra guía sobre cómo cargar archivos en su sitio de WordPress usando FTP. Después de conectarse, vaya a la carpeta / WP-Account / Temas /. Desde aquí debe abrir la carpeta de tema actual.
Ahora cargue la carpeta de bloque, que contiene el archivo de plantilla de bloque y el archivo CSS, en el directorio del directorio. Después de haber terminado, puede pasar al paso final para probar su bloque personalizado. Nota: El complemento de laboratorio de bloques le permite crear una base específica. Si cambia su tema de WordPress, debe copiar la carpeta de bloque a su nuevo director de tema. Paso 6: Prueba El nuevo bloque es el momento de probar nuestro bloque de testimonios personalizado. Puede hacerlo accediendo a páginas »Agregar nuevo para crear una nueva página. Luego haga clic en el icono de bloque Agregar (+) y busque el bloque de prueba. Después de encontrarlo, haga clic en él para agregar el bloque personalizado al editor de páginas. Ahora puede agregar un testimonio a esta página utilizando el bloque personalizado. Para agregar más testimonios, puede introducir nuevos bloques de testimonios en cualquier momento. Una vez que haya terminado, puede obtener una vista previa o publicar la página para verificar si funciona o no. ¡Eso es todo! ¿Ha creado con éxito el primer bloque de WordPress personalizado para su sitio? ¿Sabía que puede ahorrar tiempo con bloques reutilizables en su editor? Vea nuestra guía sobre cómo crear fácilmente bloques reutilizables en el editor de bloques de WordPress y usarlos en otros sitios web. También es posible que desee ver nuestra guía sobre cómo crear un tema personalizado de WordPress sin escribir ningún código. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.