Directorio de bloques, el siguiente reto de WordPress

Otro de los retos a los que se enfrenta la comunidad WordPress es el conocido como directorio de bloques, que como todo estos tiempos tiene que ver con el proyecto Gutenberg, aunque no sea parte del mismo.

¿Qué es eso del directorio de bloques?

De lo que se trata, en breve, es de un directorio especial y específico que no es de temas ni de plugins, ni siquiera de colecciones de bloques, que de estos ya hay muchos, sino de bloques únicos, individuales.

Y cada bloque sería una especie diferente de plugin, que es un plugin pero solo es un bloque. Los podemos llamar plugins de un solo bloque.

El directorio de bloques será también una nueva sección del directorio de plugins, que contendrá solo plugins de un solo bloque. De hecho puedes ver ya aquí el ahora incipiente directorio de bloques.

Algunas peculiaridades:

  • Estará separado del directorio principal de plugins. O ves plugins o ves bloques.
  • Los plugins de un solo bloque se podrán buscar por nombre y descripción del bloque.
  • El directorio usará una versión simplificada del diseño de la página de plugins.
  • Habrá una variable de la API para buscar bloques por nombre y descripción.
  • Habrá unas reglas específicas para alojar plugins de un solo bloque.

Por supuesto, los plugins WordPress del directorio principal podrán seguir incluyendo bloques Gutenberg que…

  • También se podrán buscar por nombre y descripción.
  • Podrán registrar (incluir) tantos bloques como se quiera, y no tendrán que seguir las mismas reglas que los plugins de un solo bloque.

Resumiendo, los plugins de un solo bloque son para bloques, los plugins WordPress normales son para todo lo demás.

¿Qué es un plugin de un solo bloque?

Resumiendo…

  • El código del bloque debe estar totalmente escrito en JavaScript.
  • El plugin puede contener otros recursos como imágenes y CSS.
  • Deben incluir un archivo PHP que contenga solamente las cabeceras del plugin y el código de inicialización. Incluso se está pensando que en un futuro esto no sea necesario.
  • No tendrán ningún código de acciones en la administración.
  • Cualquier interfaz de usuario debe limitarse al editor.

Además, deben ser relativamente pequeños, recuerda: un plugin sencillo que ofrece un único bloque Gutenberg. El plugin es el bloque, nada más.

Las reglas que rigen los plugins de un solo bloque son estas:

  • Registran un bloque Gutenberg.
  • Están escritos en JavaScript, y solo para front-end.
  • No tienen ninguna interfaz de usuario fuera del editor.
  • Usan un archivo
    block.json

    con los metadatos, como está indicado en las Block Registration RFC

  • Incluyen un readme.txt y una cabecera con metadatos.

¿Cómo se buscan e instalan los plugins de un solo bloque?

En un futuro cercano, seguramente con WordPress 5.4, que saldrá probablemente a finales de marzo de 2020.

No se buscarán como los plugins «normales» sino dentro del mismo editor de WordPress, pero no te lo cuento, te lo muestro en el siguiente vídeo

Si quieres probarlo antes de que llegue WordPress 5.4, puedes ya hacerlo instalando el plugin Gutenberg (nunca en sitios en producción, solo en sitios de pruebas) y, una vez activo, ve al menú

Gutenberg > Experimentos

y activa la casilla en la que se activa el directorio de bloques, como puedes ver en la siguiente captura…

Implicaciones del directorio de bloques

Hasta ahora hemos visto la funcionalidad del directorio de bloques y de los plugins de un solo bloque pero ¿en qué afecta esto al proyecto WordPress, a los usuarios, a todo?

Hay … de todo.

Para el usuario

Si pensamos en el usuario todo son ventajas.

A partir de que pueda buscar y añadir bloques a voluntad ya no tendrá que pensar previamente si necesita tal o cual bloque. Si tiene los permisos suficientes (ojo con esto) podrá instalar bloques a medida que los necesite.

Esto también significa que no habrá que instalar colecciones de bloques enteras cuando solo necesite uno concreto, lo que va también en beneficio del usuario, y del ahorro de recursos de su sitio WordPress.

