Dyk dybt ned i den nyeste Gutenberg WordPress Editor

Da WordPress block editor eller Gutenberg blev lanceret i december 2018, vidste vi ikke, hvad vi kunne forvente. Selvfølgelig havde vi haft masser af tid til at lege med dens betaversion, men vi kunne ikke forudsige, hvor problemfrit den faktiske lancering ville gå, eller hvor ivrige brugere og udviklere ville omfavne den nye editor.

Vi har set Gutenberg-redaktøren gennemgå en enorm vækst i de to plus år, siden vi første gang udgav dette indlæg. Det er flyttet fra en minimum levedygtig produktlancering (MVP) til et mere modent projekt, der kommer tættere på målet om at skabe en samlet Full Site Editing-oplevelse for WordPress.

For at redegøre for disse ændringer har vi genbesøgt Gutenberg -redaktøren for at tage dig gennem sit nye ansigt, herunder hvor det snart skal hen.

Hvad er Gutenberg Block Editor?

Gutenberg, alternativt kendt som “WordPress block editor” eller bare “WordPress editor”, er WordPress indholds editor, der blev introduceret i WordPress 5.0, udgivet den 6. december 2018.

Hvis du ikke har hørt dette udtryk, er det standardeditoren, som alle WordPress-websteder bruger, medmindre du specifikt har deaktiveret det. Det ligner sådan noget:

Den store forskel mellem Gutenberg WordPress-editoren og den tidligere WordPress-editor (nu kaldet den “klassiske editor” eller “TinyMCE-editor”) er en ny blokbaseret tilgang til oprettelse af indhold.

Med Gutenberg er hvert element i dit indhold en blok, som muliggør nem manipulation af indhold. Hvert afsnit er en blok, hvert billede er en blok, hver knap er en blok – du forstår det!

Tredjepartsudviklere kan også oprette brugerdefinerede blocks, hvilket hjælper med at afslutte WordPress’s affære med genveje. Lad os sige, at du vil integrere en kontaktformular. I stedet for at skulle tilføje en shortcode (f.eks. ‘[your-form-shortcode]]’) som du gjorde tidligere, kan du nu bare lægge din form-plugins blok i.

Udover det kan du også bruge blocks til at oprette mere komplekse layout, f.eks. opsætning af et flerkolonnedesign eller gruppering af blocks til at oprette et sammenhængende afsnit.

Når vi graver mere ind i at vise dig, hvordan du bruger blokeditoren, får du en bedre idé om, hvordan du kan bruge blocks til at forbedre, hvordan du opretter indhold.

Gutenberg er ikke bare en content editor

En vigtig ting at forstå er, at Gutenberg-projektet sigter mod at være mere end bare en content editor.

I juli 2021 er Gutenberg stadig kun en indholdsredaktør (for det meste). Men det langsigtede mål for Gutenberg er at flytte det mod noget, der hedder Full Site Editing.

Ideen med Full Site Editing er, at du kan designe 100% af dit websted ved hjælp af Gutenberg-editoren. For eksempel vil du i stedet for at være begrænset til mulighederne ved headers, der følger med dit WordPress-tema, bruge Gutenberg til at designe brugerdefinerede overskrifter ved hjælp af blokeditoren.

Denne type funktionalitet er ikke tilgængelig endnu, men den er på vej, og vi har nogle “proof of concept” -projekter, som vi giver dig et kig på i slutningen af ​​dette indlæg.

Fordele og ulemper ved Gutenberg vs populære alternativer

Nu hvor vi har været i stand til at bruge WordPress -block editor i over to år, har vi en god idé om nogle af fordele og ulemper ved Gutenberg vs andre løsninger.

Der er to hovedalternativer, du har til oprettelse af indhold på WordPress:

• WordPress TinyMCE -editor: Dette er den klassiske editor, som WordPress brugte før WordPress 5.0.
• Page builder plugins: Disse er tredjeparts-plugins, der tilføjer visuelt, drag n drop design til WordPress.

Generelt tilbyder den klassiske TinyMCE-editor en mere forældet tekstbehandlingslignende oplevelse, mens sidebyggere giver en langt mere fleksibel visuel, drag n drop designoplevelse.

