Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

WordPress Gutenberg Block API: apariencia y sensación de bloque

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: An Introduction
WordPress Gutenberg Block API: Creating Custom Blocks

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

El nuevo editor de WordPress (con nombre en código Gutenberg) se lanzará en la versión 5.0. Ahora es el momento perfecto para entenderlo antes de que aterrice en el núcleo de WordPress. En esta serie, le mostraré cómo trabajar con la API de bloque y crear sus propios bloques de contenido que puede usar para construir sus publicaciones y páginas.

En la primera publicación de esta serie, tuvimos una descripción general de la API de bloque y creamos un bloque simple para probar. Examinaremos más de cerca la API de bloque en breve, pero primero editemos el bloque predeterminado que creamos en la publicación anterior para tener una idea de lo fácil que es realizar cambios en un bloque existente.

Si lo recuerda, nuestro bloque personalizado se representa de manera diferente en la parte frontal y posterior para demostrar que tiene control total sobre cómo se representa el bloque dentro del editor y cómo los visitantes ven el bloque.

Default views for our custom block

Si ha seguido el ejemplo, abra la carpeta / wp-content / plugins / my-custom-block / src / block donde se encuentra el código fuente del bloque. Esa carpeta contiene un archivo JavaScript y dos archivos Sass, que controlan el comportamiento del bloque y cómo se procesa dentro del editor y en el front-end.

Block source code files

El archivo JavaScript block.js contiene JSX, que se transporta durante el proceso de compilación en JavaScript válido. Del mismo modo, los dos archivos Sass se convierten a CSS estándar.

Durante el proceso de compilación, estos archivos requieren procesamiento para crear los archivos de distribución dentro de la carpeta dist / del complemento. Estos son los archivos reales en cola de WordPress, ya que contienen JavaScript y CSS válidos que todos los navegadores pueden comprender.

Afortunadamente, el juego de herramientas create-guten-block maneja la creación y el transpiling para nosotros al observar los cambios en nuestros archivos de bloques. Esta es una característica muy buena, ya que es una cosa menos de la que debemos preocuparnos. Podemos centrarnos en escribir nuestro código de bloque (y estilos), y los archivos de complemento se actualizarán automáticamente. ¡Genial!

Solo asegúrese de ejecutar el comando npm start desde dentro de la carpeta raíz del complemento para activar la visualización de archivos.

Es hora de editar algo de código!

No se preocupe por los detalles del código JSX en block.js todavía, ya que lo cubriremos en detalle más adelante. Por ahora, centrémonos en realizar algunos cambios simples en la salida del bloque para las vistas frontal y posterior.

Abra block.js, encuentre el método edit para el objeto que es el segundo argumento pasado a registerBlockType (), y reemplácelo con lo siguiente:

Este método controla cómo se renderiza el bloque en la ventana del editor. Ahora encuentre el método save y reemplácelo por:

Este método se usa para mostrar la salida del bloque en el frente.

En style.scss, reemplace todos los estilos con:

Luego, en editor.scss, reemplace todos los estilos con:

Puede ver en las capturas de pantalla a continuación cómo estos cambios afectan el renderizado de nuestro bloque dependiendo de si lo estamos viendo en la ventana del editor o en la interfaz.

Updated editor view
Updated frontend view

No cubriremos las secuencias de bloques en secuencia todavía, pero es suficiente por ahora saber que los estilos de editor.scss solo se aplican a la ventana del editor y style.scss se agrega tanto a la ventana del editor como a la interfaz. Por lo tanto, los estilos que se usan tanto en el editor como en el front-end pueden omitirse en style.scss.

Observe cómo en los archivos Sass hacemos referencia a un extenso selector de CSS para orientar nuestros elementos de bloque.

Esta clase es agregada automáticamente por Gutenberg al elemento contenedor de bloques en el front-end, pero tenemos que aplicarla manualmente en la ventana del editor para obtener la misma clase, como se puede ver en el siguiente método edit.

