Sådan bruges den nye WordPress Block Editor – Din WordPress Gutenberg-guide

Fra WordPress 5.0’s frigivelse den 6. december 2018 har WordPress en ny standardindholdsredigerer. Ringede til WordPress Gutenberg-redaktøren under udvikling, "Gutenberg" er nu bare the "WordPress editor" eller "blok redaktør" hvis du vil være mere specifik.


Den nye blokredaktør bringer en helt anden tilgang til oprettelse af indhold i form af blokke (deraf navnet …). Og i dette indlæg lærer du nøjagtigt, hvordan du bruger disse blokke og den nye redaktørs andre funktioner til at oprette indhold på dit WordPress-sted.

Uanset om du har opdateret dit websted til WordPress 5.0 endnu, skal du fortsætte med at læse for at lære, hvordan du bruger den nye Gutenberg-blokeditor til at opbygge indhold og layout på dit websted.

WordPress Gutenberg guide

Hvad er Gutenberg?

Gutenberg er projektnavnet for den nye WordPress-blokeditor, som erstattede WordPress TinyMCE-editoren som standard WordPress-editor i WordPress 5.0.

Mens Gutenberg var det officielle navn, mens redaktøren var under udvikling, er det nu bare "WordPress-blokeditoren" eller "WordPress-editoren" fordi det officielt er en del af kernesoftwaren. Som sådan vil du ofte se mig referere til det som "blok redaktør" i dette indlæg snarere end "Gutenberg".

Som en hurtig genopfriskning, her er hvordan den gamle WordPress TinyMCE-redaktør så ud. Denne redaktør kaldes nu klassisk redaktør:

original wordpress tinymce editor

Og her ser de ting ud i den nye WordPress blok redaktør, AKA Gutenberg:

WordPress Gutenberg blokredaktør

Det er dog mere end en æstetisk opdatering. Gutenberg ændrer redigeringsoplevelsen fuldstændigt ved at gå til en blokbaseret tilgang til indhold (mere om nøjagtigt hvilke blokke der er i et sekund!).

Mens det nuværende fokus er på oprettelse af indhold, er det endelige mål at have Gutenberg-blokeditoren "gå ud over posten i sideskabeloner og i sidste ende fuld tilpasning af webstedet."

Det betyder, at du i sidste ende kan være i stand til at opbygge hele dit websted ved hjælp af blokke, inklusive destinationssider og andet vigtigt indhold.

Er Gutenberg en del af WordPress?

Gutenberg blev officielt frigivet som en del af WordPress 5.0 den 6. december 2018. Hvis du har opdateret dit websted til WordPress 5.0, skal du nu se den nye blokeditor som standard.

På grund af frigivelsens omfang har nogle administrerede WordPress-værter imidlertid valgt ikke at opdatere folks websteder med det samme. Derfor er der en chance for, at dit websted muligvis ikke kører WordPress 5.0 endnu. I dette tilfælde er det op til dig, om du vil opdatere eller ikke (selvom du ikke skulle vente for længe af ydelses- og sikkerhedsmæssige årsager).

Sådan fungerer WordPress Gutenberg-redaktøren

For et sekund siden fortalte jeg dig, at Gutenberg er en blokbaseret redaktør. Det var lidt uhøfligt at lade dig hænge, ​​for hvis du er som de fleste mennesker, ved du måske ikke, hvad det betyder.

Så her er blokbaseret redigering 101:

I det væsentlige erstatter Gutenberg det enkelt redigeringsfelt i den nuværende WordPress TinyMCE-editor med masser af individuelle "blokke".

Disse blokke giver dig derefter mulighed for at opbygge mere komplekse design end dem, der er tilladt i den gamle klassiske WordPress-editor.

Så hvad er en blok?

Nå, en blok kan være stort set alt. For eksempel kan du have blokke til:

  • Regelmæssig tekst
  • Billeder
  • Videoindlejringer
  • Knapper
  • Widgets (ja, de samme widgets, du bruger i din sidebjælke)
  • Borde
  • etc.

Og hvad der er pænt er, at udviklere vil kunne oprette deres egne tredjepartsblokke, som du kan få adgang til via plugins for endnu mere fleksibilitet.

