{"id":179,"date":"2019-07-18T17:39:20","date_gmt":"2019-07-18T15:39:20","guid":{"rendered":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/?page_id=179"},"modified":"2019-08-18T14:05:17","modified_gmt":"2019-08-18T12:05:17","slug":"3-3-gutenberg-el-nuevo-editor-de-texto","status":"publish","type":"page","link":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/3-3-gutenberg-el-nuevo-editor-de-texto\/","title":{"rendered":"3.3. Gutenberg, el nuevo editor de texto"},"content":{"rendered":"<p>Para la creaci\u00f3n de contenidos, WordPress emplea un editor de texto que aparece visible tanto en una p\u00e1gina como en una entrada. Este editor permite escribir y modificar archivos digitales compuestos \u00fanicamente por texto sin formato.<\/p>\n<p>Adem\u00e1s, el editor de texto es del tipo <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Acr\u00f3nimo de <em>What You See Is What You Get<\/em>, \u00ablo que ves es lo que obtienes\u00bb.\" data-placement=\"top\" data-html=\"true\" >WYSIWYG<\/a>, lo que permite escribir un documento viendo directamente el resultado final, frecuentemente el resultado visible en el <em>FrontEnd<\/em>.<\/p>\n<div class=\"featured featured-blue\"><p>Desde diciembre de 2018, WordPress incorpora por defecto un nuevo editor de texto llamado <strong>Gutenberg<\/strong>. Es la mayor implementaci\u00f3n en WordPress en los \u00faltimos a\u00f1os, y cambia dr\u00e1sticamente la forma en la que podemos crear contenido con este software.<\/p>\n<\/div>\n<p>Gutenberg se emplea tanto para la creaci\u00f3n y edici\u00f3n de p\u00e1ginas como de entradas, por lo que nos detendremos a examinar sus funciones.<\/p>\n<figure id=\"attachment_198\" aria-describedby=\"caption-attachment-198\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-198 size-full\" src=\"\/wp-content\/uploads\/2019\/07\/m4352_009.jpg\" alt=\"\" width=\"765\" height=\"371\" srcset=\"\/wp-content\/uploads\/2019\/07\/m4352_009.jpg 765w, \/wp-content\/uploads\/2019\/07\/m4352_009-300x145.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-198\" class=\"wp-caption-text\">Vista del editor Gutenberg en una p\u00e1gina de WordPress.<br \/>Fuente: WordPress<\/figcaption><\/figure>\n<div class=\"featured featured-grey\"><p>Con Gutenberg cambia todo. El editor cl\u00e1sico ha sufrido ligeras variaciones a lo largo de los a\u00f1os, pero en la versi\u00f3n 5.0 de WordPress desaparece para dar paso a un editor de \u00abbloques\u00bb, donde el contenido ha de estructurarse en peque\u00f1os apartados independientes (bloques) de diferentes tipos de contenido.<\/p>\n<\/div>\n<p>Inserta un nombre para tu contenido (el t\u00edtulo del mismo) y comienza a crear.<\/p>\n<div class=\"featured featured-blue\"><p><strong>\u00a1Ojo!<\/strong><\/p>\n<p>No podr\u00e1s editar el enlace permanente de la p\u00e1gina hasta que no hayas guardado como borrador o publicado el contenido. Los enlaces permanentes son \u00fanicos para cada contenido, aunque los t\u00edtulos podr\u00edan repetirse.<\/p>\n<\/div>\n<figure id=\"attachment_188\" aria-describedby=\"caption-attachment-188\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-188 size-full\" src=\"\/wp-content\/uploads\/2019\/07\/m4352_010.jpg\" alt=\"\" width=\"765\" height=\"411\" srcset=\"\/wp-content\/uploads\/2019\/07\/m4352_010.jpg 765w, \/wp-content\/uploads\/2019\/07\/m4352_010-300x161.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-188\" class=\"wp-caption-text\">Vista del editor de bloques de Gutenberg en WordPress.<br \/>Fuente: WordPress<\/figcaption><\/figure>\n<p>Pulsa en el bot\u00f3n \u00ab+\u00bb situado en el interior de un peque\u00f1o c\u00edrculo para seleccionar el bloque que queremos insertar y comenzar a introducir contenidos personalizados. Se desplegar\u00e1 un men\u00fa con los diferentes bloques disponibles por defecto y un peque\u00f1o buscador en la parte superior para poder escribir el nombre del bloque y encontrarlo m\u00e1s r\u00e1pidamente.<\/p>\n<div class=\"featured featured-blue\"><p><strong>Nota<\/strong><\/p>\n<p>Para evitar que salga por defecto el bloque de \u00abp\u00e1rrafo cl\u00e1sico\u00bb, desactiva en el gestor de <em>plugins<\/em> el complemento de editor cl\u00e1sico u otros posibles editores alternativos a Gutenberg.<\/p>\n<\/div>\n<p>En la parte superior derecha, podemos pulsar el bot\u00f3n del engranaje para mostrar un men\u00fa contextual lateral que variar\u00e1 en funci\u00f3n del elemento que tengamos seleccionado en el editor. Por defecto, muestra las opciones del documento, pero si seleccionamos la opci\u00f3n \u00abbloque\u00bb, el contenido de este men\u00fa variar\u00e1 en funci\u00f3n del bloque que tengamos seleccionado en el editor. As\u00ed, si tenemos un bloque de columnas, en el men\u00fa lateral podemos indicar el n\u00famero de columnas de dicho bloque, y si tenemos un bloque de p\u00e1rrafo podremos ajustar el tama\u00f1o del texto, color, formato, el color de fondo, etc.<\/p>\n<p>Por defecto, estos son los principales bloques que incluye Gutenberg (aunque ir\u00e1n aumentando con el tiempo y\/o con la instalaci\u00f3n de nuevos complementos):<\/p>\n<p><strong>1) M\u00e1s utilizados<\/strong>: son los accesos directos a los elementos m\u00e1s comunes.<\/p>\n<p><strong>2) Bloques comunes<br \/>\n<\/strong><\/p>\n<ul>\n<li><strong>Imagen<\/strong>: inserta una imagen.<\/li>\n<li><strong>P\u00e1rrafo cl\u00e1sico<\/strong>: inserta un p\u00e1rrafo de texto con las opciones del editor cl\u00e1sico (m\u00e1s completo).<\/li>\n<li><strong>P\u00e1rrafo<\/strong>: inserta un p\u00e1rrafo de texto con las opciones de edici\u00f3n m\u00e1s sencillas.<\/li>\n<li><strong>Encabezado<\/strong>: a\u00f1ade un encabezado (etiquetas H de HTML) en tu web.<\/li>\n<li><strong>Galer\u00eda<\/strong>: inserta una galer\u00eda de fotos.<\/li>\n<li><strong>Lista<\/strong>: inserta una lista de elementos, ordenada o desordenada.<\/li>\n<li><strong>Cita<\/strong>: inserta un texto en formato cita, entrecomillada y con un formato especial.<\/li>\n<li><strong>Audio<\/strong>: inserta un archivo de audio.<\/li>\n<li><strong>Fondo<\/strong>: inserta una imagen de fondo bajo un texto que t\u00fa puedes editar.<\/li>\n<li><strong>Archivo<\/strong>: permite poner a disposici\u00f3n del internauta un archivo determinado para su descarga.<\/li>\n<li><strong>Cl\u00e1sico<\/strong>: inserta un p\u00e1rrafo de texto con el editor cl\u00e1sico.<\/li>\n<li><strong>V\u00eddeo<\/strong>: inserta un archivo de v\u00eddeo.<\/li>\n<\/ul>\n<p><strong>3) Formatos<\/strong><\/p>\n<ul>\n<li><strong>C\u00f3digo<\/strong>: permite insertar un fragmento de c\u00f3digo.<\/li>\n<li><strong>HTML personalizado<\/strong>: permite a\u00f1adir contenido formateado en HTML.<\/li>\n<li><strong>Preformateado<\/strong>: muy similar al de HTML personalizado, pero permitiendo mantener los espacios o saltos de l\u00ednea.<\/li>\n<li><strong>P\u00e1rrafo de cita<\/strong>: permite incluir una cita textual y su referencia.<\/li>\n<li><strong>Tabla<\/strong>: introduce una tabla de contenidos distribuidos en filas y columnas.<\/li>\n<li><strong>Verso<\/strong>: introduce un p\u00e1rrafo con un estilo diferente a los anteriores.<\/li>\n<\/ul>\n<p><strong>4) Elementos de dise\u00f1o<\/strong><\/p>\n<ul>\n<li><strong>Bot\u00f3n<\/strong>: inserta un bot\u00f3n que puedes dirigir a cualquier URL.<\/li>\n<li><strong>Columnas<\/strong>: introduce un bloque de contenido distribuido en columnas. Es, posiblemente, el elemento m\u00e1s \u00fatil para dise\u00f1ar apartados como la portada de tu propia p\u00e1gina web.<\/li>\n<li><strong>Medios y texto<\/strong>: inserta un bloque de dos columnas, donde una es un medio audiovisual y otra es un contenido textual.<\/li>\n<li><strong>M\u00e1s<\/strong>: introduce un bot\u00f3n de \u00ableer m\u00e1s\u00bb.<\/li>\n<li><strong>Salto de p\u00e1gina<\/strong>: coloca un marcador para saltar p\u00e1gina.<\/li>\n<li><strong>Separador<\/strong>: introduce una l\u00ednea de separaci\u00f3n de contenidos entre bloques.<\/li>\n<li><strong>Espaciador<\/strong>: inserta un espacio de p\u00edxeles por determinar para espaciar los bloques anterior y posterior.<\/li>\n<\/ul>\n<p><strong>5) <em>Widgets<\/em><\/strong><\/p>\n<ul>\n<li><em><strong>Shortcode<\/strong><\/em>: permite introducir de forma sencilla los c\u00f3digos cortos de WordPress.<\/li>\n<li><strong>Archivos<\/strong>: muestra un enlace con el mes y a\u00f1o que agrupa las entradas publicadas en esa fecha.<\/li>\n<li><strong>Categor\u00edas<\/strong>: muestra un men\u00fa con las categor\u00edas existentes.<\/li>\n<li><strong>\u00daltimos comentarios<\/strong>: muestra los \u00faltimos comentarios recibidos en la web.<\/li>\n<li><strong>\u00daltimas entradas<\/strong>: muestra las \u00faltimas entradas publicadas en la web.<\/li>\n<\/ul>\n<p><strong>6) Incrustados<\/strong>. Este conjunto de bloques permite seleccionar el adecuado para incrustar elementos de los sitios webs m\u00e1s empleados, como Twitter, YouTube, Facebook, Instagram, WordPress, Soundcloud, Spotify, Flickr, etc. El abanico de opciones es muy elevado, y crecer\u00e1 con el tiempo.<\/p>\n<div class=\"featured featured-grey\"><p>En la web <a href=\"https:\/\/tutorialwp.online\/gutenberg-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">TutorialWP<\/a> aparece recogida una pr\u00e1ctica descripci\u00f3n de cada uno de los diferentes bloques que se pueden insertar.<\/p>\n<\/div>\n<p>En la secci\u00f3n de complementos podr\u00e1s expandir las posibilidades del editor de bloques con nuevos bloques y funcionalidades para mejorar el rendimiento y la apariencia gr\u00e1fica de tu web con Gutenberg.<\/p>\n<p>\u00a1Para terminar! Si no te gusta Gutenberg y empleas una versi\u00f3n de WordPress superior a la 5.0, siempre puedes volver al editor cl\u00e1sico con unos simples pasos:<strong><br \/>\n<\/strong><\/p>\n<ol>\n<li>Ve al gestor de <em>plugins<\/em>, pulsa en \u00abA\u00f1adir nuevo\u00bb y utiliza el buscador para localizar el complemento \u00ab<a href=\"https:\/\/gl.wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Classic Editor<\/a>\u00bb, inst\u00e1lalo y act\u00edvalo.<\/li>\n<li>En el men\u00fa \u00abAjustes &gt; Escritura\u00bb ahora podr\u00e1s marcar cu\u00e1l es el editor predeterminado para todos los usuarios y tambi\u00e9n si permites a los usuarios cambiar de editor (en cada entrada o p\u00e1gina, podr\u00e1s usar uno u otro).<\/li>\n<\/ol>\n<div class=\"featured featured-blue\"><p>Mi consejo es que actives la posibilidad de usar uno u otro editor, y permitas a cada usuario utilizar indistintamente uno u otro. Asimismo, tambi\u00e9n te aconsejo que le des una oportunidad a Gutenberg: ha llegado para quedarse, as\u00ed que, aunque tenga una curva de aprendizaje mayor que el editor cl\u00e1sico, es necesario conocer c\u00f3mo funciona.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para la creaci\u00f3n de contenidos, WordPress emplea un editor de texto que aparece visible tanto en una p\u00e1gina como en una entrada. Este editor permite escribir y modificar archivos digitales compuestos \u00fanicamente por texto sin formato. Adem\u00e1s, el editor de texto es del tipo , lo que permite escribir un documento viendo directamente el resultado [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/179"}],"collection":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":15,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/179\/revisions"}],"predecessor-version":[{"id":870,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/179\/revisions\/870"}],"wp:attachment":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}