En este artículo vamos a incluir unos cuantos ejemplos de bloques, que nos servirán para explicar su configuración y opciones, las técnicas utilizadas para su creación y edición, y el resultado que presentan en el sitio web. Por motivos de espacio, y también para no sobrecargar la sesión con ejemplos de bloques que se utilizan raramente, solo presentamos ejemplos de una parte relativamente pequeña de los bloques disponibles.
1. Bloque de audio
Este es un bloque para incrustar ficheros de audio alojados en la biblioteca multimedia de WordPress, al que se ha aplicado la opción de anchura ampliada. No hay que confundirlo con los bloques para incrustar audios que están alojados en servicios de terceros, como Spotify o SoundCloud.
1.1. Lista de reproducción de audio
Por el momento, Gutenberg no cuenta con un bloque de lista de reproducción de ficheros de audio. Sin embargo, para tal fin se puede utilizar el shortcode [playlist]. En el caso que nos ocupa, el shortcode es:
[playlist ids="958,959,960,961"]2. Bloque de vídeo
Este es un bloque para incrustar vídeos alojados en la biblioteca multimedia de WordPress, al que se ha aplicado la opción de anchura completa . No hay que confundirlo con los bloques para incrustar vídeos que están alojados en servicios de terceros, como YouTube, Dailymotion o Vimeo.
2.1. Lista de reproducción de vídeo
Por el momento, Gutenberg no cuenta con un bloque de lista de reproducción de vídeo.
Sin embargo, para tal fin se puede utilizar el shortcode [playlist type="video"]. En el caso que nos ocupa, el shortcode es:
[playlist type="video" ids="970,975,977,979"]3. Bloque de archivo
En los dos ejemplos que aparecen a continuación hemos insertado sendos bloques de archivo, que en ambos casos están enlazados a un fichero de audio. En el primer ejemplo, se muestra el botón de descarga, y en el segundo el fichero descargable se muestra como un enlace.
4. Bloques para citas
El nuevo editor de WordPress incluye dos bloques diferentes para citas, cuyo aspecto puede comprobarse en los epígrafes 4.1 y 4.2.
4.1. Bloque de cita
Si das pescado a un hombre hambriento lo nutres durante una jornada. Si le enseñas a pescar, le nutrirás toda su vida
Lao Tsé.
4.2 Bloque de párrafo de cita
Este bloque admite la anchura ampliada y la anchura completa. En el ejemplo que figura a continuación, hemos utilizado la anchura completa.
Si das pescado a un hombre hambriento lo nutres durante una jornada. Si le enseñas a pescar, le nutrirás toda su vida
Lao Tsé.
5. Bloque de código
Este es un sencillo ejemplo de bloque de código, que en este caso hemos ilustado con una sencilla función en PHP mediante la cual se puede añadir un submenú al menú «Entradas».
function add_re_blocks_admin_menu_item() {
add_posts_page(__('Bloques'), __('Bloques') );
}
add_action('admin_menu', 'add_re_blocks_admin_menu_item');6. Bloque de HTML personalizado
En este caso, el bloque de código HTML personalizado que hemos insertado permite crear un mapa de Google Maps, servicio para el cual WordPress todavía no dispone de un bloque nativo.
7. Bloque preformateado
Este es un bloque de texto preformateado, que admite negrita, cursiva, y otros elementos de formato. Como puede observarse, se representa mediante una fuente monoespaciada, parecida a la clásica Courier.
8. Bloque de tabla
Este bloque admite la anchura ampliada y la anchura completa. En el ejemplo que figura a continuación, hemos utilizado la anchura ampliada.
| Mamíferos | Aves | Reptiles | Peces |
| Perro | Casuario | Lagarto | Piraña |
| Gato | Oropéndola | Cocodrilo | Esturión |
| Gorila | Ruiseñor | Mamba | Salmón |
| Hiena | Gorrión | Dragón de Komodo | Perca |
9. Bloque de verso
Yo no nací sino para quereros;
mi alma os ha cortado a su medida;
por hábito del alma mismo os quiero.
Cuanto tengo confieso yo deberos;
por vos nací, por vos tengo la vida,
por vos he de morir, y por vos muero.
Garcilaso de la Vega, Soneto V
10. Bloque clásico
Este bloque permite elaborar los artículos con un interfaz de edición prácticamente idéntico al del antiguo editor de WordPress.
En el bloque clásico, todo el contenido forma parte de un único bloque, en lugar de estar separado en bloques de distinta naturaleza y funcionalidad.
El bloque cláisco permite algunos elementos de formato que el nuevo editor no permite. Por ejemplo, partes del párrafo en colores diferentes al resto.
11. Bloque de botón
Este bloque sirve para definir botones con diversos estilos. Los tres ejemplos que figuran a continuación ilustran las posibilidades que ofrece el editor de WordPress: bloque redondeado, bloque contorneado y bloque cuadrado.
12. Bloque de columnas
En el ejemplo que aparece a continuación, hemos creado un sencillo bloque de tres columnas, cada una de las cuales contiene, a su vez, dos bloques de párrafo, uno a modo de titular y otro de contenido. En el bloque de columnas se puede utilizar la anchura ampliada y la anchura completa; esta última opción es la que hemos aplicado al ejemplo que figura a continuación.
Titular de la columna 1
Nam ut porttitor nunc. Proin et malesuada ante. Donec a quam ipsum. Duis malesuada, urna sed ullamcorper dignissim, lorem ante semper justo, eget facilisis justo urna sit amet turpis. Nunc vel scelerisque sapien. Proin vitae sapien sed ex pharetra porttitor.
Titular de la columna 2
Nam ut porttitor nunc. Proin et malesuada ante. Donec a quam ipsum. Duis malesuada, urna sed ullamcorper dignissim, lorem ante semper justo, eget facilisis justo urna sit amet turpis. Nunc vel scelerisque sapien. Proin vitae sapien sed ex pharetra porttitor.
Titular de la columna 3
Nam ut porttitor nunc. Proin et malesuada ante. Donec a quam ipsum. Duis malesuada, urna sed ullamcorper dignissim, lorem ante semper justo, eget facilisis justo urna sit amet turpis. Nunc vel scelerisque sapien. Proin vitae sapien sed ex pharetra porttitor.
13. Bloque de medios y texto
Como ya hemos explicado, este bloque permite combinar una imagen y un párrafo que se acopla a ella. Para que funcione correctamente y su efecto estético sea adecuado, hay que tener en cuenta la altura de la imagen y el espacio que ocupa el texto.
Proin sollicitudin velit vitae mauris tristique sollicitudin. Donec vitae iaculis mi. Sed condimentum, dui vitae gravida fermentum, mauris ligula porttitor diam, eget dignissim tortor urna in nisi. Mauris mollis ornare imperdiet.
14. Bloques incrustados
A continuación ofrecemos unos cuantos ejemplos de bloques pertenecientes a la sección «Incurstados». De los 34 bloques nativos de WordPress solo hemos contemplado unos pocos ejemplos. A los bloques de YouTube y TED Talks se les ha aplicado la presentación de anchura completa.
14.1. Artículo de WordPress
14.2. Tema musical y álbum de Spotify
14.3. Vídeo de TED Talks
14.4. Vídeo de YouTube
Por razones que ignoramos, no hemos podido insertar este contenido mediante el bloque de SlideShare, ni tampoco mediante el bloque de elemento incrustado genérico, ni siquiera mediante el bloque de shortcode, que permite copiar y pegar el shortcode específico proporcionado por Slideshare. Solo hemos podido insertar la presentación de este servicio utilizando el bloque de código HTML personalizado, que no, es claro está, la mejor alternativa.
En todo caso, para conseguir un ajuste perfecto de la presentación con respecto a la caja de texto, hemos modificado el código original ofrecido por Slideshare: en lugar de utilizar una anchura absoluta medida en píxels, hemos utilizado una anchura relativa, utilizando un valor en porcentaje. Es decir, en lugar de width="595", hemos utilizado width="100%".
15. Bloque de widget de archivos
Como ya hemos indicado, sirve para mostrar el listado de las entradas del sitio web, ordenadas por meses y años.
- abril 2019 (4)
- marzo 2019 (12)
- febrero 2019 (3)
16. Bloque de widget de categorías
Permite mostrar el listado de las categorías de entradas del sitio web.
17. Bloque de widget de últimas entradas
Este bloque permite dos disposiciones diferentes de las últmias entradas: en forma de lista, o de cuadrícula, que vemos a continuación. Si optamos por la disposición en cuadrícula, se puede seleccionar el número de columnas.
17.1. Entradas en lista
- Documentación y recursos
- Gutenberg en situaciones especiales
- Desactivación de Gutenberg
- Problemas del nuevo editor de WordPress
- Los bloques reutilizables
- Propiedades avanzadas de los bloques
17.2. Entradas en cuadrícula
- Documentación y recursos
- Gutenberg en situaciones especiales
- Desactivación de Gutenberg
- Problemas del nuevo editor de WordPress
- Los bloques reutilizables
- Propiedades avanzadas de los bloques
18. Separadores
Por último, a continuación incluimos tres bloques de separadores, con los distintos estilos que permite WordPress: separador de línea corta, separador de línea larga y separador de puntos.
Deja una respuesta