WordPress -Gutenberg-Tutorial-Developer

El gran tutorial de Gutenberg Wordpress para desarrolladores/as: Crea tus propios bloques

Gutenberg abre nuevas y emocionantes posibilidades para usted como desarrollador. En este tutorial, explico todo lo que necesitas saber sobre el Editor de bloques. Aprenda a crear sus propios bloques de WordPress y a adaptar los existentes.

Gutenberg es el editor que se lanzó con WordPress 5.0. Con Gutenberg , se introdujo el concepto de bloques de WordPress. Esto permite a los propietarios de sitios web colocar elementos de diseño arrastrando y soltando, sin necesidad de un constructor de páginas externo o de conocimientos de programación. 

Gutenberg se utilizará como base para la edición completa del sitio en el futuro. En el pasado, siempre era necesario codificar, incluso si se utilizaba un constructor de páginas: Para algunos cambios y personalizaciones, ha tenido que poner en juego el código.

Con cada nueva actualización importante de WordPress, queda claro que los conocimientos de PHP y el desarrollo tradicional de sitios web en WordPress ya no son suficientes. Como desarrollador de WordPress, necesita dominar Gutenberg .

Este tutorial incluye: 

  • Qué es Gutenberg
  • Cómo trabajar con los bloques de WordPress
  • Cómo utilizar estas nuevas funciones y tecnologías para crear potentes sitios web en WordPress.

Vamos a sumergirnos en el tutorial de WordPress Gutenberg para desarrolladores.

¿Qué es Gutenberg?

Gutenberg se lanzó por primera vez enWordPress 5. 0 para simplificar la creación de entradas y páginas de forma puramente visual. Pero esto era sólo la primera fase del proyecto.

Gutenberg se basa en tecnologías modernas como JavaScript, React y la API REST para crear una experiencia de editor dinámico que imita la edición del front-end. En esta primera fase, se lanzó el Editor de Bloques

¿Qué es el editor de bloques Gutenberg ?

Gutenberg sustituye al editor TinyMCE (que a menudo se denomina editor clásico) y le permite utilizar bloques de contenido para añadir elementos como texto o imágenes a sus entradas y páginas.

Con nuevas actualizaciones y la fase 2, Gutenberg se convertirá en un editor de sitios web completo. En el futuro, será posible crear sitios web enteros de WordPress con bloques.

WordPress -Gutenberg-Tutorial-Developer

Esto significa que cualquiera que desarrolle sitios web de WordPress debe redefinir su propio flujo de trabajo como desarrollador. Los conocimientos de PHP ya no son suficientes para crear un sitio web de WordPress desde cero. Necesitas saber JavaScript, React y REST API si quieres crear bloques y elementos de diseño personalizados para sitios web basados en Gutenberg . 

Introducción a los bloques de WordPress

Es emocionante embarcarse en este nuevo viaje con el editor de bloques Gutenberg . Con este tutorial aprenderás todo lo que necesitas saber antes de empezar con Gutenberg Desarrollo y crear tutus propios bloques de WordPress.

Lo que debe saber antes de desarrollar para Gutenberg 

El lenguaje más importante que debe conocer para seguir este tutorial de WordPress Gutenberg para desarrolladores es Javascript. Más concretamente, es necesario conocer la versión ES5, que es la que soportan la mayoría de los navegadores modernos. 

Las nuevas características se incluyen en la versión 2015, ES6, y en la última versión, ESNext. 

Entender ES6 y ESNext puede ser valioso. Sin embargo, si quiere utilizarlos en el desarrollo de bloques de WordPress en tus, necesita saber cómo configurar las herramientas que convierten su código más reciente a ES5. 

WordPress -Gutenberg-Tutorial-Developer

También es necesario entender JSX, que es una extensión de la sintaxis de Javascript y también requiere transformación. Dado que ES6, ESNext y JSX son mucho más fáciles de escribir que ES5, vale la pena el esfuerzo de establecer herramientas de transformación. 

WordPress -Gutenberg-Tutorial-Developer

Webpack, en combinación con Babel, es una popular herramienta de transformación. Esta combinación de herramientas minifica el Javascript de tu. 

WordPress -Gutenberg-Tutorial-Developer

Por último, pero no menos importante, el conocimiento de React JS puede ayudarte enormemente cuando crees tutus propios bloques de WordPress o sigas varios tutoriales de WordPress para desarrolladores que se centran en la personalización de bloques. 

El contenido se almacena de forma diferente en Gutenberg 

A diferencia del editor de contenidos clásico, el contenido en Gutenberg se guarda de forma diferente. El contenido ya no se guarda como HTML, sino como comentarios HTML en una estructura específica con formato JSON. Esto facilita la transferencia de contenidos a otra instalación de WordPress o a un sistema de gestión de contenidos (CMS). 

