Creación de bloques de Gutenberg personalizados para WordPress

Crear bloques personalizados de Gutenberg para WordPress no tiene por qué ser difícil. De hecho, con un poco de código, puede crear sus propios bloques personalizados sin tener que usar un complemento. Gutenberg es un nuevo editor para WordPress que te permite crear bloques personalizados para tu contenido. Los bloques son los componentes básicos de su contenido en Gutenberg. Se pueden usar para agregar texto, imágenes, videos y más. Para crear un bloque personalizado , deberá usar un editor de texto como el Editor de código de WordPress o un complemento como Block Lab. Una vez que tenga un editor de texto, puede crear un nuevo archivo en su tema o directorio de complementos. Lo primero que deberá hacer es crear un tipo de bloque. Un tipo de bloque es una colección de configuraciones que definen cómo se comporta su bloque. Para hacer esto, deberá usar la función register_block_type. Una vez que tenga un tipo de bloque, puede registrarlo con WordPress. Esta función tomará dos argumentos: el nombre de su tipo de bloque y un objeto que contiene la configuración de su bloque. Una vez que haya registrado su tipo de bloque, puede comenzar a agregarle campos. Los campos son las configuraciones que controlan cómo se ve y se comporta su bloque. Para agregar un campo a su tipo de bloque, deberá usar la función add_field. Una vez que haya agregado todos los campos que desea a su tipo de bloque, puede registrarlo con WordPress. ¡Y eso es! Ahora ha creado un bloque de Gutenberg personalizado para WordPress.

El editor de bloques de Gutenberg fue una de las mejoras de WordPress 5.0. El editor de Gutenberg divide el contenido en bloques, que son secciones fácilmente reorganizables. La mayoría de los desarrolladores no podrían crear bloques diseñados de forma nativa porque carecen de habilidades React. La comunidad de desarrolladores de WordPress ha respondido desarrollando herramientas que pueden cumplir con los requisitos de React/JavaScript. Los bloques en Block Lab se crean en tres etapas: agregarlos dentro del administrador, copiarlos y pegarlos, y luego exportarlos. También se puede usar una API para crear controles personalizados para su bloque. Puede que esto no sea mucho para ver, pero le dará una idea de lo que puede hacer con un bloque de Gutenberg personalizado.

Para hacer un bloque, necesitaremos crear un nuevo archivo llamado block-notification-bar.php, que contiene un título (Barra de notificaciones) y tres campos. En respuesta a este archivo, aparecerá un mensaje de notificación indicándonos que coloquemos nuestra plantilla de bloque personalizada en nuestro tema. Antes de cargar el archivo, asegúrese de que esté guardado y cargado en su servidor web. Ahora se ha creado un bloque personalizado para nosotros. Lo único que importa es que logres ese objetivo. Tenemos muchas opciones si queremos ampliar lo que ya hemos creado. Los íconos, los botones y la capacidad de vincular a otra publicación o página son solo algunas de las funciones que se pueden agregar. Todas estas habilidades se pueden lograr a través de Block Lab, así como con otros complementos mencionados anteriormente.

Complemento de bloques personalizados de WordPress

Hay muchos complementos de bloques personalizados geniales disponibles para WordPress. Cada complemento ofrece un conjunto diferente de características y opciones. Algunos complementos de bloques personalizados le permiten crear bloques personalizados para sus publicaciones y páginas, mientras que otros proporcionan un conjunto de bloques prediseñados que puede usar.

Puede crear fácilmente publicaciones y páginas con WordPress agregando contenido y elementos de diseño como bloques. WordPress ofrece una amplia gama de bloques en su configuración predeterminada. Sin embargo, es posible que desee crear un bloque personalizado para realizar una tarea específica. Este tutorial lo guiará a través de los pasos para hacer un bloque completamente único. El primer paso es insertar tres campos en su bloque de testimonios. Haga clic en el botón Agregar campo para comenzar a completar el primer campo. El segundo paso es crear una plantilla de bloque, que determinará exactamente cómo se mostrarán los datos.

El tercer paso es diseñar el marcado de salida del bloque haciendo clic en la pestaña CSS. Al cargar manualmente las plantillas, puede crear su propio bloque personalizado. En este caso, PHP es la mejor forma de interactuar con sus campos de bloque personalizados. Simplemente suba la plantilla del editor a su tema utilizando el método de carga. Para comenzar, obtenga una vista previa de su bloque personalizado. Antes de que pueda obtener una vista previa de su HTML/CSS, debe proporcionar algunos datos de prueba. Cree un sitio web de WordPress personalizado con un bloque de Gutenberg.

Para buscar un bloque, escriba su nombre o palabras clave en el cuadro que aparece después de hacer clic en el botón Agregar nuevo bloque. Puede obtener una vista previa del bloque guardando y editando su publicación y página. En nuestro sitio de prueba, puede ver cómo se ve el bloque de testimonios.

