El blog de dinahosting
  • Inicio
  • Novedades
  • Contenidos Técnicos
    • Marketing
    • Seguridad
    • WordPress
    • Prestashop
  • Eventos
  • Equipo DH
  • Clientes

El blog de dinahosting

  • Inicio
  • Novedades
  • Contenidos Técnicos
    • Marketing
    • Seguridad
    • WordPress
    • Prestashop
  • Eventos
  • Equipo DH
  • Clientes
#HalloweenDH

Suscríbete a nuestra newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

Newsletter
Portada bloques personalizados WP

Cómo crear bloques personalizados en Gutenberg

escrito por Edi Vieito julio 14, 2020

Si has leído nuestro último post sobre Gutenberg te habrá quedado claro que ha llegado para quedarse y que será el editor visual de WordPress en los próximos años.

Aquí te hacemos un repaso rápido por los bloques principales de Gutenberg, con los que tendrás suficiente para montar una página más que digna. Sin embargo, si eres una persona con inquietudes de diseño o necesitas crear bloques personalizados, seguro que se te queda un poco escasa la cantidad de bloques que ofrece de serie para maquetar las páginas y entradas de tu web.

Por eso, hoy vamos a explicarte cómo crear un bloque personalizado. Ten en cuenta que para ello es necesario tener unos conocimientos básicos de HTML y CSS por lo que, si no es tu caso, es mejor que utilices algún plugin. En dinahosting te recomendamos Ultimate Addons for Gutenberg.

¿Sigues aquí? Entonces es que te vas a lanzar al apasionante mundo de la creación de bloques personalizados así que… ¡ánimo y a por todas!

Índice de contenidos

  • 1 Paso 1: Instalación del plugin
  • 2 Paso 2: Añadir el bloque
  • 3 Paso 3: Crear la plantilla de tu bloque
  • 4 Paso 4: Un poco de estilo
  • 5 Paso 5: Disfrutar de tu bloque

Paso 1: Instalación del plugin

Para crear nuestros bloques personalizados vamos a usar el plugin BlockLab, cuya función es comunicar de manera interna el backend y frontend de nuestra plantilla. Por lo tanto, el primer paso será instalar este plugin en nuestro WordPress.

  • En el menú lateral izquierdo de la interfaz de WordPress vamos a Plugins > Añadir nuevo.
  • Buscamos el plugin Block Lab y clicamos en Instalar ahora.

Si todo ha ido correctamente ya tendremos instalado nuestro plugin. El siguiente paso es activarlo.

Activación del plugin Blocklab para crear tus bloques personalizados en Gutenberg (WordPress) | dinahosting

Nos dirigimos al apartado Plugins, buscamos BlockLab y pulsamos Activar.

Paso 2: Añadir el bloque

Con el BlockLab activado nos vamos a este apartado y luego a Añadir nuevo.

Interfaz del plugin Blocklab para crear bloques personalizados en Gutenberg (WordPress) | dinahosting

Ahora te toca cubrir los siguientes campos:

  • Nombre
  • Icono representativo del bloque
  • Categoría en la que lo vamos a introducir
  • Palabras clave
  • Y demás campos. Recuerda que cuanto más completo lo dejes, más sencillo será para un tercero poder trabajar sobre tu página web en WordPress.

En nuestro caso, lo que haremos es preparar una ficha de persona a modo de ejemplo. Suele ser un elemento muy empleado en la construcción del organigrama de una empresa.

Uso del plugin Blocklab para crear bloques personalizados en Gutenberg (WordPress) | dinahosting

Vamos a introducir una imagen, un nombre, su cargo y enlace a redes (LinkedIn y web personal).

Aunque en este ejemplo vayamos a crear este tipo de bloque, tú podrás construir el que más se ajuste a tus necesidades. Tienes algunos tutoriales en la página oficial.

Cuando tengas todo los campos cubiertos, no olvides hacer clic en Publicar.

Paso 3: Crear la plantilla de tu bloque

Aquí es cuando empiezan a ser necesarios los conocimientos de HTML y CSS. Conectaremos estos últimos datos creados en el backend de WordPress con la vista que se mostrará en el navegador.

En nuestro caso crearemos el archivo block-ficha-persona.php (no te asustes que no tienes que saber de PHP, verás que es un código muy fácil de entender).

Te recomiendo que emplees agún editor de código para facilitarte la tarea del marcado. Algunos gratuitos y de los más usados son Brackets y Atom.

En este paso son necesarios los valores de Nombre del campo que has creado en el paso anterior de la creación del bloque.

Uso del plugin Blocklab para crear bloques personalizados en Gutenberg (WordPress) | dinahosting

Aquí te enseño el marcado básico del ejemplo concreto con el que estamos trabajando para el archivo block-ficha-persona.php :

