{"id":95377,"date":"2022-09-07T01:46:00","date_gmt":"2022-09-06T23:46:00","guid":{"rendered":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/"},"modified":"2021-03-03T09:33:04","modified_gmt":"2021-03-03T12:33:04","slug":"%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/","title":{"rendered":"\u2022 \u25b7 Tutoriel comment cr\u00e9er des blocs d&#039;\u00e9diteur Gutenberg \u00e9tape par \u00e9tape (2020)"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#%C2%BFQue-son-los-bloques-Gutenberg\" >\u00bfQu\u00e9 son los bloques Gutenberg?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#Ejemplos-de-bloques-de-Gutenberg\" >Ejemplos de bloques de Gutenberg<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#%C2%BFPor-que-el-cambio\" >\u00bfPor qu\u00e9 el cambio?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#Entonces-%C2%BFpor-que-crear-su-propio-bloque-Gutenberg\" >Entonces, \u00bfpor qu\u00e9 crear su propio bloque Gutenberg?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#%C2%BFEs-Facil\" >\u00bfEs F\u00e1cil?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#Como-crear-bloques-para-el-editor-Gutenberg-de-WordPress\" >C\u00f3mo crear bloques para el editor Gutenberg de WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#1-Prepare-su-entorno\" >1. Prepare su entorno<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#2-Configure-sus-archivos-de-plugin-con-create-guten-block\" >2. Configure sus archivos de plugin con create guten block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#3-Activar-el-plugin-y-probarlo\" >3. Activar el plugin y probarlo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#4-Editar-pluginphp\" >4. Editar plugin.php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#5-Registre-su-bloque-Gutenberg\" >5. Registre su bloque Gutenberg<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#6-Ajustar-el-estilo-de-bloques\" >6. Ajustar el estilo de bloques<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#7-Terminar\" >7. Terminar<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#%C2%BFEsta-listo-para-crear-un-bloque-Gutenberg\" >\u00bfEst\u00e1 listo para crear un bloque Gutenberg?<\/a><\/li><\/ul><\/nav><\/div>\n<div>\n<p><iframe loading=\"lazy\" title=\"SWP #02 | Programa tu primer bloque para Gutenberg - Fernando Garc\u00eda Rebolledo\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/t7n1kRw5eg0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><noscript><iframe loading=\"lazy\" title=\"SWP #02 | Programa tu primer bloque para Gutenberg - Fernando Garc\u00eda Rebolledo\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/t7n1kRw5eg0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/noscript><\/p>\n<p>2J7wes2<\/p>\n<p>Aprender a crear un bloque Gutenberg es una buena inversi\u00f3n de futuro. No importa d\u00f3nde caiga en el debate de Gutenberg, el editor de bloques est\u00e1 aqu\u00ed para quedarse.<\/p>\n<p>Incluso si ha vuelto al editor cl\u00e1sico, es muy probable que en alg\u00fan momento de los pr\u00f3ximos a\u00f1os empiece a crear p\u00e1ginas web en forma de bloques.<\/p>\n<p>Cada vez m\u00e1s temas, como Twenty Veinte y Diecinueve, se aprovechar\u00e1n de lo que el nuevo editor de WordPress tiene para ofrecer. A la vez, pronto al mismo tiempo usar\u00e1s bloques en otras partes de WordPress como el men\u00fa de navegaci\u00f3n o los widgets. Por ende, es mejor que te concentres en ellos ahora.<\/p>\n<p>El editor viene con una serie de bloques est\u00e1ndar que se pueden ampliar a trav\u00e9s plugins. Sin embargo, ser capaz de construir sus propias soluciones personalizadas es a menudo muy \u00fatil, que es lo que este tutorial en bloque de Gutenberg le ense\u00f1ar\u00e1. Pero primero, comencemos con lo b\u00e1sico.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue-son-los-bloques-Gutenberg\"><\/span><span id=\"Que_son_los_bloques_Gutenberg\">\u00bfQu\u00e9 son los bloques Gutenberg?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Antes de que lleguemos a la parte de c\u00f3mo hacerlo, primero decidamos de qu\u00e9 estamos hablando.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplos-de-bloques-de-Gutenberg\"><\/span><span id=\"Ejemplos_de_bloques_de_Gutenberg\">Ejemplos de bloques de Gutenberg<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El principal cambio que Gutenberg introdujo en la creaci\u00f3n de contenido en WordPress es que, en lugar de tener un gran pedazo de contenido (como lo ten\u00eda el editor cl\u00e1sico), las p\u00e1ginas web ahora est\u00e1n segmentadas en partes m\u00e1s peque\u00f1as, llamadas bloques.<\/p>\n<p>Estas pueden ser muchas cosas diferentes:<\/p>\n<ul>\n<li>P\u00e1rrafos<\/li>\n<li>Encabezados<\/li>\n<li>Citas en bloque<\/li>\n<li>Im\u00e1genes y galer\u00edas<\/li>\n<li>Listas<\/li>\n<li>Medios integrados<\/li>\n<li>Botones<\/li>\n<li>Mesas<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/gutenberg-block-example-1024x585.jpg\" alt=\"gutenberg block example\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/gutenberg-block-example-1024x585.jpg\" alt=\"gutenberg block example\"\/><\/noscript><br \/> Cada bloque tiene su propio contenido, formato y otras opciones y puede moverlo, eliminarlo y reutilizarlo a voluntad.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPor-que-el-cambio\"><\/span><span id=\"Por_que_el_cambio\">\u00bfPor qu\u00e9 el cambio?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfPor qu\u00e9 cambiar un sistema en funcionamiento? Bueno, la idea principal detr\u00e1s del editor de Gutenberg es hacer que la experiencia de edici\u00f3n sea m\u00e1s flexible y f\u00e1cil de personalizar, fundamentalmente para los usuarios principiantes.<\/p>\n<p>Le da m\u00e1s control sobre toda la p\u00e1gina, no s\u00f3lo sobre el contenido principal. Puede personalizar los items de una manera m\u00e1s detallada y sin aplicarles clases CSS u otros inconvenientes t\u00e9cnicos.<\/p>\n<p>En su lugar, puede modificar su formato, posici\u00f3n, colores, tama\u00f1os y mucho m\u00e1s directamente desde la interfaz de usuario.<\/p>\n<p>A la vez, los bloques en el editor tienen el mismo aspecto que en la p\u00e1gina. Esto hace que la experiencia del usuario sea mejor, puesto que la vista del editor se asemeja m\u00e1s al producto final.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/twenty-nineteen-back-end-styling-963x1024.jpg\" alt=\"twenty nineteen back end styling\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/twenty-nineteen-back-end-styling-963x1024.jpg\" alt=\"twenty nineteen back end styling\"\/><\/noscript><br \/> A la vez, pronto ya no tendr\u00e1s que aprender diferentes formas de mostrar los items de la p\u00e1gina (como los atajos y los widgets), sino simplemente uno: los bloques. Cuando usted sabe c\u00f3mo utilizarlos, puede controlar todas las diferentes partes de su sitio.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Entonces-%C2%BFpor-que-crear-su-propio-bloque-Gutenberg\"><\/span><span id=\"Entonces_por_que_crear_su_propio_bloque_Gutenberg\">Entonces, \u00bfpor qu\u00e9 crear su propio bloque Gutenberg?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Una de las cosas m\u00e1s emocionantes de WordPress es que es tan customizable. Pr\u00e1cticamente cualquier cosa sobre la plataforma es adaptable a sus necesidades.<\/p>\n<p>A modo de ejemplo, el editor cl\u00e1sico es totalmente customizable. Entonces, \u00bfpor qu\u00e9 no hacer lo mismo con su nueva contraparte?<\/p>\n<p>Sobre todo si hay bloques de contenido que necesitas habitualmente pero que el editor, los plugins o los temas no ofrecen (todav\u00eda), crear los tuyos propios tiene sentido. En lugar de poner c\u00f3digo personalizado cada vez, es m\u00e1s pr\u00e1ctico poder elegirlo desde el men\u00fa incorporado. \u00bfNo est\u00e1s de acuerdo?<\/p>\n<p>Luego de todo, su sitio web debe adaptarse a sus necesidades para que trabajar con \u00e9l sea lo m\u00e1s f\u00e1cil posible. A la vez, saber c\u00f3mo crear su propio bloque Gutenberg se est\u00e1 convirtiendo r\u00e1pidamente en una habilidad \u00fatil.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs-Facil\"><\/span><span id=\"Es_Facil\">\u00bfEs F\u00e1cil?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Desde un punto de vista t\u00e9cnico, es importante tener en cuenta que la mayor\u00eda de los componentes de los bloques de Gutenberg est\u00e1n escritos en JavaScript. Esto va de la mano con el consejo de Matt Mullenweg de 2015 de aprender el lenguaje de programaci\u00f3n \u2013 profundamente (si necesitas hacer eso, consulta estos recursos \u00fatiles).<\/p>\n<p>El cambio hacia JavaScript ha sido evidente en los \u00faltimos a\u00f1os, a modo de ejemplo, en Calypso. El lenguaje de programaci\u00f3n viene con una tonelada de beneficios y las apps web JavaScript-powered construidas sobre APIs (como Gutenberg) son el futuro de la web.<\/p>\n<p>Sin embargo, eso al mismo tiempo significa que, desafortunadamente, la creaci\u00f3n de bloques Gutenberg no es muy amable para los principiantes. No soy un desarrollador ni siquiera por un largo trecho de la palabra, pero he estado trabajando, escribiendo y construyendo sitios con WordPress durante casi diez a\u00f1os.<\/p>\n<p>A pesar de ello, tengo que admitir que luch\u00e9 para completar el reto que me puse con este puesto. Espero que, presentando el proceso paso a paso, pueda abrirlo a otras personas que no se ganan la vida escribiendo c\u00f3digo. Veamos, \u00bfde acuerdo?<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Como-crear-bloques-para-el-editor-Gutenberg-de-WordPress\"><\/span><span id=\"Como_crear_bloques_para_el_editor_Gutenberg_de_WordPress\">C\u00f3mo crear bloques para el editor Gutenberg de WordPress<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Muy bien, ahora que tenemos la teor\u00eda fuera del camino, hablemos de c\u00f3mo crear un bloque de Gutenberg.<\/p>\n<p>Para este tutorial usaremos el tema Veintinueve, el primer tema que fue hecho espec\u00edficamente para el nuevo editor. Fuera de la caja, ofrece varios bloques personalizados, entre los que se encuentran cubiertas, widgets, cotizaciones, pullquotes y mucho m\u00e1s. A esto a\u00f1adiremos un simple bloque de llamada a la acci\u00f3n con contenido customizable y estilo personalizado.<\/p>\n<p>Para no empezar de cero, utilizaremos el kit de herramientas de desarrollo de <em>bloque guten<\/em> de Ahmad Awais. Todo lo que est\u00e1s a punto de leer se basa en ello. A la vez, enlazar\u00e1 con la documentaci\u00f3n oficial de Gutenberg cuando lo considere prudente o necesario.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Prepare-su-entorno\"><\/span><span id=\"1_Prepare_su_entorno\">1. Prepare su entorno<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Uno de los primeros retos para crear un bloque Gutenberg es configurar el entorno de desarrollo. Aunque es f\u00e1cil configurar una instalaci\u00f3n local de WordPress, para jugar con el nuevo editor necesitas cosas como webpack, React, ESLint, Babel, y m\u00e1s.<\/p>\n<p>Si no sabes lo que significa la mitad de estas cosas, est\u00e1 bien, yo tampoco. Lo importante es que todas ellas est\u00e1n incluidas y configuradas correctamente en el kit <em>create guten block<\/em>.<\/p>\n<p>Sin embargo, para poder utilizarlo, primero debe instalar node.js y npm. Para ello, vaya al sitio web oficial node.js y descargue el archivo de instalaci\u00f3n correcto para su sistema.<\/p>\n<p>Una vez hecho esto, ejecute y ejecute la instalaci\u00f3n. \u00bfListo? Genial, acabas de completar el primer paso.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Configure-sus-archivos-de-plugin-con-create-guten-block\"><\/span><span id=\"2_Configure_sus_archivos_de_plugin_con_create_guten_block\">2. Configure sus archivos de plugin con <em>create guten block<\/em><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Luego de eso, es hora de crear el primer bloque. Puede hacerlo f\u00e1cilmente a trav\u00e9s de la consola. Si nunca has trabajado con \u00e9l antes, no te preocupes. Al mismo tiempo fue mi primera vez.<\/p>\n<p>Lo primero que tienes que hacer es abrir la consola. En Windows, presione el bot\u00f3n Windows, busque la <em>l\u00ednea de comandos<\/em> y \u00e1brala. Si est\u00e1s en un Mac, usa <em>Cmd+F<\/em> y luego busca la <em>consola<\/em>. Ambos deber\u00edan abrir algo como esto:<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-in-windows-command-prompt-with-create-guten-block.jpg\" alt=\"create gutenberg block in windows command prompt with create guten block\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-in-windows-command-prompt-with-create-guten-block.jpg\" alt=\"create gutenberg block in windows command prompt with create guten block\"\/><\/noscript><br \/> Aqu\u00ed, lo primero que deseas hacer es navegar al directorio de plugins de tu sitio local. Puede hacerlo con el comando <em>cd<\/em>. Escribir <em>cd[nombre del directorio]<\/em> abre un directorio, <em>cd\u2026<\/em> vuelve a un directorio.<\/p>\n<p>Al mismo tiempo puede copiar la ruta al directorio de plugins desde la parte superior de su ventana y simplemente pegarla luego del comando<em> cd<\/em> para ir all\u00ed directamente.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/navigate-directories-in-console.jpg\" alt=\"navigate directories in console\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/navigate-directories-in-console.jpg\" alt=\"navigate directories in console\"\/><\/noscript><br \/> Una vez all\u00ed, desea ejecutar el siguiente comando:<\/p>\n<div>\n<p>npx create-guten-block my-block<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td\/>\n<td>\n<div>\n<p>npx create-guten-block my-block<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Aseg\u00farese de reemplazar <em>mi bloque<\/em> con el nombre del bloque que desea crear. A modo de ejemplo, en mi caso, fui con <em>cta-block<\/em>.<\/p>\n<p>La m\u00e1quina crear\u00e1 un directorio con el mismo nombre, descargar\u00e1 toda la informaci\u00f3n necesaria y configurar\u00e1 los archivos de plugin que necesite para su bloque Gutenberg.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/run-create-guten-block.jpg\" alt=\"run create guten block\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/run-create-guten-block.jpg\" alt=\"run create guten block\"\/><\/noscript><br \/> Tomar\u00e1 un poco de tiempo, pero cuando est\u00e9 terminado, acabar\u00e1s con esto:<br \/> <img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-structure-1024x549.jpg\" alt=\"create guten block structure\"\/><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-structure-1024x549.jpg\" alt=\"create guten block structure\"\/><\/noscript><br \/> Una vez hecho esto, sigue el consejo de <em>crear un bloque guten<\/em> y entra en tu carpeta de plugins (recuerda, <em>cd[nombre del directorio]<\/em>) y escribe npm start.<\/p>\n<p>Este \u00faltimo ejecutar\u00e1 el bloque en modo de desarrollo, estar\u00e1 atento a los cambios y reportar\u00e1 errores en su c\u00f3digo.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Activar-el-plugin-y-probarlo\"><\/span><span id=\"3_Activar_el_plugin_y_probarlo\">3. Activar el plugin y probarlo<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Una vez que haya llegado hasta aqu\u00ed, ya puede utilizar el plugin que acaba de crear. Para ello, inicia sesi\u00f3n en tu sitio de WordPress, ve al men\u00fa de <em>Plugins<\/em> y act\u00edvalo all\u00ed.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/createn-guten-block-in-plugin-menu-1024x296.jpg\" alt=\"create guten block in plugin menu\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/createn-guten-block-in-plugin-menu-1024x296.jpg\" alt=\"create guten block in plugin menu\"\/><\/noscript><br \/> Cuando vaya al editor, haga clic en el s\u00edmbolo m\u00e1s y busque el nombre del bloque, al mismo tiempo lo encontrar\u00e1 incluido.<br \/> <img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-and-choose-in-editor-1024x539.jpg\" alt=\"create gutenberg block and choose in editor\"\/><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-and-choose-in-editor-1024x539.jpg\" alt=\"create gutenberg block and choose in editor\"\/><\/noscript><br \/> Incluso puede introducirlo en la p\u00e1gina para encontrarlo en la pantalla:<br \/> <img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-sample-block-1024x586.jpg\" alt=\"create guten block sample block\"\/><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-sample-block-1024x586.jpg\" alt=\"create guten block sample block\"\/><\/noscript><br \/> No est\u00e1 mal, \u00bfverdad?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Editar-pluginphp\"><\/span><span id=\"4_Editar_pluginphp\">4. Editar plugin.php<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La raz\u00f3n por la que no se ve nada en absoluto es debido a que actualmente el bloque contiene contenido ficticio. Es hora de cambiar eso.<\/p>\n<p>Los archivos importantes para cualquier cambio son plugin.php dentro del directorio de plugins as\u00ed como los tres archivos dentro de src\/block llamados blocks.js, editor.scss y style.scss.<\/p>\n<p>Con ellos, usted controla todo lo que tiene que ver con la funcionalidad y el dise\u00f1o de su bloque Gutenberg de fabricaci\u00f3n propia.<\/p>\n<p>El m\u00e1s f\u00e1cil de cambiar es plugin.php. Aqu\u00ed se encuentra el encabezado del plugin que contiene toda la informaci\u00f3n que se ve en el men\u00fa del plugin en el m\u00f3dulo de servicio.<\/p>\n<div>\n<p>\/** Nombre del plugin: cta-block \u2013 CGB Gutenberg Block Plugin * Plugin URI: https:\/\/github.com\/ahmadawais\/create-guten-block\/ * Descripci\u00f3n: cta-block \u2013 es un plugin de Gutenberg creado a trav\u00e9s create-guten-block. * Autor: mrahmadawais, maedahbatool * Autor URI: https:\/\/AhmadAwais.com\/ * Versi\u00f3n: 1.0.0 * Licencia: GPL2+ * Licencia URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.txt * * @package CGB *\/\/<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td\/>\n<td>\n<div>\n<p>\/**<\/p>\n<p>* Nombre del plugin: cta-block \u2013 CGB Gutenberg Block Plugin<\/p>\n<p>* Plugin URI: https:\/\/github.com\/ahmadawais\/create-guten-block\/<\/p>\n<p>* Descripci\u00f3n: cta-block \u2013 es un plugin de Gutenberg creado a trav\u00e9s create-guten-block.<\/p>\n<p>* Autor: mrahmadawais, maedahbatool<\/p>\n<p>* Autor URI: https:\/\/AhmadAwais.com\/<\/p>\n<p>* Versi\u00f3n: 1.0.0<\/p>\n<p>* Licencia: GPL2+<\/p>\n<p>* Licencia URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.txt<\/p>\n<p>*<\/p>\n<p>* Paquete CGB<\/p>\n<p>*\/<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Como primer paso, modifique todo esto para que refleje el nombre correcto, el autor y otra informaci\u00f3n del plugin. Todo se explica por s\u00ed mismo, pero si tienes a tu disposici\u00f3n de problemas, lee este art\u00edculo.<\/p>\n<p>Una vez hecho y guardado, al mismo tiempo ver\u00e1 los cambios en WordPress.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/gutenberg-block-with-adjusted-plugin-header-1024x145.jpg\" alt=\"gutenberg block with adjusted plugin header\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/gutenberg-block-with-adjusted-plugin-header-1024x145.jpg\" alt=\"gutenberg block with adjusted plugin header\"\/><\/noscript><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Registre-su-bloque-Gutenberg\"><\/span><span id=\"5_Registre_su_bloque_Gutenberg\">5. Registre su bloque Gutenberg<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Luego de eso, quiere hacer lo mismo con la forma en que su bloque aparece en el editor de Gutenberg. Para eso, gire a block.js. Contiene todo el c\u00f3digo para registrar el bloque en un sitio de WordPress y para lo que hace en el front end y back end.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-code-1024x693.jpg\" alt=\"create guten block code\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-code-1024x693.jpg\" alt=\"create guten block code\"\/><\/noscript><br \/> El archivo por defecto para <em>crear un bloque guten<\/em> est\u00e1 muy bien anotado. Le dice qu\u00e9 parte es responsable de qu\u00e9 para que pueda hacer sus propios cambios. registerBlockType es lo que registra el bloque. Las funciones siguientes editar: y guardar: describen el contenido y el comportamiento del bloque dentro de Gutenberg y en la p\u00e1gina respectivamente. M\u00e1s informaci\u00f3n aqu\u00ed y aqu\u00ed.<\/p>\n<p>En mi caso, simplemente borro todo empezando por registerBlockType y lo reemplazo con el ejemplo de la documentaci\u00f3n de Gutenberg (hacia abajo). Esto crea un sencillo campo de editor de texto enriquecido con opciones de formato m\u00ednimas, incluyendo negrita, cursiva, hiperv\u00ednculos, etc.<\/p>\n<p>Sin embargo, para que funcione con lo que hemos creado hasta ahora, necesitamos cambiar esta parte:<\/p>\n<div>\n<p>blocks.registerBlockType( \u2018gutenberg-examples\/example-03-editable\u2019, { title: \u00abEjemplo\u00bb: \u00abEditable\u00bb, icono: \u00abAcceso universal\u00bb, categor\u00eda: N -\u00abDise\u00f1o\u00bb,<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td\/>\n<td>\n<div>\n<p>blocks.registerBlockType( \u2018gutenberg-examples\/example-03-editable\u2019, {<\/p>\n<p>t\u00edtulo: \u00abEjemplo\u00bb: Editable\u00bb,<\/p>\n<p>icono: \u00abacceso universal\u00bb,<\/p>\n<p>categor\u00eda: N -\u00abDise\u00f1o\u00bb,<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>En particular, lo que deseas cambiar es:<\/p>\n<ul>\n<li>Ruta de registro \u2013 Se refiere a la ruta que aparece luego de blocks.registerBlockType. Necesita adaptarse a su entorno actual.<\/li>\n<li>t\u00edtulo: \u2013 El nombre del bloque tal y como aparecer\u00e1 en Gutenberg.<\/li>\n<li>icono: \u2013 El icono asociado al bloque en el editor. Puedes usar los dashicons. Aseg\u00farese de insertar el nombre sin el prefijo dashicons-. Alternativamente, puede utilizar su propio archivo SVG.<\/li>\n<li>category: \u2013 Bajo qu\u00e9 categor\u00eda aparecer\u00e1 su bloque. Algunas de las categor\u00edas est\u00e1ndar son: com\u00fan, formato, dise\u00f1o, widgets e incrustaci\u00f3n.<\/li>\n<\/ul>\n<p>En mi caso, simplemente lo cambi\u00e9 por esto:<\/p>\n<div>\n<p>blocks.registerBlockType( \u2018cgb\/block-cta-block\u2019, { t\u00edtulo: \u00abCTA Block\u00bb, icono: \u00abTestimonio\u00bb, categor\u00eda: \u00abCom\u00fan\u00bb,<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td\/>\n<td>\n<div>\n<p>blocks.registerBlockType( \u2018cgb\/block-cta-block\u2019, {<\/p>\n<p>t\u00edtulo: \u00abCTA Block\u00bb,<\/p>\n<p>icono: \u00abTestimonio\u00bb,<\/p>\n<p>categor\u00eda: \u00abCom\u00fan\u00bb,<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Luego de eso, aparece en el editor as\u00ed:<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-and-choose-in-editor-1024x539.jpg\" alt=\"create gutenberg block and choose in editor\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-and-choose-in-editor-1024x539.jpg\" alt=\"create gutenberg block and choose in editor\"\/><\/noscript><br \/> Y as\u00ed es como se ve en la p\u00e1gina:<br \/> <img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-and-display-in-editor-1024x287.jpg\" alt=\"create gutenberg block and display in editor\"\/><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-gutenberg-block-and-display-in-editor-1024x287.jpg\" alt=\"create gutenberg block and display in editor\"\/><\/noscript><br \/> Dej\u00e9 el resto del c\u00f3digo como lo encontr\u00e9.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-Ajustar-el-estilo-de-bloques\"><\/span><span id=\"6_Ajustar_el_estilo_de_bloques\">6. Ajustar el estilo de bloques<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Luego de eso, es hora de ajustar la visualizaci\u00f3n de su nuevo bloque. Esto sucede dentro de editor.scss y style.scss.<\/p>\n<p>Como sugieren los nombres de los archivos, el primero controla el aspecto de su bloque dentro del editor Gutenberg, y el segundo la salida en la parte frontal.<\/p>\n<p>En el ejemplo por defecto de create guten block puedes ver que la salida es verde en el editor pero roja en la p\u00e1gina. Esto es consecuencia de la utilizaci\u00f3n de dos conjuntos diferentes de m\u00e1rgenes de beneficio.<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-default-block-comparison-1024x394.jpg\" alt=\"create guten block default block comparison\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/create-guten-block-default-block-comparison-1024x394.jpg\" alt=\"create guten block default block comparison\"\/><\/noscript><br \/> En la mayor\u00eda de los casos, probablemente tiene sentido mantener el estilo del mismo. Luego de todo, uno de los puntos m\u00e1s vendidos de Gutenberg es que la experiencia de edici\u00f3n y el producto final est\u00e1n m\u00e1s alineados que antes.<\/p>\n<p>En mi caso, a\u00f1ado lo siguiente a ambos archivos:<\/p>\n<div>\n<p>.wp-block-cgb-block-cta-block { fondo: #d6f279; frontera: 0.2rem punteado #292929; margen: 0 auto; relleno: 1rem; texto-alineaci\u00f3n: centro; }<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td\/>\n<td>\n<div>\n<p>.wp-block-cgb-block-cta-block {<\/p>\n<p>fondo: #d6f279;<\/p>\n<p>de la frontera: 0.2rem punteado #29292929;<\/p>\n<p>margen: 0 auto;<\/p>\n<p>acolchado: 1rem;<\/p>\n<p>text-align: centro;<\/p>\n<p>}<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Y aqu\u00ed est\u00e1 el resultado en el editor:<br \/><img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/finished-block-in-gutenberg-editor-1024x602.jpg\" alt=\"finished block in gutenberg editor\"\/><\/p>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/finished-block-in-gutenberg-editor-1024x602.jpg\" alt=\"finished block in gutenberg editor\"\/><\/noscript><br \/> Y en la parte delantera:<br \/> <img decoding=\"async\" class=\"lazy lazy-hidden\" data-lazy-type=\"image\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/finished-block-on-front-end.jpg\" alt=\"finished block on front end\"\/><noscript><img decoding=\"async\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/finished-block-on-front-end.jpg\" alt=\"finished block on front end\"\/><\/noscript><br \/> Por cierto, Gutenberg asigna autom\u00e1ticamente las clases CSS a los bloques en funci\u00f3n de su nombre y puede averiguar qu\u00e9 son con las herramientas de su navegador. Sin embargo, las hojas de estilo de <em>create guten block<\/em> ya contendr\u00e1n los nombres de clase correctos. A la vez, puede determinar los suyos propios.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7-Terminar\"><\/span><span id=\"7_Terminar\">7. Terminar<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Muy bien, una vez que est\u00e9 satisfecho con su bloque, hay unos cuantos pasos m\u00e1s. Lo primero que debe hacer es volver a la consola y pulsar <em>Ctrl\/Cmd+C<\/em> para evitar que las npm monitoricen sus archivos.<\/p>\n<p>Luego de eso, ejecute el siguiente comando:<\/p>\n<p>Esto compilar\u00e1 los archivos necesarios para el c\u00f3digo de producci\u00f3n (no te preocupes, no impedir\u00e1 que tu bloque funcione, lo he comprobado).<\/p>\n<p>Si crees que no deseas volver a usar este bloque dentro de <em>create guten block<\/em>, al mismo tiempo puedes escribir npm run eject. Sin embargo, esto significa que, de ahora en adelante, tendr\u00e1 que mantener el proyecto usted mismo.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFEsta-listo-para-crear-un-bloque-Gutenberg\"><\/span><span id=\"Esta_listo_para_crear_un_bloque_Gutenberg\">\u00bfEst\u00e1 listo para crear un bloque Gutenberg?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Los bloques de Gutenberg est\u00e1n configurados para convertirse en el nuevo elemento por defecto de WordPress. Ayudan a crear posts, p\u00e1ginas, layouts y dise\u00f1os de forma modular y ofrecen mucho control.<\/p>\n<p>Aprender a configurar bloques Gutenberg personalizados le ayuda a mantenerse al tanto del desarrollo actual y le proporciona las herramientas para personalizar su sitio con la nueva tecnolog\u00eda.<\/p>\n<p>Arriba, has aprendido una forma b\u00e1sica de crear un bloque para el editor de Gutenberg. Es m\u00e1s complicado que hacer cambios a las plantillas PHP y para modificaciones significativas, es probable que no tenga que aprender al menos algo de JavaScript.<\/p>\n<p>Sin embargo, sabiendo c\u00f3mo funciona en principio, puedes empezar de a poco y crecer a partir de ah\u00ed. Si yo puedo hacerlo, t\u00fa al mismo tiempo puedes.<\/p>\n<p>A la vez, los creadores de Advanced Custom Fields est\u00e1n trabajando en una forma de hacer que la creaci\u00f3n de bloques sea mucho m\u00e1s f\u00e1cil. La caracter\u00edstica est\u00e1 actualmente en beta, pero tan pronto como est\u00e9 disponible, puede esperar leer sobre ella aqu\u00ed.<\/p>\n<p><em>\u00bfHa creado antes un bloque Gutenberg? \u00bfC\u00f3mo fue tu experiencia? \u00bfAlg\u00fan otro consejo o comentario? H\u00e1ganoslo saber en la secci\u00f3n de comentarios a continuaci\u00f3n!<\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>2J7wes2 Aprender a crear un bloque Gutenberg es una buena inversi\u00f3n de futuro. No importa d\u00f3nde caiga en el debate de Gutenberg, el editor de bloques est\u00e1 aqu\u00ed para quedarse&#8230;.<\/p>","protected":false},"author":1,"featured_media":95379,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1351],"tags":[],"class_list":["post-95377","post","type-post","status-publish","format-standard","has-post-thumbnail","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020) - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"2J7wes2Aprender a crear un bloque Gutenberg es una buena inversi\u00f3n de futuro. No importa d\u00f3nde caiga en el debate de Gutenberg, el editor de bloques est\u00e1\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/\u25b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020)\" \/>\n<meta property=\"og:description\" content=\"2J7wes2Aprender a crear un bloque Gutenberg es una buena inversi\u00f3n de futuro. No importa d\u00f3nde caiga en el debate de Gutenberg, el editor de bloques est\u00e1\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/wordpress\/\u25b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-06T23:46:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/gutenberg-block-example-1024x585-2144403.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"585\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020)\",\"datePublished\":\"2022-09-06T23:46:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/\"},\"wordCount\":2724,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/gutenberg-block-example-1024x585-2144403.jpg\",\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/\",\"name\":\"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020) - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/gutenberg-block-example-1024x585-2144403.jpg\",\"datePublished\":\"2022-09-06T23:46:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"2J7wes2Aprender a crear un bloque Gutenberg es una buena inversi\u00f3n de futuro. No importa d\u00f3nde caiga en el debate de Gutenberg, el editor de bloques est\u00e1\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/gutenberg-block-example-1024x585-2144403.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/gutenberg-block-example-1024x585-2144403.jpg\",\"width\":1024,\"height\":585,\"caption\":\"gutenberg-block-example-1024x585-2144403-6259291-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020) - R Marketing Digital","description":"Apprendre \u00e0 cr\u00e9er un bloc Gutenberg est un bon investissement pour l&#039;avenir. Peu importe o\u00f9 vous vous situez dans le d\u00e9bat de Gutenberg, l&#039;\u00e9diteur de blocs est","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/\u25b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/","og_locale":"fr_FR","og_type":"article","og_title":"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020)","og_description":"2J7wes2Aprender a crear un bloque Gutenberg es una buena inversi\u00f3n de futuro. No importa d\u00f3nde caiga en el debate de Gutenberg, el editor de bloques est\u00e1","og_url":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/\u25b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-06T23:46:00+00:00","og_image":[{"width":1024,"height":585,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/gutenberg-block-example-1024x585-2144403.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020)","datePublished":"2022-09-06T23:46:00+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/"},"wordCount":2724,"image":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/gutenberg-block-example-1024x585-2144403.jpg","articleSection":["Wordpress"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/","url":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/","name":"\u2022\u25b7 Tutorial c\u00f3mo crear bloques del editor Gutenberg paso a paso (2020) - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/gutenberg-block-example-1024x585-2144403.jpg","datePublished":"2022-09-06T23:46:00+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Apprendre \u00e0 cr\u00e9er un bloc Gutenberg est un bon investissement pour l&#039;avenir. Peu importe o\u00f9 vous vous situez dans le d\u00e9bat de Gutenberg, l&#039;\u00e9diteur de blocs est","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-tutorial-como-crear-bloques-del-editor-gutenberg-paso-a-paso-2020\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/gutenberg-block-example-1024x585-2144403.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/gutenberg-block-example-1024x585-2144403.jpg","width":1024,"height":585,"caption":"gutenberg-block-example-1024x585-2144403-6259291-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=95377"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95377\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/95379"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=95377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=95377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=95377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}