Share
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 enfrentarlo antes de que llegue al núcleo de WordPress. En esta serie, te mostraré cómo trabajar con la API de bloque y crear tus propios bloques de contenido que puedes usar para construir tus publicaciones y páginas..
En la primera publicación de esta serie, tuvimos una descripción general de la API del bloque y creamos un bloque simple para la prueba. Veremos más de cerca la API del 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 recuerdas, nuestro bloque personalizado se representó de manera diferente en la parte delantera y trasera para demostrar que tienes control completo sobre cómo se procesa el bloque dentro del editor y cómo los visitantes del sitio ven el bloque.
Si has estado siguiendo a lo largo, abre el / wp-content / plugins / my-custom-block / src / block Carpeta 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 extremo frontal..
los block.js El archivo JavaScript contiene JSX, que se transpila durante el proceso de construcción a 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 del complemento. dist / carpeta. Estos son los archivos reales puestos en cola por WordPress ya que contienen JavaScript y CSS válidos que todos los navegadores pueden entender..
Afortunadamente, la crear-guten-block el kit de herramientas se encarga de compilar y realizar el proceso de transpilación observando los cambios en nuestros archivos de bloque. Esta es una característica realmente buena, ya que es una cosa menos de la que debemos preocuparnos. Podemos concentrarnos en escribir nuestro código de bloque (y estilos), y los archivos de complementos se actualizarán automáticamente. Bonito!
Sólo asegúrese de ejecutar el npm start comando desde el interior de la carpeta raíz del complemento para activar la visualización de archivos.
No te preocupes por los detalles del código JSX en block.js por el momento ya lo veremos en detalle más adelante. Por ahora, concentrémonos en hacer algunos cambios simples en la salida del bloque para las vistas frontal y posterior..
Abrir block.js, encuentra el editar Método para el objeto que es el segundo argumento pasado a registerBlockType (), y reemplazarlo con lo siguiente:
edit: function (props) return (); ,Vista del editor
Este es nuestro bloque personalizado dentro del editor..
Vamos a añadir una lista desordenada.!
- manzana
- naranja
- Pera
- ciruela
Este método controla cómo se procesa el bloque en la ventana del editor. Ahora encuentra el salvar Método y reemplazarlo con:
save: function (props) return (); ,Vista frontal
Este es nuestro bloque personalizado como lo ven los visitantes del sitio..
Vamos a añadir una lista ordenada!
- rojo
- Azul
- Rosado
- marrón
Este método se utiliza para representar la salida del bloque en el extremo frontal..
En estilo.scss, Reemplaza todos los estilos con:
.wp-block-cgb-block-my-custom-block background: # a7d9f1; color: #ffffff; borde: 1px sólido # 62afd4; radio del borde: 15px; margen: 0 auto; ancho máximo: 740px; relleno: 1.5rem; ol, ul margin-left: 20px! important; li margen inferior: 0; h3 color: #ffffff; margen superior: 0;
Entonces, en editor.scss, Reemplaza todos los estilos con:
.wp-block-cgb-block-my-custom-block background: # cba7f1; borde: 1px sólido # a170d6;
Puede ver en las capturas de pantalla a continuación cómo estos cambios afectan la representación de nuestro bloque dependiendo de si lo estamos viendo en la ventana del editor o en el extremo frontal..
No cubriremos secuencias de comandos de bloque en cola todavía, pero es suficiente por ahora saber eso editor.scss Los estilos solo se aplican a la ventana del editor y estilo.scssse agrega a ambos La ventana del editor y la parte frontal. Por lo tanto, los estilos que se utilizan tanto en el editor como en el front-end pueden omitirse de estilo.scss.
Observe cómo en los archivos Sass hacemos referencia a un largo selector de CSS para apuntar a nuestros elementos de bloque.
.wp-block-cgb-block-my-custom-block
Gutenberg agrega esta clase automáticamente al elemento contenedor de bloque en el extremo delantero, pero tenemos que aplicarlo manualmente en la ventana del editor para obtener la misma clase, como se puede ver en editar método a continuación.
El nombre de clase generado por Gutenberg se determina de la siguiente manera: wp-block- [espacio de nombres de bloque] - [nombre de bloque.
En nuestro caso, utilizamos el crear-guten-block kit de herramientas para crear nuestro bloque, que utiliza cgb para el espacio de nombres por defecto, y bloquear mi bloque personalizado se basa en el nombre de bloque que especificamos. Esto da como resultado el nombre de la clase CSS wp-block-cgb-block-my-custom-block siendo añadido al contenedor de bloques. Gutenberg utiliza el espacio de nombres y el nombre de bloque internamente para identificar bloques de forma exclusiva.
Al realizar cambios para bloquear archivos allí, encontré un par de puntos débiles que vale la pena mencionar.
En primer lugar, al hacer cambios en el editar Método, me encontré teniendo 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 era el caso. Si encuentra que le está sucediendo lo mismo, simplemente borre la memoria caché de su navegador y vuelva a intentarlo.
En segundo lugar, al editar los contenidos de la salvar método, algo extraño parece suceder a la ventana del editor cuando se actualiza de nuevo.
Para demostrar esto, agregué un nuevo elemento de lista (salvar y luego actualice el editor de publicaciones (después de tener que borrar el caché nuevamente, ¡por supuesto!). Aquí está el resultado:
Si eliges Convertir a bloques o Editar como HTML Entonces te presentan los contenidos de la salvar Método, que debe visualizarse en la parte frontal y no en el editor.
Esto es muy confuso, y la única forma obvia de volver a la normalidad es eliminar el bloque de la ventana del editor y volver a insertarlo. Como mencioné en el post anterior, Gutenberg sigue siendo un trabajo en progreso, y este es un buen ejemplo de ello.!
Esperemos que esto se haga más intuitivo en futuras versiones, pero por ahora es solo algo a tener en cuenta. Al hacer cambios a la salvar Función, prepárese para eliminar los bloques relacionados en la ventana del editor y agregarlos nuevamente.
Como se mencionó anteriormente, la salida de la salvar y editar Los métodos pueden ser completamente diferentes. Sin embargo, en la mayoría de los casos, es probable que desee que la salida de la interfaz de usuario coincida con la salida del editor para que la experiencia de edición sea lo más consistente posible con la representación de la interfaz de usuario.
En nuestro ejemplo creado anteriormente, solo agregué contenido y estilos diferentes en el editor y en la vista frontal para fines de demostración.
La API de bloque se compone de un conjunto de objetos de JavaScript agregados a la global wp objeto de administrador Y porqué wp es global, no necesitamos importarlo específicamente en nuestro código fuente, está disponible a pedido.
Los objetos disponibles en wp Depende de la página de administración que está viendo actualmente. Por ejemplo, si está personalizando su sitio, entonces wp incluye el principal objeto API del personalizador.
Sin embargo, actualmente, 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.
Puedes ver la estructura de wp abriendo el editor de Gutenberg y entrando wp en la consola del navegador.
Como puedes ver, wp contiene muchos objetos, pero los que más nos interesan son:
Accentsconagua
wp.elementoswp.blockswp.componentswp.datawp.i18nEstos objetos le dan acceso a todas las herramientas necesarias para crear algunos bloques muy complejos. Intente escribir sus nombres completos de objetos en la consola del navegador para explorar más estos objetos.
Por ejemplo, si escribes wp.blocks y expandir el objeto, verá una de las funciones disponibles es registerBlockType (). Esta es una función muy importante que cubriremos en profundidad en la próxima publicación.
wp.elementos ObjetoEste objeto es la capa de abstracción en la parte superior de React (y ReactDom) que expone la funcionalidad de React de manera predecible y consistente. Esto sigue siendo cierto incluso si la implementación subyacente se modifica o cambia completamente.
Mientras la interfaz permanezca igual, los complementos que interactúan con la API de bloque no se verán afectados en el futuro.
wp.blocks ObjetoLa función básica para crear un bloque (registerBlockType ()) está contenido 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 generales adicionales. Estos bloques 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 profundizamos en la creación de bloques..
Algunos de los disponibles son:
wp.components Objetolos wp.components El objeto también contiene componentes reutilizables, pero estos son más genéricos y, por lo general, se usan para crear elementos de IU adicionales en la ventana del editor, como paneles de control para la configuración de bloques..
Éstos incluyen:
wp.data ObjetoEl módulo de datos administra el estado de la aplicación en el editor de Gutenberg, que incluye el almacenamiento de configuraciones para cada bloque. Examinaremos las diferentes maneras en que puede agregar configuraciones a un bloque en la publicación final de esta serie..
wp.data se implementa sobre Redux, por lo que cuando Gutenberg se fusiona con el núcleo, no solo tendremos acceso a React, sino también a un completo almacén de datos centralizado con la tecnología de Redux!
Los plugins y temas han sido capaces de traducir fácilmente cadenas de PHP durante años, y también hay un método similar disponible para traducir cadenas en JavaScript gracias a wp.i18n objeto. Esto significa que todas las cadenas contenidas en su bloque, incluidos el nombre del bloque, las palabras clave y las etiquetas, se pueden traducir a cualquier idioma.
Si ha usado las funciones de traducción estándar de PHP antes, se sentirá como en casa, ya que el proceso es prácticamente el mismo. Creo que este es un movimiento inteligente ya que alentará a los desarrolladores a habilitar las traducciones de cadenas en sus bloques desde el principio.
Dentro de su código de bloque, traducir una cadena es tan simple como:
wp.i18n .__ ('Esta cadena es traducible', 'dominio de texto');En este tutorial, hemos implementado un bloque básico y editado el código. También hemos visto que tenemos control total sobre la representación de bloques y podemos tener diferentes vistas de bloques en el editor en comparación con la parte delantera.
El editor todavía tiene algunos problemas que pueden sorprenderlo de vez en cuando; esto sirve como un recordatorio de que Gutenberg todavía está en desarrollo y puede que no esté listo para su uso en sitios de producción.
Finalmente, terminamos con una descripción general del bloque API, que introduce varios objetos nuevos en el global wp Objeto JavaScript para crear y gestionar bloques..
En la próxima publicación, retomaremos el ritmo y crearemos un bloque más completo. Para ello, exploraremos la registerBlockType () Función en profundidad. También echaremos un vistazo más de cerca a la puesta en cola de sus secuencias de comandos de bloque.