Además, los plugins de un solo bloque no deberán llevar publicidad, ni ser modeloo freemium, tendrán que ser gratis total, sin pantallas de venta. Y eso de paz que ganamos.

Para los desarrolladores de bloques

Con unos requisitos tan pequeños, y lo fácil que es hacer bloques, se abre un mundo de posibilidades, pues los bloques no solo sirven para WordPress, pues al estar creados en JavaScript su desarrollo puede aprovecharse para otras plataformas.

Esa es la parte buena…

Porque por otra parte, por la posibilidad de comercialización no está contemplado, ni permitido, que los plugins de un solo bloque sean premium, tendrán que ser «instalar y funcionar», sin pasos previos, sin pantallas de administración ni anuncios ni nada.

Y aquí entran también los desarrolladores de plugins…

Para los desarrolladores de plugins

En este caso se abre un melón importante, pues los plugins, con sus pantallas de admin y ventas dirigidas. Esto se deja bien claro en las directrices de los plugins de un solo bloque:

Los plugins de un solo bloque son bloques. No deben incluir anuncios, advertencias o mensajes promocionales

Dicho esto, a priori, a los desarrolladores y empresas de plugins no parece que les vaya a interesar mucho en principio crear plugins de un solo bloque, sino que seguirán promocionando sus plugins de colecciones de bloques, con bloques gratis y bloques de pago.

Pero también, visto de otro modo, puede ser una plataforma de promoción brutal para desarrolladores independientes, un modo de mostrar sus habilidades, y si su bloque tiene éxito, le pueden surgir oportunidades en forma de contratación, crear plugins más complejos, etc.

Al final todo se trata últimamente de lo mismo, de la coexistencia de WordPress, un software y comunidad libre de código abierto con la comercialización, algo que actualmente no está ni de lejos bien especificado ni claro.

Por una parte hay que reconocer que el mismo hecho de que el directorio de plugins (de los temas no hablo, ya deberías tener claro que no tienen futuro) sea una plataforma brutal de promoción, que de paso hace cada vez más grande a WordPress, por la enorme apuesta de las empresas de desarrollo.

Pero como contrapartida tenemos el hecho de que la comunidad aún no ha decidido cómo abordar, y sí, controlar, esta inquietud comercial lícita, para que no pervierta el espíritu del proyecto WordPress y su filosofía.

¿Y tú qué opinas?

La entrada Directorio de bloques, el siguiente reto de WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo crear un tema con bloques desde el editor – La revolución llega por fin a WordPress

Hay aún mucho debate sobre cómo va a cambiar el desarrollo de temas cuando funcionalidad de Edición completa del sitio de Gutenberg, todavía en desarrollo, se haga realidad incorporándose en WordPress. Mi visión es que los temas WordPress como los conocemos van a desaparecer.


Mi visión es que los temas #WordPress como los conocemos van a desaparecer
Clic para tuitear


Las plantillas de bloques son también, de momento, una característica experimental de Gutenberg (al menos en la versión 7.2.0), y su uso para crear temas basados en bloques está en este momento en una etapa de desarrollo temprano.

Un tema basado en bloques es un tema WordPress con plantillas totalmente compuestas de bloques para que, sumados al contenido de la publicación  (páginas, entradas, etc.), también se pueda usar el editor de bloques para editar todas las áreas del sitio: cabeceras, widgets, pies de página, etc.

Gutenberg Handbook

De hecho, la fase 2 del proyecto Gutenberg de WordPress, que será la que nos ocupará todo 2020, está centrada precisamente en esto, en llevar los bloques a todas partes, así que no estamos hablando de un futuro lejano sino de un inminente presente.


En 2020, la fase 2 del proyecto #Gutenberg de #WordPress va a permitir crear sitios completos con bloques
Clic para tuitear


Así que, si no me equivoco, dentro de muy poco, el ecosistema de los temas WordPress va a desaparecer o cambiar totalmente, una vez que WordPress incorpore todo el sistema de selección de plantillas y modificación del diseño mediante bloques.

