Com utilitzar el nou editor de blocs de WordPress: la vostra Guia de WordPress Gutenberg

A partir de la publicació de WordPress 5.0 el 6 de desembre de 2018, WordPress té un nou editor de contingut predeterminat. Es va dir l’editor de WordPress Gutenberg mentre estava en desenvolupament, "Gutenberg" Ara és només "Editor de WordPress" o "editor de blocs" si voleu ser més específics.


El nou editor de blocs aporta un enfocament completament diferent a la creació de contingut en forma de blocs (d’aquí el nom…). I en aquesta publicació, aprendreu exactament com utilitzar aquests blocs i les altres funcions del nou editor per crear contingut al vostre lloc de WordPress.

Si encara heu actualitzat o no el vostre lloc a WordPress 5.0, continueu llegint per aprendre a utilitzar el nou editor de blocs de Gutenberg per crear contingut i dissenys al vostre lloc.

Guia de WordPress Gutenberg

Què és Gutenberg?

Gutenberg és el nom del projecte del nou editor de blocs de WordPress, que va substituir l’editor de WordPress TinyMCE com a editor predeterminat de WordPress a WordPress 5.0..

Si bé Gutenberg era el nom oficial mentre l’editor estava en desenvolupament, ara és just "l’editor de blocs de WordPress" o "l’editor de WordPress" perquè forma part oficial del programa bàsic. Com a tal, sovint em veus referint a ella com a "editor de blocs" en aquesta publicació, més que no "Gutenberg".

Com a actualització ràpida, aquí teniu l’aspecte de l’antic editor de TinyMCE de WordPress. Aquest editor s’anomena ara editor clàssic:

editor original de wordpress tinymce

I aquí teniu el aspecte del nou WordPress editor de blocs, AKA Gutenberg:

Editor de blocs de WordPress Gutenberg

Però no és més que una actualització estètica. Gutenberg canvia completament l’experiència d’edició passant a una aproximació al contingut basada en un bloc (més sobre exactament els blocs en un segon!).

Si bé el focus actual es centra en la creació de continguts, l’objectiu final és tenir l’editor de blocs de Gutenberg "sobrepassa la publicació a les plantilles de pàgines i, en definitiva, la personalització completa del lloc."

Això vol dir que finalment podreu crear tot el vostre lloc mitjançant blocs, incloses les pàgines de destinació i altre contingut important.

Gutenberg és part de WordPress?

Gutenberg va ser llançat oficialment com a part de WordPress 5.0 el 6 de desembre de 2018. Si heu actualitzat el vostre lloc a WordPress 5.0, haureu de veure per defecte el nou editor de blocs.

Tot i així, a causa de la magnitud del llançament, alguns amfitrions de WordPress gestionats han optat per no actualitzar els llocs dels pobles de seguida. Per aquesta raó, és probable que el vostre lloc encara no funcioni WordPress 5.0. En aquest cas, us correspon si voleu actualitzar-lo o no (encara que no haureu d’esperar massa per raons de rendiment i de seguretat).

Com funciona l’editor de WordPress Gutenberg

Fa un segon, us vaig dir que Gutenberg és un editor basat en blocs. Va ser una mica maleducat deixar-vos penjat perquè, si us agrada la majoria de la gent, potser no sabreu què vol dir això.

Aquí teniu l’edició 101 basada en blocs:

Essencialment, Gutenberg substitueix el camp d’edició únic de l’actual editor de TinyMCE de WordPress per un munt de persones "blocs".

Aquests blocs us permeten crear dissenys més complexos que els permesos a l’antic editor clàssic de WordPress.

Quin és un bloc?

Bé, un bloc pot ser qualsevol cosa. Per exemple, podeu tenir blocs per a:

  • Text regular
  • Imatges
  • Incrustacions de vídeo
  • Botons
  • Ginys (sí, els mateixos widgets que feu servir a la barra lateral)
  • Taules
  • Etc.

I el que és bo és que els desenvolupadors podran crear els seus propis blocs de tercers als quals pugueu accedir mitjançant plugins per obtenir encara més flexibilitat.

Cada bloc és la seva pròpia entitat que podeu manipular de manera individual. Per exemple, aquí teniu una publicació ràpida de Gutenberg que conté tres blocs:

  • 2 blocs de text
  • 1 bloc d’imatges

Mireu amb quina facilitat puc reorganitzar aquests blocs només arrossegant-los i deixant-los passar:

Arrossegar i deixar anar Gutenberg

I perquè cada bloc ho és "separat", també podeu afegir coses com fons personalitzats només per a blocs específics.

En general, us proporciona més flexibilitat i control en profunditat.

Així que Gutenberg és un creador de pàgines, no?

Ehh, no del tot. Almenys no en la seva forma actual.

Gutenberg facilitarà molt l’estil de contingut regular com publicacions de bloc o pàgines estàndard, però no és un substitut de 1: 1 per als creadors de pàgines en la seva forma actual.

Només a nivell de superfície, Gutenberg ja manca de dues coses essencials:

  • Les columnes flexibles, tot i que hi ha un bloc de columnes bàsic i alguns desenvolupadors de tercers han creat blocs interessants.
  • Veritable arrossegar i deixar anar: la versió més recent de Gutenberg us permet reorganitzar els blocs amb arrossegar i deixar anar, però encara no té forma lliure com la majoria de creadors de pàgines..

Dit això, l’editor de blocs de Gutenberg està disposat a eliminar la majoria de constructors de pàgines per a la majoria "estàndard" contingut, i també crea un únic mètode unificat per crear-ne més post complex dissenys a WordPress.

Però a l’hora de construir-ne més pàgines complexes, com una pàgina de destinació, probablement apreciareu la major flexibilitat que ofereixen els creadors de pàgines (almenys durant la publicació inicial de Gutenberg).

Per exemple, en la nostra comparació entre Elementor i Divi Builder i Beaver Builder, podeu veure com els constructors de pàgines principals ofereixen coses com:

  • Edició arrossega i deixa la forma lliure
  • Autèntic suport de diverses columnes on podeu crear qualsevol nombre de columnes per arrossegar elements individuals
  • Tones de plantilles fetes prèviament
  • Opcions d’estil avançades, amb espots per a marges / encoixinat personalitzats i molt més
  • Configuració de disseny responsable

El nou editor de blocs podria arribar-hi algun dia. Però, almenys en el seu formulari de llançament inicial, els creadors de pàgines encara us donaran la flexibilitat per dissenyar pàgines autònomes més complicades.

Heu d’utilitzar el nou editor de blocs? Podeu mantenir l’editor de WordPress anterior?

No, no heu d’utilitzar el nou editor de blocs i , podeu continuar utilitzant l’editor de WordPress anterior. Per desactivar l’editor de blocs de Gutenberg i retornar el vostre lloc al redactor clàssic després d’actualitzar a WordPress 5.0, podeu utilitzar l’oficial Editor clàssic connectar.

Llegiu la nostra guia a com desactivar l’editor de blocs de Gutenberg per obtenir més informació.

Necessiteu un tema especial per utilitzar el nou editor de blocs de Gutenberg?

Com que ara és l’editor de WordPress predeterminat, l’editor de blocs està creat per treballar amb qualsevol tema de WordPress. Tanmateix, l’elecció d’un tema que ofereix específicament la compatibilitat de Gutenberg oferirà uns beneficis molt reals.

Primer, els temes poden oferir un estil integrat per a tots els blocs nous. Millor encara, els temes poden carregar aquests estils en l’editor. D’aquesta manera, podeu veure l’estil real dels vostres blocs a mesura que creeu el contingut per a una millor experiència WYSIWYG (vegeu una versió bàsica d’aquesta en acció aquí)

Els temes de Gutenberg també podran oferir plantilles preconfigurades amb diversos blocs, de manera que només cal que connecteu el contingut als blocs existents i que toqueu Publicar.

A més, hi ha alguns altres petits avantatges, com ara les alineacions d’amplada completa. Per tant, podeu fer servir qualsevol tema que vulgueu, però val la pena comprovar el doble per assegurar-vos que el desenvolupador del vostre tema preveu afegir assistència.

Si només voleu utilitzar un tema per provar, tots aquests temes tenen suport per al nou editor de blocs:

  • Neve – Neve és el nostre nou tema que ha estat dissenyat específicament per treballar amb l’editor de blocs de Gutenberg.
  • Zakra – una bona opció lleugera de ThemeGrill.
  • Hestia Lite – un tema flexible que segueixi els principis de disseny de materials.

Per obtenir més opcions, consulta la nostra col·lecció dels millors temes de WordPress compatibles amb Gutenberg.

Crea el teu primer disseny amb l’editor de blocs de WordPress de Gutenberg

Si suposeu que utilitzeu WordPress 5.0 i el nou editor de blocs, esteu preparats per endinsar-vos en la carn d’aquest article. A continuació, us mostraré com fer servir realment el nou editor de blocs de WordPress Gutenberg per crear un disseny complet de pàgines.

D’aquesta manera, estareu preparats per treure el màxim partit de WordPress 5.0 i del nou editor.

Un ràpid recorregut per la interfície de l’editor de blocs de WordPress

Abans de començar a afegir alguns blocs, anem a passar un detall ràpid dels elements de la interfície de l’editor de blocs principals:

La interfície de l'editor de blocs de Gutenberg

  • (A) – us permet afegir nous blocs.
  • (B) – Desfer / refer els botons
  • (C) – us proporciona accés a la configuració de documents que cobreixen coses com ara categories & etiquetes, imatges destacades, etc. Això és similar a la barra lateral actual de l’editor de WordPress
  • (D) – quan seleccioneu un bloc individual, això us permet accedir a la configuració específica del bloc
  • (E) : Us permet accedir a una vista prèvia en directe de la publicació o publicar-la o actualitzar-la
  • (F) – un cop heu afegit alguns blocs, aquí es treballarà realment amb el contingut de la publicació

Afegir nous blocs

Com he comentat a la presentació, fareu servir separats "blocs" per crear els dissenys amb el nou editor.

Per afegir un bloc nou, només cal fer clic a la tecla +Més icona i seleccioneu el tipus de contingut que voleu afegir:

afegint un bloc nou

A l’exemple anterior, us vaig mostrar com afegir un bloc de paràgraf bàsic. Però Gutenberg inclou en realitat un munt de blocs diferents, dividits en seccions diferents:

tipus de blocs

A la part superior, veieu una llista de les vostres Més utilitzats blocs. Però si es desplaça cap avall, també veureu seccions sobre blocs comuns, formatació, elements de disseny, ginys i incrustacions:

tipus de blocs

  • Elements en línia – només conté un bloc per a una imatge en línia.
  • Blocs comuns – conté blocs bàsics de construcció com imatges, paràgrafs (text regular), encapçalaments, cometes, etc.
  • Formatat – us permet afegir contingut més formatat com ara trames cometes, taules o el clàssic editor de text de WordPress
  • Elements de disseny– us permet dividir text en dues columnes, incloure botons, separadors o el botó "Més" etiqueta
  • Ginys – us permetrà afegir codis directes, publicacions més recents o categories. Fins i tot és possible mostrar widgets de la barra lateral directament a Gutenberg.
  • Incrustacions : Us ajudarà a incorporar contingut de fonts externes com Twitter, YouTube, Facebook, Instagram i molt més.
  • Reutilitzables – un cop obtingueu la funció pendent, podeu desar grups de blocs com a plantilles reutilitzables i fer-les aparèixer aquí. Aquesta zona no apareixerà fins que no deseu la primera plantilla reutilitzable, que us mostrarem com fer més endavant en aquesta publicació.

Construcció d’un disseny bàsic amb Gutenberg

Comencem per simple. Diguem que només voleu crear una disposició bàsica de publicacions en un bloc que inclogui:

  • Text regular
  • Una imatge
  • Un pressupost
  • Un vídeo de YouTube incrustat

Com ho feu amb Gutenberg:

Primer, no escriuríeu tota la publicació a l’editor. O si ets com jo i ho prefereixes escriu a Google Docs, podeu enganxar-ho tot i, després, Gutenberg el convertirà automàticament a blocs.

Afegir els blocs que no són de text

Ara que el contingut està dividit en blocs, podeu fer el cursor per sobre del lloc on vulgueu inserir la vostra primera imatge i feu clic a l’opció més icona. Això crearà una aturada. A continuació, feu clic a més icona de nou per inserir el bloc d’imatges:

bloc d’imatges

Això us permetrà inserir un bloc d’imatges des del qual podeu penjar o seleccionar imatges d’una manera similar a l’editor de WordPress actual:

inserir imatge

Un cop seleccioneu la vostra imatge, haureu de veure-la aquí mateix en la disposició de la pàgina:

imatge en línia

A continuació, passeu el punt on voleu inserir el pressupost i utilitzeu el mateix enfocament per inserir un altre bloc. Podeu cercar "pressupost" o aneu a la web Blocs comuns secció:

inserir el pressupost

Aleshores, veureu el vostre bloc de pressupostos nou. Per crear la vostra cotització, només cal fer clic al bloc i escriure:

introduïu el pressupost

Per inserir un vídeo de YouTube, podeu afegir-ne un YouTube a partir del bloc Incrustacions fitxa Per inserir un vídeo, només cal introduir l’URL i fer clic Incrustar:

bloc de youtube

Opcional: crea diferents columnes

Vols ser encara més creatiu? Gutenberg ara inclou una funció de columnes experimentals que permet crear ràpidament diverses columnes. Tot el que heu de fer és afegir-hi Columnes (beta) a partir del bloc Elements de disseny secció A continuació, podeu inserir altres blocs al seu interior:

Columnes de Gutenberg

Un cop hàgiu acabat, només heu de fer clic a la tecla Publicar botó:

publicar la publicació

I tindreu la publicació de bloc formatada al front-end.

Com personalitzar blocs individuals

Com que l’editor de WordPress Gutenberg inclou un munt de blocs diferents, no us puc mostrar com utilitzar cada bloc.

Però puc donar-vos un marc bàsic que s’aplica a tots els blocs.

Bàsicament, el control contingut al cos real de l’editor:

edició d’un bloc

Per a l’estilització i l’alineació de text bàsics, podeu utilitzar la barra de menús que apareix quan passeu per sobre d’un bloc:

dissenyar un bloc

I, per obtenir un disseny més avançat, acostumem a posar de moda el bloc Bloc pestanya de configuració.

Per accedir a la pestanya, seleccioneu el bloc que vulgueu editar i aneu a la secció Bloc pestanya:

personalització d’un bloc

Com reorganitzar els blocs individuals

Per reorganitzar els blocs, teniu dues opcions. Podeu utilitzar el botó Amunt o A baix fletxa en passar el cursor sobre un bloc per moure el bloc en aquesta direcció:

moure blocs de gutenberg

O bé, podeu arrossegar i deixar anar blocs. Per activar la funcionalitat d’arrossegar i deixar anar, heu de passar el ratolí per sobre sis punts entre les fletxes amunt i avall

Arrossegar i deixar anar Gutenberg

Posant-ho tot junt

Un cop heu agafat el flux de funcionament del nou editor de blocs, és bastant indolor i intuïtiu.

Al principi, podríeu experimentar alguns dolors i lluitar cada cop més per dur a terme les accions bàsiques que heu fet per descomptat.

Però un cop obtingueu les coses més importants, hauríeu de passar pel disseny de dissenys de construcció. I amb els blocs més avançats que ofereix Gutenberg, tindreu més flexibilitat que l’editor de WordPress TinyMCE.

Alguns trucs clars, però més avançats, de Gutenberg

A mesura que coneixeu l’editor de blocs de WordPress Gutenberg, podeu trobar alguns d’aquests trucs per estalviar temps..

Creeu ràpidament un nou bloc amb escrivint

A dalt, us vaig ensenyar com crear blocs mitjançant el botó Inserir. Però per estalviar temps, podeu crear blocs simplement escrivint aquesta sintaxi:

/ BLOC-NOM

Apareixerà un quadre de suggeriments automàtics per ajudar-vos a trobar el bloc pertinent.

Per exemple, aquí es mostra com podeu crear un bloc d’imatges només amb el vostre teclat:

Molt convenient i estalviador de temps!

drecera de bloc

Edita el codi font directament

En qualsevol moment, podeu editar el codi font de tota la publicació fent clic a la secció tres punts a la part superior dreta i seleccionant Editor de codis:

edició del codi a gutenberg

Activa el mode de pantalla completa, la barra d’eines fixa, etc.

El nou editor de blocs inclou alguns modes diferents que permeten canviar l’experiència d’edició. Tu pots:

  • Afegiu una barra d’eines fixa com l’editor TinyMCE
  • Anar a pantalla completa
  • Posa una "focus d’atenció" al bloc actiu

Per utilitzar-los "Vistes", feu clic a tres punts icona a la cantonada superior dreta.

Vistes a Gutenberg

Utilitzeu les dreceres de teclat de Gutenberg per estalviar temps

Més enllà de les dreceres de format estàndard, l’editor de blocs té diverses dreceres dedicades al teclat que us poden ajudar:

  • Inseriu nous blocs per sobre o per sota del bloc seleccionat
  • Elimina un bloc
  • Duplicar un bloc
  • Etc.

Per obrir la llista completa de les dreceres de teclat, utilitzeu la tecla Maj + Alt + H drecera.

Dreceres de teclat de Gutenberg

Creeu plantilles de bloc reutilitzables

Si teniu una col·lecció / arranjament específic de blocs que heu de reutilitzar en diversos punts, podeu desar un grup de blocs com una plantilla reutilitzable. Podreu posar el nom a la vostra plantilla. A continuació, podeu inserir-lo tal com ho faríeu en un bloc regular.

Per crear la vostra plantilla:

  • Seleccioneu els blocs que voleu incloure
  • Feu clic a la tecla tres punts icona
  • Selecciona Afegir als blocs reutilitzables

Plantilles de bloc reutilitzables de Gutenberg

Edita el contingut del bloc reutilitzable

Més enllà de facilitar la inserció ràpida de contingut formatat, els blocs reutilitzables també us permeten actualitzar ràpidament totes les instàncies d’aquest bloc reutilitzables.

És a dir, un cop editeu el contingut del bloc reutilitzable, totes les publicacions que utilitzin aquest bloc reutilitzables també obtindran el contingut.

Per editar un bloc reutilitzable, desplaceu-vos a la secció Reutilitzables a la secció de l’inseridor de blocs i feu clic a Gestiona tots els blocs reutilitzables botó. O bé, podeu visitar Zureite.com/wp-admin/edit.php?post_type=wp_block (assegureu-vos de substituir el seuite.com amb el vostre URL real).

Edita blocs reutilitzables de WordPress

Amplieu l’editor de blocs amb plugins

Si voleu entusiasmar-vos, podeu trobar molts extensions de Gutenberg que incorporen els seus propis blocs.

Blocs de llúdriga és una bona opció per començar. Us ofereix blocs addicionals per a coses com ara preus, testimonis, Google Maps, icones per compartir, "feu clic a tuit" botons i molt més.


Biblioteca de blocs i plantilles de Gutenberg per Otter Biblioteca de blocs i plantilles de Gutenberg per Otter

Autor (a): TemaIsle

Versió actual: 1.5.4

Darrera actualització: 26 de maig de 2020

otter-blocks.zip


98% Valoracions


60.000 + instal·lacions


WP 5.2 + Requereix

Desordenar el control amb Block Manager

El nou editor afegeix molts blocs, sobretot si feu servir alguns d’aquests complements de blocs que hem esmentat anteriorment. Això pot fer que les coses siguin una mica desordenades i et redueixin la velocitat. Si hi ha alguns blocs que mai penseu utilitzar, podeu fer servir el botó Gestor de blocs per inhabilitar-les.

Per utilitzar el gestor de blocs:

  • Feu clic a la tecla tres punts icona a la cantonada superior dreta
  • Selecciona Gestor de blocs
  • Utilitzeu les caselles de selecció per desactivar els blocs segons sigui necessari

Gestor de blocs de WordPress

Utilitzeu Block Navigation per navegar ràpidament pel contingut

Per a contingut llarg o contingut on utilitzeu molts blocs anidats, pot ser difícil trobar el bloc que busqueu ràpidament.

Per ajudar-vos, l’editor de blocs inclou a Bloquejar la navegació , que podeu obrir fent clic a la barra d’eines o utilitzant l’opció Majúscules + Alt + O drecera de teclat.

Si esteu dins d’un bloc enclavat (com ara columnes), Bloquejar la navegació L’eina mostrarà tots els blocs imbricats. Per seleccionar un bloc específic, podeu fer clic sobre ell de la llista.

Bloqueu la funció de navegació

Canvia entre els modes d’edició i de selecció

Amb WordPress 5.4, podreu accedir a dos modes diferents, entre les quals podeu canviar mitjançant la barra d’eines superior:

  • Edita – això és el que treballaràs la major part del temps. Us permet editar el contingut de tots els vostres blocs. Aquest és el mode d’editor predeterminat.
  • Selecciona – això facilita la selecció de blocs específics, especialment quan es treballa amb blocs anidats (per exemple, blocs dins d’una columna). Un cop feu clic en un bloc, tornareu a l’autor Edita mode.

Mode de selecció de l'editor de blocs de WordPress

Experimenteu amb les noves funcions de l’editor de blocs

Des que es va fusionar l’editor de blocs al nucli principal, hi ha dues versions de l’editor de blocs:

  1. La versió nativa del programari principal de WordPress (és probable que utilitzeu)
  2. El complement de Gutenberg

La versió del complement de Gutenberg és bàsicament un terreny de prova per a l’editor principal. La versió del complement conté noves funcions que s’estan desenvolupant. Amb el temps, aquestes funcions es fusionaran al nucli. Però si voleu jugar-hi amb antelació, tot el que heu de fer és instal·lar el complement Gutenberg des de WordPress.org.


Gutenberg Gutenberg

Autor (a): Equip de Gutenberg

Versió actual: 8.2.1

Darrera actualització: 28 de maig de 2020

gutenberg.8.2.1.zip


40% de valoracions


200.000 + instal·lacions


5.3.0 Requisits

Què passa amb tots els continguts antics?

Abans d’acabar les coses, deixa’m cobrir ràpidament el que passarà a tots els continguts antics un cop t’hagis actualitzat a WordPress 5.0 (si encara no ho és).

No et preocupis, no desapareixerà! Però l’experiència és una mica diferent:

Quan actualitzeu el vostre lloc a WordPress 5.0 i tingueu contingut existent integrat amb l’editor TinyMCE original, l’editor de blocs inclourà tot el contingut antic en un sol contingut Bloc clàssic. Aquest bloc clàssic és bàsicament l’editor de TinyMCE … però incrustat al nou editor de blocs.

Bloc clàssic de Gutenberg

Per treballar amb el contingut antic, podeu:

  • Deixeu-lo al bloc Clàssic i editeu-lo com faríeu amb l’antic editor de WordPress
  • Utilitzar el tres punts icona i seleccioneu Converteix en blocs. Això ho trencarà tot en blocs individuals. Aleshores, podeu treballar amb el vostre contingut com si l’hagueu creat originalment amb l’editor de blocs de Gutenberg.

Convertir a blocs

Què hi ha a continuació per l’editor de blocs de Gutenberg?

Tot i que l’editor de blocs ara és oficialment part del nucli (gràcies al llançament de WordPress 5.0), l’equip de WordPress està lluny d’acabar amb el projecte Gutenberg.

Actualment, l’equip principal està treballant perquè l’editor de blocs substitueixi els widgets de WordPress, a més de permetre’t crear menús de navegació amb blocs.

Tot i que aquestes funcions encara no es troben aquí, van pel camí. Per això, pagaràs per començar a aprendre ASAP la interfície de l’editor de blocs!

Per a la majoria dels usuaris casuals, després d’uns dolors creixents, aportarà una experiència de creació de contingut més flexible.

Els no desenvolupadors podran dissenyar de manera intuïtiva dissenys més complexos amb elements addicionals com botons, incrustacions de contingut i molt més. I això, esperem, ajudarà WordPress a continuar creixent.

Ara, ens encantaria sentir-vos amb vosaltres. Estic segur que molts de vosaltres teniu reflexions sobre el nou editor de blocs de Gutenberg, així que ens ho expliqueu als comentaris!

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació, presentació i edició de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map