El nombre de clase generado por Gutenberg se determina de la siguiente manera: wp-block- [block namespace] - [block name.

En nuestro caso, utilizamos el juego de herramientas create-guten-block para crear nuestro bloque, que utiliza cgb para el espacio de nombres de forma predeterminada, y block-my-custom-block se basa en el nombre del bloque que hemos especificado. Esto da como resultado que el nombre de la clase CSS wp-block-cgb-block-my-custom-block se agregue al contenedor de bloques. El nombre y el nombre del bloque son utilizados internamente por Gutenberg para identificar bloques de manera única.

Al hacer cambios para bloquear archivos allí, encontré un par de puntos importantes que vale la pena mencionar.

En primer lugar, al realizar cambios en el método edit, tuve que borrar el caché del navegador antes de actualizar la ventana del editor para ver los últimos cambios. Esto no sucedió todo el tiempo, pero a menudo fue el caso. Si le sucede lo mismo, simplemente borre la caché de su navegador y vuelva a intentarlo.

En segundo lugar, al editar los contenidos del método save, algo extraño parece sucederle a la ventana del editor cuando se actualiza.

Para demostrar esto, agregué un nuevo elemento de lista (<li> Indigo<li> ) en el método save y luego actualicé el editor de publicaciones (¡después de tener que borrar la memoria caché de nuevo, por supuesto!). Este es el resultado:

Block update issue

Si eliges Convert to Blocks o Edit as HTML, entonces obtienes los contenidos del método save, que se debe ver en el front-end y no en el editor.

Convert to blocks and edit as HTML views

Esto es muy confuso, y la única manera obvia de devolver las cosas a la normalidad era eliminar el bloque de la ventana del editor y volver a insertarlo. Como mencioné en la publicación anterior, Gutenberg sigue siendo un trabajo en progreso, ¡y este es un buen ejemplo de eso!

Esperemos que esto se haga más intuitivo en versiones futuras, pero por ahora es algo de lo que hay que tener cuidado. Al realizar cambios en la función save, prepárese para eliminar los bloques relacionados en la ventana del editor y agréguelos nuevamente.

Como se mencionó anteriormente, el resultado de los métodos save y edit puede ser completamente diferente. Sin embargo, en la mayoría de los casos, es probable que desee que la salida del front-end coincida con la salida del editor para que la experiencia de edición sea lo más uniforme posible con el procesamiento del front-end.

En nuestro ejemplo artificial anterior, solo agregué contenido y estilos diferentes en el editor y en la vista frontal para fines de demostración.

Descripción general de API de bloque

La API de bloque se compone de un conjunto de objetos de JavaScript agregados al objeto de administración de wp global. Y como wp es global, no es necesario importarlo específicamente en nuestro código fuente; está disponible a pedido.

Los objetos disponibles en wp dependen de la página de administración que está viendo actualmente. Por ejemplo, si está personalizando su sitio, entonces wp incluye el objeto principal de la API del personalizador.

Actualmente, sin embargo, la API de Gutenberg Block solo está disponible en el editor de publicaciones. Anticipo que esto cambiará en el futuro cuando la integración entre el editor de publicaciones y el personalizador del sitio se acerque.

Puede ver la estructura de wp abriendo el editor Gutenberg e ingresando wp en la consola del navegador.

Block API objects added to global wp JavaScript object

Como puede ver, wp contiene muchos objetos, pero los que más nos interesan son:

Estos objetos le dan acceso a todas las herramientas necesarias para crear bloques muy complejos. Intente escribir sus nombres completos de objetos en la consola del navegador para explorar más estos objetos.

Por ejemplo, si escribe wp.blocks y expande el objeto, verá que una de las funciones disponibles es registerBlockType (). Esta es una función muy importante que trataremos en profundidad en la próxima publicación

El objeto wp.elements

Este objeto es la capa de abstracción en la parte superior de React (y ReactDom) que expone la funcionalidad React de una manera predecible y consistente. Esto sigue siendo cierto incluso si la implementación subyacente se altera o cambia por completo.

Siempre que la interfaz se mantenga igual, los complementos que interactúen con la API de bloque no se verán afectados en el futuro.

El objeto wp.blocks

La función central para crear un bloque (registerBlockType ()) está contenida en wp.blocks junto con otras funciones necesarias para la administración general de bloques, tales como:

  • getBlockType()
  • getBlockContent()
  • getBlockAttributes()
  • hasBlockSupport()
  • isValidBlock()

Este objeto también contiene un conjunto de bloques reutilizables que puede incluir en sus propios bloques para proporcionar funcionalidad sin gastos adicionales. Estos bloques preparados listos para usar pueden acelerar el desarrollo de bloques de manera espectacular, y utilizaremos algunos de ellos en la próxima publicación a medida que profundicemos en la creación de bloques.

Algunos de los disponibles son:

  • barra de herramientas de alineación
  • autocompletar
  • cargador de medios
  • paleta de colores
  • editor de texto enriquecido

El objeto wp.components

El objeto wp.components también contiene componentes reutilizables, pero estos son más genéricos y se usan generalmente para crear elementos de IU adicionales en la ventana del editor, como los paneles de control para las configuraciones de bloque.

Éstos incluyen:

  • Botón
  • casilla de verificación
  • editor de código
  • Ícono de arranque
  • fecha/hora
  • desplegable
  • opción del menú
  • boton de radio
  • control de rango

Objeto wp.data

El módulo de datos administra el estado de la aplicación en el editor de Gutenberg, que incluye el almacenamiento de la configuración de cada bloque. Analizaremos diferentes formas de agregar configuraciones a un bloque en la publicación final de esta serie.

wp.data se implementa sobre Redux, por lo tanto, cuando Gutenberg se fusione con Core, no solo tendremos acceso a React sino también a un almacén de datos centralizado completo con tecnología de Redux.

El objeto wp.i18n

Los complementos y los temas han podido traducir cadenas de PHP fácilmente desde hace años, y también hay un método similar para traducir cadenas en JavaScript gracias al objeto wp.i18n. Esto significa que todas las cadenas contenidas en su bloque, incluido el nombre del bloque, las palabras clave y las etiquetas, se pueden traducir a cualquier idioma.

Si antes usó las funciones de traducción estándar de PHP, se sentirá como en casa, ya que el proceso es prácticamente el mismo. Creo que este es un paso inteligente ya que alentará a los desarrolladores a habilitar traducciones de cadenas en sus bloques desde el principio.

Dentro de tu código de bloque, traducir una cadena es tan simple como:

Conclusión

En este tutorial, implementamos un bloque básico y editamos el código. También hemos visto que tenemos un control total sobre la representación de bloques y podemos tener diferentes vistas de bloques en el editor en comparación con el front-end.

El editor todavía tiene algunos problemas que pueden tomarte por sorpresa de vez en cuando; esto sirve como un recordatorio de que Gutenberg aún está en desarrollo y puede no estar listo para su uso en los sitios de producción.

Finalmente, terminamos con una descripción general de la API del bloque, que presenta varios objetos nuevos en el objeto global wp JavaScript para crear y administrar bloques.

En la próxima publicación, aceleraremos el ritmo y crearemos un bloque más completo. Para hacerlo, exploraremos la función registerBlockType () en profundidad. También veremos más detenidamente la secuencia correcta de secuencias de comandos de bloques.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.