Hver blok er sin egen enhed, som du kan manipulere på individuelt grundlag. For eksempel er her et hurtigt Gutenberg-indlæg, der indeholder tre blokke:

  • 2 tekstblokke
  • 1 billedblok

Se hvor let jeg kan omarrangere disse blokke bare ved at trække og droppe dem:

Gutenberg træk og slip

Og fordi hver blok er "adskille", Du kan også tilføje ting som tilpasset baggrunde bare til specifikke blokke.

Generelt giver det dig mere fleksibilitet og dybdegående kontrol.

Så Gutenberg er en sidebygger, ikke desto mindre?

Ehh, ikke helt. I det mindste ikke i sin nuværende form.

Gutenberg vil gøre det meget lettere at style almindeligt indhold som blogindlæg eller standardsider, men det er ikke en 1: 1-erstatning for sidebygere i sin nuværende form.

Bare på overfladen mangler Gutenberg allerede to vigtige ting:

  • Fleksible kolonner, skønt der er en grundlæggende kolonneblokke, og nogle tredjepartsudviklere har oprettet interessante blokke.
  • Ægte træk og slip – den nyere version af Gutenberg giver dig mulighed for at omarrangere blokke med træk og slip, men det er stadig ikke frit form som de fleste sidebygere.

Med det sagt er Gutenberg-blokredigereren klar til at fjerne behovet for sidebygere for de fleste "standard" indhold, og det skaber også en enkelt samlet metode til at skabe mere kompleks post layout i WordPress.

Men når det kommer til at bygge mere komplekse sider, som en destinationsside, vil du sandsynligvis sætte pris på den større fleksibilitet, som sidebyggerne tilbyder (i det mindste under Gutenbergs første udgivelse).

I vores sammenligning mellem Elementor vs Divi Builder vs Beaver Builder kan du for eksempel se, hvordan topsidebyggerne tilbyder ting som:

  • Fri-form træk og slip redigering
  • Ægte understøttelse af flere søjler, hvor du kan oprette et vilkårligt antal kolonner, hvor de enkelte elementer trækkes ind
  • Masser af foruddannede skabeloner
  • Avancerede stylingindstillinger, med pletter til brugerdefinerede margener / polstring og meget mere
  • Responsive designindstillinger

Den nye blokredaktør kommer måske der en dag. Men i det mindste i sin oprindelige udgivelsesform vil sidebygere stadig give dig fleksibiliteten til at designe mere komplicerede enkeltstående sider.

Skal du bruge den nye blokeditor? Kan du beholde den forrige WordPress-editor?

Ingen, du behøver ikke at bruge den nye blokeditor og Ja, du kan fortsætte med at bruge den forrige WordPress-editor. For at deaktivere Gutenberg-blockeditoren og returnere dit websted til den klassiske editor efter opgradering til WordPress 5.0, kan du bruge den officielle Klassisk redaktør plugin.

Læs vores vejledning om hvordan man deaktiverer Gutenberg-blokeditoren at lære mere.

Har du brug for et specielt tema for at bruge den nye Gutenberg block editor?

Da det nu er standard WordPress-editor, er blokeditoren bygget til at arbejde med ethvert WordPress-tema. Dog vælger du et tema, der specifikt tilbyder Gutenberg-kompatibilitet nogle meget virkelige fordele.

For det første kan temaer tilbyde indbygget styling til alle disse nye blokke. Bedre endnu, kan temaer faktisk indlæse disse stilarter inde i editoren. Det betyder, at du kan se den rigtige styling til dine blokke, når du bygger dit indhold til en bedre WYSIWYG-oplevelse (se en grundlæggende version af dette i handling her)

Gutenberg-temaer vil også kunne tilbyde foruddannede skabeloner bestående af forskellige blokke, så alt hvad du skal gøre er at tilslutte dit indhold til de eksisterende blokke og ramme Offentliggøre.

Derudover er der nogle andre små fordele som billedjusteringer i fuld bredde. Så du kan bruge det tema, du vil have, men det er værd at dobbeltkontrol for at sikre dig, at dit temas udvikler planlægger at tilføje support.

