Primeros patrones para el directorio de patrones de WordPress.org

Una vez se lance el directorio de patrones, los usuarios podrán añadir directamente sus propios patrones. Sin embargo, mientras tanto, el proyecto necesita una colección de patrones de alta calidad, diversos y diseñados por la comunidad, para poblarlo durante su etapa de desarrollo. Estos patrones establecerán el tono de la calidad en el repositorio y harán que el directorio sea útil para la gente en su lanzamiento.

El equipo de diseño ya ha elaborado un pequeño conjunto de patrones para dar el pistoletazo de salida. Si usas el plugin Gutenberg, habrás notado recientemente un nuevo conjunto de patrones de bloques agrupados en el insertador de patrones:

Estos patrones han sido diseñados por @beafialho, @melchoyce y @kjellr como iteraciones del conjunto por defecto que se envió con WordPress 5.5. Ya han sido migrados al próximo directorio de patrones en WordPress.org para ser probados allí.

¡Este pequeño conjunto inicial es solo el principio! Los tres siguen diseñando patrones para alimentar el directorio de patrones y nos encantaría que nos ayudaras. Te animamos a que envíes propuestas como candidatos a patrones (en forma de maquetas y/o bloques) utilizando la etiqueta «[Type] Pattern Submission» en el repositorio GitHub del directorio de patrones. Hay una plantilla de envío ya creada para ayudarte a empezar.

En esta primera fase, el equipo de diseño revisará cada patrón sugerido y trabajará para identificar una lista de criterios sobre qué tipos de patrones son buenos candidatos para su publicación en el directorio.

Por favor, comparte cualquier pregunta o inquietud en los comentarios de la entrada Initial Patterns for the WordPress.org Patterns Directory. ¡Estamos deseando hacer crecer el directorio de patrones entre todos juntos!

WordPress 5.8 añade compatibilidad con imágenes WebP

WebP es un formato de imagen moderno que ofrece una mejor compresión con y sin pérdidas para las imágenes en la web. Las imágenes WebP son un 30% más pequeñas de media que sus equivalentes JPEG o PNG, por lo que los sitios son más rápidos y utilizan menos ancho de banda. Según caniuse, WebP es compatible con todos los navegadores modernos.

A partir de la versión 5.8 de WordPress, puedes subir y utilizar imágenes WebP en WordPress como lo harías con una imagen JPEG o PNG hoy en día (siempre y cuando tu servicio de alojamiento soporte WebP). El cambio al formato WebP para tus imágenes mejorará el rendimiento de tu sitio y la experiencia de tus visitantes. 

Cómo te ayuda WebP

Las imágenes WebP son significativamente más pequeñas que sus equivalentes JPEG, por lo que los visitantes de tu sitio verán la página completa cargada más rápidamente. Las imágenes más pequeñas necesitan menos ancho de banda para transmitirse, y tus imágenes siguen obteniendo todos los beneficios de respuesta de srcset y lazy loading por defecto. Por último, WebP es compatible con los principales navegadores, por lo que la mayoría de los sitios pueden empezar a utilizarlo hoy mismo.

Creando imágenes WebP

Las herramientas de edición de imágenes soportan la exportación en WebP; también puedes utilizar las herramientas de conversión por línea de comandos o herramientas basadas en la web como Squoosh. Una vez que guardes tus imágenes como WebP, súbelas a WordPress y utilízalas como harías con cualquier otra imagen.

Usando imágenes WebP

Las imágenes WebP funcionan como cualquier otra imagen en WordPress con algunas pequeñas advertencias.

Las imágenes WebP admiten compresión con y sin pérdida, así como un formato animado y compatibilidad para imágenes transparentes. En WordPress, el formato WebP sin pérdidas sólo es compatible cuando el servidor de alojamiento utiliza Imagick hasta que LibGD añada soporte. Además, los formatos animados y alfa aún no son compatibles con las imágenes redimensionadas (en su lugar se crean imágenes con pérdida cuando se suben en estos formatos).