El almacenamiento de contenidos en HTML tradicional está bien si se trata de contenidos simples y basados en texto. Sin embargo, cuando se trata de contenidos generados dinámicamente, el código tuse vuelve desgraciadamente desordenado. 

No es necesario conocer los detalles técnicos del funcionamiento de los bloques de WordPress. Lo importante es que cuando se crea contenido en Gutenberg , el HTML generado está libre de código desordenado. Esto se debe a que todos los detalles se almacenan dentro de los comentarios HTML. 

Qué puede hacer con los bloques de WordPress Gutenberg 

Puedes hacer varias cosas en Gutenberg . Si sigue un tutorial de WordPress para desarrolladores, debería conocer las posibilidades de tu. 

Exploremos algunas posibilidades: 

  • Desarrolle sus propios bloques de WordPress: Esta es la tarea más compleja que puedes hacer. No obstante, los bloques personalizados de WordPress suelen merecer la pena para conseguir una verdadera personalización. 
  • Prepare el tema tupara Gutenberg : Esto incluye seguir laguía de temas sugerida por WordPress.org para hacer que el tema tusea compatible con Gutenberg . Esto incluye el ajuste del estilo del bloque para mantener el aspecto deseado del tema tuy mantener la funcionalidad del bloque. 
  • Personalice o amplíe los bloques de contenido existentes en WordPress: Como se ha mencionado anteriormente, puede personalizar los bloques existentes de WordPress en Gutenberg . Esto incluye la adición de estilos de bloque personalizados, la adición de filtros a través de Javascript, o la personalización de las categorías de bloques y los tipos de bloques que aparecen para los tipos de entradas personalizables específicos. 

Configuración de un entorno de desarrollo para el editor de bloques Gutenberg

WordPress -Gutenberg-Tutorial-Developer

Antes de que puedas crear algo con Gutenberg o hacer cualquier tutorial de WordPress para desarrolladores, necesitas configurar un entorno de desarrollo. tuEl primer paso es conseguir Node.js. WordPress recomienda utilizar el Node Version Manager (nvm) para instalar y gestionar Node. 

Dentro del repositorio clonado, puedes construir Gutenberg ejecutando lo siguiente: 

npm ci
npm run build

Esta codificación garantiza que Gutenberg pueda utilizarse como un plugin. A continuación, añada el directorio Gutenberg creado a la carpeta wp-content/plugins en el entorno local de WordPress tus. A White Pixel también recomienda instalar Webpack y Babel. 

Realice todos los pasos de configuración para configurar un entorno de desarrollo. Necesitará un sitio de prueba local que ejecute WordPress con el plugin Gutenberg que ha creado, y acceso a Terminal para ejecutar una serie de comandos de línea. WordPress.org proporciona numerosos recursos para los scripts de desarrollo

Ahora que ha configurado el entorno local de tu, podemos pasar a la parte principal de este tutorial de WordPress para desarrolladores: Bloques de WordPress.

Entender los bloques de WordPress

Los bloques de WordPress son contenedores en los que se coloca el contenido dentro del editor de bloques de WordPress. Los bloques de WordPress se pueden mover a través de una interfaz de arrastrar y soltar.

Entender qué son los bloques de WordPress es importante antes de crear su propio tu. Los bloques de WordPress también son muy completos e incluyen varias funciones importantes, como: 

Cómo crear tus propios bloques de WordPress

Con este tutorial de WordPress Gutenberg para desarrolladores, aprenderá lo que necesita para crear bloques de contenido personalizados en WordPress. A continuación, puede utilizarlos en el sitio web tuso en los clientes de tus. 

Cómo registrar nuevos bloques de WordPress

Cada nuevo bloque comienza con el registro. Utilice la función registerBlockType para registrar una nueva definición de tipo de bloque.  

El nombre del bloque es una cadena que debe escribirse como namespace/nombre del bloque. Sustituya el espacio de nombres por el nombre del bloque que desea crear. 

A partir de ahí hay que definir las propiedades tudel nuevo bloque, como el título, la descripción, la categoría, el icono, las palabras clave o los estilos. 

Añadir barras de herramientas para acciones personalizables

Si desea añadir acciones personalizadas a su bloque mediante una barra de herramientas interactiva, puede personalizar (o crear desde cero) las barras de herramientas de trabajo de Gutenberg . Establezca los iconos personalizados, el formato, el posicionamiento y las acciones asignadas en función de las necesidades de los plugins o temas de tu. 

WordPress -Gutenberg-Tutorial-Developer

Según el Manual del Editor de Bloques, la adición de una barra de herramientas personalizada podría ser algo así: 

Barra de herramientas de importación

Cómo traducir los bloques de WordPress 

Al internacionalizarse, puede asegurarse de que los bloques de WordPress que cree lleguen a un público más amplio. 

