Gutenberg: configuració de blocs

Amb l’actualització a WordPress 6.3, s’ha afegit la possibilitat de gestionar els blocs en l’editor Gutenberg, de manera que un usuari pot decidir quins blocs se li mostren en editar un post.

L’ocultació funciona per usuari, no per lloc. En cas que un usuari pertanga a més d’un lloc de Portaledu, les preferències que haja configurat per a l’editor Gutenberg li acompanyaran, independentment del lloc en què treballe a cada moment.

Gutenberg_ocultar_blocs

Els passos necessaris per a accedir al diàleg d’ocultació són:

1. Des de l’editor Gutenberg, fer clic sobre els «tres punts» de la cantonada superior dreta de la pantalla.

2. Polsar sobre l’última opció de menú: «Preferències»

3. En el diàleg que apareix, fer clic sobre l’opció «Blocs»

4. Una vegada ací, desmarcar aquells blocs que no es vol que mostre l’editor.

Gutenberg: l’editor per defecte de Portaledu

L’editor de blocs natiu de WordPress és l’editor per defecte per als posts / entrades / pàgines de tots els llocs de Portaledu.

Gutenberg benvingut a l'editor de blocs

Per aquells llocs creats anteriorment i que hagen utilitzat l’editor visual (Beaver Builder), hi haurà un període de convivència de tots dos editors (Gutenberg i Beaver) per a permetre a eixos llocs el manteniment d’estos posts. A mitjà termini es preveu eliminar de Portaledu l’editor Beaver Builder, atés que la funcionalitat de Gutenberg té una millor integració amb WordPress i és molt més senzill d’utilitzar. Coneix més informació sobre l’editor de blocs de WordPress: Gutenberg.

Gutenberg exemple 2 blocs

Bloc iframe

Imatge Categoria Millores

Amb el bloc d’iframe podrem inserir iframes de forma senzilla en les pàgines i posts de PortalEdu.

1-Des de l’editor estàndar, busquem el bloc:

2-Introduïm l’URL que volem inserir com a iframe (ha de començar per https://):

3-Quan hàgem completat l’URL, apareixerà la pàgina referida:

4-Ara podem configurar la resta d’opcions, en la columna de configuració, a la dreta:

Podem configurar:

  • Amplada: responsiva en % o absoluta en píxels.
  • Alçada: la configurarem sempre en píxels.
  • Barra de desplaçament: Depenent del contingut, quan estiga activa, es mostrarà la barra de scroll a la dreta per tal de navegar l’iframe de dalt a baix.
  • Permet pantalla completa: Depenent del contingut, permetrà que l’iframe ocupe tota la pantalla.
  • Càrrega diferida: Carrega el contingut de l’iframe després de pintar la resta de contingut de la pàgina on es trobe. Així accelerem la càrrega de la pàgina de PortalEdu.

Inserció d’iframes amb codi de substitució (shortcode)

És possible inserir iframes amb el shortcode corresponent, tant des de l’editor de WordPress com des de l’editor visual. Per exemple:

iframe shortcode mestreacasa

Exemple no permés:

iframe tag no permés

Exemple permés:

iframe shortcode youtube

Per tal d’inserir l’iframe des de l’editor de blocs, podem escriure directament el shortcode, amb la sintaxi que es veu en els exemples anteriors. Alternativament, podem afegir un bloc de “Codi de substitució” o bé un bloc “HTML personalitzat” i escriure-hi dins el codi de l’iframe,

Gutenberg giny codi substitució

Cal tindre en compte que no tots els llocs permeten ser embeguts i que en PortalEdu només funcionaran URLs HTTPS.

En cas que vulgueu mostrar continguts d’altres webs, una altra alternativa és que utilitzeu en el Menú de pàgines de la vostra web un element de tipus Enllaç Personalitzat.

Precaucions quan inserim iframes:

Quan obtenim un codi d’iframe de continguts externs, hem de revisar i editar si cal, alguns paràmetres del codi, si no volem que el contingut incrustat ocupe tota la pàgina o la deixe inutilitzable.

Així, per exemple, aquest es un codi d’inserció obtingut de genially (que no podem inserir directament):

Per tal d’inserir-lo en el nostre post, hauríem de eliminar, o ajustar, alguns parámetres, com aquests:
width=”1600px” height=”901px”
position: absolute; top: 0; left: 0;

A més a més, hem d’utilitzar el shortcode d’iframe. Quedaria així:

O si volem especificar l’alçària en pixels (p.e 500px):

Configuració de podcasts

Alguns llocs en Portaledu publiquen podcasts de la ràdio escolar.

Aquests podcasts s’allotgen habitualment en el sharepoint DOCUMENTAR del centre i es publiquen en Portaledu mitjançant un bloc d’Àudio.

Aquest bloc es configura amb l’URL del fitxer d’àudio.

Però aixòno és suficient si volem que els nostres podcasts siguen llegits correctament per diferents aplicacions de lectura de podcasts a través de feeds de RSS, com per exemple AntennaPod, o altres.

Per tal d’aconseguir el funcionament correcte amb eixes aplicacions, haurem d’afegir al nostre post un camp personalitzat de tipus enclosure, on afegirem les metadades del nostre fitxer de podcast.

Potser t’interesse consultar la informació sobre camps personalitzats:

https://portal.edu.gva.es/portal/va/us-de-camps-personalitzats/

Ho farem així:

1-Mentre editem el post, en la, part de baix, secció de camps personalitzats, busquem en el desplegable si existeix algun amb el nom enclosure. Si existeix, el seleccionem. Si no, farem clic sobre Introdueix un nou i escriurem: enclosure

2-Una vegada hàgem seleccionat el nom enclosure o bé l’hàgem afegit, haurem de completar el valor, de la següent manera, en tres línies diferents:

Línia 1: URL del post (la mateixa URL que hem posat en el bloc d’àudio)

Línia 2: 0 (zero)

Línia 3: audio/ogg (tipus de fitxer perquè ho puguen interpretar les aplicacions de lectura de podcats a través d’RSS)

3-I clicarem el botó “Afegeix un camp personalitzat”

4-Sempre que afegim un camp personalitzat, no hem d’oblidar clicar sobre Actualitza en el camp personalitzat mateix. També hem d’actualitzar el nostre post.

5-Finalment, és convenient invalidar la memòria cau del nostre lloc, si volem que els lectors de feeds RSS agarren els canvis ràpidament. Si no invalidem manualment, els lectors de feeds podran veure els canvis passada mitja hora aproximadament. En l’enllaç següent trobareu informació sobre com invalidar la cau:

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

Inserció d’iframes

iframe exemple inserció

En PortalEdu podem inserir iframes de dues formes diferents:

1.-La forma més senzilla és utilitzant el bloc d’iframe. Tobareu més informació ací.

2.-Una forma més complexa, que permet un major control sobre els paràmetres a un usuari avançat, és la inserció mitjançant codi de substitució. Tobareu més informació ací.

Cal tindre en compte que no tots els llocs permeten ser embeguts i que en PortalEdu només funcionaran URLs HTTPS.

En cas que vulgueu mostrar continguts d’altres webs, una altra alternativa és que utilitzeu en el Menú de pàgines de la vostra web un element de tipus Enllaç Personalitzat.

Inserció d’URL de Microsoft Sharepoint (Editor estàndard)

Per tal que siguen visibles en PortalEdu, ara per ara, els enllaços a fitxers compartits del sharepoint, han d’incorporar el paràmetre &download=1. S’ha implementat la funcionalitat de manera que quan apeguem o escrivim l’enllaç a un URL de sharepoint, si premem la tecla d’espai, automàticament s’afegeix aquest paràmetre.

A continuació detallem els passos a seguir per a compartir en PortalEdu documents allotjats en el nostre Sharepoint de Microsoft (imatges, vídeos, àudios…)

Heu de tindre en compte que aquesta funcionalitat de publicació de fitxers des del Sharepoint de Microsoft està encara en fase de proves. És possible que no pugueu visualitzar determinades imatges de resolució gran o vídeos.

1-Compartir el fitxer des del sharepoint

Des del menú contextual del fitxer, fem clic sobre l’opció de Compartir

2-Obtindre l’enllaç per a compartir

Hem d’assegurar-nos que estiga habilitada l’opció que qualsevol usuari amb l’enllaç puga visualitzar el contingut. Després copiarem l’enllaç des de l’opció “Copia l’enllaç”

Sharepoint obtindre enllaç públic compartir

3-Inserir un bloc d’imatge, vídeo, àudio… i apegar o escriure l’enllaç

Imatge inserir URL

4-Prémer la tecla espai per autocompletar l’URL del sharepoint

En prémer la tecla espai, s’autocompletarà l’URL amb el paràmetre &download=1, el qual resulta necessari per a visualitzar el fitxer inserit en PortalEdu.

Imatge inserir URL Sharepoint 2

Inserció de vídeos grans

El límit de pujada de fitxers en Portaledu està establit ara per ara en 30MB. Per a la inserció de vídeos de grandària superior, hauríeu de fer-ho mitjançant un iframe a una altra plataforma.

L’iframe es pot inserir mitjançant el shortcode del plugin d’iframe, per exemple:

iframe shortcode youtube

Inserció d’iframe, script i altres tags HTML

Imagen Categoría General

Per motius de seguretat, tot contingut HTML que continga etiquetes com script, iframe, !DOCTYPE html, head, body, form, etc. està bloquejat per defecte per WordPress ja que permetria la injecció de codi maliciós.

Error HTML tags

Podeu consultar els tags d’HTML admesos per WordPress ací:
https://wordpress.com/es/support/codigo/#etiquetas-html

Etiquetes HTML que no podreu incloure en les vostres entrades, pàgines ni widgets:

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

En versions anteriors, l’editor visual (Beaver Builder) sí permetia l’utilització d’alguns d’aquests tags, com ara, l’iframe. Després de les darreres actualitzacions de seguretat, ja no està permés.

No obstant això, sí és possible inserir codi HTML, sempre que els tags estiguen permesos. L’editor mateix ens advertirà en cada cas.

Si, amb una versió antiga de l’editor visual, havíeu aconseguit guardar un codi HTML determinat i ara no es permet, quan intenteu editar i guardar aquest contingut, rebreu un avís que no es permet la inserció per al vostre rol d’usuari. Haureu de revisar i eliminar tots els tags d’HTML no permesos.

Enllaços amb paràmetres no permesos
Ara no es permeten enllaços que continguen diversos paràmetres (sìmbol ampersand en l’URL) en elements de Contingut Lliscant (Carrusel de Diapositives) o elements de tipus Acordió.

Exemple d’enllaç no permés:
http://cefire.edu.gva.es/sfp/index.php?seccion=edicion&id=9605555&usuario=usuari2

Inserció d’iframe

Sí és possible inserir iframes amb el shortcode corresponent, tant des de l’editor de WordPress com des de l’editor visual. Per exemple:
iframe shortcode mestreacasa

Exemple no permés:
iframe tag no permés

Exemple permés:
iframe shortcode youtube

Per tal d’inserir l’iframe des de l’editor de blocs, hem d’afegir un bloc de “Codi de substitució” i escriure dins el codi de l’iframe, com en els exemples anteriors.

Gutenberg giny codi substitució

Cal tindre en compte que no tots els llocs permeten ser embeguts i que en PortalEdu només funcionaran URLs HTTPS.

En cas que vulgueu mostrar continguts d’altres webs, una altra alternativa és que utilitzeu en el Menú de pàgines de la vostra web un element de tipus Enllaç Personalitzat.

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