Primeros pasos con el editor de WordPress

¿Qué es Gutenberg?

Gutenberg es el editor visual o editor de bloques de WordPress, que nos permite crear y personalizar los contenidos de nuestros artículos

La principal diferencia de Gutenberg con el antiguo editor clásico es su estructura de bloques. Con un diseño simplificado, este editor nos permite gestionar cualquier texto o archivo de nuestras entradas mediante bloques.

Estructura del editor Gutenberg

Editor gutenberg. Vista detallada.
Vista detallada. Pulsa para ampliar.

En la parte central tenemos el contenido o vista previa de la entrada. Inicialmente aparece un apartado para insertar el título y otro para añadir el texto y demás contenido que irá en el cuerpo de nuestro artículo.

A la derecha tenemos un panel lateral, que ofrece ajustes del documento (entrada o página) (categoría, etiquetas, imagen…) o de bloque, si tenemos algún bloque seleccionado. Podemos ocultar y mostrar este panel pulsando sobre el icono correspondiente en a barra superior, arriba a la derecha.

Junto a este icono tenemos también los botones de Vista Previa y Publicar.

En la parte izquierda de la barra superior tenemos el icono «+», que nos permite insertar los diferentes tipos de bloques. Mediante las flechas podemos deshacer o rehacer los cambios realizados. Por último, el icono de las líneas nos muestra una vista de lista con los diferentes bloques del artículo para navegarlos rápidamente. Desde ahí podemos copiar, pegar, mover o duplicar bloques sin dificultad.

Primeros pasos

Para insertar un bloque tenemos varias opciones:

  • Desde el icono “+” situado arriba a la izquierda. Ahí podemos, o bien buscar el bloque que necesitemos en los menús desplegables, o bien directamente introducir su nombre en el buscador.
Selector de bloques

  • Cuando pulsamos la tecla «Enter» al insertar un texto en el contenido, automáticamente se crea un nuevo bloque de texto.
  • Consejo para usuarios avanzados!: Tal como nos indica el editor, cuando el cursor está en una posición vacía del área de contenido, (Teclea / para añadir un nuevo bloque) escribiendo la barra derecha «/» podemos comenzar a escribir el nombre del bloque e insertarlo rápidamente.
Inserir bloc mitjançant la barra capa la dreta
Inserción rápida de bloques mediante «/» y opción «+» para añadir desde el selector de bloques.

  • Pulsando sobre los iconos “+” que aparecen al pasar el ratón sobre el contenido, automáticamente se crea un nuevo bloque de texto.

Una vez insertado un bloque, al seleccionarlo, aparecerá una barra con las diferentes herramientas para el mismo. La primera nos permite cambiar el tipo de bloque por otro similar. El resto son opciones para variar el formato, en función del tipo de bloque.

Barra de herramientas del bloque

En la parte izquierda de la barra de herramientas del bloque están los botones de desplazamiento, que nos permiten mover el bloque por el contenido de la página.

Al tenerlo seleccionado podremos ver también, en el Panel lateral derecho, las opciones avanzadas que nos permite ese bloque.

Bloques básicos

Gutenberg posee numerosos bloques, aquí tienes los más útiles y habituales:

  • Párrafo: desde este bloque se puede añadir texto y modificar sus propiedades básicas (alineados, negrita, cursiva) o añadir enlaces.
  • Encabezado: solamente se puede añadir un H1 (el del título), pero con este bloque es posible estructurar la entrada con diferentes H2, H3…
  • Imagen: permite añadir imágenes, subiéndolas desde la biblioteca de medios o desde una URL.
  • Lista: crea una lista numérica o con viñetas para estructurar mejor el contenido.
  • Cita: destaca la frase que prefieras del contenido.

Estos son solo algunos de los bloques más comunes, puedes conocerlos más en detalle trabajando directamente sobre un post en Portaledu.

Gutenberg pone a nuestra disposición otros muchos bloques para manejar los diferentes contenidos de nuestros artículos. Además, cada bloque tiene sus propios ajustes, se puede navegar por ellos y revisar todas sus opciones.

Salt: plug-in para traducir automáticamente

Recuerda: Para cualquier entrada o página hecha con el editor estándar.

Con esta funcionalidad se puede realizar una traducción automática con el servicio GVA Salt (salt.gva.es), tanto de castellano a valenciano, como de valenciano a castellano. El plugin habilita un cuadro metabox en la edición de contenido que inicia la traducción de las siguientes partes:

  • Título
  • Cuerpo (Texto, imágenes y bloques en general)
  • Taxonomías
    • Categorías
    • Etiquetas

Funcionamiento

Partiremos de un contenido (entrada o página) creado en un idioma (valenciano o castellano), tiene que haber sido guardado previamente. Cuando editamos ese contenido, podremos ver un metabox (las opciones que aparecen en la columna derecha en la edición de contenidos) con el título : Traducciones Salt.

Si pulsamos en el botón Traducir aparecerá una ventana emergente pidiendo confirmación de la acción para verificar que todo el contenido se ha guardado previamente. En el caso contrario, si no hemos guardado todos los cambios en el idioma original, los cambios no guardados se perderían, además de no ser traducidos.

Si confirmamos, entonces procederá a realizar la acción de traducción del contenido original y nos redirigirá a la edición del contenido traducido para que lo podamos supervisar.

Atención: Si ya existe una traducción previa del contenido, es decir, si nuestra entrada o página tiene ya asociada una entrada o página en el idioma de destino, esta se sobreescribirá.

A tener en cuenta 

  • Las taxonomías (tanto categorías como etiquetas), quedan configuradas con los pares de traducción de las taxonomías originales. Cuando las taxonomías originales no tengan traducción, se creará una traducción nueva de estas.
  • Si hemos asignado una imagen destacada a nuestra entrada original, la entrada traducida tendrá la misma imagen destacada. Podemos cambiarla en la entrada traducida si lo consideramos conveniente.
  • Hay algunos bloques de contenido dinámico, por ejemplo carruseles de entradas o similar, que quizás no cojan la categoría traducida. En estos casos, simplemente hemos de seleccionar manualmente la categoría que corresponda en el idioma de destino. Al tratarse de bloques dinámicos que muestran entradas por categoría, tendría que ser suficiente con esa acción. Aparecerán automáticamente las entradas categorizadas en el idioma traducido.

Consejo: Revisa siempre las traducciones automáticas porque pueden contener errores!

Gutenberg: configuración de bloques

Con la actualización a WordPress 6.3, se ha añadido la posibilidad de gestionar los bloques en el editor Gutenberg, de forma que un usuario puede decidir qué bloques se le muestran al editar un post.

La ocultación funciona por usuario, no por sitio. En caso de que un usuario pertenezca a más de un sitio de Portaledu, las preferencias que haya configurado para el editor Gutenberg le acompañarán, independientemente del sitio en que trabaje en cada momento.

Gutenberg_ocultar_blocs

Los pasos necesarios para acceder al diálogo de ocultación son:

1. Desde el editor Gutenberg, hacer click sobre los «tres puntos» de la esquina superior derecha de la pantalla.

2. Pulsar sobre la última opción de menú: «Preferencias»

3. En el diálogo que aparece, hacer click sobre la opción «Bloques»

4. Una vez ahí, desmarcar aquellos bloques que no se quiere que muestre el editor.

Gutenberg: el editor por defecto de Portaledu

El editor de bloques nativo de WordPress es el editor por defecto para los posts / entradas / páginas de todos los sitios de Portaledu.

Gutenberg benvingut a l'editor de blocs

Para aquellos sitios creados anteriormente y que hayan utilizado el editor visual (Beaver Builder), habrá un periodo de convivencia de ambos editores (Gutenberg y Beaver) para permitir a esos sitios el mantenimiento de dichos posts. A medio plazo se prevé eliminar de Portaledu el editor Beaver Builder, dado que la funcionalidad de Gutenberg tiene una mejor integración con WordPress y es mucho más sencillo de utilizar. Conoce más información sobre el editor de bloques de WordPress: Gutenberg.

Gutenberg exemple 2 blocs

Cómo publicar podcasts

Algunos sitios en Portaledu publican podcasts de la radio escolar.

Estos podcasts se alojan habitualmente en el sharepoint DOCUMENTAR del centro y se publican en Portaledu mediante un bloque de Audio.

Este bloque se configura con la URL del fichero de audio.

Pero esto no es suficiente si queremos que nuestros podcasts sean leídos correctamente por diferentes aplicaciones de lectura de podcasts a través de feeds de RSS, como por ejemplo AntennaPod, u otras.

Para conseguir el funcionamiento correcto con esas aplicaciones, tendremos que añadir a nuestro post un campo personalizado de tipo enclosure, donde añadiremos los metadatos de nuestro fichero de podcast.

Quizás te interese consultar la información sobre campos personalizados:

¿Cómo se utilizan los campos personalizados? – Portaledu (gva.es)

Lo haremos así:

1. En edición del post, en la parte de abajo, sección de campos personalizados, buscamos en el desplegable si existe alguno con el nombre enclosure. Si existe, lo seleccionamos. Si no, haremos clic sobre Introduce uno nuevo y escribiremos: enclosure

2. Una vez hayamos seleccionado el nombre enclosure o bien lo hayamos añadido, tendremos que completar el valor, de la siguiente manera, en tres líneas diferentes:

  • Línea 1: URL del post (la misma URL que hemos puesto en el bloque de audio)
  • Línea 2: 0 (cero)
  • Línea 3: audio/ogg (tipo de fichero para que lo puedan interpretar las aplicaciones de lectura de podcast a través de RSS)

3. Y clicaremos el botón de «Añadir un campo personalizado»

4. Siempre que añadamos un campo personalizado, no debemos olvidar clicar sobre Actualizar en el campo personalizado mismo. También tendremos que actualizar nuestro post.

5. Finalmente, es conveniente invalidar la memoria caché de nuestro sitio, si queremos que los lectores de feeds RSS cojan los cambios rápidamente. Si no invalidamos manualmente, los lectores de feeds podrán ver los cambios pasada media hora aproximadamente. En el enlace siguiente encontraréis información sobre cómo invalidar la caché: Control Caché (NGINX): plug-in para gestionar la memoria caché en Portaledu – Portaledu (gva.es)

Inserción de iframes

Atención: Los iframes se utilizan para mostrar páginas web externas a Portaledu dentro de páginas o posts de nuestro portal. Antes de utilizar un iframe hemos de asegurarnos de que la fuente es fiable y de que no generará problemas en nuestra web. Por ejemplo, numerosos contadores de visitas externos acaban mostrando ventanas emergentes no deseadas y pueden propagar malware en nuestros sistemas y en los dispositivos de los usuarios que nos visitan.

Un iframe es un marco que permite insertar un documento HTML dentro de otro y en Portaledu podemos insertarlo de dos formas diferentes.

Bloque del editor Gutenberg ‘Iframe’

La forma más sencilla es utilizando el bloque de iframe, introduciendo el URL que queremos insertar, la cual tiene que empezar por https://

1-Desde el editor estándar, buscamos el bloque:

2-Introducimos la URL que queremos insertar como iframe (tiene que empezar por https://):

3-Cuando hayamos completado la URL, aparecerá la página referida:

4-Ahora podemos configurar el resto de opciones, en la columna de configuración, a la derecha:

Podemos configurar:

  • Anchura: responsiva en % o absoluta en píxeles.
  • Altura: la configuraremos siempre en píxeles.
  • Barra de desplazamiento: Dependiendo del contenido, cuando esté activa, se mostrará la barra de scroll a la derecha para navegar el iframe de arriba abajo.
  • Permite pantalla completa: Dependiendo del contenido, permitirá que el iframe ocupe toda la pantalla.
  • Carga diferida: Carga el contenido del iframe después de pintar el resto de contenido de la página donde se encuentre. Así aceleramos la carga de la página de Portaledu.

Shortcode

Una forma más compleja, que puede permitir un mayor control de los parámetros a un usuario avanzado, es la inserción de iframes mediante código de sustitución. Para ello, escribiremos directamente el shortcode, con la sintaxis que se ve en el siguiente ejemplo.

Alternativamente, podemos añadir un bloque de «shortcode» o un bloque «HTML Personalizado» del editor Gutenberg y escribir en él el código de iframe.

Precauciones

Por motivos de seguridad, todo contenido HTML que contenga tags como script, iframe, !DOCTYPE html, head, body, form, etc. está bloqueado por defecto por WordPress puesto que permitiría la inyección de código malicioso.

En caso de que queráis mostrar contenidos de otras webs, otra alternativa es que utilicéis en el Menú de páginas de vuestra web un elemento de tipo Enlace Personalizado.

→ Consulta la siguiente entrada para más información sobre Inserción de Iframes: tags HTML no permitidos por WordPress.

Cómo insertar un enlace de Sharepoint con el editor Gutenberg

Para que sean visibles en Portaledu, hoy por hoy, los enlaces a ficheros compartidos del sharepoint, tienen que incorporar el parámetro &download=1. Se ha implementado la funcionalidad de forma que cuando peguemos o escribamos el enlace a un URL de sharepoint, si pulsamos la tecla de espacio, automáticamente se añade este parámetro.

A continuación detallamos los pasos a seguir para compartir en Portaledu documentos alojados en nuestro Sharepoint de Microsoft (imágenes, vídeos, audios…)

La publicación de ficheros en abierto solo funciona con el sharepoint DOCUMENTAR. Debéis tener en cuenta que esta funcionalidad de publicación de ficheros desde el Sharepoint de Microsoft está todavía en fase de pruebas. Es posible que no podáis visualizar determinadas imágenes de resolución grande o vídeos.

1. Compartir el fichero desde el sharepoint

Desde el menú contextual del fichero, hacemos clic sobre la opción de Compartir

 

2. Obtener el enlace para compartir

Tenemos que asegurarnos que esté habilitada la opción de que cualquier usuario con el enlace pueda visualizar el contenido. Después copiaremos el enlace desde la opción «Copia el enlace»

Sharepoint obtindre enllaç públic compartir

3. Insertar un bloque de imagen, vídeo, audio… y pegar o escribir el enlace

Imatge inserir URL

4. Pulsar la tecla espacio para autocompletar la URL del sharepoint

Al pulsar la tecla espacio, se autocompletará la URL con el parámetro &download=1, el cual resulta necesario para visualizar el fichero insertado en Portaledu.

Imatge inserir URL Sharepoint 2

¿Cómo puedo insertar un vídeo grande en Portaledu?

El límite de subida de ficheros en Portaledu está establecido por ahora en 30MB. Para la inserción de vídeos de tamaño superior, tendríais que hacerlo mediante un iframe a otra plataforma.

Inserción de iframes – Portaledu (gva.es)

Ejemplo mediante el shortcode del plug-in de iframe:

iframe shortcode youtube

Las webs de centro pueden utilizar el sharepoint DOCUMENTAR para la difusión de vídeos superiores a 30MB, tal como se explica en: Cómo insertar un enlace de Sharepoint con el editor Gutenberg – Portaledu (gva.es)

Inserción de Iframes: tags HTML no permitidos por WordPress

Por motivos de seguridad, todo contenido HTML que contenga tags como script, iframe, !DOCTYPE html, head, body, form, etc. está bloqueado por defecto por WordPress puesto que permitiría la inyección de código malicioso.

Error HTML tags

Podéis consultar los tags HTML admitidos por WordPress aquí: https://wordpress.com/es/support/codigo/#etiquetas-html

Etiquetas HTML que no podréis incluir en vuestras entradas, páginas y widgets:

  • !DOCTYPE
  • body
  • embed
  • frame
  • head
  • iframe
  • form
  • input
  • object
  • textarea
  • style

En versiones anteriores, el editor visual (Beaver Builder) sí permitía la utilización de algunos de estos tags, como por ejemplo, el iframe. Después de las últimas actualizaciones de seguridad, ya no está permitido.

Sin embargo, sí es posible insertar código HTML, siempre que los tags estén permitidos. El editor mismo nos advertirá en cada caso.

Si, con una versión antigua del editor visual, habíais conseguido guardar un código HTML determinado y ahora no se permite, cuando intentéis editar y guardar este contenido, recibiréis un aviso de que no se permite la inserción para vuestro rol de usuario. Tendréis que revisar y eliminar todos los tags de HTML no permitidos.

Enlaces con parámetros no permitidos

Ahora no se permiten enlaces que contengan varios parámetros (símbolo ampersand – «&» en la URL) en elementos de Contenido Deslizante (Carrusel de Diapositivas) o elementos de tipo Acordeón.

Ejemplo de enlace no permitido:
http://cefire.edu.gva.es/sfp/index.php?seccion=edicion&id=9605555&usuario=usuari2

→ Consulta la siguiente entrada para saber cómo insertar iframes de forma exitosa en Portaledu.

Avís de privacitat

Este lloc web utilitza només cookies tècniques necessàries per al seu funcionament. No s’emmagatzemen dades amb finalitats publicitàries ni es comparteixen amb tercers. S’utilitza analítica interna sense cookies, i només es recull la IP amb finalitats de seguretat.

Veure política de cookies