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

Bloque iframe

Imagen Categoría Mejoras

Con el bloque de iframe podremos insertar iframes de forma sencilla en las páginas y posts de PortalEdu.

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.

Inserción de iframes con código de sustitución (shortcode)

Es posible insertar iframes con el shortcode correspondiente, tanto desde el editor de WordPress como desde el editor visual. Por ejemplo:

iframe shortcode mestreacasa

Ejemplo no permitido:

iframe tag no permés

Ejemplo permitido:

iframe shortcode youtube

Para insertar el iframe desde el editor de bloques, podemos escribir directamente el shortcode, con la sintaxis que se ve en los ejemplos anteriores. Alternativamente, podemos añadir un bloque de «shortcode» o un bloque «HTML Personalizado» y escribir en él el código de iframe.

Gutenberg widget shortcode

Hay que tener en cuenta que no todos los sitios permiten ser embebidos y que en portaledu solo funcionarán URLs HTTPS.

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.

Precauciones al insertar iframes:

Cuando obtenemos un código de iframe de contenidos externos, debemos revisar y editar, si fuera necesario, algunos parámetros del código, si no queremos que el contenido incrustado ocupe toda la página o la deje inutilizada.

Así, por ejemplo, este es un código de inserción obtenido de genially (que no podemos insertar directamente):

Para poder insertarlo en nuestro post, deberíamos eliminar, o ajustar, algunos parámetros como estos:
width=»1600px» height=»901px»
position: absolute; top: 0; left: 0;

Además, es necesario utilizar el shortcode de iframe. Quedaría así:

O si queremos especificar la altura en píxels (p.e. 500px):

Configuración de 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:

https://portal.edu.gva.es/portal/es/us-de-camps-personalitzats-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 podcats 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é:

https://wiki.edu.gva.es/gvait3du/tiki-index.php?page=Gesti%C3%B3n-Cach%C3%A9-PortalEdu

Inserción de iframes

iframe exemple inserció

En PortalEdu podemos insertar iframes de dos formas diferentes:

1.-La forma más sencilla es utilizando el bloque de iframe. Encontraréis más información aquí.

2.-Una forma más compleja, que puede permitir un mayor control de los parámetros a un usuario avanzado, es la inserción mediante código de sistitución. Encontraréis más información aquí.

Hay que tener en cuenta que no todos los sitios permiten ser embebidos y que en portaledu solo funcionarán URLs HTTPS.

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.

Inserción de URL de Microsoft Sharepoint (Editor estándar)

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…)

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

Inserción de vídeos grandes

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.

El iframe se puede insertar mediante el shortcode del plugin de iframe, por ejemplo:

iframe shortcode youtube

Inserción de iframe, script i otros tags HTML

Imagen Categoría General

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 d’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

Inserción de iframe

Sí es posible insertar iframes con el shortcode correspondiente, tanto desde el editor de WordPress como desde el editor visual. Por ejemplo:
iframe shortcode mestreacasa

Ejemplo no permitido:
iframe tag no permés

Ejemplo permitido:
iframe shortcode youtube

Para insertar el iframe desde el editor de bloques, hemos de añadir un bloque de shortcode y escribir en él el código de iframe, como en los ejemplos anteriores.

Gutenberg widget shortcode

Hay que tener en cuenta que no todos los sitios permiten ser embebidos y que en portaledu solo funcionarán URLs HTTPS.

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.

Información relacionada:
https://portal.edu.gva.es/portal/es/formes-dinserir-un-video-de-youtube-en-una-entrada-de-portal-edu-2/