homefinance blog
Muchas personas se quejan de los obstáculos para comenzar a construir bloques y aplicaciones de Gutenberg. La curva de aprendizaje es abrupta, principalmente debido a la dificultad de instalar y configurar el entorno de desarrollo. Además, el conocimiento sólido sobre JavaScript, Node.js, React y Rodux son ingredientes obligatorios para esta receta bastante compleja.
El manual oficial de editor de bloques de WordPress ofrece a los desarrolladores una gran cantidad de información, pero puede perderse con ese gran detalle. Y vale la pena mencionar lo que Matias Ventura, el principal arquitecto del Proyecto Gutenberg, informó en su entrevista con WP Tavern:
Aunque hay personas que pueden aprenderlo rápidamente, sigue siendo una gran barrera para las personas. Creo que hay varias capas a este respecto; La documentación podría ser con un mejor orden de tamaño tanto en la organización como en la presentación. Espero que podamos hacer mucho más allí. Dado esto, decidimos ofrecer un tutorial de paso por paso para ayudar a nuestros lectores a comenzar con el desarrollo de los bloques de Gutenberg. ¿Suena interesante? ¡Vamos a bucear!
Requisitos preliminares para el desarrollo del bloque Gutenberg para este tutorial, las únicas habilidades necesarias son un buen conocimiento del desarrollo de complementos de WordPress y al menos una comprensión básica de HTML, CSS, JavaScript y React.
¿Será este un proyecto ambicioso? ¡Apuesto a que lo será! No fue fácil encontrar el compromiso correcto entre la integridad y la simplicidad o decidir qué temas incluir y omitir. Esperamos que los lectores intermedios y avanzados nos perdonen que no hemos profundizado ciertos conceptos, como el estado React, la tienda Redex, los componentes de gran pedido, etc. Estos temas requieren espacio y atención adicionales y probablemente estén demasiado avanzados para comenzar el desarrollo de bloques (a menos que sea un desarrollador React). Por la misma razón, no cubriremos algunos de los temas más avanzados relacionados con el desarrollo de bloques de Gutenberg, como bloques dinámicos y meta cajas. Con el conocimiento que adquirirá al final de este artículo, podrá comenzar Divirtiéndose y sea productivo. Inmediato. Una vez que comience a construir bloques, estará listo para mejorar aún más sus habilidades y construir bloques de Gutenberg aún más avanzados. Comenzando con el desarrollo del bloque Gutenberg, puede ser intimidante al principio … ¡Pero sin miedo! Esta guía para principiantes completa ha cubierto que hace clic para tuitear ¿Qué es un bloque de Gutenberg? Desde que se lanzó por primera vez en diciembre de 2018, el editor de bloques ha mejorado mucho desde todos los puntos de vista: API más fuertes, una interfaz de usuario más avanzada, uso mejorado, muchos bloques nuevos, primeras implementaciones de la edición completa de el sitio y muchos más.
En resumen, a pesar de que Gutenberg todavía está en marcha, ha sido un largo camino, y hoy, el editor de bloques es un candidato completo como creador de páginas y sitios de confianza. Desde el punto de vista del desarrollador, Gutenberg es una página única basada en React (SPA) que permite a los usuarios de WordPress crear, editar y eliminar contenido en WordPress. Sin embargo, esto no debería hacerle pensar en una versión mejorada del editor de contenido tradicional. Queremos aclarar esto: Gutenberg no es un editor regular de Wysiwyg. Más bien, redefine toda la experiencia de edición de WordPress. En Gutenberg, el contenido se divide en bloques, que son “ladrillos” que los usuarios pueden usar para crear publicaciones y páginas o todo su sitio web. Pero, ¿qué es un bloque técnico? Nos gusta la definición de WordPress: “bloqueo” es el término abstracto utilizado para describir las unidades de marcado que, compuestas juntas, forman el contenido o la apariencia de una página web. La idea combina los conceptos de lo que hacemos hoy en WordPress con códigos cortos, HTML personalizado y Discovery incorporados en una sola experiencia de usuario y API consistente.
Los títulos, párrafos, columnas, imágenes, galerías y todos los elementos que componen la interfaz del editor, desde los paneles en la barra lateral hasta los comandos de bloqueo de la barra de herramientas, son componentes React. Entonces, ¿cuáles son los componentes reaccionados? W3Schools ofrece la siguiente definición: los componentes son bits de código independientes y reutilizables. Estos tienen el mismo propósito que las funciones de JavaScript, pero trabajan aislados y devuelven HTML a través de una función Render () con Bloques de Gutenberg en WordPress 5.8. Si bien la experiencia de edición ofrecida por Gutenberg es nueva en comparación con el clásico editor de WordPress, la forma en que WordPress almacena su contenido en la base de datos no cambia en absoluto. Esto se debe a que Gutenberg es una aplicación que funciona en WordPress, pero no cambia la forma en que funciona CMS.
Las publicaciones (y estas incluyen publicaciones, páginas y tipos de publicaciones personalizadas) creadas con Gutenberg todavía se almacenan en la tabla WP_Posts, al igual que en el editor clásico. Pero en una publicación creada con Gutenberg, encontrará información adicional en la tabla que representa una diferencia fundamental entre las publicaciones creadas por el editor clásico y Gutenberg. Esta información muestra que HTML comenta y tiene una función específica: delimitación de bloques:
Una publicación de blog en la vista del editor de códigos. Los delimitadores de los bloques llaman a WordPress cuyo bloque se reproducirá en la pantalla. También proporcionan valores para las propiedades del bloque en un objeto JSON. Estos elementos de accesorios dictan cómo se debe representar el bloque en la pantalla:
Una publicación de blog almacenada en la tabla WP_Posts. Configuración del entorno de desarrollo de WordPress La configuración de un entorno de desarrollo de JavaScript moderno requiere un conocimiento sólido de tecnologías avanzadas como Webpack, React y JSX, Babel, ESLTT, etc. Intimidado? ¡No ser! La comunidad de WordPress ya ha llegado a ayudar al proporcionar herramientas fuertes que le permiten evitar un proceso de configuración manual desordenado. Para mantener cosas simples, no cubriremos la transpilación en este artículo (con lo que, sin embargo, le recomendamos que se familiarice una vez que haya aprendido los elementos básicos del desarrollo de bloques). En cambio, introduciremos dos herramientas alternativas que puede usar para configurar rápida y fácilmente un entorno de desarrollo de JavaScript moderno en unos minutos. Depende de usted elegir el que considere más conveniente para su proyecto. Configurar un entorno de desarrollo de JavaScript para construir bloques Gutenberg es un proceso de tres pasos:
Instalar node.js y npm
Configurar el entorno de desarrollo
Configurar el complemento de bloqueo
Vamos a empezar. 1. Instale Node.js y NPM antes de instalar el entorno de desarrollo y registrar su primer bloque, deberá instalar Node.js y Node Package Manager (NPM). Info Node.js es un JavaScript Runimpot basado en el motor JavaScript V8 AL. NPM, comúnmente conocido como Node Package Manager, se considera “el registro de software más grande del mundo”. Puede instalar Node.js y NPM de varias maneras diferentes. Pero primero, es posible que desee verificar si el software ya está instalado en la computadora.
Para hacer esto, inicie el terminal y ejecute el siguiente comando: nodo -v si el resultado no se encuentra el comando, entonces node.js no está instalado en la computadora y puede continuar con la instalación. Para este artículo, elegí la opción de instalación más simple, que es el instalador de nodos. Todo lo que tiene que hacer es descargar la versión correspondiente de su sistema operativo y iniciar el Asistente de instalación: Node.js Descargar página Después de instalar Node.js, ejecute el comando nodo -v nuevamente en el terminal. También puede ejecutar el comando NPM -V para confirmar que tiene el paquete NPM disponible. Ahora está equipado con las siguientes herramientas:
El paquete NPX Node.js (consulta el paquete de documentos). Esto le permite ejecutar un comando NPM sin instalarlo primero.
NPM Node.js Package Manager (ver documentos). Se utiliza para instalar adicciones y ejecutar scripts.
El siguiente paso es instalar el entorno de desarrollo. 2. Configure su entorno de desarrollo Una vez que tenga las últimas versiones Node.js y NPM en su máquina local, necesitará un entorno de desarrollo de WordPress. Puede usar un entorno de desarrollo local como Devkinsta o usar la herramienta oficial de WordPress. Echemos un vistazo a ambas opciones. Opción 1: El entorno de desarrollo local (Devkinsta) con solo unos pocos clics, puede instalar WordPress local usando Devkinsta, nuestra moderna herramienta de desarrollo de WordPress. O puede optar por otra herramienta de desarrollo local como MAMP o XAMPP:
Cree un nuevo sitio web de WordPress en Devkinsta. Opción 2: WP-ENV también puede optar por la herramienta WP-NV oficial, que ofrece un entorno local de desarrollo de WordPress que puede lanzar directamente desde la línea de comandos. Noah Alen lo define de la siguiente manera: los entornos locales de WordPress ahora son tan simples como ejecutar un solo pedido. WP-NV es una herramienta de configuración cero para entornos locales de WordPress que no dañan. Proporciona decisiones sobre las opciones para que los usuarios puedan iniciar rápidamente WordPress sin perder el tiempo. De hecho, el propósito es hacer que estos entornos sean fácilmente accesibles para todos, ya sea que sea un desarrollador, diseñador, gerente o cualquier otra persona. Si decide intentarlo, instalar el WP-NV requiere un esfuerzo mínimo. Simplemente siga estos pasos: Paso 1: Confirme la instalación de Docker y Node.js Para cumplir con los requisitos técnicos, primero deberá tener instalados Docker y Node.js en su computadora. Esto se debe a que WP-NV crea una instancia de Docker que ejecuta un sitio web de WordPress. Cualquier cambio en el Código se refleja inmediatamente en el Tribunal de WordPress. Paso 2: Instale @WordPress/Env en la línea de comando con Docker y Node.js ejecutando en su computadora, puede continuar e instalar el entorno de desarrollo de WordPress. Puede instalar WP-NV global o localmente. Para hacer esto a nivel mundial, deberá ejecutar el siguiente pedido en el directorio de arado (más sobre esto en el cuadro de notificación “importante” a continuación): NPM Install -g @WordPress/Env para romper esto: NPM Instalar Instalar el paquete.
-G adjunto al orden instalar el paquete especificado a nivel mundial.
@WordPress/Env es el paquete que está a punto de instalar.
Incumplimiento importante, en Mac o Linux, los paquetes de nudos están instalados en/usr/local/lib/node_modules.Si el usuario actual no tiene privilegios de escritura en ese directorio, se emitirá un error EACCES.Obtenga más información sobre cómo resolver los errores de permiso de EACCE al instalar paquetes a nivel mundial.Para confirmar que el WP-NV se ha instalado correctamente, ejecute el siguiente comando: WP-NV-VVersion, debería ver la versión actual de WP-EV, lo que significa que ahora puede iniciar el entorno utilizando su próximo pedido: WP-NV Inicio usted puede acceder al tablero de WordPress usando la siguiente dirección: http: // localhost: 8888/wp-admin/
Las credenciales predeterminadas son las siguientes:
Nombre de usuario: administrador
Contraseña: contraseña
Configure su complemento de bloque Ahora necesita un complemento de bloque de inicio para construir. Pero en lugar de crear manualmente un bloque de desarrollo con todos los archivos y carpetas necesarios, simplemente puede ejecutar una herramienta de desarrollo que ofrezca todos los archivos y configuraciones que necesita para iniciar el desarrollo de los bloques. Nuevamente, tiene algunas opciones para elegir. Echemos un vistazo a cada uno. Opción 1: Configuración de un bloque de complementos con @WordPress/Create-Block @WordPress/Create-Block es la herramienta de configuración cero oficial para crear bloques Gutenberg: Crear bloque es una forma oficial de crear bloques para un bloque para un complemento de WordPress. Proporciona una configuración moderna sin configuración. Genera el código PHP, JS, CSS y todo lo que necesita para comenzar el proyecto. Se inspira en gran medida en la aplicación Create-React. Grandes felicitaciones a @gaearon, todo el equipo de Facebook y la comunidad React. Una vez que su entorno local está activo y ejecutado, puede configurar un bloque de inicio ejecutando el comando npx @wordpress/create-block y proporcionará todos los archivos y carpetas que necesita para crear el andamio de complementos y grabar un nuevo bloque. Hagamos una prueba para ver cómo funciona. Desde el instrumento de línea de comando, navegue por el director/wp-content/plugins/y ejecute el siguiente comando: npx @wordpress/create-block my-primero-bloque Cuando se le pide que confirme, ingrese y para continuar: creando un bloque con @WordPress/Create-Block. El proceso toma unos momentos. Cuando esté completo, debe recibir la siguiente respuesta:
Se creó el complemento de bloqueo.¡Y eso es!Ahora inicie el entorno de desarrollo de WordPress y acceda a la pantalla del complemento desde el tablero de WordPress.Un nuevo complemento llamado “My First Block” debería haberse agregado a su lista de arados: el enchufe de bloqueo se instaló correctamente.Información Si usa la herramienta WP-NV y ejecuta el inicio WP-NV desde el director que contiene el complemento, montará automáticamente el complemento.Si está ejecutando WP-NV Start desde cualquier otro directorio, se creará un entorno genérico de WordPress (también consulte el sitio web de WordPress Development).Active el complemento si es necesario, cree una nueva publicación de blog, despliegue el inserto del bloque en la sección Widgets y seleccione su nuevo bloque:
Un ejemplo de un bloque creado con @WordPress/Create-Block. Ahora vuelva al terminal y cambie el directorio actual a my-Forst-Block: CD My-First-Block, luego ejecute el siguiente comando: NPM Inicie esto le permite ejecutar el complemento en el modo de desarrollo. Para crear el código de producción, debe usar el siguiente pedido: NPM Ej. Opción de compilación 2: Configuración de un bloque de complementos con bloqueo-guten-block create-guten-block es una herramienta de desarrollo de terceros para construir bloques de gutenberg: create-guten-blolock es un conjunto de herramientas de desarrollo de configuración cero (#0CJS) para desarrollar bloques de WordPress Gutenberg en unos minutos sin configurar React, Webpack, ES6/7/8/Next, Esign, Babel, etc. Al igual que la herramienta oficial Crear-Block, Crear-Guten-Block, se basa en Crear react-app y puede ayudarlo a generar el primer enchufe de bloqueo sin problemas. El conjunto de herramientas ofrece todo lo que necesita para crear un complemento moderno de WordPress, incluido el siguiente: Syntax React, JSX y ES6.
Proceso de desarrollo/producción de Webpack detrás de escena.
Suplementos de lenguaje más allá de ES6, como el operador de suministro de objetos.
CSS con prefijo automático, por lo que no necesita -webkit u otros prefijos.
Un script de compilación para combinar JS, CSS e imágenes para mapas de origen.
No hay actualizaciones de problemas para las herramientas anteriores con una sola adicción a CGB-ICRIPTS.
Tenga en cuenta la siguiente advertencia: la compensación es que estas herramientas están preconfiguradas para operar de manera específica. Si su proyecto necesita más personalización, puede “expulsarlo” y personalizarlo, pero deberá mantener esta configuración. Una vez que tenga un sitio web local de WordPress en cuestión, inicie la herramienta de línea de comandos, navegue por la carpeta /WP-Content /Plugins de su instalación y ejecute el siguiente comando: NPX Create-Guten-Block My-First-Block deberá tener tener Para esperar uno o dos minutos mientras se crea la estructura del proyecto y las adicciones descargadas: creando un bloque Gutenberg con bloqueo-guten-block. Cuando se completa el proceso, debería ver la siguiente pantalla:
Gutenberg Block creó con éxito con el bloque CREATE-GUTEN. La siguiente imagen muestra la estructura del proyecto con el terminal que se ejecuta en el código Visual Studio:
Complemento de bloqueo en el código Visual Studio. Ahora regrese al tablero de WordPress. Se debe enumerar un nuevo elemento en la pantalla de arado: es mi primer bloque:
La pantalla del complemento con un nuevo complemento creado con Bloque de Guten. Active el complemento y regrese al terminal. Cambie el directorio actual a my-Forst-Block, luego ejecute NPM Start: CD My-First-Block NPM Inicio Debe recibir la siguiente respuesta:
NPM comenzó. Nuevamente, esto le permite ejecutar el complemento en el modo de desarrollo. Para crear el código de producción, debe usar: NPM Run Build activa el complemento y crea una nueva publicación o página, luego explore sus bloques y seleccione su nuevo bloque Gutenberg:
Un nuevo bloque creado con Bloque de Guten. Para una presentación más en profundidad o errores, consulte la documentación proporcionada por Ahmad Awais. Una presentación del andamio del bloque de inicio cualquiera de los dos herramientas de desarrollo creado en bloque o la opt de bloqueo-guote, ahora tiene un andamio de bloque que puede usar como punto de partida para construir un complemento de bloque. Pero, ¿qué es exactamente el andamio de bloque? El andamio de bloque es a corto plazo que describe la estructura del directorio que necesita para que WordPress reconozca un bloque. Por lo general, ese directorio incluye archivos como index.php, index.js, style.css y otros, que a su vez contienen llamadas como registro_block_type. Opté por la herramienta de desarrollo de bloques creada oficialmente, como se usa en el manual del editor de bloques. Pero incluso si decide usar una herramienta de terceros, como el bloqueo de guten creado, su experiencia no será muy diferente. Dicho esto, profundicemos en la herramienta Crear bloque. Una mirada más cercana al instrumento de desarrollo de la creación de bloques como se mencionó anteriormente, el bloque creado es la herramienta de línea de comandos oficial para crear bloques Gutenberg. Ejecutar @WordPress/Create-Block en su terminal genera archivos PHP, JS y SCSS y el código requerido para registrar un nuevo tipo de bloque: NPX @WordPress/Create-Block [Opciones] [Slug] (Opcional)-Se usa para asignar el Bloque de babosa e instale el complemento
[Opciones] (Opcional) – Opciones disponibles
Por defecto, se asigna una plantilla de Esnext. Esto significa que obtendrá la próxima versión de JavaScript, con la adición de la sintaxis JSX. Si omite el nombre del bloque, el comando se ejecuta en modo interactivo, lo que le permite personalizar más opciones antes de generar los archivos: npx @wordpress/create-block create-block en modo interactivo. La imagen a continuación muestra la estructura del archivo de un complemento de bloque creado con la herramienta oficial de creación de bloques:
Archivos y carpetas de un complemento de bloque creado con @WordPress/Create-Block. Dicho esto, revisemos los archivos y carpetas principales de nuestro nuevo enchufe de bloqueo. El archivo del complemento con el archivo del complemento principal registra el bloque en el servidor: /** * Nombre del complemento: Mi primer bloque * Descripción: Bloque de ejemplo escrito con ESNEXT estándar y soporte JSX – Se requiere un paso de compilación. * Requiere al menos: 5.8 * Requiere Php: 7.0 * Versión: 0.1.0 * Autor: The WordPress Contribuyentes * Licencias: LPL-2.0- OR-LATER * Licencias: https://www.ngnu.org/licenses/gpl- 2.0.html * Dominio de texto: My-Forst-Block * * @package create-block * / / ** * registra el bloque usando el metatata cargado desde el archivo `block.json`. * Detrás de escena, se registra también todas las evaluaciones, por lo que se enmaran * a través del editor de bloques en el contexto correspondiente. * * @see https://develooper.wordpress.org/block-ditor/tutorials/block-turial/writing-your-first-lack-type/ */function create_block_my_first_block_it () {registro_block_type (__dir__); } add_action (‘init’, ‘create_block_my_first_block_block_init’); La función registra_block_type registra un tipo de bloque en el servidor utilizando los metadatos almacenados en el archivo block.json. La función toma dos parámetros:
El nombre del tipo de bloque, incluido el espacio de nombre o una forma de la carpeta en la que el archivo block.json o un objeto wp_block_type completa de argumentos de tipo de bloque
En el código anterior, el argumento del tipo de bloque es proporcionado por la constante mágica __dir__. Esto significa que el archivo block.json está en la misma carpeta que el archivo de complemento. Package.json File Package.json Define las propiedades y scripts de JavaScript para su proyecto aquí puede instalar adicciones al proyecto. Para comprender mejor para qué está destinado este archivo, ábralo con su editor de código favorito: {“Nombre”: “My-First-Block”, “Versión”: “0.1.0”, “Descripción”: “Bloque de ejemplo escrito con ESNEXT Standard y JSX Support-Build Step requerido “,” Autor “:” The WordPress Contribuyentes “,” Licencia “:” LPL-2.0-OOR-LATER “,” Main “:” Build/Index.js “,” Scripts “: {” Construir “:” wp-iscris build “,” formato “:” formato WP-scripts “,” Lint: CSS “:” WP-Iscris Lint-Style “,” Lint: JS “:” WP-Scripts Lint-JS “,” Inicio “:” WP-Inscripts inicio “,” Packages-UPDate “:” WP-SCRIPTS PACKAGES-UPDATE “,” Dependencias “: {“@WordPress/Block-Editor “:” ^7.0.1 “,”@wordpress/blocks “:”^11.0.1 “,”@wordpress/i18n “:”^4.2.1 “},” devdependencies “: {“@wordpress/scripts “:”^18.0 .0 “} } La propiedad de los scripts es un diccionario que contiene comandos que se ejecutan en diferentes momentos en el ciclo de vida de un paquete usando NPM Ej. En este artículo, utilizaremos los siguientes comandos: NPM Run Build – Cree una versión de producción (tableta).
NPM Run Start: cree una versión de desarrollo (sin comprimir).
Las dependencias y las Devdependencias son dos objetos que el nombre de un paquete masculino a una versión. Se necesitan dependencias en la producción, mientras que los devedependes solo se necesitan para el desarrollo local (lea más). La única dependencia de desarrollo implícito es el paquete @WordPress/Scripts, que se define como “una colección de scripts reutilizables adaptados para el desarrollo de WordPress”. Archivo block.json que comienza con WordPress 5.8, el archivo Metadate Block.json es la forma canónica de registrar tipos de bloques. Tener un archivo block.json ofrece varios beneficios, incluido un rendimiento mejorado y una mejor visibilidad en el director de complementos de WordPress: en términos de rendimiento, cuando los temas aceptan activos perezosos, los bloques registrados con block.json tendrán en la cola de los activos optimizados de inmediato. Los elementos CSS y JavaScript de Frantend enumerados en las propiedades de estilo o script se colocarán en la cola solo cuando el bloque esté presente en la página, lo que resulta en pequeños tamaños de la página. Ejecutar el comando @wordpress/create-block genera el siguiente bloque.json: {“apiversity”: 2, “name”: “create-block/my-forst-block”, “versión”: “0.1.0”, “,” Título “:” My First Block “,” Categoría “:” Widgets “,” Icon “:” Smiley “,” Descripción “:” Bloque de ejemplo escrito con ESNEXT Standard y JSX Soporte – Se requiere paso de construcción “,” Admite “: {“Html”: false}, “textdomain”: “my-forst-block”, “editorScript”: “archivo :./ build/ index.js”, “editorStyle”: ”
Archivo: ./ build/ index.css “,” estilo “:” archivo: ./ build/ style -index.css “} Aquí está la lista completa de propiedades predeterminadas: apofire -la versión API utilizada por el bloque (la actual La versión es 2)
Nombre: un identificador único para un bloque que incluye un espacio de nombre
Versión: la versión actual de un bloque
Título: un título que se muestra para un bloque
Categoría: una categoría de bloque
ícono: un caracol Dashicon o un icono SVG personalizado
Descripción: una breve descripción visible en el inspector de bloques
Admite: un conjunto de opciones para controlar las características utilizadas en el editor
Textdomain-plugin text dominio
EditorScript – Definición del script del editor
Editor Style – Definición del estilo del editor
Estilo: proporciona estilos alternativos para un bloque
Además de las propiedades enumeradas anteriormente, puede (y probablemente puede definir) un objeto de atributos que proporciona información sobre los datos almacenados por su bloque en el bloque. Atributo y valor es la definición de atributo.Eche un vistazo al siguiente ejemplo de definiciones de atributos: “atributos”: {“contenido”: {“tipo”: “matriz”, “fuente”: “niños”, “selector”: “p”}, “alinearse”: {“Tipo”: “cadena”, “predeterminado”: “ninguno”}, “enlace”: {“tipo”: “cadena”, “predeterminado”: “https://kinsta.com”}}, profundizaremos El archivo block.json más adelante en el artículo, pero le recomendamos que también consulte al manual del editor de bloques para obtener información más detallada sobre metadatos y los atributos de Block.json.SRC File SRC File es el lugar donde se lleva a cabo el desarrollo.En esa carpeta, encontrará los siguientes archivos: index.js
Editar.js
rescate.js
editor.scss
estilo
El archivo index.js index.js es el punto de partida. Aquí importará dependencias y registrará el tipo de bloque en el cliente: import {registreBockype} de ‘@wordpress/blocks’; import ‘./style.scss’; Importar editar de ‘./edit’; importar salvar de ‘./save’; RegisterBlockType (‘Create-Block/My-Forst-Block’, {editar: editar, guardar,}); La primera instrucción importa la función RegistroBlockType desde el paquete @WordPress/Blocks. Las siguientes instrucciones de importación importan la hoja de estilo junto con las funciones de edición y guardado. La función RegistroBlockType registra el componente del cliente. La función tiene dos parámetros: un nombre de bloque, espacio de nombres/nombre de bloque (al igual que el registrado en el servidor) y un objeto de configuración de bloque. La función Editar ofrece la interfaz del bloque como se muestra en el editor de bloques, mientras que la función Guardar ofrece la estructura que se serializa y guardará en la base de datos (lea más). Edit.js edit.js es el lugar donde construirá la interfaz de administración de bloque: import {__} de ‘@wordpress/i18n’; Import {uslockprops} de ‘@wordpress/block-editor’; Import ‘./edor.scss’; Exportar función predeterminada edit () {return (
{__ (‘mi primer bloque de bloque del editor!’, ‘My-first-blck’)}
);
} Primero, importa la función __ del paquete @WordPress/I18N (este paquete contiene una versión JavaScript de las funciones de traducción), el USBLockProps React Hook y el archivo Editor.SCSS.Después de eso, exporta el componente React (lea más sobre las declaraciones de importación y exportación).El archivo rescue.js save.js es el lugar donde construimos la estructura de bloque que se guardará en la base de datos: import {__} de ‘@wordpress/i18n’;Import {uslockprops} de ‘@wordpress/block-editor’;Exportar función predeterminada save () {return (
{__ (‘My First Block-Hello del contenido guardado!’, ‘My-forst-block’)}
);
} editor.scss y style.scss Aparte de los scripts, dos archivos SASS están en el FLDERS SRC. El archivo editor.scss contiene los estilos aplicados al bloque en el contexto del editor, mientras que el archivo style.scss contiene los estilos para la visualización en front y. Profundizaremos estos archivos en la segunda parte de esta guía. Node_modules y construir carpetas El archivo node_modules contiene módulos de nodo y sus adicciones. No profundizaremos en los paquetes de nudos, ya que excede el alcance de este artículo, pero puede leer más en este artículo sobre dónde se instalan los paquetes NPM. La carpeta de compilación contiene los archivos JS y CSS resultantes del proceso de construcción. Puede profundizar en el proceso de construcción en la compilación de Esnext y las guías de configuración de compilación de JavaScript. El proyecto: la construcción de su primer bloque de Gutenberg es el momento de ensuciar nuestras manos. Esta sección le enseñará cómo crear un complemento que ofrezca un bloque CTA llamado Bloque de Afiliados. El bloque consistirá en dos columnas, con una imagen izquierda y un párrafo de texto. Se colocará un botón con un enlace personalizable debajo del texto:
El tipo de bloque que aprenderá a construir en esta guía. Este es solo un ejemplo simple, pero nos permite cubrir los elementos básicos del desarrollo de los bloques de Gutenberg. Una vez que obtenga una comprensión clara de los elementos básicos, puede continuar y crear bloques de Gutenberg más y más complejos con el editor de bloques manuales y cualquier otro recurso vasto disponible. El código de información de ejemplos proporcionados en este tutorial también está disponible en la referencia. Suponiendo que tenga la última versión de WordPress en su entorno de desarrollo local, esto es lo que aprenderá de aquí: cómo configurar el complemento de bloque de inicio
Block.json en el trabajo
Uso de componentes construidos: componente RichText
Agregar controles al bloque de la herramienta de bloqueo
Personalización del bloque de configuración de la barra lateral
Agregar y personalizar un enlace externo
Agregar más estilos de bloque
Imbrourcing de bloques con componente Innerblocks
Mejoras adicionales
¡En sus marcas, listos, fuera! Cómo configurar el complemento de bloque de arranque iniciar la herramienta de línea de pedido y navegar por la carpeta /WP-Content /Plugins:
Nueva terminal en la carpeta en Mac OS. Ahora, ejecute el siguiente comando: npx @wordpress/create-block Este comando genera archivos php, scss y js para registrar un bloque en modo interactivo, lo que le permite agregar fácilmente los datos necesarios para su bloque para nuestro ejemplo. Usaremos lo siguiente. Detalles:
BLOCK SLUG: My-Afiliat Block
Espacio de nombre interno: my-afilite-plugin
Título Mostrado Bloque: bloque afiliado
Descripción breve del bloque: un ejemplo de un bloque para lectores de Kinsta
Dashicon: dinero
Categoría de nombre: diseño
El autor del complemento: su nombre
Licencia: –
Enlace al texto de la licencia: –
La versión actual del complemento: 0.1.0
La instalación del complemento y todas las adicciones lleva unos minutos. Cuando se complete el proceso, verá la siguiente respuesta:
El bloque afiliado fue instalado y registrado para el desarrollo. Ahora, ejecute el siguiente pedido desde la carpeta /WP-Contemplate /Plugins: CD My-Affilite-Block Info Inicie http: // localhost: 8888/wp-login en su navegador web y use nombre de usuario: administrador y contraseña: contraseña para conectarse al tablero de WordPress.
Ejecutar comandos en Visual Studio Code Terminal. Finalmente, desde la carpeta de su complemento (my-afiliado-bloque en nuestro ejemplo), puede iniciar el desarrollo con: npm iniciar ahora abra la pantalla del complemento para encontrar y activar el afiliado de bloqueo del complemento:
Bloque de afiliados de complemento. Cree una nueva publicación, abra el dispositivo de inserción del bloque y desplácese hacia abajo hasta la categoría de diseño. Haga clic para agregar el bloque de afiliados:
Un bloque de inicio construido con @WordPress/Create-Block. Block.json en el trabajo Como mencionamos anteriormente, registrando bloques en el servidor se lleva a cabo en el archivo .php principal. Sin embargo, no definiremos la configuración en el archivo .php. En cambio, usaremos el archivo block.json. Entonces, abra el bloque. 0 “,” Título “:” Bloque de afiliación “,” Categoría “:” Diseño “,” Icono “:” Money “,” Descripción “:” Un bloque de ejemplo para los lectores de Kinsta “,” Apoya ” : {“html”: falso}, “textdomain”: “my-afilite-blok”, “editorScript”: “archivo :./ build/ index.js”, “editorStyle”: “archivo: ./ build.css” , “Estilo”: “Archivo: ./ build/ style-index.css”} Escrituras y estilos Editorscript, Editorstyle y Style ofrecen formas relativas de los estilos delanteros y de back-end. No tiene que registrar manualmente los scripts y los estilos definidos aquí, ya que se registran automáticamente y se colocan en WordPress. Para probar esto, inicie el inspector de navegador y abra la pestaña de red: Inspección de recursos en Chrome Devtools. Como puede ver en la imagen de arriba, nuestro script de índice.
Regístrese para el boletín
¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%?¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress! Suscríbase ahora
Las propiedades de la UI Título y la descripción de etiquetas proporcionan las etiquetas necesarias para identificar el bloque en el editor:
Nombre y descripción del bloque en la barra lateral del bloque.Palabras clave Como se mencionó anteriormente, puede configurar con precisión la configuración de bloque utilizando propiedades y atributos.Por ejemplo, puede agregar una o más palabras clave para ayudar a los usuarios a buscar bloques: {“Palabras clave”: [“Kinsta”, “afiliados”, “dinero”]} Si ahora ingresa “Kinsta”, “afiliados” o “dinero “En el inserter rápido, el editor le sugerirá el bloque de afiliados:
Buscando un bloque usando una palabra clave en el inserter rápido. Ubicación Si se pregunta cómo ocurre la localización de las cadenas en el archivo JSON, aquí está la respuesta: en JavaScript, ahora puede registrar el método BLockypeFromMetadata desde el paquete de @WordPress/Blocks para registrar un tipo de bloque de tipo Tipo de tipo Tipo Tipo Tipo de tipo El tipo metatata cargada desde block.json filete. Todas las propiedades localizadas se envuelven automáticamente en la función _x (del paquete @wordpress/i18n) de forma similar a cómo funciona en php con registro_type_from_metadata. El único requisito es establecer la propiedad TextDomain en el archivo block.json. Aquí tenemos el uso de la función RegistroBlockype de RegistroBlockypeFromMetadata, ya que este último ha sido Depreced Guetenberg 10.7, pero el mecanismo es el mismo. Uso de componentes incorporados: el componente RichText Los elementos que suben un bloque Gutenberg tienen un componentes, y puede acceder a los componentes a través de la variable global WP. Por ejemplo, intente escribir WP.Editor en la consola de su navegador. Esto le dará la lista completa de los componentes incluidos en el módulo WP.Editor. Desplácese por la lista y adivine para qué los componentes tienen un destinado por sus nombres. Del mismo modo, puede verificar la lista de componentes incluidos en los módulos WP.Components:
Componentes del editor WP. La programación modular de información es una técnica de diseño de software que enfoca la separación de la funcionalidad del programa independiente, módulos intercambiables, de modo que cada uno contiene todo para ejecutar solo un aspecto de la funcionalidad deseada (fuente: Wikipedia). Ahora regrese al archivo Edit.js y eche un vistazo más de cerca al script: import {__} de ‘@wordpress/i18n’; Import {uslockprops} de ‘@wordpress/block-editor’; Import ‘./edor.scss’; Exportar función predeterminada edit () {return (
{__ (‘mi primer bloque de bloque del editor!’, ‘My-first-blck’)}
); } Este código genera un bloque estático con texto simple y no edible. Pero podemos cambiar las cosas fácilmente: el bloque de inicio en el editor de códigos. Para hacer el texto editable, deberá reemplazar la etiqueta actual
con un componente que haga que el contenido de entrada sea editable. Para esto, Gutenberg ofrece el componente construido Richtext. Agregar un componente construido a su bloque es un proceso de 5 pasos:
Importar los componentes necesarios desde un paquete de WordPress
Incluya los elementos apropiados en su código JSX
Definir los atributos necesarios en el archivo block.json
Definir manejadores de eventos
Guardar datos
Paso 1: importe los componentes necesarios desde un paquete de WordPress ahora abra el archivo edit.js y modifique la siguiente instrucción de importación: import {useBlockProps} desde ‘@wordpress/block-editor’; … AT: import {UseBlockProps, RichText} de ‘@wordpress/block-editor’; De esta manera, importe la función UseBLockProps y el componente RichText en el paquete @wordpress/block-editor. Use blockprops UseBlockProps React Marca el elemento de cubierta del bloque: cuando usa la versión 2 de la API, debe usar el nuevo gancho UsBlockProps en la función Editar para marcar el elemento de portada. El gancho insertará los atributos y los manejadores de eventos necesarios para activar el comportamiento del bloque. Cualquier atributo que desee transmitir al elemento de bloque debe transmitirse a través de UseBlockProps y el valor devuelto está muy extendido en el elemento. Para decir cosas simples, UseBLockProps atribuye automáticamente los atributos y clases al contenedor (elemento en nuestro ejemplo): elementos y clases generados por UseBlockProps. Si elimina UseBlockProps del elemento de envoltura, tendrá una cadena de texto simple sin acceso a la funcionalidad y al estilo de estilo:
El mismo bloque sin UseBlockProps. Como explicaremos más adelante, también puede enviar un objeto de propiedad para usar para personalizar el resultado. RichText El componente RichText ofrece una entrada que se puede editar, lo que permite a los usuarios editar y formatear el contenido. Encontrará el componente documentado en GitHub en Gutenberg/Packages/Block-Editor/Src/Components/Rich-Text/Readme.md. Paso 2: incluya los elementos apropiados en su código JSX … const blockprops = useBlockProps (); Return (); Comentemos en la línea con la línea: TagName: el nombre de la etiqueta Editar HTML
OnChange: se llamó a la función cuando cambia el contenido del elemento
Formats permitidos: una serie de formatos permitidos. Por defecto, todos los formatos están permitidos
Valor: la cadena HTML que se puede hacer editable
Marcador de posición: texto sustituyente para mostrar cuándo el artículo está vacío
Paso 3: Defina los atributos necesarios en el archivo de bloque. JSON Los atributos proporcionan información sobre los datos almacenados por un bloque, como contenido rico, color de fondo, URL, etc. Puede establecer un número arbitrario de atributos en un objeto de atributos en pares de clave/valor, donde la clave es el nombre del atributo y el valor es la definición del atributo. Ahora abra el archivo block.json y agregue los siguientes atributos Prop: “Atributos”: {“Content”: {“Tipo”: “String”, “Fuente”: “Html”, “Selector”: “P”}}, El atributo de contenido permite almacenar el texto de typeed de usuario en el campo Editar: el tipo indica el tipo de datos almacenados por el atributo. El tipo es necesario, a menos que defina una propiedad enuna.
La fuente define cómo se extrae el valor del atributo del contenido de la publicación. En nuestro ejemplo, es el contenido de HTML. Tenga en cuenta que si no proporciona una propiedad de origen, los datos se almacenan en el delimitador del bloque (lea más).
Selector es una etiqueta HTML o cualquier otro selector, como un nombre de clase o atributo de identificación.
Pasaremos la función editar un objeto de propiedades. Entonces, regrese al archivo edit.js y haga lo siguiente: Exportar función predeterminada editar ({atributes, setTributes) {…} Paso 4: Defina los manipuladores de eventos El elemento RichText tiene un atributo de atributo, ofreciendo una función de apelante el contenido de El artículo cambia. Definamos esa función y veamos todo el script edit.js: import {__} de ‘@wordpress/i18n’; Import {uslockprops, richtext} de ‘@wordpress/block-editor’; Import ‘./edor.scss’; Exportar función predeterminada edit ({atributes, setAttributes) {const blockprops = useBlockProps (); Const onChangeContent = (newContent) => {setAttributes ({content: newCentent})} return (); } Ahora guarde el archivo y ejecute NPM Ejecutar Iniciar en la ventana Terminal. Luego regrese al tablero de WordPress, cree una nueva publicación o página y agregue su bloque de afiliados:
La salida del componente RichText en el editor de bloques. Agregue algún texto y cambie a la vista de código. Así es como debería ser su código:
Esta es la primera Bloque de Guenberg editable
Si ahora guarda la página y verifica el resultado frontend, puede estar un poco decepcionado, porque sus cambios no lo hacen afectar el sitio. Esto se debe a que debe cambiar el archivo save.js para almacenar la entrada del usuario en la base de datos cuando se guarda la publicación. Paso 5: Guardar los datos Ahora abra el archivo save.js y modifique el script de la siguiente manera: import {__} de ‘@wordpress/i18n’; Import {uslockprops, richtext} de ‘@wordpress/block-editor’; Exportar función predeterminada Guardar ({atributos}) {const blockprops = useBlockProps.save (); return (); } Esto es lo que hacemos aquí: importe el componente RichText desde el paquete de editor de bloques.
Pasar múltiples propiedades a través de un argumento de objeto a la función Guardar (en este ejemplo, solo pasamos la propiedad de atributos)
Devuelve el contenido del componente RichText
Importante cuando cambie la función de rescate, debe eliminar cualquier instancia de bloque en el lienzo del editor e incluirlo nuevamente para ver que funcione correctamente. Lea más sobre la validación de bloques. Puede leer más sobre el componente RichText en el manual del editor de bloques y puede encontrar la lista completa de accesorios en GitHub. Ahora tomemos un paso más allá. En la siguiente sección, descubrirá cómo agregar controles a la barra de herramientas de bloque. Agregar controles a la barra de herramientas de bloqueo de la barra de herramientas para bloques contiene un conjunto de comandos que permiten a los usuarios manejar partes del contenido del bloque. Para cada control en la barra de herramientas, encontrará un componente: la barra de herramientas para el bloque de párrafo básico. Por ejemplo, puede agregar un control de alineación de texto para su bloque. Todo lo que tiene que hacer es importar dos componentes del paquete @wordpress/block-editor. Pasaremos por los mismos pasos que el ejemplo anterior:
Importar los componentes necesarios de los paquetes de WordPress
Incluya los elementos apropiados en su código JSX
Definir los atributos necesarios en el archivo block.json
Definir manipuladores de eventos
Guardar datos
Paso 1: Importe los componentes de BlockControls y AlignmentControl de @wordpress/block-editor para agregar un control de barra de herramientas de bloque, necesita dos componentes:
¿Te cansaste de apoyar para el host 1 subparte de WordPress, sin respuestas? ¡Prueba nuestro equipo de asistencia de clase mundial! Revise nuestros planes
BlockControls reproduce una barra de herramientas de control de control dinámica (indocumentada).
AlignmentControl reproduce un menú desplegable que muestra las opciones de alineación para el bloque seleccionado (leer más) Abra el archivo edit.js y edite la instrucción de importación como se muestra a continuación: import {UseBlockProps, RichText, AlignmentControl, BlockControls} desde ‘@ WordPress/ editor de bloques ‘; Paso 2: Agregue blockControls y elementos de alineación de control de alineación Vaya a la función Editar e ingrese el elemento al mismo nivel que . Luego agregue en : Exportar función predeterminada ({atributes, setTributes) {const blockprops = useBlockProps (); Return ( ); } En el código anterior, y <// son la sintaxis corta para declarar los fragmentos React, que es la forma en que devolvemos varios elementos en React. En este ejemplo, AlignmentControl tiene dos atributos:
El valor proporciona el valor actual para el artículo
Onchange proporciona un controlador de eventos para ejecutarse cuando cambia el valor
También definimos atributos adicionales para el elemento RichText (verifique la lista completa de atributos con ejemplos) Paso 3: Defina el atributo de alineación en el bloque.: “Cadena”, “predeterminado”: “ninguno”} Regreso al terminal, apague El proceso actual con ^c y enciende el script con npm ejecutarse de nuevo.Luego regrese al editor de bloques, actualice la página y seleccione el bloque.Debería ver la barra de herramientas para bloques con un control de alineación:
La barra de herramientas de alineación se ha agregado con éxito. Ahora, si intenta formatear el contenido del bloque utilizando los nuevos controles de alineación, verá que nada sucede. Eso es porque aún no he definido el controlador de eventos. Paso 4: Defina los modales de administración de eventos ahora Definir OnChangeLign: const onChangeLign = (newalign) => {setAttributes ({align: newalign === Undefined? ‘Ninguno’: Newaldn,})} Si Newalign está indefinido, entonces establecemos Newald. De lo contrario, usamos Newalign. Nuestro script edit.js debe ser completo (por ahora): exportar función predeterminada edit ({atributes, setTributes) {const blockprops = useBlockProps (); Const onChangeContent = (newContent) => {setAttributes ({content: newCentent})} const onChangeLign = (newalign) => {setAttributes ({align: newalign === Infined? > ); } Ahora puede volver al editor y alinear el contenido del bloque. Necesitamos cambiar la función de rescate para almacenar el contenido del bloque y los atributos en la base de datos. Paso 5: Guardar los datos Abrir Save.js y cambiar la función Guardar de la siguiente manera: Exportar función predeterminada Guardar ({Attributes}) {const blockProps = useBlockPross (); regreso ();} Finalmente, para que el código sea más legible, puede extraer las propiedades individuales del objeto de atributos utilizando la sintaxis de asignación: Exportar función predeterminada Guardar ({atributos) {const blockprops = useBlockProps.save ();const {content, align} = atributes;return ();} Guarde el archivo, reinicie el proceso y vuelva al editor en el editor de código.El código debería verse así:
Este es mi primer editable gutenberg block
Alinee el texto a la derecha. ¡Y eso es! Acaba de agregar una verificación de alineación en la barra de herramientas de bloque, puede leer más sobre la barra de herramientas de las calderas en el manual del editor de bloques. Personalización de la configuración de la barra lateral también, puede agregar pedidos a la configuración de la barra lateral (o incluso crear una nueva barra lateral para su aplicación). La API ofrece un componente InspectORControls para esto. El manual del editor de bloques explica cómo usar la barra lateral de la configuración: la configuración de la barra lateral se usa para mostrar la configuración utilizada menos raramente o la configuración que requiere más espacio en la pantalla. La configuración de la barra lateral solo debe usarse para la configuración de nivel de bloque. Si tiene configuraciones que solo afectan el contenido seleccionado dentro de un bloque (por ejemplo: “Bold” para el texto seleccionado desde un párrafo): No lo coloque en la configuración de la barra lateral. La configuración de la barra lateral se muestra incluso cuando edita un bloque en modo HTML, por lo que solo debe contener configuraciones de nivel de bloque. Nuevamente: importe los componentes necesarios de los paquetes de WordPress
Incluya los elementos apropiados en su código JSX
Definir los atributos necesarios en el archivo block.json
Definir manipuladores de eventos
Guardar datos
Paso 1. Importe los componentes de InspectIrControls y PanelColorsetts de @WordPress/Block-Editor, puede agregar más controles para permitir a los usuarios personalizar ciertos aspectos del bloque. Por ejemplo, puede proporcionar un panel de control de color. Para hacer esto, deberá importar los componentes de InspectORControls y PanelColorSettings desde el módulo de editor de bloques: import {UseBlockProps, RichText, AlignmentControl, BlockControls, InsofatorControls, PanelColorSettings} de ‘@WordPress/Block-editor’; Paso 2: incluya los elementos apropiados en su código JSX Ahora puede agregar los elementos apropiados al JSX devuelto por editar: exportar función predeterminada editar ({atributes, setTributes) {const blockprops = uslockprops (); Const onChangeContent = (newContent) => {setAttributes ({content: newCentent})} const onChangeLign = (newalign) => {setAttributes ({align: newalign === Infined? > <richText {… blockprops} tagName = "p" onChange = {onChangeConent} permitidoformats = {[''/negrita ',, 'núcleo/cursiva'
]} Value = {Attributes.content} PlaceHolder = {__ (‘write your text …’, ‘my-affiliate-block’)} style = {{textalign: alignal, backgroundcolor: backgroundcolor, color: textcolor}} / > ); } Tenga en cuenta que también hemos actualizado el atributo de estilo del elemento RichText: paso 3: Defina los atributos requeridos en block.json ahora defina los atributos backgroundcolor y textColor en el block.json: “atributos”: {“content”: {“type”: “string”, “fuente”: “html”, “selector” : “P”}, “Alinear”: {“tipo”: “cadena”, “predeterminado”: “ninguno”}, “backgroundColor”: {“type”: “string”}, “textColor”: {“type” : “String”}}, Paso 4: Definir los modales de administración de eventos Ahora necesita definir dos funciones para actualizar BackgroundColor y TextCol en la entrada del usuario: const onChangeCackUnDoolor = (newbackgroundcolor) => {setAtTributes ({en segundo plano: Newbackgrolor})} const const En el cambio TextColor = (newTextColor) => {setTributes ({textColor: newTextColor})} Paso 5: Guardar los datos un último paso: abra el archivo save.js y modifique el secuencia de la siguiente manera: exportar función predeterminada guardar ({atributes}) { Constiprops = UseBlockProprops.save ();
const {contenido, alinearse, backgroundColor, textColor} = atributes; return (); } Ahora apague el proceso (^c) y ejecute NPM Ejecutar comenzar nuevamente. Actualice la página, elimine cualquier instancia de bloqueo y agregue nuevamente a su publicación: un bloque personalizado con un panel de configuración de color. Realice los cambios, guarde la publicación y vea en la interfaz. Los cambios que realizó en el editor de bloques debe reflejarse en el sitio principal. Agregar y personalizar un enlace externo a esta sección, agregará nuevos componentes a su tipo de bloque:
Un componente externo que permite a los usuarios agregar un enlace personalizable al bloque de afiliados
Más comandos de barra lateral que permiten a los usuarios personalizar la configuración de enlaces
Paso 1. Importar componentes de @WordPress/Componentes Ahora necesita importar más componentes de @WordPress/Components. Abra el archivo edit.js y agregue las siguientes instrucciones de importación: import {textControl, panelBody, panelRow, togGlecontrol, externallink} de ‘@wordpress/components’;
Panelbody agrega un contenedor plegable a la configuración de la barra lateral.
Panerow produce un contenedor genérico para controladores en la barra lateral.
TextControl proporciona un control de entrada de texto.
TOGGLECONTROL proporciona un conmutador que permite a los usuarios activar/desactivar una opción particular
ExternoLink es un componente simple para agregar un enlace externo.
Paso 2. Incluya los elementos apropiados en su código JSX, primero agregará el elemento externoNINK al mismo nivel de richtext en un contenedor di:
{LinkLabel} El componente externo no está documentado, por lo que nos referimos al componente en sí para obtener la lista de atributos disponible. Aquí usamos los atributos href, className y Rel. Por defecto, el valor del atributo REL se establece en NoreFerrer Nooper. Nuestro código agregará la palabra clave nofollow al atributo REL de la etiqueta resultante cuando se activa el control del interruptor. Ahora puede agregar la configuración de enlace a la barra lateral. Primero, agregará un elemento de cuerpo de panel dentro de InspectorControls en el mismo nivel que PanelColorSetings: … Esto es lo que hacemos con esto: el atributo del título ofrece el título del panel.
Initialopen determina si el panel está abierto o no inicialmente.
Luego agregaremos dos elementos de PanelRow dentro de PanelBody y un elemento TextControl dentro de cada PanelRow: El código anterior ahora debería verse bastante simple. Los dos comandos de texto permiten a los usuarios establecer la etiqueta del enlace y la URL. También agregaremos un PanelRow adicional con un TogGlecontrol para activar/desactivar una determinada opción, como si incluir o no un atributo: {haslinknofollow? ‘No ha sido el nofollo. : ‘No rel nofollow’. } Checked = {HaslinknoFollow} onChange = {toglenofollow}/> Paso 3: Defina los atributos necesarios en el bloque. “Affilitalk”: “:” “tipo”: “cadena”, “predeterminado”: “”}, “linklabel”: {“type”: “cadena”, “predeterminado”: ”
¡Compruébalo! “},” Haslinknofollow “”: {“tipo”: “booleano”, “predeterminado”: falso} nada para agregar aquí! para editar el archivo.js y agregar las siguientes funciones: const onChangeAffiliateLink = (newaffileLink) => {setAtTributes ({affileTelink: newAffileLink === Undefined? ”: NewAfiliAlink})} Conc OnCangeLinkLabel = (NewLinkLabel) => {SettTributes ({{})} LinkLabel: {LinkLabel: newLinkLabel === Undefined? ”: NewLinkLabel})} const togglenofollow = () => {setAttributes ({HaslinknoFollow:! HaslinknoFollow})} Estas funciones actualizan los valores de atributos apropiados en la entrada del usuario. Paso 5: Guarde los datos al final. Actualicemos la función de guardar en save.js: exportar función predeterminada Save ({atributes) {const {align, content, backgroundColor, textColor, affileLink, linklabel, haslinknofollow} = attobutes; Constockprops = nosotros Eblockprop.save (); return (
{LinkLabel} ); } Tenga en cuenta que aquí solía usar el elemento en lugar de externallink:
Configuración de enlace para bloquear los afiliados. Ahora guarde los datos y reinicie el entorno. Agregando varios estilos de bloque a una sección anterior, ha aprendido cómo agregar un bloque de barra de herramientas de bloque, que permitirá a los usuarios alinear la entrada del usuario. Podemos agregar más controles de estilo a la barra de herramientas de bloque, pero también podemos ofrecer un conjunto de estilos de bloques predefinidos desde los cuales el usuario puede elegir con un solo clic. Para este propósito, utilizaremos una característica útil de la API de bloque: estilos de bloques. Todo lo que tiene que hacer es definir la propiedad de los estilos de json y declarar los estilos apropiados en las hojas de estilo. Por ejemplo, puede agregar la siguiente matriz de estilos: “estilo”: [{“nombre”: “predeterminado”, “etiqueta”: “predeterminado”, “isDefault”: true}, {“nombre”: “border”, “,” etiqueta “:” borde “}], con esto, acaba de agregar un estilo implícito y un estilo adicional llamado borde. Ahora regrese al editor de bloques:
Dos estilos de bloque predefinidos. Los estilos estarán disponibles para el usuario haciendo clic en el interruptor de bloque y luego buscando los estilos en la configuración de la barra lateral. Seleccione un estilo y verifique las clases aplicadas al elemento P. Haga clic derecho en el bloque e inspeccione. Se agregó una nueva clase con un nombre estructurado de la siguiente manera: IS-Style- {style-name} Si marcó el estilo de “borde”, entonces se agregará una clase de boer de ISS al elemento P. Si marcó el estilo “predeterminado”, se agregará una clase de defensa de estilo IS. Ahora solo tiene que declarar las propiedades CSS. Abra el archivo editor.scss y reemplace los estilos actuales con los siguientes: .wp-block-am-afiliate-plugin-my-afilite-block {padding: 2px; & .IS-Style-default {Border: 0; } & .is-border de estilo {borde: 1px sólido #000; }} Ahora puedes hacer lo mismo con style.scss: .wp-block-am-afiliate-plugin-am-afiliate-block {& .is-style-default {border: 0; } & .is-border de estilo {borde: 1px sólido #000; }} Detenga el proceso (^c) y ejecute NPM Ejecutar comenzar nuevamente. ¡Y eso es! Actualice la página y diviértase con sus nuevos estilos de bloque:
Estilos de bloqueo afiliados. Incrementando los bloques de Gutenberg con el componente Innerblocks, aunque completamente funcional, nuestro bloque de afiliados aún no es muy atractivo. Para hacerlo más cautivador para el público, podríamos agregar una imagen. Esto puede agregar una capa de complejidad a nuestro bloque, pero afortunadamente no tiene que reinventar la rueda, porque Gutenberg ofrece un componente específico que puede usar para crear una estructura de bloques vestidos. El componente InnerBlocks se define de la siguiente manera: InnerBlocks exporta un par de componentes que se pueden usar en implementaciones de bloques para activar el contenido del bloque imbricado. Primero, deberá crear un nuevo archivo .js en la carpeta SRC. En nuestro ejemplo, llamaremos a este archivo contenedor.js. Ahora tendrá que importar el nuevo recurso en el archivo index.js: import ‘./Container’; Regrese al contenedor.js e importe los componentes necesarios: import {registreBockype} de “@wordpress/blocks”; Import {__} de “@wordpress/i18n”; Import {uslockprops, innerblocks} de “@wordpress/block-editor”; El siguiente paso es definir una plantilla que ofrezca la estructura dentro de la cual se ubicarán los bloques. En el siguiente ejemplo, definimos una plantilla que consta de dos columnas que contienen un bloque de imagen principal y nuestro bloque personalizado afiliado: constiplate = [‘core/columnas’, {backgroundcolor: ‘amarillo’, vertolalignment: ‘center’}, [[[[[[[[[[ ‘Core/Column’, {TemplateLock: ‘All’}, [‘Core/Image’],], [‘Core/Column’, {TempLatelock: ‘All’}, [‘My-afiliado/my-Afiltete-block ‘, {Marcador de posición:’
Ingrese el contenido lateral … ‘},],]]];La plantilla está estructurada como una matriz de bloques (nombres y atributos de bloques opcionales).En el código anterior, utilicé varios atributos para configurar columnas y columnas.Específicamente, el atributo Templatelock: ‘All’ bloquea los bloques de columna para que el usuario no agrega, reordene ni limpie los bloques existentes.Templatelock puede tomar uno de los siguientes valores: todos – Innerblocks están bloqueados y no se puede agregar, reordenar o eliminar ningún bloque.
Insertar: los bloques solo se pueden reordenar o eliminar.
Falso: la plantilla no está bloqueada.
La plantilla se atribuye luego al elemento InnerBlocks: Para evitar cualquier problema de compatibilidad, también agregamos un atributo de Templatelock al componente InnerBlocks (ver también el problema #17262 y extracción # # 26128). Aquí está nuestro archivo final contenedor.js: import {registreBockype} de “@wordpress/blocks”; Import {__} de “@wordpress/i18n”; Import {uslockprops, innerblocks} de “@wordpress/block-editor”; const template = [[‘core/columns’, {backgroundColor: ‘Yellow’, vertolalignment: ‘Center’, [[‘Core/Column’, {TemplateLock: ‘All’}, [[‘Core/Image’],] ,], [‘core/columna’, {TemplateLock: ‘all’}, [‘my-afiliate-plug/my-afiliate-block’, {marcador de posición: ‘Ingrese el contenido lateral …’}],]]] ]; RegisterBlockType (‘my-afiliate-plugin/my-afiliate-continer-block’, {title: __ (‘Container’, ‘my-afilte-block’), categoría: ‘design’, editar ({className}) {return (
), save () {const blockprops = useBlockProps.save (); return (
),});
El bloque afiliado se vistió con el editor. Mejoras adicionales nuestro bloque es completamente funcional, pero podríamos mejorar un poco con algunos pequeños cambios. Atribuí el atributo de BackgroundColor al párrafo generado por el componente RichText. Sin embargo, es posible preferir asignar el color de fondo al contenedor div: por lo tanto, modifique el edit.js y guarde el divine.js de la siguiente manera:
…
Esto permitirá al usuario cambiar el fondo de todo el bloque. Por otro lado, un cambio más relevante implica el método UseBlockProps. En el código original, definí constantemente blockprops de la siguiente manera: const blockprops = uslockprops (); Pero podemos usar USEBLOCKPROPS pasando de manera más eficiente un conjunto de propiedades. Por ejemplo, podemos importar nombres de clase desde el módulo ClassNames y ClassNames, establece el nombre de la clase de envoltura en consecuencia. En el siguiente ejemplo, atribuimos un nombre de clase basado en el valor del atributo alineado (edit.js): importar classNames desde ‘classnames’; … Exportar Función predeterminada edit ({atributes, setTributes) {… const blockprops = useBlockProps ({className: classnames ([`has-text-align- $ {align}`]: align,})}); …} Haremos el mismo cambio en el archivo Save.js: Importar NamesNames desde ‘ClassNames’; … Exportar función predeterminada Save ({atributes) {… const blockprops = useBlockProps.save ({className: classnames ([`has-text-align- $ {align}`]: align,})});
…} Y esto es una envoltura! Ahora puedes ejecutar la versión de producción. Si está buscando una guía exhaustiva para comenzar el desarrollo de los bloques de Gutenberg, esta guía masiva es para usted. ¡Compruébelo y comience a construir sus bloques de Gutenberg! Haga clic para enviar el resumen de Tweet y aquí, ¡al final de este increíble viaje! Comenzamos con el entorno de desarrollo y hemos llegado a crear un tipo de bloque completo. Como se menciona en la introducción, el conocimiento sólido sobre Node.js, Webpack, Babel y React son esenciales para crear bloques avanzados de Gutenberg y posicionarlo como desarrollador profesional de Gutenberg. Pero no tiene que tener experiencia establecida en React para comenzar a divertirse con el desarrollo de bloques. El desarrollo de bloques puede brindarle motivación y objetivos para lograr habilidades crecientes en las tecnologías detrás de los bloques de Gutenberg. Por lo tanto, esta guía está lejos de ser completa. Es solo una introducción a una amplia variedad de temas que lo ayudarán a comenzar a construir los primeros bloques de Gutenberg. Por esta razón, le recomendamos que profundice su conocimiento leyendo la documentación y las pautas en línea. Entre los muchos recursos disponibles, recomendamos lo siguiente: Tutorial oficial que crea un bloque para principiantes
Tutorial de bloque oficial para desarrolladores intermedios
Bloques dinámicos
Meta cajas
Crear una barra lateral para su complemento
Si recién está comenzando con el desarrollo de WordPress, es posible que desee comprender los conceptos básicos de desarrollo frontend. Aquí hay una lista rápida de recursos que pueden ayudarlo a comenzar:
Cómo instalar WordPress local (libro electrónico gratuito) Valor de alojamiento real de WordPress (tarjeta electrónica gratuita)
¿Qué es JavaScript?
Html vs html5
Cómo editar CSS en WordPress
¿Qué es PHP?
El bootcamp de ganchos de WordPress: cómo usar acciones, filtros y ganchos personalizados
Y tenga en cuenta que el código completo de los ejemplos de esta guía está disponible en la esencia.Ahora es tu turno: ¿desarrollaste un bloque de Gutenberg?¿Cuáles son las principales dificultades que has encontrado hasta ahora?¡Cuéntanos sobre tu experiencia en comentarios!
