Comencemos con los conceptos b\u00e1sicos absolutos. \u00bfQu\u00e9 lenguaje(s) de programaci\u00f3n y herramientas necesitar\u00eda usar o aprender para desarrollar mejor para Gutenberg?<\/p>\n
El idioma y las bibliotecas que necesitar\u00e1 saber<\/h2>\n
La respuesta corta a qu\u00e9 lenguaje necesita usar para desarrollar Gutenberg es: Javascript. Sin embargo, dentro del mundo de Javascript, existen bastantes conceptos, extensiones y herramientas que debe tener en cuenta.<\/p>\n
En primer lugar, hay una cuesti\u00f3n de versi\u00f3n de Javascript. Hay una estandarizaci\u00f3n oficial de Javascript; ECMAScript. ECMAScript 5 (a menudo abreviado como ES5<\/strong>) sali\u00f3 hace unos 10 a\u00f1os y es la versi\u00f3n de Javascript con la que la mayor\u00eda de los desarrolladores estamos familiarizados. Luego tenemos ECMAScript 6 (a menudo abreviado como ES6<\/strong>) que sali\u00f3 en 2015. Algunas personas se refieren a esta versi\u00f3n como ES2015. Y finalmente est\u00e1 ESNext<\/strong>, que es un nombre din\u00e1mico que cubre la pr\u00f3xima versi\u00f3n, que contiene propuestas que esperamos se incluyan en cualquier pr\u00f3xima versi\u00f3n estandarizada de Javascript.<\/p>\n Es posible que est\u00e9 pensando en la l\u00ednea de \u00abas\u00ed que todo est\u00e1 bien y todo, las versiones m\u00e1s nuevas de Javascript solo significan m\u00e1s funciones. As\u00ed que usar\u00e9 el m\u00e1s nuevo." Pero hay algo muy importante que debes saber sobre las versiones de Javascript y es esto: la mayor\u00eda de los navegadores de hoy solo pueden entender ES5.<\/p>\n Esto significa que si desea escribir Javascript en ES6 o ESNext, debe configurar herramientas que transformen su c\u00f3digo en ES5 para que los navegadores puedan entenderlo. Pero antes de que empieces a pensar en saltarte el aprendizaje de ES6 y ESNext por completo, recuerda que ES5 tiene 10 a\u00f1os. Y requerir\u00e1 que escribas mucho m\u00e1s c\u00f3digo. Tambi\u00e9n ser\u00e1 mucho menos legible y m\u00e1s complejo que si lo escribiera en ES6 o ESNext.<\/p>\n Adem\u00e1s, para los conceptos de Gutenberg, tambi\u00e9n querr\u00e1 usar JSX<\/strong>, una extensi\u00f3n de sintaxis para Javascript. JSX tambi\u00e9n es un lenguaje que los navegadores no pueden entender sin transformarlo.<\/p>\n Si a\u00fan no est\u00e1 convencido de que ES6\/ESNext vale la pena el paso adicional para transformarlo, perm\u00edtame mostrarle una comparaci\u00f3n de c\u00f3digo. Con ES6 y JSX puede escribir esto para devolver un p\u00e1rrafo simple; con una clase y salida din\u00e1mica de una variable;<\/p>\n Para aquellos de ustedes que son nuevos en esto y piensan que he olvidado las citas, no, no lo he hecho. Esta es la simpleza de JSX. Comparemos lo anterior con c\u00f3mo escribir\u00eda con ES5 y las bibliotecas Javascript de WordPress:<\/p>\n \u00a1Todo el c\u00f3digo anterior es necesario para generar lo que ES6 y JSX pueden hacer en una sola l\u00ednea muy f\u00e1cil de leer! Imagine crear una interfaz de usuario m\u00e1s compleja con eventos y condicionales, cuando solo un p\u00e1rrafo simple requiere este engorroso fragmento de c\u00f3digo.<\/p>\n \u00bfConvencido? \u00a1Bueno!<\/p>\n La herramienta m\u00e1s com\u00fan, y la que usa WordPress, para transformar ES6\/ESNext es Babel<\/a>. Por lo general, usar\u00eda Babel como un complemento para Webpack<\/a>, que es una herramienta que agrupa y minimiza sus archivos Javascript. Ambas herramientas usan Node.js<\/a>, que le brinda algunas herramientas para ejecutar scripts para Webpack y Babel en la l\u00ednea de comandos. Si todo esto suena confuso, tengo una publicaci\u00f3n que explica en profundidad c\u00f3mo configurar todas estas herramientas para<\/a> el desarrollo de Gutenberg.<\/p>\n Lo segundo que debe saber sobre las tecnolog\u00edas es que Gutenberg se basa en una capa de abstracci\u00f3n sobre React JS<\/strong>. React JS<\/a> es una biblioteca Javascript de c\u00f3digo abierto mantenida por Facebook y se lanz\u00f3 alrededor del a\u00f1o 2013. Debido a que React ha existido por un tiempo, hay muchos tutoriales, gu\u00edas y documentaci\u00f3n para esta biblioteca. El sitio oficial de React tiene un buen tutorial<\/a> detallado para los nuevos en React. Definitivamente no necesita ser un experto en React para desarrollar para Gutenberg, pero los conceptos b\u00e1sicos de c\u00f3mo funciona con componentes y estados lo ayudar\u00e1n mucho a comprender Gutenberg.<\/p>\n Uno de los mayores beneficios de Gutenberg es alejarse del HTML fijo en el contenido de las publicaciones. WordPress, antes de Gutenberg, y la mayor\u00eda de los CMS basados \u200b\u200ben web almacenan el contenido de los art\u00edculos en HTML puro. Esto generalmente no es un problema con contenido simple (t\u00edtulos y p\u00e1rrafos). Pero podr\u00eda ser un problema mayor con contenido enriquecido m\u00e1s complejo y din\u00e1mico.<\/p>\n Cualquier CMS que permita contenido din\u00e1mico dentro del contenido del art\u00edculo tendr\u00e1 problemas para guardarlo como HTML v\u00e1lido. Esto podr\u00eda ser cualquier cosa, desde una imagen que hace referencia a su ID dentro del sistema en lugar de la URL completa. O un widget que muestra din\u00e1micamente las \u00faltimas publicaciones dentro de una categor\u00eda determinada. Normalmente, esto se resolver\u00e1 generando HTML cr\u00edptico personalizado que no tiene sentido que se emita normalmente. Y luego deje que el analizador CMS maneje la transformaci\u00f3n de esas piezas HTML en algo significativo o din\u00e1mico. La desventaja de esto es que si transfiere su contenido a otro CMS, a menudo resultar\u00e1 en un HTML feo. El contenido se llenar\u00eda con HTML sin analizar que debe limpiar manualmente. Este problema es lo que Gutenberg pretende resolver.<\/p>\n Con Gutenberg, WordPress ha optado por guardar informaci\u00f3n adicional y din\u00e1mica como comentarios HTML. Los comentarios HTML nunca son visibles para los usuarios en el sitio web y, b\u00e1sicamente, todo est\u00e1 permitido dentro del bloque de comentarios. Un comentario HTML comienza No entrar\u00e9 en detalles sobre c\u00f3mo se estructuran los bloques de comentarios; encontrar\u00e1 una gu\u00eda detallada<\/a> sobre esto en el Manual del editor de WordPress. Pero como ejemplo, un p\u00e1rrafo simple en el contenido de una publicaci\u00f3n de Gutenberg se guardar\u00e1 en la base de datos como:<\/p>\n En cuanto al contenido din\u00e1mico, normalmente no se generar\u00e1 ning\u00fan HTML. Toda la informaci\u00f3n que WordPress necesita para comprender lo que hace este bloque se encuentra dentro de los comentarios HTML. As\u00ed almacena Gutenberg un bloque de \u00ab\u00daltimas publicaciones":<\/p>\n Dado que todo es un comentario HTML, la transferencia de sus publicaciones a otro WordPress sin Gutenberg u otro CMS asegurar\u00e1 que no se escupe HTML feo sin analizar. Simplemente ser\u00e1 ignorado y salteado.<\/p>\n Como probablemente ya se haya dado cuenta, los bloques de comentarios comienzan con el nombre del bloque, con el prefijo ‘ \u00datil para saber:<\/strong> Tiene un par de opciones sobre c\u00f3mo personalizar sus temas o complementos para Gutenberg. A continuaci\u00f3n se enumeran las personalizaciones m\u00e1s comunes que probablemente har\u00eda como desarrollador.<\/p>\n WordPress Gutenberg viene con un gran paquete de tipos de bloques, y puede extender cualquiera de estos. Tambi\u00e9n puede eliminar algunos de ellos, o decidir para ciertos casos permitir o eliminar solo algunos de ellos.<\/p>\n El m\u00e9todo m\u00e1s com\u00fan para extender un bloque es agregar estilos de bloque personalizados<\/a>, que son variaciones de estilo de un bloque. Los estilos de bloque no son tan comunes en WordPress por defecto, pero hay algunos. Eche un vistazo al bloque Citar. En el editor de Gutenberg, tendr\u00e1 un cuadro en la barra lateral derecha llamado "Estilos".<\/p>\n Otra forma de personalizar los bloques existentes es mediante el uso de filtros. Probablemente est\u00e9 familiarizado con los filtros que usan PHP en WordPress, pero con Gutenberg ahora hay filtros basados \u200b\u200ben Javascript en bloques<\/a>. Por ejemplo, puede agregar sus propios atributos personalizados (configuraciones) a todos o tipos espec\u00edficos de bloques o filtrar c\u00f3mo se guardan o generan.<\/p>\n Tambi\u00e9n puede manipular las categor\u00edas de bloques, as\u00ed como eliminar o permitir ciertos bloques en ciertas situaciones. O puede, por ejemplo, asegurarse de que solo se permitan un pu\u00f1ado de tipos de bloque para un tipo de publicaci\u00f3n personalizada.<\/p>\n Crear bloques personalizados es quiz\u00e1s el primer pensamiento que tienen la mayor\u00eda de los desarrolladores de WordPress. Los bloques predeterminados en WordPress pueden ser muy \u00fatiles, pero si est\u00e1 creando un tema o complemento m\u00e1s complejo, probablemente tenga necesidades espec\u00edficas. Por ejemplo, usar Gutenberg para crear una portada atractiva con accesos directos al contenido y al contenido din\u00e1mico. Es posible lograr la mayor personalizaci\u00f3n utilizando la opci\u00f3n de clase CSS que existe para todos los bloques. Pero esto no es particularmente f\u00e1cil de usar.<\/p>\n Escribir sus propios bloques personalizados es probablemente lo m\u00e1s dif\u00edcil para personalizar su tema o complemento para Gutenberg. \u00a1Pero tambi\u00e9n puede ser el m\u00e1s gratificante! No solo podr\u00e1 crear bloques que se vean exactamente como usted quiere, sino que tambi\u00e9n es una excelente manera de aprender r\u00e1pidamente sobre la nueva tecnolog\u00eda basada en Javascript.<\/p>\n Si es un desarrollador de temas de WordPress, debe tener en cuenta que hay una gran cantidad de configuraci\u00f3n que su tema podr\u00eda necesitar para Gutenberg, especialmente en forma de Como predeterminado, WordPress manejar\u00e1 la mayor\u00eda de los estilos de los bloques predeterminados, por lo que no deber\u00eda preocuparse demasiado por dise\u00f1arlos en su tema. Pero los desarrolladores de temas suelen ser m\u00e1s exigentes con su dise\u00f1o y estilo. Por lo tanto, es probable que deba ajustar o agregar un estilo de bloque. Puede agregar estilos de editor solo al frontend, solo al editor o ambos. El manual de WordPress Gutenberg proporciona una descripci\u00f3n general de los estilos del editor<\/a> y los estilos de bloque predeterminados.<\/p>\nEntonces, \u00bfpor qu\u00e9 molestarse con ES6, ESNext o JSX?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nHerramientas de transformaci\u00f3n y React JS<\/h3>\n
![\"Los](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nPara concluir:<\/h3>\n
\n
La nueva forma de almacenar el contenido de las publicaciones y por qu\u00e9<\/h2>\n
<!--<\/code>y termina con --><\/code>, y Gutenberg almacena los datos en una determinada estructura con formato JSON. Cada bloque en Gutenberg est\u00e1 envuelto por un comentario HTML de inicio y un comentario HTML de cierre despu\u00e9s de \u00e9l.<\/p>\nLa nueva forma de almacenar el contenido de las publicaciones<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>‘. Si hay alguna configuraci\u00f3n personalizada, se generar\u00e1 despu\u00e9s del nombre en JSON, como puede ver en el ejemplo del bloque \u00daltimas publicaciones. Gutenberg se refiere a estos como atributos, y este concepto es algo con lo que te familiarizar\u00e1s cuando comiences a aprender a desarrollar para Gutenberg.<\/p>\n
\nsi desea una mirada m\u00e1s profunda a c\u00f3mo se guarda el contenido de la nueva publicaci\u00f3n, puede buscar en su wp_posts<\/code>tabla en su base de datos. Existe otro m\u00e9todo m\u00e1s sencillo para ver el valor completo de la base de datos, desde las plantillas de WordPress. En su plantilla \u00fanica dentro del ciclo, simplemente use " echo get_the_content()<\/code>". El uso del " " normal the_content()<\/code>generar\u00e1 el contenido de la publicaci\u00f3n analizada, pero repetir el valor del contenido generar\u00e1 exactamente lo que est\u00e1 almacenado en la base de datos. Puede usar la herramienta Inspeccionar o ver la fuente en Chrome o Firefox para ver los bloques de comentarios.<\/p>\nLo que usted como desarrollador puede hacer en Gutenberg<\/h2>\n
Ampliar y personalizar bloques existentes<\/h3>\n
Crea tus propios bloques personalizados<\/h3>\n
Asegurarse de que su tema est\u00e9 listo para Gutenberg<\/h3>\n
add_theme_support()<\/code>. El manual de WordPress tiene una buena descripci\u00f3n general<\/a> de todos los soportes de temas que debe considerar para que su tema est\u00e9 listo para Gutenberg.<\/p>\n