Hvis du bare vil bruge et tema til test, har alle disse temaer support til den nye blokeditor:

  • Neve – Neve er vores nye tema, der specifikt er bygget til at arbejde med Gutenberg-blokeditoren.
  • Zakra – en dejlig letvægtsindstilling fra ThemeGrill.
  • Hestia Lite – et fleksibelt tema, der følger principperne for materialedesign.

For flere muligheder, se vores samling af de bedste Gutenberg-kompatible WordPress-temaer.

Byg dit første layout med Gutenberg WordPress-blokeditor

Hvis du antager, at du bruger WordPress 5.0 og den nye blokeditor, er du klar til at grave i kødet i denne artikel. Nedenfor viser jeg dig, hvordan du rent faktisk bruger den nye WordPress Gutenberg-blokeditor til at oprette et komplet sidelayout.

På den måde er du klar til at få mest muligt ud af WordPress 5.0 og den nye editor.

En hurtig rundvisning i WordPress-blokredigeringsgrænsefladen

Inden du begynder at tilføje nogle blokke, lad os gå over en hurtig nedtrapning af elementerne i hovedblokeditorgrænsefladen:

Gutenberg-blokredigeringsgrænsefladen

  • (EN) – giver dig mulighed for at tilføje nye blokke.
  • (B) – fortryd / fortryd knapper
  • (C) – giver dig adgang til dokumentindstillinger, der dækker ting som kategorier & tags, fremhævede billeder osv. Dette svarer til den aktuelle sidepanel i WordPress-editoren
  • (D) – Når du har valgt en individuel blok, giver dette dig adgang til indstillinger, der er specifikke for den blok
  • (E) – giver dig adgang til en live preview af dit indlæg eller offentliggøre / opdatere dit indlæg
  • (F) – når du først har tilføjet nogle blokke, er det her, du rent faktisk vil arbejde med dit indholds indhold

Tilføjelse af nye blokke

Som jeg diskuterede i introduktionen, bruger du separat "blokke" at opbygge dine layout med den nye editor.

Hvis du vil tilføje en ny blok, skal du blot klikke på +Plus og vælg den type indhold, du vil tilføje:

tilføje en ny blok

I eksemplet ovenfor viste jeg dig, hvordan du tilføjer en grundlæggende afsnitblok. Men Gutenberg indeholder faktisk masser af forskellige blokke, opdelt i forskellige sektioner:

typer blokke

Øverst ser du en liste over din Mest anvendte blokke. Men hvis du ruller ned, ser du også sektioner for fælles blokke, formatering, layoutelementer, widgets og indlejringer:

typer blokke

  • Inline Elements – indeholder kun en blok til et inline-billede.
  • Almindelige blokke – indeholder grundlæggende byggesten som billeder, afsnit (almindelig tekst), overskrifter, citater osv.
  • Formatering – lad dig tilføje mere formateret indhold som pull citater, tabeller eller den klassiske WordPress teksteditor
  • Layoutelementer– lad dig opdele tekst i to kolonner, inkludere knapper, separatorer eller "Mere" tag
  • Widgets – lad dig tilføje kortnumre, seneste indlæg eller kategorier. Det er endda muligt at vise sidebar-widgets lige i Gutenberg.
  • indlejringer – hjælpe dig med at integrere indhold fra eksterne kilder som Twitter, YouTube, Facebook, Instagram og mere.
  • Genanvendelig – Når du først har fået fat i tingene, kan du gemme grupper af blokke som genanvendelige skabeloner og få dem vist her. Dette område vises først, før du gemmer din første genanvendelige skabelon, som vi viser dig, hvordan du gør senere i dette indlæg.

Bygning af et grundlæggende layout med Gutenberg

Lad os starte med det enkle. Sig, at du bare vil opbygge et grundlæggende blogindlægslayout, der inkluderer:

  • Regelmæssig tekst
  • Et billede
  • Et citat
  • En indlejret YouTube-video

Sådan gør du det med Gutenberg:

Først skal du skrive hele dit indlæg i redaktøren. Eller hvis du er ligesom mig og foretrækker det skriv i Google Dokumenter, du kan indsætte det hele i, og derefter konverterer Gutenberg det automatisk til blokke.