Como mucho, los temas aportarán estilos de bloques, esquemas de colores y poco más. Y eso de momento, con el tiempo todo eso, por lógica, debería ir en la personalización de WordPress.

Así que este artículo va a comprender principalmente de dos partes. En la primera vamos a ver lo fácil que es crear un tema basado en bloques con WordPress y Gutenberg, y en la segunda debatiremos sobre las implicaciones de esta auténtica revolución en el desarrollo de WordPress.

Así que, visto lo que nos espera, ¡empecemos! ¿vemos cómo se hace un tema basado en bloques?

Crea el proyecto del tema

En su estado más simple, la estructura de un tema basado en temas sería algo así:

tema
|__ block-templates
    |__ index.html
|__ block-template-parts
    |__ header.html
    |__ footer.html
|__ functions.php
|__ index.php
|__ style.css

Esto es agradablemente más simple que la mayoría de las plantillas de temas de WordPress. Aquí tienes una visión general de lo que hace cada archivo y directorio:

  • block-templates/

    : plantillas de páginas compuestas de bloques. Siguen la misma jerarquía de plantillas que los temas tradicionales (nótese el uso de la palabra «tradicionales»).

    • index.html

      : la plantilla principal con la que generar una entrada o página. (Lo que sería el

      index.php

      en las plantillas de temas tradicionales.)

  • block-template-parts/

    : las colecciones comunes de bloques que se usarán en las plantillas de bloques.

    • header.html

      : la cabecera global, en HTML generado para Gutenberg.

    • footer.html

      : el pie de página global, en HTML generado para Gutenberg.

  • functions.php

    : la configuración habitual del tema, así como otras funciones útiles reutilizables.

  • index.php

    : suele ser un archivo vacío. Puedes borrarlo pero suele ser una buena costumbre incluirlo en cada directorio.

  • style.css

    : contiene los estilos del tema, como siempre.

Luego habrá temas que requieran hojas de estilos adicionales, pero esa sería la estructura básica.

Crea las plantillas de bloques y las partes de las plantillas de bloques

En realidad solo hay dos que hay que crear desde cero para que funcionen con bloques: la cabecera y el pie de página. El proceso de convertir estas áreas en plantillas de bloques pasaría por lo siguiente:

  1. Tratar de crear las partes de la plantilla en el editor de bloques
    • Esto lo puedes hacer en una entrada o  página en borrador. Si ya has activado el experimento en fase de desarrollo de «Edición completa del sitio» del plugin Gutenberg verás una nueva área en el panel de administración
      Apariencia/Partes de plantilla

      — un área en la que en el futuro se creará, almacenará y editarán las partes de la plantilla del tema basado en bloques.

  2. Aplicarle estilos lo más parecidos posibles usando el editor
  3. Añadir variaciones de estilo de bloques y CSS adicional del tema para solucionar cualquier carencia del editor de WordPress
    • La mayoría de estos estilos ya están presentes, por ejemplo, en el CSS del tema Twenty Twenty, así que si partes de este tema solo tendrías que hacer pequeñas modificaciones para asignarlas a los nuevos bloques.


Guardar las plantillas de bloques y partes de plantilla como archivos distintos

Cuando está activa la «Edición completa del sitio» en el panel 

Gutenberg > Experimentos

, Gutenberg esperará que tu tema ofrezca plantillas de bloques, omitiendo el comportamiento normal de las plantillas:

Una vez hayas diseñado las partes de la plantilla a tu gusto en el editor de bloques, cambia a la visualización del editor de código, y copia todo el HTML generado y pégalo en el archivo correspondiente de la estructura de tu tema, como en la  carpeta

block-template-parts

.

Añadir contenido demo al tema

Para que el tema tenga algo de contenido es buena idea añadirle textos demo para páginas y los principales bloques de la plantilla.

Si quieres puedes usar el contenido demo oficial del tema TwentyTwenty.

Este paso no es del todo necesario, pero sí muy recomendable, pues siempre será más visible lo que tu tema ofrece si los distintos bloques tienen algo de contenido, aunque sea de demostración, especialmente en webs nuevas, con WordPress recién instalado.

¿En qué es mejor esto que lo que tenemos ahora?

Los cambios estructurales de los temas basados en bloques generalmente no son obvios en la parte visible de la web, para el visitante. Y el proceso de cambiar entre el editor de código, un archivo de plantilla, y la vista previa del sitio para lograr el diseño deseado puede ser tedioso.

Sin embargo, este es sólo un paso intermedio antes de que podamos crear y editar nuestro tema (y todo el sitio) a través del editor de bloques Gutenberg.

El beneficio final será más visible cuando el usuario pueda modificar cualquier parte de una página usando el editor de bloques, pudiendo crear, gestionar y reutilizar partes de tu tema, todo dentro de una sencilla interfaz visual, fácil de comprender y real para cualquier tipo de usuario.

El otro aspecto emocionante de este proceso es que requiere saber muy poco de PHP, solo unas pocas declaraciones de estilos en los bloques y el registro estándar de compatibilidad del tema de siempre.

Todo lo demás es CSS y HTML generado por el editor, como has podido ver en el ejemplo de arriba. Y creo que es un paso enorme en la dirección correcta, reduciendo las barreras de entrada para todo aquél que quiera empezar en el desarrollo de temas para WordPress.


En un futuro cercano casi no habrá que saber PHP para hacer temas #WordPress, todo el CSS y HTML lo generaremos con bloques
Clic para tuitear


Esto abre un mundo de posibilidades enormes para que mucha gente que no se plantearía a priori crear un tema desde cero, la opción de hacerlo con el editor de bloques, les facilitaría muchísimo iniciarse en el mundo de la creación y desarrollo web, para posteriormente aprender cada vez más, y ser los programadores del futuro.

Siempre he dicho que a WordPress le falta un sistema de diseño sencillo de la web, siendo muy eficiente ya en la parte de creación de contenidos, y por eso durante años he promocionado temas y plugins que ayudasen a este propósito, como Divi o Elementor.

Y ahora ha llegado el momento en que, por fin, WordPress va a tener una herramienta de diseño y creación de temas accesible, sencilla, democrática, y es a lo que tenemos que orientar nuestros esfuerzos, y de ahí el propósito de esta guía.


Aún no es momento de abandonar los maquetadores visuales pero ya deberías estar aprendiendo a crear temas #WordPress basados en bloques y partes de plantilla
Clic para tuitear


Esto no significa que haya que abandonar ya el uso de maquetadores visuales como los antes citados, aún falta mucho camino por recorrer, pero debes ser inteligente, y previsor, y empezar a aprender a utilizar los bloques, las partes de plantilla, y todo lo que ofrece Gutenberg.

Y sí, he sido muy crítico con 2 aspectos del proyecto Gutenberg:

  • El hecho de meterlo a la fuerza sin el suficiente acuerdo ni complicidad por parte de la comunidad. De hecho, a espaldas de la comunidad.
  • Que la primera fase introdujese elementos de diseño en el editor de entradas.

¿POR QUÉ ESTA FOTO? SIGUE EL ENLACE AL VÍDEO A PARTIR DEL MINUTO 27

Pero por otra parte, la filosofía, el objetivo final del proyecto, está totalmente alineado con lo que siempre he defendido, y promocionado, que WordPress tiene que ofrecer una interfaz de diseño de la web visual, que no dependa de cada tema, y de ahí mi apuesta durante años por los maquetadores visuales, que ofrecen justo esa carencia de WordPress, y justo eso es el secreto de su innegable éxito, desde Visual Composer hasta hoy.

Dicho lo cual, y para no enrollarme más…

¿Qué te parece este cambio inminente que va a haber en WordPress?

¿Te animarás a crear un tema basado en bloques? 

La entrada Cómo crear un tema con bloques desde el editor – La revolución llega por fin a WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

TikTok en WordPress

Que TikTok es la red social con más crecimiento a nadie se le escapa. No sabemos cuál será su evolución o futuro pero está claro que actualmente es el ecosistema social que más tráfico genera y consume tras las 4 grandes: YouTube, Instagram, Twitter, Facebook.

Pero ¿qué pasa con TikTok en WordPress? ¿se pueden integrar? ¿hay algún modo de interactuar entre ambas plataformas o compartir contenidos?

Vamos a ver qué posibilidades tenemos de integración de TikTok en WordPress y viceversa.

Incrustar TikTok en WordPress

El uso más común entre plataformas es compartir contenido de unas en otras, y en el caso de TikTok, al ser contenido dinámico, vídeos en su totalidad, es genial para un blog personal por ejemplo, poder insertar tiktoks en tu WordPress.

Incrustación directa de TikTok en WordPress

Tristemente, el sistema de incrustado mediante oEmbed incorporado en WordPress no es compatible con TikTok, así que si copias la URL de una publicación de la red, algo muy fácil, pues ofrecen una caja para compartirlos …

… simplemente no funciona directamente:

Afortunadamente tenemos algún que otro modo de incrustarlo, y es que el mismo TikTok, en cada publicación, ofrece un icono en el que nos ofrece el código para incrustarla. Solo hay que hacer clic y copiar el código.

Luego lo pegamos en el editor HTML o en un bloque HTML y ya tenemos nuestro tiktok publicable en nuestro WordPress.

Que se verá de modo totalmente interactivo.

Además, hay algunos parámetros que puedes personalizar en el código de incrustación, como el tamaño del vídeo.

Incrustación de TikTok en WordPress mediante Embedly

Otra posibilidad es usar el servicio Embedly de incrustación de contenido dinámico, en este caso desde TikTok.

Solo tienes que copiar la URL de un tiktok y pegarla en la caja denominada «Embed TikTok Now» y te ofrece un modo sencillo – y algo personalizable – de obtener un código para incrustar contenido de TikTok en WordPress.

Incrustar TikTok en WordPress con plugins

Pues sí, ya van apareciendo plugins para incrustar contenido de TikTok en WordPress.

Y resulta que también hay un plugin de Embedly para WordPress, el sistema que vimos antes, pero aquí la cosa cambia.

Una vez lo instales y actives ya puedes incrustar automáticamente tiktoks solo con pegar la URL que veíamos al principio, y ahora sí, WordPress los reconoce y convierte en contenido dinámico incrustado, sin tener que lidiar con códigos.

Otro plugin muy fácil de usar en realidad es un bloque, llamado Embed Block for TikTok.

Cuando instales y actives el plugin tendrás un nuevo bloque en el editor desde el que incrustar fácilmente tus tiktoks.

Una vez insertado el bloque, en sus ajustes, tienes una caja para pegar ahí la URL del tiktok.

Otras integraciones de TikTok en WordPress

No todo es incrustar contenido de TikTok en WordPress, también hay alguna otra integración que podemos hacer.

Por ejemplo, la versión premium (una pena) del plugin WSM Downloader permite descargar contenidos de TikTok en nuestro WordPress. Y es una pena que solo esté la integración con TikTok en la versión gratuita porque el plugin es una maravilla.

Se integra totalmente con el cargador de medios de WordPress, y permite descargar e insertar contenido de todo tipo de orígenes fácilmente.

Un uso más especializado es el que ofrece el plugin Add TikTok Advertising Pixel, pues facilita la inserción del píxel de anuncios de TikTok, para gestionar, seguir y rentabilizar campañas de anuncios en la red TikTok.

Y es realmente interesante, pues TikTok es la red con más crecimiento como te comentaba al principio, con posibilidades aún sin explorar en el campo de la publicidad, y otras que ya están dando unos rendimientos tremendos, por la popularidad y frescura de sus vídeos.

Lo que ofrece el plugin es un modo sencillo de insertar el píxel con el que rastrear el sistema publicitario de TikTok, con lo que se insertará incluso en productos de WooCommerce.

¿Y tú, estás en TikTok?

Aunque en sus inicios TikTok era una red principalmente utilizada por los más jóvenes para compartir sus vídeos de música y baile, cada vez hay más gente que disfruta de la sencillez y posibilidades de esta plataforma social, una especie de Instagram de vídeos.

Te animo a probarla, y luego, siguiendo esta guía, a integrar TikTok en WordPress.

La entrada TikTok en WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.