Crear reacción de bloque de Gutenberg

Hay algunas formas de crear un bloque de Gutenberg en React. La primera forma es usar la herramienta CLI create-guten-block. Esto creará un nuevo bloque de Gutenberg para usted. Para usar este método, deberá tener Node.js y npm instalados en su máquina. Una vez que haya instalado esas dependencias, puede crear un nuevo bloque de Gutenberg ejecutando el siguiente comando: create-guten-block my-block Esto creará un nuevo directorio llamado my-block con todos los archivos necesarios para un bloque de Gutenberg. La segunda forma de crear un bloque de Gutenberg en React es usar el paquete @wordpress/block-editor. Este paquete incluye una función auxiliar llamada createBlock que se puede usar para crear bloques de Gutenberg. Para utilizar este método, deberá instalar el paquete @wordpress/block-editor en su proyecto. Una vez que haya instalado el paquete, puede crear un nuevo bloque de Gutenberg ejecutando el siguiente código: import { createBlock } from '@wordpress/block-editor'; createBlock('mi-bloque/mi-bloque', {título: 'Mi Bloque', categoría: 'común', }); Esto creará un nuevo bloque llamado my-block en la categoría común. La tercera forma de crear un bloque de Gutenberg en React es usar la función wp.blocks.createBlock . Esta función es parte de la API de JavaScript de WordPress y se puede usar para crear bloques de Gutenberg. Para usar este método, deberá incluir el paquete wp-api-request en su proyecto. Una vez que haya instalado el paquete, puede crear un nuevo bloque de Gutenberg ejecutando el siguiente código: import { wp } from 'wp'; wp.blocks.createBlock('mi-bloque/mi-bloque', {título: 'Mi bloque', categoría: 'común', }); Esto creará un nuevo bloque llamado my-block en la categoría común.

Aprenda a crear bloques personalizados en este tutorial para el editor de Gutenberg. Utilizará un complemento creado por usted mismo para completar la tarea. Aunque uno de los temas predeterminados está disponible para crear un bloque de Gutenberg personalizado, debemos admitir que es posible. En este tutorial, veremos cómo crear un nuevo bloque personalizado con Gutenberg. Además, personalizaremos el aspecto de la interfaz y el editor en función de las preferencias de diseño que proporcionemos. Si no quiere perder mucho tiempo creando bloques, simplemente puede agregar uno y luego personalizarlo de acuerdo con sus requisitos.

React es fácil de usar en temas personalizados

React es una excelente biblioteca para crear interfaces de usuario con JavaScript. WordPress lo ha estado usando para potenciar el nuevo editor de Gutenberg , así como la pantalla de administración de widgets y las actualizaciones recientes de las capacidades de edición de contenido del sitio. Debido a que React ya está integrado en WordPress, es fácil de usar en temas personalizados.

Gutenberg Crear bloque de botón personalizado

Gutenberg create custom button block es una herramienta muy útil para crear botones personalizados para su sitio web. Con esta herramienta, puede crear fácilmente botones llamativos y funcionales. Esta es una excelente manera de agregar un toque personal a su sitio web y hacer que se destaque del resto.

En este tutorial, aprenderá cómo hacer su primer bloque simple en la popular aplicación. Nuestra aplicación WordPress @create-block es una herramienta oficial que nos permite generar rápidamente código Javascript/PHP/CSS. En el modo interactivo, puede configurar su bloque en una serie de pasos. Cuando recién está aprendiendo sobre Gutenberg, esto puede ser extremadamente útil. Si ya ha creado scaffolding en el bloque, ahora puede acceder al directorio recién creado a través de un editor de código. La estructura del complemento de bloque sigue esto tal como está actualmente (al momento de escribir este tutorial). Repasaremos los detalles de cada archivo y su uso en este módulo.

El indicador de línea de comandos es un método común para especificar opciones para los programas de línea de comandos. Antes de usar las banderas, reemplace los valores en el directorio de banderas con los que desea usar. Una hoja de estilo que se pondrá en cola o se aplicará en el editor. Los detalles básicos del complemento se discuten en detalle. WordPress muestra la información del complemento de forma predeterminada. Para decirle a Git qué archivos ignorar al crear un proyecto controlado por versión, se debe incluir el archivo Gitignore A.. El repositorio contiene información. Config permite a los desarrolladores mantener un estilo de codificación coherente en varios proyectos.

Desarrollo de complementos de WordPress Gutenberg

El complemento de WordPress Gutenberg es un proyecto de código abierto desarrollado por una comunidad de voluntarios. Cualquiera puede contribuir al proyecto y ayudar a mejorarlo. El complemento se actualiza y mejora constantemente. Si es un desarrollador, puede ayudar a contribuir al proyecto desarrollando nuevas funciones o corrigiendo errores.