Desde WordPress 5.0, puedes utilizar el paquete wp-i18n JavaScript para añadir cadenas traducibles. También puede crear archivos de traducción y hacer que se carguen cuando un usuario solicite contenidos en ese idioma. 

Añadir la configuración del inspector

Todos los bloques tienen un conjunto de ajustes de inspección que aparecen en la parte derecha de la pantalla sitiocuando se insertan en el contenido. Y dependiendo del bloque de WordPress, los aspectos que los usuarios pueden personalizar son diferentes. Para cada bloque individual que se cree, deben definirse los ajustes del inspector. 

WordPress -Gutenberg-Tutorial-Developer

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Los esfuerzos de JavaScript para WordPress son algo así: 

WordPress -Gutenberg-Tutorial-Developer

Con estas especificaciones, puedes usar JSX para estilizar cada función y ajustar su orden. 

Cómo producir contenido dinámico con PHP

Elcontenido dinámico es esencial para WordPress. Hay muchas razones por las que puede necesitar un bloque dinámico. 

Por ejemplo, si quieres crear un bloque personalizado de ÚltimasEntradas que muestre las últimas entradas del blog en tiempo real, necesitas un bloque dinámico. 

El bloque se apoya en PHP porque necesita recuperar nueva información cada vez que se renderiza. La clave para que la mayoría de los bloques sean dinámicos es cambiar su función de memoria a cero. A continuación, añada código para indicar al nuevo bloque que recupere el contenido adecuado. 

También puede establecer un atributo para indicar al bloque que muestre un determinado número de entradas.

Añadir ajustes individuales a los bloques existentes de Gutenberg

También puede añadir ajustes personalizables y realizar cambios en los bloques existentes de Gutenberg WordPress. Por ejemplo, puede añadir controles personalizables al panel de bloque avanzado dentro de la configuración del inspector de un bloque. Jeffrey Carandang ha escrito un gran tutorial sobre esto en su blog.

Crear patrones de bloques personalizados

Vamos a explorar otro aspecto de Gutenberg en este tutorial de WordPress para desarrolladores. Con WordPress Block Patterns puedes crear y compartir diseños de bloques predefinidos. Se trata de una agrupación de bloques de WordPress que permiten crear diseños complejos con unos pocos clics.

Puedes acceder a los Patrones de Bloqueo en la pantalla de edición de las entradas/páginas pulsando el signo + . A continuación, verá todos los patrones de bloques disponibles para el sitio web tu. 

WordPress -Gutenberg-Tutorial-Developer

Para crear sus propios patrones de bloques 

Para empezar, crea un diseño de página o de entrada. Añade bloques en la configuración que quieras. Por ejemplo, si dirige una revista online, puede crear un diseño de página para los nuevos artículos con títulos, columnas, imágenes y citas destacadas. 

A continuación, tienes que diseñar los bloques para que tengan el aspecto que deseas. 

El siguiente paso es copiar todo lo que has hecho hasta ahora. Haga clic en todos los bloques de tumientras mantiene pulsada la tecla ALT para seleccionarlos. A continuación, haga clic en el icono con los tres puntos apilados (más opciones) de la barra de herramientas. Haga clic en Copiar. 

WordPress -Gutenberg-Tutorial-Developer

A continuación, tienes que descodificar la salida HTML que acabas de copiar. Para ello, puede utilizar la herramienta JSON Escape/Unescape. Copie el código de la cadena de resultados que aparece después de hacer clic en Escape

WordPress -Gutenberg-Tutorial-Developer

Ahora tiene que registrar tunuevo patrón de bloques. 

Cómo registrar y anular el registro de patrones de bloques

Puede registrar un bloque de patrones personalizados utilizando la API de bloques de patrones para pegar el código que ha copiado anteriormente en el archivo functions. php tuTemas de WordPress o añadiéndolo a un plugin personalizado.

También puede utilizar el plugin Block Pattern Builder para eliminar los requisitos de codificación para crear patrones de bloques.  

WordPress -Gutenberg-Tutorial-Developer

Cómo utilizar el editor Gutenberg como desarrollador de temas

Gutenberg facilita el desarrollo de bloques de WordPress personalizados que hacen de la publicación de contenidos una experiencia enriquecedora. También puede utilizar Gutenberg para evitar la necesidad de un plugin constructor de páginas separado como Elementor o Divi.

Gutenberg se puede utilizar para crear diseños responsivos para la página de inicio habilitando bloques de ancho completo y de ancho. O puedes crear un tema basado en bloques desde cero. 

Analicemos en detalle algunas opciones de tus. 

Utilizar bloques de cubierta para añadir secciones de página

Los bloques de cubierta son una adición más reciente a Gutenberg y son una gran manera de añadir diferentes secciones a un sitio. Vea este vídeo para más información.

¿Qué son los bloques de cobertura?