Tilføjelse af ikke-tekstblokke

Nu, hvor dit indhold er opdelt i blokke, kan du holde musepekeren over det sted, hvor du vil indsætte dit første billede og klikke på plus ikon. Det vil skabe en pause. Klik derefter på plus ikon igen for at indsætte billedblokken:

billede blokering

Dette giver dig mulighed for at indsætte en billedblok, hvorfra du kan uploade eller vælge billeder på en lignende måde som den nuværende WordPress-editor:

indsæt billede

Når du vælger dit billede, skal du se det lige der i dit sidelayout:

inline billede

Derefter skal du holde musepekeren over det sted, hvor du vil indsætte trækcitatet og bruge den samme metode til at indsætte en anden blok. Du kan enten søge efter "citere" eller gå til Almindelige blokke afsnit:

indsæt tilbud

Derefter kan du se din nye pull quote-blok. For at oprette et tilbud skal du bare klikke ind i blokken og indtaste:

indtast tilbud

For at indsætte en YouTube-video kan du tilføje en ny Youtube blok fra indlejringer fane. For at indsætte en video skal du bare indtaste URL’en og klikke på Indlejre:

YouTube-blok

Valgfrit – oprettelse af forskellige kolonner

Vil du blive endnu mere kreativ? Gutenberg inkluderer nu en eksperimentel kolonnefunktion, der giver dig mulighed for hurtigt at oprette flere kolonner. Alt hvad du skal gøre er at tilføje Kolonner (Beta) blok fra Layoutelementer afsnit. Derefter kan du indsætte andre blokke inde i det:

Gutenbergsøjler

Når du er færdig, skal du blot klikke på Offentliggøre knap:

offentliggøre indlæg

Og du har dit formaterede blogindlæg i front-end.

Sådan tilpasses individuelle blokke

Da WordPress Gutenberg-editoren indeholder et væld af forskellige blokke, kan jeg ikke vise dig, hvordan du bruger hver enkelt blok.

Men jeg kan give dig en grundlæggende ramme, der gælder for alle blokke.

Grundlæggende kontrollerer du indhold i selve redaktørens krop:

redigering af en blok

Til grundlæggende tekststyling og justering kan du bruge den menulinje, der vises, når du hover over en blok:

styling af en blok

Og for mere avanceret styling, typiserer du normalt blokken i Blok fanen med indstillinger.

For at få adgang til denne fane skal du vælge den blok, du vil redigere, og gennemse til Blok fane:

tilpasning af en blok

Sådan omarrangeres de enkelte blokke

For at omarrangere blokke har du to muligheder. Du kan bruge Op eller ned pil, når du hover over en blok for at flytte blokken i den respektive retning:

flyt gutenberg blokke

Eller du kan trække og slippe blokke. Hvis du vil aktivere træk og slip-funktionen, skal du holde musen over musen seks prikker mellem pilene op og ned

Gutenberg træk og slip

Samler det hele

Når du først har fundet ud af, hvordan tingene fungerer med den nye blokeditor, er det temmelig smertefrit og intuitivt.

Først kan du opleve nogle voksende smerter og kæmpe for at udføre basale handlinger, som du har taget for givet.

Men når du først får fat på tingene – skal du sejle gennem bygning af layouts. Og med de mere avancerede blokke, som Gutenberg kommer med, har du mere fleksibilitet end TinyMCE WordPress Editor.

Nogle pæne, men mere avancerede, Gutenberg-tricks

Når du bliver mere bekendt med WordPress Gutenberg-blokeditor, kan du muligvis finde nogle af disse tricks til at være tidsbesparende.

Opret hurtig en ny blok med indtastning

Ovenfor viste jeg dig, hvordan man opretter blokke ved hjælp af insert-knappen. Men for at spare tid kan du faktisk oprette blokke ved blot at skrive denne syntaks:

/ BLOCK-NAME

En auto-suggest-boks vises for at hjælpe dig med at finde den relevante blok.

For eksempel, hvordan man opretter en billedblokering med bare dit tastatur:

Temmelig praktisk og en stor tidsbesparende!