<div class="block-ficha-persona">
    
    <img class="foto" src="<?php block_field('fotografia'); ?>" alt="<?php block_field('nombre-y-apellidos'); ?>">
    
    <h3><?php block_field('nombre-y-apellidos'); ?></h3>
 
    <p class="cargo"><?php block_field('cargo'); ?></p>
 
    <div class="redes">
    <a href="<?php block_field('linkedin'); ?>" class="enlace"><img src="http://edi.dominio-ejemplo.com/wp-content/uploads/2020/06/linkedin.png" alt="linkedIn" title="linkedIn"></a>
    <a href="<?php block_field('website'); ?>" class="enlace"><img src="http://edi.dominio-ejemplo.com/wp-content/uploads/2020/06/web.png" alt="web" title="web"></a>
    </div>
 
</div>

Como ves es muy sencillo. Introduzco la ficha en un div que contiene todo el contenido: una imagen (la fotografía del empleado), un título <h3> que será el nombre y apellido del mismo, un <p> para su cargo y por último un div para enlaces a redes sociales.

Para los enlaces he subido previamente dos archivos .png para hacerlos más visuales y que me sirvan de «botón», pero es perfectamente válido introducirlos como texto.

Ya ves que la única función PHP empleada es block_field(), que es la que nos ayuda a obtener el valor de lo que añadimos en el bloque creado con BlockLab.

Cuando hayas terminado con tu archivo PHP, guárdalo en la ruta indicada por el plugin. En mi caso: /wp-content/themes/twentysixteen/blocks/ block-ficha-persona.php

Paso 4: Un poco de estilo

Ahora toca añadir estilos para conseguir un acabado más vistoso. BlockLab emparenta por defecto los archivos PHP y CSS que tienen el mismo nombre. Únicamente tenemos que subirlos al mismo directorio.

Nuestros estilos para este ejemplo sencillo son:

.block-ficha-persona{
    max-width: 200px;
    padding: 1em;
    margin: 1em .5em;
    text-align: center;
    float: left;
    background-color: rgba(0,0,0,.03)
}

.foto{
    max-width: 100%;
    border-radius: 100% 
}

.enlace img{
    width: 20px;
    padding: 5px;
}

.redes{
    display: flex;
    justify-content: center;
}

Debes subir tu archivo CSS a la misma ruta que el PHP subido anteriormente. En nuestro caso: /wp-content/themes/twentysixteen/blocks/ block-ficha-persona.css

¡Y listo! Ya has creado tu bloque personalizado, ahora únicamente te queda probarlo.

Paso 5: Disfrutar de tu bloque

Para probarlo crea una entrada, accede al editor de bloques y ahí ya tienes el bloque o bloques personalizados que hayas construido.

Ejemplo de bloques personalizados en Gutenberg (WordPress) | dinahosting

Selecciónalo y cubre los campos:

Ejemplo de bloques personalizados en Gutenberg (WordPress) | dinahosting

¡Y voilá! Ya tienes tu bloque personalizado para incluir en tus entradas siempre que quieras.

Ejemplo de bloques personalizados en Gutenberg (WordPress) | dinahosting

Ya sabes que en dinahosting contamos con un hosting especializado en WordPress con el que poner en práctica todo lo que has aprendido. Te lo ofrecemos como autoinstalable desde solo 2,25 €/mes, y cuenta con un montón de añadidos para favorecer la seguridad y el rendimiento de tu web. ¡Llámanos o escríbenos si tienes alguna duda y te asesoramos sin ningún compromiso!

BlockLabdiseñodiseño webGutenbergWordPress
0 comentario
1
Facebook Twitter Google + Pinterest

Deja un comentario Cancelar respuesta

*

code

Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional

Información básica sobre protección de datos

Responsable
Dinahosting S.L.  [+ info]
Finalidad y legitimación
Tratamos los datos que nos proporcionas con la finalidad de gestionar tu comentario, incluida su publicación en nuestro blog. Al enviarnos tu comentario o sugerencia nos das tu consentimiento explícito para que tratemos tus datos con esta finalidad  [+ info]
Destinatarios
Publicamos los comentarios que nos envías en el blog. Enviar un comentario en nuestro blog implica la publicación en el blog del ‘nombre’ y, en su caso, el ‘avatar’ que utilices al dejar el comentario  [+ info]
Derechos
Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad

En dinahosting

Promotion Image

Dominios

Promotion Image

Hosting SSD NVMe

Promotion Image

VPS

Suscríbete a nuestra newsletter

Promotion Image Newsletter

Newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL. [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter.[+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal.[+info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción.[+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad.

Conviértete en afiliado

Gana dinero recomendando dinahosting a todo el mundo.
Hazte afiliado

¡Síguenos!

Facebook Twitter Instagram Linkedin Youtube
dinahosting
Facebook Twitter Instagram Linkedin Youtube

LLÁMANOS GRATIS

900 854 000


ESCRÍBENOS

soporte@dinahosting.com

En dinahosting

  • Hosting
  • Dominios

Área privada

  • Panel de administración
  • Webmail
  • Feedback
  • Protección de datos
  • Ayuda
  • 900 854 000
  • soporte@dinahosting.com

@2020 - Dinahosting

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL  [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter  [+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal  [+ info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad