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

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://

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: Ús de cookies pròpies per a anàlisis de visites

Este lloc web utilitza cookies pròpies amb l'únic propòsit d'analitzar el trànsit i millorar l'experiència de l'usuari. Les cookies són xicotets arxius de text que s'emmagatzemen en el teu dispositiu quan visites el nostre lloc. No compartim esta informació amb tercers ni la utilitzem per a fins publicitaris.

Veure política de cookies