Probablemente haya oído hablar de Gutenberg (el editor de bloques de WordPress), pero ¿cómo comienza a crear su propio complemento? Los bloques se crean con un simple script de WordPress. El tipo de complemento de WordPress creado aquí suele ser un bloque, pero proporciona un buen punto de partida para otros en el proceso. El script Create Block se puede usar como plantilla para crear su propio complemento. Puede ver fácilmente el bloque en la parte delantera de WordPress, pero tiene una apariencia diferente para ayudarlo a acostumbrarse en la parte trasera. Este archivo debe generarse en modo de desarrollo solo después de que se hayan compilado los activos. /node_modules: esta es la carpeta desde la que se almacenan todos los parámetros dependientes de JavaScript de su complemento.

Los archivos preestablecidos que contienen entornos útiles de Visual Studio Code (VDC) se pueden encontrar en este archivo. Debe asegurarse de estar en la carpeta de complementos de WordPress si desea crear un complemento. Como resultado, podrá ver las etapas de desarrollo y producción del complemento. Abra /src/save.js en su editor para reemplazar la función de guardar con lo siguiente: BlockText se puede generar como una cadena de esta manera. El siguiente código debe agregarse a la raíz del complemento para mostrar sus bloques en una categoría de bloque personalizada. La función registerBlockType.js devuelve una lista de sus categorías de bloques, que luego se pueden volver a compilar utilizando la función registerBlockType.js del complemento.

La edición de contenido de Gutenberg

Los usuarios de WordPress pueden crear, editar y eliminar contenido a través de la aplicación de página única (SPA) que se basa en React. A diferencia del editor de contenido tradicional, este ofrece una interfaz más fluida y fácil de usar. Si desea un editor de contenido más potente, la aplicación Gutenberg no es para usted. Si prefiere un aspecto más relajado, puede confiar en Gutenberg.

Editor de bloques personalizados de WordPress

Puede usar este bloque en cualquier publicación o página que desee. En la pantalla Agregar nuevo bloque, use el cuadro de búsqueda para buscar su bloque escribiendo su nombre o palabras clave. Después de insertar el bloque en el área de contenido, verá los campos de bloque que ha creado para este bloque personalizado.

Este tutorial lo guiará a través del proceso de creación de una instancia de editor de bloques personalizado y totalmente funcional dentro de WordPress. Este editor se construirá completamente dentro de una página de administración de WP personalizada llamada Editor de bloques (de la manera más creativa). En nuestro WordPress Plug-A-Thon, crearemos un editor. Ahora debemos generar algo de HTML en nuestra página personalizada usando el componente React del editor de bloques. Como tercer argumento, usamos la línea dependencias del script ($script_asset['dependencies']). Se asegurará de que los scripts relacionados con WordPress no se incluyan en el paquete integrado. También debemos registrar nuestros estilos CSS personalizados y la biblioteca de formato predeterminada de WordPress para poder usarlos.

Esto nos permite usar JavaScript para generar un Editor de Bloques en el HTML de la página. La magia sucede cuando el componente para esto se llama BlockEditor. Es posible renderizar el editor desde PHP sin crear un JS global. El diseño del editor se basa en andamios, como puede ver aquí, además de algunos proveedores de contexto especializados. Block EditorProvider es el componente más importante del paquete del editor de bloques de WordPress. Como explicamos anteriormente, esto proporciona un nuevo contexto para un editor de bloques completamente nuevo en el contexto de la edición de bloques. Lo logra suscribiéndose al registro provisto (a través del HOC del proveedor withRegistry), escuchando los eventos de cambio de bloque, determinando si el cambio de bloque permaneció persistente y llamando al controlador de entrada onChange cuando sea necesario.

El componente más intrigante es el componente BlockList, que agrega una lista de bloques al editor. Vale la pena estudiar estos componentes en detalle porque son algunos de los más intrincados y complicados. Para obtener más información sobre nuestro componente EditorBlock personalizado, consulte el siguiente artículo. La ranura/relleno se implementa utilizando nuestro componente Blockeditor (ver arriba) para exponer un relleno (barra lateral, InspectorFill) dentro de él, que importamos y representamos en la implementación después. Como resultado, React nos permite mantener un componente de inspección en su DOM mientras lo representa en el marcado en una ubicación separada (por ejemplo, en la barra lateral). Los bloques también se pueden encontrar dentro de LocalStorage bajo la clave getdavesbeBlocks.

Estos datos se serializan en el formato Block Grammar, lo que significa que se pueden almacenar en una cadena. GitHub ha compilado el código completo para el editor de bloques de funcionamiento personalizado. El programa se puede descargar y probar por sí mismo de forma gratuita.