bloker genvej

Rediger kildekode direkte

På ethvert tidspunkt kan du redigere kildekoden for hele dit indlæg ved at klikke på tre prikker øverst til højre og vælg Kodeditor:

redigeringskode i Gutenberg

Aktivér fuldskærmstilstand, fast værktøjslinje osv.

Den nye blokeditor indeholder nogle få forskellige tilstande, der giver dig mulighed for at ændre redigeringsoplevelsen. Du kan:

  • Tilføj en fast værktøjslinje som TinyMCE-editoren
  • Gå på fuld skærm
  • Sæt en "spotlight" på den aktive blok

At bruge disse "visninger", Klik på tre prikker ikon i øverste højre hjørne.

Gutenberg synspunkter

Brug Gutenberg-tastaturgenveje for at spare tid

Udover standardformatgenveje har blokeditoren et antal dedikerede tastaturgenveje, der kan hjælpe dig:

  • Indsæt nye blokke over eller under den valgte blok
  • Slet en blok
  • Kopier en blok
  • etc.

Hvis du vil åbne den fulde liste over tastaturgenveje, skal du bruge Skift + Alt + H genvej.

Gutenberg-tastaturgenveje

Opret genanvendelige blokskabeloner

Hvis du har en bestemt samling / arrangement af blokke, som du har brug for at genbruge flere steder, kan du gemme en gruppe af blokke som en genanvendelig skabelon. Du kan navngive din skabelon. Derefter kan du indsætte det, ligesom du ville have en almindelig blok.

Sådan opretter du din skabelon:

  • Vælg de blokke, du vil inkludere
  • Klik på tre prikker ikon
  • Vælg Føj til genanvendelige blokke

Gutenberg genanvendelige blokskabeloner

Rediger genanvendeligt blokindhold

Ud over at gøre det let at hurtigt indsætte formateret indhold, kan genanvendelige blokke også lade dig hurtigt opdatere alle forekomster af den genanvendelige blok.

Det vil sige, når du først redigerer det genanvendelige blokindhold, får hvert enkelt indlæg, der bruger den genanvendelige blok, også det nye indhold.

Hvis du vil redigere en genanvendelig blok, skal du rulle til Genanvendelig afsnit i blokindsatsen, og klik på Administrer alle genanvendelige blokke knap. Eller du kan besøge yoursite.com/wp-admin/edit.php?post_type=wp_block (sørg for at erstatte yoursite.com med din rigtige URL).

Rediger genanvendelige blokke til WordPress

Udvid blokeditoren med plugins

Hvis du vil have lyst, kan du nu finde masser af Gutenberg-udvidelsesplugins, der tilføjer deres egne blokke.

Otter Blocks er en god mulighed for at komme i gang. Det giver dig yderligere blokke til ting som priser, udtalelser, Google Maps, delingsikoner, "Klik for at tweet" knapper med mere.


Gutenberg Blocks and Template Library af Otter Gutenberg Blocks and Template Library af Otter

Forfatter (e): ThemeIsle

Nuværende version: 1.5.4

Sidst opdateret: 26. maj 2020

otter-blocks.zip


98% Vurderinger


60.000 + Installationer


WP 5.2 + Kræver

Styr rod med Block Manager

Den nye redaktør tilføjer en masse blokke, især hvis du bruger nogle af disse blokplugins, som vi nævnte ovenfor. Dette kan gøre tingene lidt rodede og sænke dig. Hvis der er nogle blokke, du aldrig planlægger at bruge, kan du bruge Bloker manager at deaktivere dem.

Sådan bruges Block Manager:

  • Klik på tre prikker ikon i øverste højre hjørne
  • Vælg Bloker manager
  • Brug afkrydsningsfelterne til at deaktivere blokke efter behov

WordPress Block Manager

Brug bloknavigation til hurtigt at navigere indhold

For langvarigt indhold, eller indhold, hvor du bruger masser af indlejrede blokke, kan det være svært at hurtigt finde den blok, du leder efter.

Til hjælp hjælper blokeditoren en Bloknavigation værktøj, som du kan åbne ved at klikke på værktøjslinjen eller bruge Skift + Alt + O tastaturgenvej.

