Amb l’actualització a WordPress 6.9.4 s’incorporen diverses millores en l’editor de blocs que afecten directament la creació i gestió de continguts. A continuació es resumixen les novetats més rellevants.
1.- Ocultació de blocs
WordPress 6.9 incorpora una opció nativa per a ocultar blocs sense necessitat d’eliminar-los.
Fins ara, en PortalEdu s’utilitzava una solució pròpia que permetia ocultar blocs tal com es va explicar ací. Amb esta nova funcionalitat nativa de WordPress, l’editor permet marcar un bloc com a ocult des de les opcions del bloc mateix.
Ocultació nativa WordPress (Disponible)
WordPress 6.9.4 incorpora nativament poder ocultar elements.
Diferències amb el desenrotllament propi de PortalEdu:
No permet programar la visibilitat dels elements
En ocultar un element este desapareix de l’espai d’edició. Revocar la seua situació i tornar a deixar visible el bloc ha de ser realitzat des del resum del contingut que mostra l’estructura en arbre de l’entrada.
Ocultació avançada de Portaledu (Disponible)
El desenrotllament propi que permet ocultar blocs està accessible des de la barra lateral d’edició en seleccionar un element.
A part de controlar la visibilitat del bloc, permet programar aquesta.
L’ocultació es fa efectiva en la visualització de l’entrada, no en l’edició, on continua sent present, més informació ací.
2.- Bloc de temps de lectura o comptatge de paraules
WordPress 6.9 afig un bloc que permet mostrar informació sobre el contingut de l’entrada o pàgina actual.
Este bloc pot utilitzar-se per a mostrar:
El temps estimat de lectura.
El nombre de paraules del contingut.
Resulta útil col·locar-ho al principi en entrades llargues, articles informatius o documentació, ja que permet al visitant conéixer de manera ràpida l’extensió aproximada del contingut abans de llegir-lo.
3.- Bloc Math
Este bloc permet escriure expressions matemàtiques i mostrar-les correctament formatades en la pàgina. És especialment útil per a continguts educatius, científics, tècnics o qualsevol publicació que necessite incloure fórmules. El bloc utilitza la sintaxi Latex per a definir les expressions. Per a aquells usuaris que no estiguen familiaritzats amb el seu ús, es recomana el suport en alguna IA per a la seua generació.
En este article explicarem la vista de llista de blocs de l’editor Gutenberg de WordPress, la seua utilitat, el funcionament de l’arrossegament i reordenació de blocs, i els avantatges específics quan es treballa amb blocs contenidors.
1.-Introducció
La vista de llista de Gutenberg (o List View) és una de les ferramentes més potents i menys aprofitades de l’editor de blocs de WordPress. Encara que a simple vista Gutenberg funciona de forma molt visual —fent clic sobre cada bloc directament en el llenç—, la vista de llista oferix una forma alternativa, més precisa i eficient de treballar amb continguts complexos.
La vista de llista és un panell lateral que mostra tots els blocs del contingut en forma d’estructura jeràrquica, com si fora un arbre.
Permet visualitzar:
Quins blocs conté cada secció
Els blocs niats dins d’uns altres (columnes, contenidors, files…)
L’estructura real del document
És especialment útil quan la teua pàgina:
Té molts blocs
Inclou maquetacions complexes
Usa contenidors niats
Treballa amb blocs que visualment són difícils de seleccionar
Pots obrir-la des de la icona amb forma de llista en la barra superior de l’editor.
En edició del post: Botó Resum del DocumentEn edició del post: Vista de llista
2.-Utilitat de la vista de llista de blocs
1. Selecció precisa de blocs
A vegades seleccionar un bloc concret en el llenç és complicat, especialment si està dins de diversos nivells d’implantació. En la vista de llista només has de fer clic en el seu nom.
2. Comprensió visual de l’estructura
Quan treballes amb contenidors, columnes o seccions complexes, veure la jerarquia t’ajuda a entendre millor:
Què depén de què
Si un bloc està dins o fora del contenidor correcte
Com està organitzat realment el contingut
3. Més rapidesa en editar
Editar noms, moure blocs, duplicar o reorganitzar és molt més ràpid ací que usant només el llenç.
3.-Arrossegar i moure blocs des de la vista de llista
En la vista de llista pots arrossegar un bloc i soltar-lo en un altre lloc. No sols pots reordenar-los dins del mateix nivell, sinó també moure’ls entre diferents nivells d’implantació, alguna cosa que en el llenç sol resultar incòmode.
Com funciona l’arrossegament?
Fes clic en el bloc que vulgues moure.
Mantín polsat i arrossega a la posició on vols col·locar-lo.
Veuràs una línia blava que indica on se soltarà.
El sistema és especialment útil quan:
Una pàgina té desenes de blocs
Els blocs tenen poc contingut visual (espaiadors, contenidors buits…)
Pots seleccionar diversos blocs utilitzant la tecla MAJÚSCULES + CLIC esquerre del ratolí.
4.-Opcions sobre cada bloc
Si fas clic sobre els tres punts verticals, a la dreta de qualsevol bloc, observaràs que emergix un menú contextual on s’oferixen diferents accions com: Copiar, Duplicar, Afegir abans, Afegir després, Eliminar…
5.-Agrupar blocs dins d’un contenidor
Una de les accions més interessants és arrossegar diversos blocs dins d’un contenidor, com el que incorpora Portaledu, de GenerateBlocks.
Què aporta això?
✔ Reorganització instantània
Passa contingut solt a un contenidor sense haver de tallar i pegar.
✔ Control total sobre el disseny
Tot el que està dins del contenidor pot:
Compartir estils comuns
Tindre un fons comú
Convertir-se en una secció reutilitzable
✔ Neteja estructural
La vista de llista et permet verificar que el bloc està realment dins del contenidor correcte —una cosa que visualment, a vegades, no és evident.
Com sabeu, WordPress oferix una sèrie de patrons (o plantilles) genèrics que podem incorporar a les nostres entrades o pàgines. Estos patrons ens oferixen dissenys concrets, elaborats amb blocs de l’editor estàndard. Una vegada afegits al nostre contingut, podrem editar-los i personalitzar-los al nostre gust. Vegem com fer-ho.
1-Accés als patrons
Quan creem una nova entrada o pàgina, o bé en editar qualsevol de les quals ja tenim creades, podem afegir patrons. Per a això, farem clic sobre el “+” que apareix en la part superior esquerra de l’editor:
Després de fer clic, se’ns obrirà un panell a l’esquerra, per a afegir blocs, patrons o fitxers. Seleccionarem la pestanya de patrons:
2-Llistat de patrons
En fer clic sobre Patrons ens apareixerà un llistat de categories de patrons. La majoria venen per defecte amb WordPress. Us animem a donar una ullada per si us interessa algun disseny.
En tot cas, Portaledu ha incorporat la seua pròpia col·lecció de patrons, que trobareu en la categoria amb el seu nom.
3-Patrons de Portaledu
Portaledu oferix una selecció de patrons confeccionats amb blocs estàndard, tant genèrics com propis de Portaledu. En fer clic sobre la categoria Portaledu, es mostraran a la dreta els patrons corresponents. Si passem el ratolí per damunt d’algun d’ells, es mostrarà una descripció d’este.
4-Inserir un patró
Afegir un patró al nostre contingut és tan fàcil com fer clic sobre este. En fer-ho, apareixerà automàticament en el nostre contingut. Un missatge emergent ens notifica l’esdeveniment (Patró de bloc “nom del patró” afegit)
5-Idioma dels patrons de Portaledu
Els patrons no tenen idioma assignat, ja que són simplement plantilles de blocs, pensades per a facilitar diferents dissenys de maquetació, sent el contingut de textos i imatges irrellevant. Així, trobarem en els patrons, textos en diferents idiomes i també imatges que estan pensats per a ser editats i substituïts, adaptant cada usuari el seu contingut.
6-Ampliació de la col·lecció de patrons
Portaledu anirà ampliant la seua col·lecció de patrons en funció de les necessitats detectades. Comprova de tant en tant la categoria de patrons de Portaledu, per si hi haguera alguna novetat.
Les categories de WordPress ens permeten agrupar les entrades en grans grups per a poder gestionar o visualitzar aquelles entrades relacionades amb eixa categoria. Un lloc web pot tindre categoritzats diferents temes. Per exemple, novetats, secretaria, general, preguntes freqüents, o nivells educatius com a primària, secundària, etc…
La categorització del contingut és útil en molts aspectes:
Donar-li a l’usuari una experiència còmoda on li siga ràpid trobar informació sobre un tema.
Quan un usuari entra en un article i li agrada el seu contingut, pot continuar llegint sobre altres assumptes relacionats accedint als altres articles de la categoria.
El contingut estructurat de la nostra web pot ajudar al posicionament, ja que els robots d’indexat poden llegir i categoritzar el contingut de manera àgil.
En Portaledu disposem de diferents blocs capaços de mostrar, de diferents formes, les entrades d’una mateixa categoria. Això ens permet que qualsevol nova entrada categoritzada i publicada puga mostrar-se automàticament en les pàgines configurades amb eixos blocs dinàmics.
Al final d’aquest post, trobaràs tota la informació sobre estos blocs.
2-Afegir una categoria
Des del menú de Categories (Entrades –> Categories), podem crear una categoria per a després associar qualsevol entrada a esta. Crear una categoria és simple; el formulari de creació ens explica què és cada cosa perquè no ens perdem.
Exemple formulari nova categoria
Exemple formulari farcit nova categoria (Novetats)
Com es pot veure, en el formulari, apareixen explicacions de tots els apartats: Nom, Slug, Categoria mare, Descripció i Idioma. Fem èmfasi en el camp slug, que serà l’identificador de la categoria. Es recomana que siga el més clar i senzill possible perquè els visitants entenguen quin contingut estarà adscrit a eixa categoria.
3-Categoria en diversos idiomes. Traduccions.
Els llocs web en Portaledu són habitualment bilingües o multilingües. Necessitarem crear les traduccions per a cada categoria i enllaçar-les entre si. Posem un exemple:
Si hem creat la categoria Novetats, en valencià:
Nom: Novetats
Slug: novetats-va
Categoria mare: cap
Descripció: Categoria per a classificar els novetats del portal
Idioma: Valencià
Crearem el seu equivalent en castellà:
Nom: Novedades
Slug: novetats-es
Categoria mare: ninguna
Descripció: Categoría para clasificar las novedades del portal
Idioma: Castellano
Una vegada creades les dos categories, editarem una d’elles i li assignarem la seua traducció, des del camp Traduccions. Simplement teclejant el nom de la categoria en l’idioma corresponent, WordPress ens oferirà l’opció.
Assignar traducció a una categoria
Una altra opció, que podeu explorar, és generar la traducció des del llistat de categories. En este cas, crearíem la categoria en el primer idioma i després, des del llistat de categories, utilitzarem l’opció de “+” o “crear traducció” com mostrem en la imatge següent:
Una vegada creades i aparellades les traduccions, podem comprovar en el llistat que ja no apareix el “+” de crear traducció, sinó una icona d’un llapis, per a editar les traduccions:
4-Administrar categories
Des del menú de categories, podem editar, esborrar i actualitzar les categories. El llistat és idèntic a com es mostren les entrades o les pàgines de WordPress. Es mostra el seu nom amb les opcions d’Edició, Edició Ràpida, Esborrar o Veure.
5-Categoria per defecte
WordPress afig la categoria anomenada ‘Sense categoria’ per defecte, ja que tots les entrades s’afigen a esta categoria per a tindre un orde a pesar que l’usuari no utilitze les categories o s’afigen a esta categoria especial per a saber si existix una entrada sense categoritzar.
Esta categoria es pot modificar, però no esborrar. Si no volem mostrar esta categoria als nostres visitants, simplement hem d’assegurar-nos que cap entrada pertany a la categoria “Sense categoria”.
És una pràctica habitual, canviar de nom eixa categoria (i el slug) a “General”:
Per a saber quantes entrades pertanyen a una categoria, basta mirar, en el llistat de categories, el número que es mostra a la dreta. Si fem clic sobre este número, es mostraran les entrades adscrites a eixa categoria.
Llistat de categories amb nombre d’entrades associades a cada una
6-Com categoritzar una entrada?
Es pot fer de dos formes: des de l’edició ràpida de cada post o bé editant l’article, des de la barra lateral d’utilitats. Recomanem la segona opció, ja que en l’edició ràpida no apareixen totes les possibilitats d’edició de les entrades.
Quan estem editant l’entrada o durant la creació d’esta, podem observar que hi ha un xicotet requadre on posa ‘Categories’. En ell, podrem observar totes les categories que tenim ja agregades, les més utilitzades o fins i tot crear categories noves si es necessita alguna en un moment específic. Òbviament, no podrem afegir tota la informació des d’este panell, però podem crear ràpidament una categoria perquè el nostre article no quede sense categoritzar.
En la imatge de dalt, podem veure la categoria seleccionada per a l’entrada que estem editant.
Hem incorporat a Portaledu el plugin Blocks Animation, que ens permet dotar d’efectes animats a pràcticament qualsevol bloc de Gutenberg. En este post us ensenyarem com utilitzar esta funcionalitat.
1-Animació de textos. Efecte d’escriptura o tecleig.
En els elements de text, com a paràgraf, titular, encapçalat, etc., veurem una nova opció en el menú contextual d’opcions del bloc. En primer lloc, seleccionem la part del text que volem animar; pot ser tota la frase o paràgraf o bé només una o diverses paraules.
En segon lloc, despleguem el menú de la barra de ferramentes del bloc, la fletxeta, on seleccionarem l’opció d’Animació d’escriptura. En fer-ho, podrem seleccionar un temps de retard d’inici i una velocitat per a l’animació.
Guardem l’entrada i la previsualitzem per a veure com ha quedat. Veurem un efecte de tecleig, anirà apareixent el text al qual hem aplicat l’animació.
En el mateix desplegable podem configurar una Animació de comptador, disponible només per a números:
67
2.-Animació d’imatges o altres blocs
En la majoria de blocs de gutenberg, com per exemple, en qualsevol bloc d’imatge, en la columna d’ajustos de la dreta, apareix una secció d’Animacions :
En el menú desplegable d’opcions d’animació, en trobarem una gran varietat. Una vegada hàgem seleccionat alguna, ens apareixeran nous ajustos, a saber, el retard d’inici i la velocitat de l’animació.
Reproduir en passar el cursor: S’oferix un ajust perquè l’animació s’execute (una vegada) en passar el ratolí sobre l’element. Hem de tindre en compte que si activem esta opció, l’animació s’executarà només quan li passem el punter del ratolí per damunt.
A més, el botó de Reproduir l’animació ens permet comprovar l’animació configurada per a eixe bloc. Podem comprovar l’efecte en esta imatge:
Toca o passa el cursor per a animar (només una vegada)
3.-Animació d’un bloc contenidor (animacions encastades)
Com sabeu, el bloc contenidor s’utilitza per a agrupar blocs i ajustar de manera conjunta uns certs aspectes de la seua aparença (color de fons o imatge de fons, màrgens, espaiat, contorn…). En este cas, podem introduir en un bloc contenidor diferents blocs com a botons, text, imatges i configurar animacions tant per al contenidor, com per als subblocs. Vegem-ho amb un exemple:
4.-Configuració del sistema operatiu per a habilitar/deshabilitar animacions
Per motius d’accessibilitat, les animacions web es poden deshabilitar per tal de facilitar la lectura de les pàgines web. Esta configuració es troba habitualment en el sistema operatiu. Els navegadors respecten habitualment les configuracions d’accessibilitat del sistema operatiu, com ara la de “Reduir moviment“.
En el cas de Windows, trobarem esta opció en Configuració –> Accessibilitat –> Efectes visuals –> Efectes d’animació
Un bloc contenidor pare, que engloba tot el conjunt i que conté: Una imatge de fons, així com una capa fosca sobre la imatge, per tal d’assegurar-ne la llegibilitat dels blocs que estan dins del contenidor (text, botó), una vora arredonida i amb color.
Un bloc Titular que conté el text que volem mostrar.
Un bloc Botó que conté un enllaç a la informació relacionada.
1.-Inserim un bloc contenidor
2.-Configurem la imatge de fons
Des de la secció Fons, de la zona de configuració de la dreta, podem seleccionar qualsevol imatge de la mediateca, o inserir una imatge amb URL.
Una vegada configurada, veurem que el contenidor mostra la imatge com a fons, però únicament es veu una franja horitzontal. Ens falta encara definir l’alçada del contenidor, si volem veure més part de la imatge o la imatge sencera.
Des de la secció Redimensionar, configurem, per exemple, una alçada mínima de 500 píxels.
3.-Inserim un bloc Titular
Dins del contenidor, afegim un bloc Titular.
I configurem el color del text, tipografia, mida, negreta, alineació…
Podem també aplicar marges al bloc Titular o bé farciment al bloc contenidor, per tal de moure el text cap avall, o bé podem configurar, per a tot el bloc contenidor, una posició/ubicació per als subblocs (vegeu apartat 6).
4.-Enfosquim la imatge de fons. Opacitat.
Per tal que el text sobre la imatge siga més llegible, serà necessari aplicar una capa fosca. Ho farem mitjançant les opcions de Colors de fons i Opacitat de la imatge. Estes opcions corresponen al bloc contenidor.
5.-Inserim un botó
Inserim un bloc Botó i configurem inicialment algunes opcions de l’aspecte: Disseny de pantalla: Flex, alineació centrada, negreta per al text.
Configurem també els colors del botó i fiquem una amplada, per exemple 300 píxels.:
Configurem un enllaç, on ens dirigirà quan premem el botó:
6.-Posició dels continguts dins del contenidor
Des de la barra de ferramentes contextuals del bloc contenidor, podem configurar una posició general del contingut dins del bloc.
Si escollim la posició central, tant el titular com el botó es distribuiran dins del contenidor, alineats cap al centre.
7.-Previsualització i ajust de la profunditat dels elements (z-index)
Tot i que, en edició, el text i el botó es mostren correctament sobre la imatge de fons, si previsualitzem el contingut en el front, resulta que ambdós elements han heretat la transparència o falta d’opacitat del contenidor, de forma que es visualitzen una miqueta esvaïts, així:
Per a solucionar-ho, cal només definir, per a estos elements, un nombre superior en la configuració de profunditat (z-index). Hem d’imaginar que els continguts es mostren en diferents capes i nosaltres volem dur els elements a una capa superior, perquè es mostren per damunt de la resta.
Anem a la configuració del bloc titular i també a la del bloc botó i configurem índex-z, per exemple a 1
Si previsualitzem ara tot el contingut, ja es veurà correctament:
Quan estem treballant en continguts complexos, amb molts blocs, podem fer-ho més còmodament ampliant la zona d’edició. En este exemple mostrem un contingut complex, amb moltes columnes, en el qual no resulta còmode treballar en una àrea estreta:
Opcions per a ampliar la zona de treball
1-Reduir el menú de l’esquerra
En el menú de seccions de l’esquerra, en la part de baix, podem clicar per a reduir-lo. Es mostraran únicament les icones i quedarà el menú més estret.
2-Mode pantalla completa
Des de la part superior, fent clic sobre els tres punts, es mostren les opcions de vista d’edició disponible. Seleccionarem Mode de pantalla completa.
Podem comprovar que, en ampliar la zona d’edició d’esta manera, els elements responsius es mostren de forma més similar a com es veuen en el front, això és, com els veuen els visitants.
En qualsevol moment, podem tornar a la configuració original desfent estos passos.
Els blocs botó i titular de generateblocks permeten la utilització d’icones SVG. En este post aprendrem a utilitzar-les.
Imatge exemple d’ús d’icones en botons
En primer lloc, afegirem des de l’editor un dels dos blocs esmentats, que són els que permeten inserció de textos i icones svg
Utilitzarem, per exemple, un bloc Titular:
Podem escriure el text que desitgem.
2-Configurem la icona SVG
Després, en la configuració del bloc, podem identificar una secció on es definirà la icona SVG. S’aprecien tres subseccions:
Icona SVG HTML: Ací pegarem el codi SVG quan l’hàgem obtingut externament.
General: Disposem d’alguns SVG genèrics
Social: Disposem d’alguns SVG relacionats amb xarxes socials
3-Ús de repositoris externs de SVG
Si no trobem cap icona de les disponibles que ens encaixe, podem obtindre més icones de diferents temàtiques en algun repositori extern com SVG Repo – Free SVG Vectors and Icons
En el repositori indicat, podem buscar entre un gran nombre d’icones.
Quan seleccionem una, és important fixar-se en el tipus de llicència, que ens indicarà si hi ha algun tipus de restricció en el seu ús, per exemple, triarem esta icona amb llicència de domini públic.
A continuació, editem el vector i utilitzem l’opció de Copiar SVG
Tal com es veu en la captura, podeu editar certs paràmetres si us interessa, abans de copiar.
Ara peguem en la nostra secció d’Icona, en la configuració del bloc titular. Una vegada pegat el codi, es previsualiza la icona justa davall.
A més, també es visualitza la icona en el nostre bloc titular:
4-Últims ajustos: color de farciment de la icona i tamany
Depenent del codi de la icona que hàgem obtingut, pot ser necessari configurar el color. En este cas, observem que en el bloc es visualitza completament negre, incloent-hi el farciment. Això no és el que volíem. Perquè es visualitze tal com volem, amb el farciment blanc, simplement ajustarem, també en els ajustos del bloc, el color de la icona:
Immediatament, comprovarem que la icona es visualitza amb el farciment blanc, tal com volíem:
Este és un bloc titular, amb text i amb icona SVG
També podeu canviar el tamany de la icona, independentment del tamany del text, des de la configuració del bloc:
5-Altra opció: descarregar el svg com a fitxer
Des del repositori de svg, podem també exportar la icona a un fitxer svg. Este fitxer podrem després pujar-lo a la mediateca i utilitzar-lo amb un bloc d’imatge. Esta opció és la recomanada quan el codi svg en HTML no funciona bé en WordPress. De vegades, WordPress pot filtrar per seguretat alguna de les etiquetes del codi, produint que no es visualitze bé la icona.
Advertiment: Este procediment funciona bé, en general. Tanmateix, podria ser que copiar i pegar no funcione en casos determinats com per exemple quan el tipus de bloc copiat no existisca en el wordpress de destí o bé algun bloc tinga algun tipus de restricció en origen o destí.
Amb l’editor de blocs de WordPress és senzill copiar un o diversos blocs des d’una pàgina o post a una altra pàgina o post diferent.
Per a això, només has de seguir estos passos:
1-En una pestanya del navegador, obri en edició el post d’on vols copiar.
2-Obri en una altra pestanya del navegador, també en edició, el post que ha de rebre els blocs copiats
3-En el post original, selecciona el bloc o blocs a copiar. Recomanem fer-ho des de la vista resum del document, ja que es controla millor la selecció. Utilitza el botó dret del ratolí i selecciona Copiar, o bé utilitza CTRL+C. Pots utilitzar la tecla MAJÚSCULES + CLIC esquerre del ratolí per a seleccionar diversos blocs.
4-En el post de destí, fes clic en el lloc on vols vegar el contingut, utilitza el botó dret del ratolí per a pegar, o bé utilitza CTRL+V
5-Com a resultat, es pegaran en el nou post els blocs copiats:
Observació: Anteriorment s’ha estat utilitzant el bloc PDF Embedder però es recomana la utilització del bloc Fitxer, estàndard de WordPress, que ha evolucionat i té ara una millor funcionalitat.
La millor forma per a compartir, visualitzar i oferir la descàrrega d’un fitxer PDF en Portaledu és la utilització del bloc Fitxer. T’expliquem com utilitzar-lo en este post.
El bloc “Fitxer” de WordPress permet incrustar un enllaç de descàrrega per a diferents tipus d’arxiu, directament en el teu contingut. A més, en el cas de fitxers pdf, el bloc carrega un visor que mostra el fitxer amb un iframe.
En la següent imatge es mostra l’ús d’este bloc per a diferents tipus de fitxer:
ZIP i JPG: Tant quatre_escales_matemàtiques.zip com paisaje04.jpg (1) són mostrats pel seu nom seguits d’un botó de descàrrega.
PDF: Mentres que per al cas del fitxer loren-ipsun.pdf el navegador mostra el seu contingut en el visor, a més de l’opció de descàrrega. (2)
Per a utilitzar-lo, buscarem “Fitxer” en el llistat de blocs.
Una vegada afegit el bloc a la pàgina, només cal triar l’arxiu pdf que volem mostrar, bé pujant-ho directament, bé seleccionant-lo des de la mediateca.
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.