Los bloques de portada son bloques de imagen sobre los que se puede colocar texto. Son una gran manera de crear cabeceras o secciones personalizadas que se encuentran en los plugins del constructor de páginas de WordPress o en los temas de WordPress.

Los bloques de superposición que puedes añadir son:

  • Bloques de imágenes
  • Fondos de vídeo
  • Bloques de encabezamiento
  • Bloques de párrafos
  • Bloques de botones 

Los bloques de cubierta hacen que tusea más versátil. De este modo, podrá crear una página de inicio personalizada. Incluso podría crear un tema de WordPress sencillo con una combinación de bloques de cubierta y patrones de bloques. 

También se vislumbran opciones aún más amplias para la edición completa del sitio web. El equipo de Make WordPress Design afirma que la manipulación de plantillas, los patrones de bloques avanzados y los estilos globales serán el foco principal. 

Uso del plugin Advanced Custom Fields 

Una de las limitaciones de los bloques es que no se puede conseguir un diseño de ancho completo: Siempre estará en cajas. 

Sin embargo, con unas cuantas manipulaciones inteligentes se puede utilizar el Advanced Custom Fields para añadir configuraciones meta personalizadas y forzar diseños de ancho completo. Esto es esencial si quieres usar Gutenberg para crear tus propios temas. 

WordPress -Gutenberg-Tutorial-Developer

Utilizar estilos de bloque personalizados 

Otra forma de utilizar Gutenberg como desarrollador de temas:in es utilizar estilos de bloque personalizados. Una vez que haya creado patrones de bloques o haya utilizado bloques de cubierta para crear secciones de página, podrá añadir o eliminar estilos de bloque a cada bloque en cuestión. 

Es necesario conocer el nombre del bloque para poder añadir o eliminar los estilos asociados a él. Este paso adicional hace posible que la clase CSS personalizada no tenga que insertarse cada vez que se utilice el bloque. 

Bloques de WordPress para páginas de aterrizaje y portadas

Ya hemos mencionado lo eficaces que pueden ser los bloques de portada para crear páginas de inicio para el sitio web tuo el tema tu. También funcionan muy bien para las páginas de aterrizaje. 

Otros bloques que vale la pena mencionar y que pueden ayudar en esta tarea son: 

  • Galerías
  • Bloques de columnas
  • Bloques de imágenes
  • Bloques de mesa
  • Bloques de texto

La mayoría de los bloques pueden utilizarse junto con los bloques de cubierta para crear una página de inicio de aspecto profesional. 

Si necesita más funciones, puede añadir un plugin de bloque Gutenberg que añada un solo bloque a Gutenberg , o un plugin de biblioteca de bloques Gutenberg que añada varios. 

Ultimate Addons para Gutenberg y Atomic Blocks son excelentes opciones de biblioteca que proporcionan una experiencia de construcción de sitios más fácil con bloques para testimonios, llamadas a la acción, opciones de diseño de página, formularios de contacto, tablas de precios y códigos cortos. 

WordPress -Gutenberg-Tutorial-Developer

Los plugins son ideales para quienes quieren familiarizarse con Gutenberg y desarrollar sitios web, sin necesidad de utilizar mucho código. 

Reflexiones finales sobre los bloques de WordPress

El editor de bloques de WordPress Gutenberg es ahora parte del núcleo de WordPress y el equipo de desarrollo detrás de WordPress tiene grandes planes para él. Eventualmente podrá utilizar Gutenberg para crear menús de navegación. Y en el futuro, el editor será compatible con aún más temas.

Con la ayuda de este tutorial de WordPress para desarrolladores, ahora puede utilizar los bloques de WordPress para crear sitios web y adaptar el contenido a las necesidades de tu. 

Ahora puedes crear bloques de WordPress desde cero y eventualmente construir sitios web completos de WordPress usando el editor de bloques incorporado.
Mientras tanto, debería asegurarse de que los sitios web que desarrolle esténalojados en Raidboxes . Raidboxes ofrece paquetes completos de alojamiento de WordPress adecuados tanto para propietarios de sitios web individuales como para agencias.

tuPreguntas sobre Gutenberg Desarrollo

¿Tienes alguna pregunta para Maddy sobre la guía para desarrolladores Gutenberg ? Esperamos su comentario. ¿Quieres estar informado de los nuevos artículos de WordPress? Siga entonces Raidboxes en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Un comentario sobre"El gran tutorial de WordPress Gutenberg para desarrolladores: crea tus propios bloques".

  1. Hola, estoy empezando con esto de Guttenberg y la verdad es que una vez le pillas el “truco” no se hace tan tedioso y agiliza mucho. Pero tengo una duda, quisiera saber como crear un contenedor de bloques, para por ejemplo crear nuestro propio GRID o posicionar mejor los bloques en la página.

    Gracias

Escribe un comentario

Tu dirección de correo electrónico no se publicará.