Hvis du er inde i en indlejret blok (f.eks. Kolonner), vil Bloker navigation værktøjet viser alle de indlejrede blokke. For at vælge en bestemt blok, kan du klikke på den på listen.

Bloker navigationsfunktion

Skift mellem Rediger og Vælg tilstande

Med WordPress 5.4 får du adgang til to forskellige tilstande, som du kan skifte mellem ved hjælp af den øverste værktøjslinje:

  • Redigere – dette er, hvad du vil arbejde i det meste af tiden. Det giver dig mulighed for at redigere indholdet af alle dine blokke. Dette er standardredigeringstilstand.
  • Vælg – dette gør det lettere at vælge specifikke blokke, især når du arbejder med indlejrede blokke (f.eks. Blokke inde i en søjle). Når du klikker på en blok, skifter du automatisk tilbage til Redigere mode.

WordPress-blokeditor-valgtilstand

Eksperimenter med nye blokredigeringsfunktioner

Lige siden blokeditoren blev slået sammen i kernen, er der faktisk to versioner af blokeditoren:

  1. Den oprindelige version i den centrale WordPress-software (dette er sandsynligvis det, du bruger)
  2. Gutenberg-pluginet

Gutenberg-plugin-versionen er dybest set et testgrundlag for kerneditoren. Plugin-versionen indeholder nye funktioner, der er under udvikling. Til sidst vil disse funktioner blive flettet ind i kernen. Men hvis du vil lege med dem tidligt, skal du blot installere Gutenberg-pluginet fra WordPress.org.


Gutenberg Gutenberg

Forfatter (e): Gutenberg Team

Nuværende version: 8.2.1

Sidst opdateret: 28. maj 2020

gutenberg.8.2.1.zip


40% Vurderinger


200.000 + Installationer


5.3.0Requires

Hvad sker der med alt dit gamle indhold?

Før jeg afslutter tingene, lad mig hurtigt dække, hvad der vil ske med alt dit gamle indhold, når du har opdateret til WordPress 5.0 (hvis du ikke allerede har gjort det).

Bare rolig – det forsvinder ikke! Men oplevelsen er lidt anderledes:

Når du opdaterer dit websted til WordPress 5.0, og du har eksisterende indhold bygget med den originale TinyMCE-editor, placerer blokredigeringsprogrammet alt dit gamle indhold i en enkelt Klassisk blok. Denne klassiske blok er dybest set TinyMCE-editoren … men indlejret i den nye blokeditor.

Gutenberg klassisk blok

For at arbejde med dit gamle indhold kan du enten:

  • Lad det være i den klassiske blok, og rediger det ligesom du ville gøre med den gamle WordPress-editor
  • Brug tre prikker ikon og vælg Konverter til blokke. Det vil opdele alt i individuelle blokke. Derefter kan du arbejde med dit indhold, ligesom du oprindeligt havde oprettet det med Gutenberg-blokeditoren.

Konverter til blokke

Hvad er det næste for Gutenberg-blokredigereren?

Mens blokeditoren nu officielt er en del af kernen (takket være frigivelsen af ​​WordPress 5.0), er WordPress-teamet langt fra afsluttet med Gutenberg-projektet.

I øjeblikket arbejder kerneteamet med at få blokeditoren til at erstatte WordPress-widgets, såvel som at lade dig oprette navigationsmenuer med blokke.

Selvom disse funktioner ikke er her endnu, er de på vej. Derfor betaler det sig at begynde at lære blokredigeringsgrænsefladen ASAP!

For de fleste afslappede brugere vil det efter nogle voksende smerter give en mere fleksibel oplevelse af oprettelse af indhold.

Ikke-udviklere vil være i stand til intuitivt at udforme mere komplekse layout med ekstra elementer som knapper, indholdsindlejringer og meget mere. Og det vil forhåbentlig hjælpe WordPress med at fortsætte med at vokse.

Nu ville vi meget gerne høre fra dig. Jeg er sikker på, at mange af jer har stærke tanker om den nye Gutenberg-blokeditor – så lad os vide det i kommentarerne!

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Layout, præsentation og redigering af 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