Cómo crear bloques de editor personalizados de WordPress en 2021

El editor de bloques de WordPress (anteriormente llamado Gutenberg) incluye una nueva forma de agregar contenido a sus publicaciones, sus páginas de WordPress y pronto todo el contenido en su sitio web de WordPress. Marca el movimiento de WordPress al espacio de generación de la página. El conjunto básico de bloques predeterminados es bastante robusto, pero si desea crear su propio bloque personalizado para organizar el contenido. En el pasado, use algo como campos personalizados avanzados (ACF) o códigos cortos. Hoy en día, los bloques personalizados están donde están. Trabajé con un reaccionamiento completo en el último año, reconstruyendo la interfaz WP Migra DB Pro. React está en mi mente y considerando que el editor de WordPress también está escrito en React, pensé que sería una buena idea ver qué necesitaría crear un bloque personalizado. ¡Así que vamos a entrar en esto!
Nociones básicas pasaremos por encima de lo que se necesita para moverse de la nada a un bloque de gutenberg relativamente simple y personalizado. La documentación para el editor de bloques todavía está en todas partes, pero hay información decente en el “Manual del editor de bloques”. Desafortunadamente, no parecía tan fácil de analizar, por lo que repasaremos algunos de los pasos que hemos viajado para ser configurados. Una cosa que recomendaría antes de hundir la cabeza primero para crear un bloque de Gutenberg, al menos por el momento, es obtener una comprensión sólida del Javascript moderno. Si no está familiarizado con cosas como JSX, puede usar la sintaxis ES5, pero sería mejor usar una sintaxis a largo plazo moderna.
Hoy en día, es bastante simple de configurar con el comando WP CLI “andamio”. Este comando configurará un tema o complemento de WordPress con una carpeta de “bloques” que contiene PHP y CSS básico y JavaScript necesario para crear un bloque personalizado. La única desventaja que noté es que JavaScript usa la antigua sintaxis ES5 en lugar de ESNEXT moderna. JavaScript Modern nos permite escribir un código más conciso y usar JSX en nuestro código de bloqueo personalizado. También puede usar la herramienta “Ceare-Guten-Block” de Ahmad Awais. Le ofrece muchas cosas estándar que necesita en la caja, como Webpack, soporte de Esnext, etc. La configuración es bastante simple y es similar a la aplicación Crear React. El ejemplo de la tarjeta de receta cubre mucho de lo que deseará en un bloque personalizado interactivo mínimo. También incluye @WordPress/Scripts, que es un paquete para ejecutar y construir nuestro código JavaScript, lo que nos permite usar la sintaxis “Esnext” y JSX. Para comenzar y trabajar, copiamos el ejemplo de la tarjeta de receta localmente, cambié los campos en el archivo paquete.json e hilo enrollado.
Ok bloques, entonces, ¿qué es un “bloque” de todos modos?Fue difícil para mí entender este concepto cuando comencé a trabajar con el editor de bloques.Desde la documentación: utilizando un sistema de bloque para componer y formatear contenido, el nuevo editor basado en bloques está diseñado para crear modelos ricos y flexibles para sitios web y productos digitales.El contenido se crea en la unidad de bloques en lugar de texto en forma gratuita con medios insertados, incorporación y códigos cortos … prácticamente, un “bloque” es una unidad organizativa para “cosas” editables en WordPress.Al menos esa es mi opinión al respecto.
Los bloques son el “bloque” básico, pero ¿cómo es uno? Bueno, ¡esa parte puede explicarlo! Los bloques se realizan casi por completo en JavaScript. Gutenberg trae algunas acciones nuevas (enqueue_block function fancy_custom_block_block_init () {// Cargue automáticamente dependencias y versión $ asseset_file = include (plugin_dir_ (__file__). ‘build/index.asset.php’); wp_register_cript (‘Fancy-Custom-Block-Block-editor’, plugins_url (‘build/index.js’, __file__), $ asset_file [‘dependencias’], $ asset_file [‘versión’); wp_register_style (‘fancy-custom-bloock-bloock-editor’, plugins_url (‘editor.css’, __file__), array (), fileMtime (plugin_dir_ (__file__). ‘editor.css’)); wp_register_style (‘Fancy-Custom-Block-Block’, plugins_url (‘style.css’, __file__), array (), filemtime (plugin_dir_ (__file__). ‘style.css’)); Register_block_type (‘fancy-block-place/fancy-custom-block’, array (‘editor’, ‘style’ => ‘fancy-computer-block-block’,); } add_action (‘init’, ‘fancy_custom_block_block_init’); Todo lo que tiene que hacer esencialmente en términos de PHP es poner los archivos JavaScript y CSS y llamar a Register_Block_Type () con el mango de cada elemento.
Un mundo de JavaScript si pensabas que sería más PHP desde este punto, ¡piénsalo de nuevo! Desde aquí, estamos en un mundo de JavaScript. La apariencia clave de crear bloques en Gutenberg es la función RegistroBlockType (). Hace todo. RegisterblockType (‘my-block/cool-block-name’, {// … objeto JS masivo} y eso es todo! ¡Nos vemos la próxima vez! … bueno, así que hay poco, pero esencialmente, este es el es el forma de crear un bloque de WordPress Gutenberg. En el “objeto JS masivo” hay algunas cosas a tener en cuenta. Si observa el archivo /05-corpe-card-esnext/sc/index.js en el gutenberg Ejemplos de almacén, puede ver que hay muchas configuraciones que ingresan a la configuración de un bloque. Hay tres secciones principales que analizaremos: atributos y editar () y guardar () métodos si desea un bloque que realmente haga algo , como permitirle editar el texto, debe usar el sistema de gestión de estado de Gutenberg. Este es el objeto de los atributos. Es casi idéntico al concepto de gestión del estado, un objeto de nivel superior que mantiene los registros de las propiedades y lo que tiene Cambiado. Atributos: {Título: {Tipo: “Array”, Sou RCE: “Children”, Selector: “.Callout-Title”, Media: {Tipo: “Número”, MediaURL: {Tipo: “String”, Fuente: “Atributo”, Selector: “IMG”, Atributo: “SRC” }, cuerpo: {tipo: “matriz”, fuente: “niños”, selector: “.callout-body”, alineación: {tipo: “cadena”}}, arriba es un objeto JavaScript que se usa para configurar la apariencia de el bloque.
Puede ver que para cada “cosa” editable en su bloque debe definir un atributo para ello. Hay mediados y medios para la imagen, valores para un título y contenido del cuerpo, así como la alineación general de todos. El método de edición () toma estos atributos como un argumento, para que podamos cambiarlos en la interfaz del editor. Editar | La función × () editar () le permite personalizar la interfaz de edición en Gutenberg. Si está familiarizado con la función React () React, es bastante similar. Esencialmente, especifique una declaración de retorno que contenga su edición jsx: props => {classname, isselected, atributes: {MediaId, MediaUrl, cuerpo, alineación, título}, setTributes} = props; useFect (() => {// console.log (props);}); Const onChageTitle = value => {setTributes ({title: value}); }; const onselectImage = Media => {SetTributes ({MediaUrl: Media.URL, MediaId: Media.id}); }; Const onChangeBody = value => {setAttributes ({cuerpo: valor}); }; Const [imageClassSes, textClassSes, wrapclass] = sortoutcssClasses (alineación || ‘izquierda’, className); Return ( {isSelectic && ( {setTributes ({alignment: nextAlign});}}} />
( {! MediaId? __ (”
Imagen de carga “):

} )}/>

);}, puedes ver que lo primero que hacemos es atribuir el atributo atributos de algunas variables locales que se utilizarán dentro de la función. const {classname, islecect, atributos: {mediasid, mediasUrl, cuerpo, alineación, título}, establecimientos} = props; la sintaxis anterior es la destrucción de objetos y es en gran parte para el Efecto “menos sabor: es mejor”. Las siguientes funciones son para administrar OnChange () en el editor. Prácticamente, cuando cambia cualquier valor, desea actualizar el estado de la aplicación. Esto hace el método setAttribute (). SelectImage = Media => {SetTributes ({MediaURL: Media.URL, MediaId: Media.id,}); }; Muchos de lo que se incluye en el método de edición () son manejadores de eventos que establecen el estado en el objeto de atributo del bloque. También notará el uso del gancho Usedifect () allí. Este es un método básico de ganchos reaccionados: debajo de la campana gutenberg es en gran medida una cubierta react.
La última parte de la función Editar () es la instrucción de retorno. Aquí tenemos mucho código JSX que determina lo que parece la interfaz Gutenberg. Puede cargar algunos componentes y bloques estándar del paquete @WordPress/Block-Editor. Import {RichText, MediaUpload, BlockControls, AlignmentOtolbar} de “@wordpress/block-editor”; Luego, en la instrucción de retorno, puede usar y asignar valores de atributo: return (…

.. .); El editor de bloques de WordPress incluye un bloque llamado RichText. Este es el bloque principal que querrá usar para crear áreas editables. Hay opciones para configurar el tipo de etiqueta HTML que se necesita, así como una variedad de otras configuraciones. El atributo ONChange es el lugar donde atribuye OnChange (). Esto es importante, porque es la forma en que actualiza sus atributos de bloque y hace que todo se actualice en tiempo real.https: //cdn.delicibrains.com/content/uploads/2020/04/15125733/screen-crording- 2020-04- 15-AT-9.10.21 AM.MP4
Save () para que sea genial y todo, pero en realidad no guardamos nada todavía. La siguiente parte de nuestro bloque personalizado es el método Save (). Este método define cómo desea mostrar su bloque en el front-end. Gutenberg en realidad hace algo único con la forma en que guarda los datos. A menos que guarde datos en Post_Meta, la configuración del bloque se está serializada en un comentario HTML por encima del bloque. WordPress parece filtrar esto en el front-end, pero es visible al grabar la base de datos. *

test 2

test
es un poco extraño, pero mantiene la compatibilidad inversa-si Alguna vez ha deshabilitado Gutenberg, el contenido permanecerá intacto. Save: props => {const {classname, atributes: {title, mediaUrl, cuerpo, alineación} = props; Const [imageClassSes, textClassSes, wrapclass] = sortoutcssClasses (alineación || “izquierda”, className); Return (
{MediaUrl &&

} <

/div>

); } El método Save () es en realidad mucho más simple que el método Edit () y también obtiene los valores de los atributos transmitidos. Luego, se trata especialmente de crear una marca frontal e introducir sus valores. Pan comido. Problemas que he encontrado bien, así que así es “cómo” crear un bloque personalizado, pero ¿qué pasa con Crazy? Bueno, parece que hay algunos 😢. La documentación es un poco difícil de analizar. No es muy fácil de entender y se divide de una manera extraña. Fue difícil para mí seguir la documentación para cada parte de la construcción de un bloque personalizado y, finalmente, solo leer el ejemplo del bloque. Se necesita mucha investigación por código para comprender cómo funcionan las cosas. También parecía muy molesto trabajar en un bloque que cambia activamente en el código. Cada vez que recargue Gutenberg, recibirá el mensaje “Este bloque parece haber cambiado externamente …” porque la marca de bloque ha cambiado. Entiendo por qué arroja el error, pero te ralentiza. También tuve algunos errores de consola extraños, porque script_debug se activó. Esta constante es necesaria para usar la versión sin comisaría de Local React. Aparentemente, este es un problema conocido, pero es un poco desagradable ver las advertencias de la consola, porque se activa un WordPress básico.
Además, las herramientas de desarrollo React son esencialmente innecesarias, porque los nombres de React en Gutenberg son nombres de personajes …