La compatibilidad con WebP en la biblioteca de medios requiere que la biblioteca de procesamiento de imágenes de tu servidor web (WordPress soporta tanto Imagick como GD) soporte el formato WebP. Afortunadamente, estas bibliotecas han sido compatibles con WebP durante bastante tiempo, por lo que la compatibilidad está ampliamente disponible. Si tu servidor web no admite WebP, verás un mensaje de error cuando intentes subir una imagen WebP.

Si tu audiencia incluye un número significativo de usuarios en un navegador no compatible (Internet Explorer 11, por ejemplo), evita usar imágenes WebP, o utiliza un sistema de colas del tipo browser polyfill.

Planes para el futuro

El equipo del componente multimedia también está explorando la opción de que WordPress realice la conversión del formato de imagen en las imágenes subidas, utilizando WebP como formato de salida por defecto para las imágenes de tamaño inferior. Puedes seguir el progreso y probar esta función en el trac ticket. También estamos pendientes de formatos aún más modernos, como AVIF y JPEGXL, que mejorarán la compresión y reducirán aún más los recursos necesarios para la misma.

Preguntas frecuentes

¿Cómo puedo ajustar la calidad de compresión de las imágenes WebP?

Los desarrolladores o plugins pueden utilizar el filtro wp_editor_set_quality para establecer el ajuste de calidad. El tipo MIME pasado permite el ajuste por tipo, por ejemplo:

// Use a quality setting of 75 for WebP images.
function filter_webp_quality( $quality, $mime_type ) {
  if ( 'image/webp' === $mime_type ) {
     return 75;
  }
  return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_webp_quality', 10, 2 );

¿Qué sucede si activo el filtro para usar sub-tamaños de WebP, pero subo JPEG? ¿Los sub-tamaños tienen que coincidir con el original?

Por defecto, WordPress crea las imágenes de sub-tamaño del mismo tipo que el archivo subido, así que sube archivos WebP para obtener archivos WebP en tu sitio. Si quieres experimentar con la subida de JPEG y que WordPress los convierta automáticamente a WebP para tus imágenes de distintos sub-tamaños, echa un vistazo a este plugin (ticket de trac relacionado).

Si utilizo WordPress MultiSitio, ¿funcionarán todos mis sitios con imágenes WebP?

No. WordPress MultiSitio almacena los tipos de archivos que los usuarios pueden subir cuando se crea un sitio. Estamos trabajando para mejorar esto en #53167. Mientras tanto, para asegurarse de que todos los sitios existentes en una red permiten archivos WebP, puedes utilizar el filtro site_option en un mu-plugin de red para añadir webp a los tipos de archivo permitidos para todos los sitios de la red:

// Ensure all network sites include WebP support.
add_filter(
  'site_option_upload_filetypes',
  function ( $filetypes ) {
    $filetypes = explode( ' ', $filetypes );
    if ( ! in_array( 'webp', $filetypes, true ) ) {
      $filetypes[] = 'webp';
      $filetypes   = implode( ' ', $filetypes );
    }

    return $filetypes;
  }
);

¿Cómo crear bloques reutilizables y para qué sirven?

El editor de bloques de WordPress, conocido como Gutenberg, te permite guardar un bloque o grupos de bloques para poder usarlos en el futuro. Si habitualmente creas los mismos contenidos o bloques con diseños complejos para diferentes páginas web o publicaciones, puedes editarlos una sola vez y reutilizarlos las veces que necesites en tan solo unos segundos.

¿Qué significa bloques reutilizables?

Supongamos que debes crear un bloque con diseño complejo con el mismo texto y estructura y que más tarde deberá aparecer en varias páginas. Puedes usar la función “bloques reutilizables” y editar todos tus bloques desde un solo lugar, y cualquier publicación o página en la que hayas insertado ese bloque, aparecerá automáticamente la versión actualizada.

Tal y como usamos plantillas para estructurar nuestro sitio web, también podemos usar bloques reutilizables para estructurar el contenido. Por ejemplo:

  • Testimonios que aparecen en la página de inicio y en la del producto.
  • Tablas de contenidos o diseños de columnas.
  • Elementos que generan una interacción con el usuario: botones, llamadas a la acción, advertencias, avisos importantes, etc.
  • Bloques complejos pero estáticos, como titulares vistosos, apartado de suscripción, formularios de contacto, encuestas, etc.
  • Galerías de imágenes con diseños complejos.
  • Sección «Sígueme en las redes sociales”.

Las propiedades de los bloques reutilizables son perfectas cuando necesitas utilizar un fragmento de contenido en diversas ocasiones, ya que solamente tienes que crearlo una sola vez.

Te mostramos cómo hacerlo

Veamos cómo crear un bloque con botones para nuestros enlaces.

Para crear un bloque reutilizable, abre el editor de bloques y crea el contenido que deseas reutilizar:

Selecciona el contenido que vaya a ser convertido en un bloque reutilizable. Luego, haz clic en el menú de tres puntos «Opciones» y elige «Añadir a bloques reutilizables».

¡Ya has creado un bloque reutilizable! A partir de ahora, podrás encontrar todos los bloques que decidas crear en la pestaña «Reutilizable» en la biblioteca de bloques:

Aquí también puedes insertar el bloque recién creado en cualquiera de tus publicaciones o páginas.

¿Dónde puedes editar tus bloques reutilizables ya existentes?

Para editarlos, debes seleccionar uno de los bloques y realizar tus modificaciones. Cuando realizas una edición, el botón Publicar se muestra con un pequeño indicador de punto:

Este punto indica que has realizado un cambio global que afecta a las publicaciones más allá de la que estás editando, de la misma forma que cuando editas plantillas. Esto te permite confirmar que el cambio se ha producido.

Otra manera de editar tus bloques reutilizables es hacer clic en el menú global de tres puntos «Más» y seleccionar «Gestionar todos los bloques reutilizables»:

Esta acción te lleva a una sección que te permite editar, renombrar, exportar o eliminar todos los bloques reutilizables que hayas creado. 

¿Qué más puedes hacer?

A continuación te mostramos algunos consejos y trucos que puedes aprovechar al máximo.

Elige un buen nombre

Cuando guardas un bloque reutilizable ten cuidado con el nombre que eliges porque deberás poder encontrarlo fácil y rápidamente en los términos de búsqueda de la biblioteca de bloques:

Evita nombres como «Galería» o «Imagen», ya que serán molestos cuando solamente quieras insertar uno de esos. Puedes evitar esta situación con un nombre único, como «Sígueme en redes».

Inserta el bloque en el mejor lugar de tu flujo de contenido

Otro de los beneficios de utilizar bloques reutilizables es que puedes insertarlos en cualquier lugar de tu contenido. Quizá quieras que nuestro bloque de «Sígueme en redes» se ubique en la parte superior o inferior de la publicación, al ser un bloque más del contenido podrás moverlo entre los párrafos para tener la ubicación más adecuada en tu texto.

Un atajo de diseño

Si has creado un diseño complejo con el que estás satisfecho, dónde le hayas dedicado tiempo para crear una buena llamada a la acción, imágenes y botones funcionales, continúa y guárdalo como un bloque reutilizable. Aunque sea para insertarlo como un bloque normal, seguramente te ahorrará tiempo.

Para convertir un bloque reutilizable en normal, selecciona el bloque que deseas y haz clic en «Convertir en bloques normales»:

Practica sin miedo

Crea un borrador de publicación y juega con los bloques reutilizables para ver cómo puedes comenzar a usarlos. Siempre puedes eliminarlos cuando termines de practicar.

Seguro que usar los bloques reutilizables hará que aproveches mejor el tiempo utilizado en diseñarlo la primera vez.