Hvis vi bestilte alle tre redaktører baseret på deres designfleksibilitet, ville det gå sådan her:

Klassisk TinyMCE -editor (mindst fleksibel) <Gutenberg <Sidebyggere (mest fleksible)

Lad os nu tale om nogle af fordele og ulemper ved Gutenberg -block editor vs alternativer.

Gutenberg vs Classic Editor: Fordele og ulemper

Lad os først sammenligne Gutenberg vs den klassiske TinyMCE -editor.

Fordele:

• Gutenberg tilbyder en mere visuel designbaggrund
• Du behøver ikke at bruge genveje til at integrere indhold – du får et samlet bloksystem

Ulemper:

• Nogle mennesker synes at skrive i Gutenberg er lidt uhåndterligt, fordi hvert afsnit er en separat blok. For lange indlæg kan det være svært at manipulere tekst. Du foretrækker måske at skrive i en anden editor og indsætte teksten i Gutenberg, når du er færdig.
• Selvom Gutenbergs ydeevne er forbedret betydeligt, kan det stadig halte på massive indlæg, hvilket er mindre tilbøjeligt til at ske med den klassiske editor.

Hvis du synes, at den klassiske TinyMCE -editor passer bedre til dine behov, kan du deaktivere Gutenberg editoren helt.

Gutenberg vs Page Builders: Fordele og ulemper

Lad os nu se på, hvordan Gutenberg stabler op mod tredjeparts sidebygger-plugins.

Fordele:

• Gutenberg er en kernefunktion, hvilket betyder, at du ikke skal bekymre dig om kompatibilitetsproblemer.
• Fordi det er en kernefunktion, kan alle udviklere bygge Gutenberg-support ind i deres plugins, hvilket forbedrer kompatibiliteten.
• Gutenberg sender renere, mere let kode. Alt det samme vil et design, der er bygget med Gutenberg, normalt indlæse hurtigere end det samme design, der er lavet med en sidebygger.

Ulemper:

• Gutenberg tilbyder ikke korrekt visuel redigering som en sidebygger. Det er mere tilgængeligt end den klassiske editor, men stadig ikke 100% problemfrit som en sidebygger.
• Sidebyggere giver dig stadig mere fleksible design- og layoutmuligheder.
• De fleste sidebyggere tilbyder meget mere flydende og fleksibel drag n drop bevægelse.

Tanker om sammenligningen

For størstedelen af ​​brugerne rammer Gutenberg det søde sted med hensyn til fleksibilitet.

De fleste mennesker behøver ikke fleksibiliteten i en sidebygger til deres indhold, især til blogindlæg. Men samtidig er det rart hurtigt at oprette et flerkolonne-design eller indsætte en knap, som den klassiske editor ikke gør let.

Så med det i tankerne, lad os komme ind på, hvordan du kan begynde at bruge Gutenberg.

Sådan bruges Gutenberg WordPress Block Editor

Nu hvor du ved lidt om Gutenberg -block editor, lad os grave i, hvordan du kan bruge det til at begynde at skabe indhold.

Vi starter med et indledende kig på grænsefladen og udvikler gradvist mere avancerede måder at bruge editoren og forbedre dine arbejdsgange.

Gutenberg Block Editor grænsefladen

Når du åbner editoren, vil den skjule WordPress dashboard sidebjælke og give dig en fuldskærmsoplevelse:

Der er tre hoveddele til denne editor:

• Indhold: Dit indhold fylder det meste af skærmen. Du kan se en visuel forhåndsvisning af, hvordan det vil se ud på forsiden af ​​dit websted. Det er ikke 100% præcist, men du bør have en ret god idé om det endelige design.
• Øverste værktøjslinje: Værktøjslinjen øverst hjælper dig med at indsætte nye blocks, fortryde/gentage og få adgang til andre vitale indstillinger
• Sidebar: Sidebar indeholder to faner. Fanen Post gør det muligt at konfigurere indstillinger på postniveau, f.eks. dets kategorier, tags, fremhævede billeder Fanen Block viser indstillingerne for den blok, du har valgt-mere om dette senere.

For at skabe en mere fordybende skriveoplevelse kan du skjule sidebjælken ved at klikke på ikonet “tandhjul” i øverste højre hjørne. For at bringe sidebjælken tilbage skal du blot klikke på ikonet “gear” igen:

Sådan ser editorgrænsefladen f.eks. ud, hvis du bruger det nye standardtema Twenty Twenty-One:

Tilføjelse af blocks

Hvis du vil tilføje almindelig afsnitstekst til dit indlæg, kan du bare klikke og skrive. Hver gang du trykker på enter, opretter editoren automatisk en ny paragraph block.

For andre typer indhold skal du indsætte en ny blok. Du bruger blocks til billeder, knapper, videoindlejringer osv.

For at tilføje en ny blok kan du klikke på et af “plus”-ikonerne i grænsefladen. Det er main block inserter ikonet i øverste venstre hjørne, men du vil også se andre ikoner inde i grænsefladen, der åbner en mindre block inserter interface:

For at begynde skal du placere musemarkøren, hvor du vil indsætte den nye blok. For eksempel at tilføje en ny blok under knappen, kan du klikke under knappen og derefter klikke på ikonet +.

Du bør se et sidepanel, der viser alle de tilgængelige blocks, opdelt i forskellige kategorier. Du kan enten søge efter en bestemt blok eller bare vælge en mulighed på listen. Når du svæver over en blok, ser du en beskrivelse af, hvad den gør, og et eksempel.

For at indsætte block skal du bare klikke på den. For eksempel, for at indsætte et almindeligt billede, ville du bare klikke på billed block:

Du kan derefter følge vejledningen for at uploade eller vælge et eksisterende billede fra dit mediebibliotek.

Væsentlige formateringsindstillinger

For at foretage grundlæggende formateringsvalg for dine blocks får du en flydende værktøjslinje, der vises, når du klikker på en hvilken som helst blok.

Hvis du formaterer almindelig tekst, kan du her:

• Tilføj fed eller kursiv
• Indsæt links
• Skift justeringer
• Tilføj formatering, f.eks. Inline-kode, gennemstregning og abonnement

Lad os f.eks. antage, at du vil indsætte et link i dit indhold. Du ville først vælge den specifikke tekst, du vil linke til – i vores eksempel er det “Til andre typer indhold”. Derefter kan du klikke på linkikonet på værktøjslinjen for at åbne mulighederne for indsætning af link:

Konfiguration af avancerede blokindstillinger

Alle de blocks, du indsætter, kommer med yderligere indstillinger i sidebjælken. Nogle blocks kan give dig et par indstillinger, mens andre giver dig flere muligheder for at styre design, layout, funktionalitet osv.

For at åbne en bloks indstillinger skal du klikke på block i editoren for at vælge den. Gå derefter til fanen Bloker i sidebar for at se dens indstillinger.

Nedenfor kan du se indstillingerne for knapblock, som er en af ​​de mere fleksible blocks. Du kan ændre farven, gøre den bredere og meget mere.

Når du foretager ændringer i en blokindstillinger, ser du øjeblikkeligt disse ændringer afspejlet i editoren.

Igen vil hver blok have indstillinger, der er unikke for den blok. For eksempel, hvis du åbner indstillingerne for almindelig afsnitstekst, får du bare nogle grundlæggende typografi og farveindstillinger. Nedenfor kan du se, at vi var i stand til at anvende en farvebaggrund for at fremhæve noget tekst:

Omarrangere blocks

Ud over at bare bruge kopier og indsæt (som du kan gøre for tekst ligesom enhver anden editor), giver Gutenberg dig to hovedmåder til at omarrangere blocks.

For det første, hvis du vil flytte en blok op eller ned et par positioner, kan du bruge pilene op eller ned på den flydende værktøjslinje.

Ved omfattende træk kan du bruge drag n drop. For at trække og slippe en blok skal du klikke på ikonet “seks prikker” til venstre i pilene.

Når du klikker og holder musen på ikonet, kan du trække block et vilkårligt sted på siden:

Indlejring af indhold fra andre kilder

Gutenberg kommer med dedikerede blocks til at integrere indhold fra tredjepartskilder som f.eks. YouTube, Vimeo, Soundcloud osv. Du kan finde alle disse muligheder i Embeds-sektionen i blokindsættelsen.

For eksempel, for at integrere en YouTube-video, skal du blot gøre:

1. Tilføj den dedikerede YouTube-blok.
2. Indsæt den direkte URL til videoen.
3. Klik på embed.

Du bør derefter se et eksempel på den indlejrede video i editoren.

Oprettelse af multi-kolonne eller grupperede layout

Som vi nævnte tidligere, er en af ​​de væsentlige fordele ved blokeditoren i forhold til den ældre TinyMCE-editor, at du kan oprette mere komplekse layout uden at skulle stole på tilpasset kode eller shortcodes.

Block editor leveres med to standardblocks til at hjælpe dig med at gøre dette:

• Kolonner: Opret et layout med flere kolonner.
• Grupper: Gruppér flere blocks. For eksempel kan du bruge dette til at angive en baggrundsfarve for et helt afsnit, der vises bag adskillige blocks.

Begge disse blocks arbejder efter princippet om “indlejring” af blocks, hvilket betyder, at du vil lægge en eller flere blocks inde i en anden blok.

Vi viser dig et eksempel ved hjælp af kolonneblock, men det samme grundlæggende princip gælder for gruppeblock.

Lad os sige, at du vil oprette et layout med to kolonner, hvor kolonnen til venstre har en almindelig afsnitstekst, og kolonnen til højre har en knap.

For at komme i gang ville du bruge blokindføreren til at tilføje collum block. Det viser en prompt, hvor du kan vælge dit foretrukne layout:

Vi vælger et to-kolonne 50/50 layout til dette eksempel. Med det ser du to kasser af lige størrelse med + ikoner indeni. For at indsætte indhold kan du klikke på det + -ikon for at åbne grænsefladen til blokindføringsenheden:

Når du har føjet den første blok til en kolonne, kan du trykke på ikonet + for at indsætte yderligere blocks. Eller du kan trække og slippe en blok uden for kolonnestrukturen ind i kolonnen.

10 Nyttige Gutenberg -tip til at arbejde mere produktivt

Nu hvor du har en grundlæggende forståelse for, hvordan Gutenberg fungerer, lad os gå over nogle værdifulde tips og tricks, der hjælper dig med at bruge blokeditoren mere effektivt.

1. Brug / (Fremad skråstreg) til hurtig indsættelse af blocks

Hvis du har brug for at indsætte mange blocks, kan det blive lidt kedeligt at åbne blokindsætteren manuelt. Heldigvis, når du først begynder at lære navnene på de almindelige blocks, du skal bruge, er der en meget hurtigere måde at indsætte blocks på kun dit tastatur – / (skråstreg).

Hvis du trykker på “Enter” for at starte en ny paragraph block, kan du hurtigt indsætte en blok ved at skrive en skråstreg efterfulgt af navnet på den blok, du vil indsætte.

Når du begynder at skrive, vil du se en liste over alle de blocks, der matcher din forespørgsel. Du kan derefter bruge dine tastaturpile til at navigere i blocks og trykke på “Enter” for at vælge den blok, du vil indsætte.

Her er et eksempel på, hvordan du bruger quick-insert til at tilføje en billede blok:

2. Indsæt billeder ved at trække dem fra dit skrivebord

Hvis du indsætter mange billeder, indeholder blokeditoren en anden tidsbesparende funktion, der lader dig fjerne behovet for at tilføje en billedblok, før du uploader et billede.

I stedet kan du bare trække billedfilen direkte fra dit skrivebord til det sted, hvor du vil tilføje den til dit indlæg. Når du trækker billedfilen hen over dit websteds indhold, ser du en blå linje, der markerer, hvor billedet vises.

Når du har frigivet filen, uploader WordPress den automatisk og indsætter en billedblok på det rigtige sted:

3. Brug noget markdown -formatering

Hvis du er fan af Markdown syntaksen til oprettelse af indhold, vil du være glad for at vide, at blokeditoren understøtter en begrænset brug af markdown – hovedsageligt med headers.

Hvis du f.eks. Vil indsætte en header block med et H3 -tag, kan du skrive tre hashtags (`###`) efterfulgt af et tryk på mellemrumstasten. Editoren konverterer det automatisk til en H3, og derefter kan du fortsætte med at skrive headeren:

Antag, at du vil have endnu mere avanceret Markdown -understøttelse. I så fald kan du installere et gratis plugin som EditorsKit, som også lader dig bruge Markdown til fed, kursiv og gennemstreget – vi taler mere om Gutenberg -plugins lidt senere i dette indlæg.

4. Fastgør værktøjslinjen Formatering øverst i editoren

Hvis du ikke kan lide, hvordan formateringsværktøjet “flyder” over en blok, indeholder blokeditoren en funktion, der lader dig fastgøre den under den øverste værktøjslinje:

5. Kopier en blok og alle dens indstillinger

Blokeredigeringsprogrammet lader dig kopiere og indsætte tekst på samme måde som i enhver editor-“Ctrl + C” eller højreklikke og vælge Kopier.

Du kan dog ikke bruge denne metode til at kopiere og indsætte en hel blok, samtidig med at dens indstillinger bevares. I stedet skal du:

1. Vælg block.
2. Klik på ikonet med tre prikker på blokens værktøjslinje.
3. Vælg Kopier.

Når du har kopieret block på denne måde, kan du indsætte den som du plejer-dvs. “Ctrl + V” eller højreklikke og vælge at indsætte.

6. Vælg hurtigt den højre blok ved hjælp af block list view

For de fleste blocks kan du bare klikke på editoren for at vælge block. Dette kan dog blive svært, hvis du begynder at bruge “indlejrede” blocks, f.eks. ved at indsætte blocks inde i kolonnerne eller gruppeblocks.

Editoren indeholder en List View, som du kan åbne fra den øverste værktøjslinje for at tage højde for dette. Listevisningen viser dig hver blok, inklusive indrykkede indlejrede blocks.

Du kan vælge en blok ved at klikke på den på listen, og editoren vil også fremhæve block, når du holder markøren over den på listen.

I eksemplet herunder kan du se:

• Den primære parent collum blokerer
• Indlejrede blocks for hver kolonne
• En indlejret gruppeblok inde i en kolonne
• En indlejret header block inde i group block

For at vælge main parent block kan du bare åbne list view og vælge den fra listen:

7. Åbn block editor (for individuelle blocks eller komplette indlæg)

En af fordelene ved Gutenberg -block editor er, at den lader dig konfigurere mange stilarter og layoutmuligheder uden at ty til kode. Du kan dog stadig have nogle situationer, hvor du vil have adgang til koden direkte for mere avancerede brugere.

For at hjælpe dig med det har Gutenberg -redaktøren et par forskellige muligheder.

Først kan du redigere koden for bare en individuel blok, nyttig til mindre tweaks som at indsætte en CSS -klasse. For at gøre dette skal du åbne rullemenuen fra blokens værktøjslinje og vælge Rediger som HTML:

Hvis du vælger denne indstilling, bliver det visuelle eksempel til en kodeditor for netop den blok uden at påvirke de visuelle forhåndsvisninger af andre blocks:

For det andet indeholder redaktøren en tilpasset HTML-blok, som du kan bruge til at integrere fulde HTML snippets. Alt du skal gøre er at tilføje block og indsætte din kode.

Endelig kan du også åbne den fulde kode-editor for hele dokumentet ved hjælp af rullemenuen i øverste højre hjørne eller en tastaturgenvej: Ctrl + Shift + Alt + M.

Husk, at når du åbner den fulde kode -editor, vil du også se blokformateringsmarkeringen fra Gutenberg, så det kan være lidt vanskeligt at navigere:

8. Lær tastaturgenveje

Block editor indeholder en masse tastaturgenveje, der lader dig udføre almindelige handlinger. Det er værd at tage sig tid til at lære dem, fordi de vil gøre dig mere produktiv og spare dig for mange gentagne museklik.

Her er nogle af de mest almindelige genveje – hvis du er på en Mac, vil du gerne skifte “Ctrl” med “Kommando (⌘)”:

• Åbn block List view – Shift + Alt + O
• Gem dine ændringer – Ctrl + S
• Fortryd dine eller de sidste ændringer – Ctrl + Z
• Gentag din sidste fortrydelse – Ctrl + Shift + Z
• Kopier den eller de markerede blocks – Ctrl + Shift + D
• Slet den eller de markerede blocks – Shift + Alt + Z
• Indsæt en ny blok før den eller de markerede blocks – Ctrl + Alt + T
• Indsæt en ny blok efter den eller de markerede blocks – Ctrl + Alt + Y

Du kan også åbne et fuldt cheat sheet med alle tastaturgenveje, når du er i editoren. For at gøre dette kan du enten bruge en tastaturgenvej-Shift + Alt + H-eller klikke på menuikonet “tre lodrette prikker” (⋮) i øverste højre hjørne af editoren og vælge Tastaturgenveje i rullemenuen.

9. Ryd op i din grænseflade ved at skjule blocks

Blokeredigeringsprogrammet tilføjer som standard mange blocks, men du vil sandsynligvis ikke bruge dem alle. For at hjælpe dig med at rydde op i grænsefladen indeholder editoren en funktion kaldet Block Manager, der lader dig deaktivere og skjule blocks, som du ikke bruger:

10. Tilføj ankre til Jump Links

Endelig er vores sidste nyttige tip blokredaktørens dedikerede HTML-anchor link funktion, som lader dig oprette jump links til bestemte sektioner af dit indhold (f.eks. for en indholdsfortegnelse).

I den klassiske editor skulle du tilføje HTML -anchors ved hjælp af kode manuelt. Men med Gutenberg kan du bare indtaste teksten til dit jump link i HTML -ankerfeltet i området Avanceret i enhver bloks indstillinger:

Grave i mere avancerede block editor koncepter

På dette tidspunkt har vi dækket en del om, hvordan editoren fungerer, og nogle tips til at arbejde mere effektivt. Nu hvor du har den baseline -viden, lad os gå over to lidt mere avancerede taktikker:

• Block patterns
• Reusable blocks

Block Patterns

Block pattern er i det væsentlige en skabelon. Det er en samling blocks arrangeret i et layout. Det kan være noget mindre, som et arrangement af knapper. Det kan endda være en skabelon for en hel sektion eller endda en hel side.

WordPress leveres med sine egne indbyggede block patterns, og tredjeparts plugin-udviklere kan også tilføje deres egne.

Du kan indsætte nye mønstre fra fanen Mønstre i main block insterter:

Når du har indsat block pattern, kan du fuldt ud redigere alle de blocks, der udgør dette mønster, ligesom hvis du manuelt havde tilføjet blocks.

I øjeblikket lader core Gutenberg -editor dig ikke oprette dine block pattern (medmindre du ved, hvordan du koder). Du kan dog løse dette med Justin Tadlocks gratis Block Pattern Builder plugin. Med plugin’et aktiveret kan du oprette dine designs ved hjælp af Gutenberg og derefter gemme designet som et mønster.

For at begynde skal du gå til block pattern> Tilføj nyt for at oprette et nyt pattern ved hjælp af editoren. Sørg for at offentliggøre det, når du er færdig:

Når du har gjort det, kan du indsætte dit block pattern ligesom alle andre – se efter det i sektionen Ukategoriseret:

WordPress kerneteamet lancerede også et officielt block pattern library på WordPress.org. Du kan indsætte dem i editoren ved hjælp af kopier og indsæt. Bare klik på knappen Kopier på biblioteket med block pattern library, og indsæt det derefter i editoren.

Reusable Blocks

Reusable blocks  er en samling af en eller flere blocks, som du kan indsætte som en gruppe. De ligner block patterns, men med en vigtig forskel:

Mens et block patterns er en startskabelon, som du redigerer i hver instans, vil en reusable blok være den samme i alle tilfælde, hvor du inkluderer den.

Hvis du opdaterer den reusable blok, gælder disse ændringer automatisk for alle de eksisterende forekomster.

For eksempel kan du bruge en  reusable blok til at oprette en call to action (CTA), som du vil have det samme i alt dit indhold. Hvis du nogensinde vil opdatere CTA, skal du blot opdatere den reusable blok én gang for at ændre den på tværs af webstedet.

For at oprette en reusable blok i Gutenberg WordPress-editoren skal du klikke og trække for at vælge en eller flere blocks. Klik derefter på indstillingen Tilføj til reusable blocks. (Det plugin, vi nævnte ovenfor, lader dig også oprette et blokmønster på denne måde.)

Dine blocks vil derefter blive grupperet – du kan give din reusable blok et navn i den genanvendelige bloks indstillinger i sidebar.

Nu kan du indsætte den genanvendelige blok ved at søge efter dens navn. Du kan bruge `/` til hurtigt at indsætte blocksn:

Hvis du ændrer den reusable blok, får du mulighed for at offentliggøre disse ændringer, når du opdaterer indlægget. Og hvis du beslutter dig for at offentliggøre genanvendelige blokændringer, gælder disse ændringer automatisk for hver forekomst af den reusable blok:

Udvidelse af blokeditoren med plugins

Indtil nu har vi fokuseret på kerneblokeditorfunktionerne med nogle få undtagelser.

En af de store ting ved blokeditoren er dog, at du kan bruge plugins til at udvide det, ligesom du kan med resten af ​​dit WordPress -websted.

Du kan bruge plugins til et par forskellige ting:

• Tilføj nye indholdsblocks: Plugins kan tilføje nye blocks, som du kan bruge i dine designs. Det er den mest almindelige brugstilfælde for Gutenberg-plugins i øjeblikket.
• Tilføj nye skabeloner/blokmønstre: Nogle plugins bruger kerne block patterns-systemet, mens andre har oprettet deres egne skabelonsystemer.
• Skift editorens interface/funktioner: Du kan bruge plugins til at ændre selve editoren. For eksempel kan du tilføje bedre Markdown understøttelse.

Ud over plugins, der er specielt bygget til Gutenberg, kan mange andre WordPress plugins også bruge blokeditoren.

Hvis du f.eks. Bruger et kontaktformular-plugin, kan pluginet give dig en dedikeret blok, som du kan bruge til at integrere dine formularer. Det samme gælder for mange andre typer plugins.

Når du mestrer det grundlæggende i editoren, er det værd at undersøge disse plugins for at se, om du finder nogen, der kan forbedre din oplevelse.

Her er nogle af de mest populære muligheder på det tidspunkt, hvor vi skriver dette indlæg:

• Ultimate Addons for Gutenberg
• Kadence Blocks
• GenerateBlocks
• Stackable
• Getwid

Du kan se mere i afsnittet WordPress.org blokaktiverede plugins.

Gutenberg WordPress Editor og fuld site -redigering

Som vi nævnte i begyndelsen af ​​dette indlæg, har Gutenber -projektet til formål at være meget mere end bare en indholdsredaktør.

Den langsigtede plan er at få WordPress til at flytte til fuldstændig webstedredigering. Det betyder præcis, hvad der står – målet er, at du i sidste ende kan redigere alle dele af dit websted ved hjælp af Gutenberg -editoren. Og det inkluderer dit websteds header,

I modsætning til lanceringen af ​​blokeditoren i WordPress 5.0 har Full Site Editing en iterativ tilgang. Det vil være en gradvis tilføjelse af funktioner, hvor hver ny version bygger på de tidligere.

For eksempel fra og med WordPress 5.8, vil du nu bruge blokeditoren til at administrere dit websteds widgets. Du får også adgang til nogle nye temafokuserede blocks såsom Site Logo, Navigation, Query Loop (lader dig oprette skabeloner til list posts) og mere.

Men selvom officiel fuldstændig redigering stadig er i gang, er nogle frygtløse temaudviklere allerede begyndt at frigive blokbaserede temaer, som giver os nogle ganske gode eksempler på, hvordan fuld webstedredigering kan fungere.

Derudover kan du få adgang til nogle af de eksperimentelle funktioner til fuldstændig redigering i plugin-versionen af ​​Gutenberg.

Så lad os se på to ting:

1. De eksisterende kernefunktioner til fuldstændig redigering, som vi har nu fra WordPress 5.8
2. Hvordan “fuld” fuld site-redigering kan fungere baseret på eksperimentelle funktioner

Brug af blocks i stedet for widgets

Fra WordPress 5.8 bruger du nu blocks til at styre dine sidebars og footers i stedet for widgets (som standard kan du deaktivere dette, hvis du vil).

Når du går til Udseende> Widgets, kan du styre indholdet i hvert widgetområde ved hjælp af blokeditoren.

Du kan se, at hvert widgetområde får en separat editor, som du kan åbne ved at klikke på harmonikaen skifter. Du kan også flytte blocks mellem forskellige widgetområder ved at klikke på de tilsluttede pilikoner øverst:

Brug af nye theme blocks

WordPress 5.8 tilføjer også nye dedikerede theme blocks, der lader dig indsætte dynamisk indhold på dit websted. Disse blocks vil også spille en afgørende rolle, når du designer skabeloner til dit tema i fremtidige udgivelser.

Lad os f.eks. Sige, at du vil integrere en liste over dit seneste indhold på en side. Nu kan du bare tilføje Query Loop -block, og du vil dynamisk kunne indsætte indhold fra en bestemt indlægstype (f.eks. Blogindlæg), herunder filtrering efter kategorier, forfattere, søgeord og mere:

Inde i Query Loop block kan du indlejre de andre tema blocks for at styre skabelonen for det indhold, der vises der. For eksempel kan du få vist hvert indlægs dato ved at tilføje block Postdato til din skabelon.

Med Query Loop -block i WordPress 5.8 kan du i det væsentlige designe din egen tilpassede blogfortegnelsesside. Korrekt redigering af hele webstedet vil udvide det til hele dit tema – så lad os se på det næste.

Design af indholdsskabeloner

Skabelonredigeringstilstand er en anden ny funktion i WordPress 5.8. Det lader dig bruge Gutenberg til at designe skabeloner til dine indlæg og sider ved hjælp af blocks.

I øjeblikket er denne funktion kun tilgængelig, hvis din temaudvikler specifikt har aktiveret den, så du kan muligvis ikke se den, hvis dit temas udvikler ikke har gjort det endnu.

Hvis du bruger et tema, der understøtter skabelonredigeringsfunktionen i WordPress 5.8, vil du se en ny skabelonsektion på fanen Indlæg/side i sidelinjen, når du redigerer et indlæg eller en side. Du kan oprette en ny skabelon eller vælge en af ​​dine eksisterende skabeloner:

Hvis du opretter en ny skabelon, kan du give den et navn, så du kan huske den. Derefter kan du designe skabelonen ved hjælp af den særlige skabelonditor -tilstand sammen med de nye temablocks, som vi detaljerede i det foregående afsnit:

Eksempel på fuldstændig redigering af Blockbase

Blockbase er et tema fra Automattic, der fungerer som en slags “proof of concept” og legeplads til fuld site -redigering. Det er stadig eksperimentelt, så det kan ændre sig, før disse funktioner er i kernens WordPress -software. Men det giver en idé om fuld site-redigering.

Med temaet og plugin -versionen af Gutenberg installeret får du et nyt Site Editor -område, der lader dig “bygge” dit tema ved hjælp af den samme editor, som du så ovenfor.

Den kritiske forskel er dog, at du ikke bare bygger et enkelt indlæg eller en side. I stedet bruger du Gutenberg WordPress -blokeditor til at oprette de faktiske skabeloner, som alt dit websteds indhold vil bruge – for eksempel skabelonen til din header.

For at hjælpe dig med at opnå dette får du en række nye designblokke, herunder nogle af de temablokke, du så ovenfor:

For at navigere mellem forskellige skabeloner kan du klikke på WordPress-logoet i øverste venstre hjørne for at redigere andre skabeloner og oprette nye:

Igen er tanken, at du til sidst kan bruge Gutenberg -editoren til at styre alle dine temas skabeloner/layout. Og når det sker, vil oprettelsen af ​​et WordPress-websted se temmelig anderledes ud end det, vi ser som “normalt” i 2021.

Resumé

Siden 2018 har Gutenberg -blokredaktøren gjort store fremskridt. Med det kommende skridt i retning af Full Site Editing, vil block editoren kun blive en endnu mere væsentlig del af WordPress.

I dette indlæg har vi dækket alt fra grundlæggende block editor til avancerede tips og funktioner. Vi har også set på, hvordan full site-redigering kan se ud i fremtiden.

Hvis du ikke er klar til at prøve det endnu, kan du deaktivere Gutenberg permanent og bruge den klassiske editor. Gutenberg vil dog fortsætte med at vokse, så det er ikke noget, du vil ignorere for evigt.

Har du stadig spørgsmål eller tanker om redaktøren? I så fald vil vi meget gerne høre dine kommentarer, både gode og dårlige.