Den nuværende WordPress visuelle editor har ikke haft mange ændringer gennem årene, og for det meste har det været stort set det samme. Selvom dette ikke er en dårlig ting, tror mange, det er tid til en forandring. Andre platforme som Medium eller Ghost giver en virkelig unik og forfriskende oplevelse for forfattere, så hvorfor ikke WordPress? Nå, men mange bidragsydere og frivillige har arbejdet på den nye Gutenberg WordPress-editor bag kulisserne i de sidste 6+ måneder. Deres mål? At gøre tilføjelse af rigt indhold til WordPress enkelt og sjovt. I dag vil vi dykke ind i den nye editor og diskutere nogle fordele og ulemper.

Hvad er Gutenberg?

Gutenberg tager en ny editor til WordPress. Det er opkaldt efter Johannes Gutenberg, der opfandt et trykkeri med bevægelig type for mere end 500 år siden. Den nuværende visuelle editor kræver, at mange af os bruger kortnumre og HTML for at få tingene til at fungere. Deres mål er at gøre det nemmere, især for dem, der lige er begyndt med WordPress. De omfavner “little books” og håber at tilføje mere avancerede layout muligheder. Du kan tjekke det officielle eksempel.

For at være retfærdig for udviklerne og teamet, der arbejder på dette, er det vigtigt at bemærke, at dette i øjeblikket er i sin beta- og testfase, det er ikke klar til at køre på produktionssteder endnu. Men vi ønskede at dykke ind og se for os selv, hvad hele hypen handler om. Vi vil sørge for at holde dette indlæg opdateret som forbedringer, og ændringer skubbes ud. Det ser ud til, at før dette vil blive officielt fusioneret til WordPress-kernen, håber Matt Mullenweg (grundlæggeren) at få 100.000 aktive installationer. Det giver perfekt mening, da dette vil løse mange fejl, problemer og tillade dem at behandle nye ideer og funktionskrav.

Stadig på udkig efter det perfekte WordPress vært?

Prøv Kinstas premium managed WordPress hosting for at opleve dit websted uden problemer.
  • Stiliserede kontroller, der repræsenterer ledelsen Fuldt administreret
  • Skærm med et kryds, der repræsenterer sikkerhedSikker som fort knox
  • Sammenlægning af linjer, der repræsenterer migreringerGratis migreringer
  • Tre rigtige chevrons repræsenterer serverhastighedUltimativ hastighed
  • Cirkulær pil med prik i midten, der repræsenterer sikkerhedskopierDaglige sikkerhedskopieringer
  • Offset hexagoner repræsenterer vores server stackGoogle Cloud Platform

Fordi Gutenberg stadig er i testfasen, opmuntrer teamet til at prøve det og efterlade kommentarer og feedback i WordPress supportforum eller åbne et problem på GitHub.

Ellers du kan deltage i diskussionerne, der finder sted i # core-editor på the core WordPress Slack. Gutenberg bliver fragtet med WordPress 5.0. 

Sådan Installeres Gutenberg

Efter at have skrevet dette, har Gutenbergs plugin i øjeblikket lidt over 20.000 aktive installationer med over 290.000 samlede downloads og en 2,5 ud af 5-stjernede rating. Det kræver også, at WordPress version 4.8  skal bruge den.

Gutenberg WordPress plugin

Gutenberg WordPress plugin

Du kan downloade den nyeste version af Gutenberg fra WordPress-depotet eller ved at søge efter det inden for dit WordPress dashboard under “Add New” plugins. Igen anbefaler vi, at du installerer dette på et testwebsted eller udnytter værtens scenemiljø.

Installer Gutenberg WordPress plugin

Installer Gutenberg WordPress plugin

Udforsk Guttenberg

Efter installationen af Gutenberg vil du se links under dine indlæg, som giver dig mulighed for at åbne Gutenberg-editoren. De erstatter ikke standard WordPress-editoren, hvilket er en god ting efter vores mening, som i testfasen gør det muligt at springe frem og tilbage. Som den seneste version på lageret understøtter den nu også tilpassede sidetyper og sider.

Gutenberg link på post

Gutenberg link på post

Vigtigt: Når WordPress 5.0 er udgivet, vil Gutenberg være standardredigeringsprogrammet (# 41316), men du har stadig mulighed for at installere den klassiske editor, hvis du løber ind i kompatibilitetsproblemer (som det ses i den nye callout nedenfor).

WordPress 5.0 Gutenberg callout

WordPress 5.0 Gutenberg callout

Gutenberg tilføjer en ny menu i dit WordPress dashboard, som indeholder en demo (som vist nedenfor) og evnen til at oprette et nyt indlæg. Igen er denne menu sandsynligvis kun til testformål. Som du kan se, ser den visuelle editor anderledes ud end den du sandsynligvis er vant til. Det har en meget lignende føler for Medium, som vi synes er godt.

gutenberg editor demo

Gutenberg editor demo

Hvis du kigger på både Gutenberg-redaktøren og den nuværende visuelle editor, side om side, (klik for at forstørre), kan du se hvor meget mere skriveplads Gutenberg har, især på mindre skærme. For folk der skriver på bærbare computere, vil Gutenberg være en god ændring i tempoet! Det er virkelig fokuseret på “at skrive først” og forsøger at give et mindre distraherende miljø.

Comparing Gutenberg vs nuværende editor

Comparing Gutenberg vs nuværende editor

I Gutenberg WordPress editor kan du klikke på “Indlæg indstillinger” for at fjerne højre sidebjælke. Og mens dette giver dig adgang til endnu mere af din skærm, er det lidt halvt inde imellem den aktuelt tilgængelige distraktionsfri skrivefunktion. Vi forsøgte at bruge Shift + Alt + W til at starte det i Gutenberg editor, men det ser ikke ud til at fungere endnu. Det kunne være, at de ikke har tilføjet dette endnu. Men vi er helt sikre på, at de vil, da der sandsynligvis er et par mennesker, der bruger dette.

Skjul postindstillinger (halvvejs der til distraheringsfri skrivemåde)

Skjul postindstillinger (halvvejs der til distraheringsfri skrivemåde)

For at skifte mellem visuel editor og tekst editor (kode), er der nu en dropdown øverst til venstre. Du vil bemærke, at der nu er HTML-kommentarer i begyndelsen og slutningen af hver blok. For eksempel vil følgende give dig mulighed for at oprette en tekstblok.

<!-- wp:core/text --> <!-- /wp:core/text -->
Dette giver dig mulighed for at oprette blokke direkte fra tekstedigeringsfunktionen. Men det tilføjer også meget mere rod end du sandsynligvis er vant til, hvis du redigerer i denne tilstand.

Gutenberg teksteditor

Gutenberg teksteditor

Når du fremhæver over en blok, er der muligheder for nemt at flytte den op eller ned med pilene, slette den eller gå ind i blokindstillingerne. Dette ligner meget de kontrolmetoder, der er tilgængelige for dig på Medium.

Arbejder med Gutenberg blokke

Arbejder med Gutenberg blokke

Vi blev også overrasket over, hvor godt det fungerede på mobil, lige ud af boksen. Hvis du har brug for at lave et hurtigt billede eller tilføje et afsnit, før du offentliggør et indlæg under farten, ser det ud til, at Gutenberg vil gøre det meget nemt.

Gutenberg redaktør mobil

Gutenberg redaktør mobil

En af de første ting, du sikkert vil bemærke, er, at TinyMCE værktøjslinjen du har været vant til at se i årevis, nu er væk. Det erstattes nu med en rullemenu, hvis du klikker på knappen “Indsæt”. Nå, men det er fordi det ser ud til, at Gutenberg forsøger at slippe af med sin afhængighed af TinyMCE integrationen. Eller gør de?

TinyMCE er ikke mere

TinyMCE er ikke mere

Her er hvad Matt Mullenweg havde at sige om det.

“Hvad vi forsøger at gøre, er at skifte det, så du kun skal lære om blokke en gang, og når du lærer om billedblokken, kan det være i et indlæg, i en sidebjælke på en side, i en brugerdefineret posttype, og det vil fungere præcis på samme måde. Hvad der er integreret med det, lad os sige et plugin, der bringer dine Google Fotos eller din Dropbox i, som nu også fungerer overalt. “- Matt Mullenweg (src: WP Tavern)

Men Andrew Roberts, projektlederen på TinyMCE-holdet, nåede også ud til os og rydde op i nogle ting med hensyn til hvad han skete med TinyMCE og Gutenberg.

Jeg har været på Gutenberg-holdet siden starten. Det har været en fælles indsats. Det er sandsynligvis værd at bemærke, at TinyMCE kerneredigeringsmotor er den drivende “redigerbare” komponent, som igen styrker de fleste blokke. Tabelblokken f.eks. Det vil sandsynligvis fortsætte i overskuelig fremtid.

Også den klassiske tekstblok er i det væsentlige TinyMCE-editoren. Hvor meget fremtrædende det er, er sandsynligvis afhængig af tilbagemelding fra samfundet. Der er faktisk en trækforespørgsel (# 1394), der i virkeligheden gør Gutenberg til en wrapper for den ‘gamle’ editor, så eksisterende TinyMCE-plugins og knapper ville fungere. Forbliver at blive set, hvis det bliver inkluderet.

Uanset det er det sandsynligt, at WP og TinyMCE Core-teamene vil arbejde sammen for at sikre, at en mere brugervenlig brugeroplevelse i Word-bearbejdning lever i WordPress. Selv om det til sidst bliver et plugin.

På en relateret note har en af ​​grundene til, at vi har arbejdet på Gutenberg-projektet med det fremragende Gutenberg-team, været at bringe disse koncepter til det bredere TinyMCE-samfund i løbet af de næste 12 måneder. Det vil gøre det muligt for dig at bringe blokbaserede redigeringsbegreber ind i din egen brugerdefinerede applikation. – Andrew Roberts

Nedenfor er et par nye blok tilføjelser vi mente var ret cool.

Tabelblok og tekstkolonneblok

Enkle tabeller er meget lettere nu, da du kan indsætte dem som blokke i editoren. Tidligere måtte du enten bruge en tredjeparts plugin eller HTML kode. I øjeblikket kan du kun tilføje et 2×2 bord med indsætningsindstillingen, og du kan ikke style det uden at gå ind i tekstvisningen. Selv om vi til sidst antager, at du vil kunne gøre alle disse ting fra den visuelle editor.

Gutenberg tabeller

Gutenberg tabeller

De har også tilføjet evnen til at tilføje lydhøreste tekstkolonneblokke, hvilket er fantastisk! I øjeblikket kan du vælge mellem et 2, 3 og 4 kolonne layout. Responsive kolonner i WordPress har altid været en smerte i fortiden og kræver normalt et tredjeparts plugin for at kunne fungere korrekt.

Gutenberg Kolonne

Gutenberg kolonner

Live HTML Block

De har også det, vi kalder en levende HTML-blok. Du kan indsætte din kode og derefter se et eksempel fra højre inden for blokken. Dette er faktisk en smuk, kølig ide og kan faktisk forhindre, at nogle af os bliver nødt til at skifte frem og tilbage mellem visuelle editor og tekstredigeringsfunktioner.

HTML block i Gutenberg editor

HTML block i Gutenberg editor

Træk og slip billeder

Som ved Gutenberg 0.5.0 kan du nu trække og slippe billeder direkte ind i en billedblok, ligesom du er vant til med den visuelle editor. Der er dog en falsk effekt, når du gør dette, hvilket er ret mærkeligt. Vi kunne nemt se dette være et problem.

Drag and drop billeder

Drag and drop billeder

Du kan også tilføje yderligere CSS-klasser til bestemte blokke.

Tilføj CSS klasse

Tilføj CSS klasse

Seneste blokke

Da alle blokke blev indbygget i Gutenberg-editoren, og nok mange flere vil komme, tilføjede de “Seneste blokke” for at forsøge at hjælpe med at fremskynde indsættelsesprocessen.

Seneste blokke

Seneste blokke

Dæk tekstindstillinger

Som ved Gutenberg 0.9.0 introducerede de også nogle nye visuelle stilarter og muligheder for dækningstekst. Du kan nemt ændre skriftstørrelsen, dreje den til en Drop Cap, og ændre farven med deres nye brugerdefinerede farvepaletkomponent.

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Tjek vores funktioner
Gutenberg cover tekst

Gutenberg cover tekst

Slash Autofuldførelse

En cool funktion tilføjet i Gutenberg 1.1.0 er evnen til at bruge autofuldførelse til at indsætte blokke. For dem af os, der bruger Slack dagligt, er dette en meget velkendt måde at hurtigt formatere indhold, som du ønsker det. At have mulighed for at minimere klik og bruge mere af tastaturet er altid en god ting!

Gutenberg autofuldforelse

Gutenberg autofuldførelse (Img src: WordPress.org)

Indholdsfortegnelse og ankerstøtte

De har også tilføjet en indholdsfortegnelse på sidepanelet. De er klikbare links, så du nemt kan springe til et afsnit i din artikel. Dette kan komme til nytte, når du skriver et langt formularindhold.

Gutenberg indholdsfortegnelse

Gutenberg indholdsfortegnelse

En anden funktion, du nu kan bruge på blokke, er ankre. Dette er faktisk ret spændende og noget, der har været nødvendigt i kernen i lang tid. Tilføjelse af ankre giver dig mulighed for derefter at linke direkte til en bestemt sektion eller overskrift i artiklen. Dette er fantastisk til deling, såvel som at skabe hoppe til menuer i SERP’er.

Gutenberg ankerstøtte

Gutenberg ankerstøtte

Ord og blok tæller

De fleste af os er vant til at se det samlede ordtal i bunden af WYSIWYG-editoren. Nå, i Gutenberg 1.2.1 har de tilføjet dette som en lille informativ popup, du hurtigt kan se. Du kan se det samlede antal ord, antal blokke og antal overskrifter.

Gutenberg ord og blok tæller

Gutenberg ord og blok tæller

Træk Quotes Block og New Alignment Options

Udover at have standardblokquote, som vi har brugt i årevis, har de også et nyt pull quote. Og ja, træk citater er forskellige. Det er også rart at se nogle variationer på placeringen af blokkene. I årevis har standard visuelt editor givet dig mulighed for at justere venstre, justere center, justere højre og tildele ingen justering. Med Gutenberg WordPress editor kan du også justere bredt (som vist nedenfor) og justere fuld bredde.

Gutenberg træk citat justeret bredt

Gutenberg træk citat justeret bredt

Knap

Der er også en indbygget metode til at tilføje en simpel knap. Selvom der ikke er så mange muligheder her endnu, er det rart at se, da mange bloggere og udgivere har brug for lettere måder at tilføje opkald til handlinger til deres blogs indlæg. Lige nu skal du bruge HTML eller stole på en 3rd party-knap/shortcode plugin.

Gutenberg knap

Gutenberg knap

Indlejring af indstillinger

Hvis du ønskede mere let tilgængelige indlejringsmuligheder, ja, så får du helt sikkert dit ønske opfyldt! Gutenberg gør det nemt at indlejre medieindhold, hvad enten det er YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit og mange flere. Mens du kunne indlejre alle disse før, forstod mange ikke dette, fordi det ikke var nævnt i den visuelle editor. Kombineret med de nye blokoplevelses- og justeringsmuligheder er vi ikke sikre på, hvad der virkelig kan gøres bedre. Selvom de måske skal omorganisere tingene fremad, da det let kunne blive rodet.

Gutenberg embed muligheder

Gutenberg embed muligheder

Fordele ved Gutenberg WordPress Editor

  •   At skrotte *nogle* afhængigheder af TinyMCE er en god ting efter vores mening. Vi vil gerne se en strammere integration mellem kerne, temaudviklere, plugins og editoren.

  • For udgivere, der foretrækker den nyere redigering af medium stil, vil de højst sandsynligt elske WordPress Gutenberg-editoren.
  • Gutenberg giver en mindre distraherende oplevelse med mere skærmrum.
  • Blokke er sjove at bruge, og de nye justeringsmuligheder er et skridt fremad for skærmbilleder med større opløsning og templater med fuld bredde og lydhør.
  • Fungerer allerede arbejder godt på mobil, og i fremtiden kan vi faktisk se folk udnytte dette meget mere. Skal du foretage en hurtig redigering på din telefon, mens du er på farten? Intet problem.
  • Evnen til tema og plugin-udviklere til at oprette deres egne brugerdefinerede blokke.
  • Nemmere at bruge til begyndere.

En anden ting, der fangede vores øje, var i Gutenberg 0.4.0 de nævnte i deres udviklingslogfiler, der tilføjede en API til håndtering af indsat indhold. (Målet er at have specifik håndtering til at konvertere Word, Markdown, Google Docs til native WordPress-blokke.) Dette ville være fantastisk. Lige nu er kopiering fra Google Docs til WordPress helt ødelagt.

Ulemper ved Gutenberg WordPress Editor

Og her er et par ulemper, vi ser i den nuværende Gutenberg-editor. Husk, det er stadig i testfasen, så mange af disse ting vil sandsynligvis blive rettet eller tilføjet.

  • Det mangler for øjeblikket Markdown support.
  • Mens vi også nævner at det er lettere at bruge til begyndere, kan vi også se dette som værende sværere for nogle at lære.
  • Fra oktober 2017 støtter Gutenberg nu metakasser. Dette er dog kun første støtte, og det vil kræve, at udviklere hopper om bord. Det er dog et skridt i den rigtige retning. Du kan i det mindste tilpasse dine Yoast SEO-indstillinger nu. ?
Gutenberg meta bokse

Gutenberg meta bokse

  • Understøtter ikke reagerende kolonner endnu. Vi håber virkelig, det kommer. En masse gange er dette en grund til, at folk installerer visuelle builder plugins eller shortcode plugins, er at få søjle funktionen alene. Det er helt sikkert tid til kolonner at være i kernen!
  • Med så mange temaer og plugins derude, vil kompatibilitet bagud være et stort problem fremad. Faktisk vil der sandsynligvis være tusindvis af udviklere, der nu skal gøre en masse arbejde, som dem, der har integrationer med TinyMCE. Ud af alle WordPress opdateringerne vil det nok være en, der får mest muligt arbejde for udviklere. Selv om der måske kommer en wrapper, der muliggør TinyMCE-kompatibilitet bagud. Se pull request # 1394.
  • Nogle er bekymrede for Gutenbergs tilgængelighed. Joost de Valk, udvikleren af Yoast SEO bragte denne bekymring op. Sørg for også at tjekke dette indlæg om at bruge Gutenberg med en skærmlæser.

Udviklere er begyndt at udtrykke deres bekymringer med Gutenberg. Ahmad Awais har også udgivet en Gutenberg boilerplate for at hjælpe WordPress tema og plugin udviklere kick-start deres udvikling med Gutenberg. Værd at tjekke ud.

Og mange af jer undrer sikkert på, vil Gutenberg være valgfri eller ej? Svaret er nej. Når de uddelegerer Gutenberg officielt i WordPress-kernen, kan du ikke slå den af. Da dette bliver den officielle editor for WordPress. Der er dog et gratis plugin kaldet Classic Editor, som du kan bruge til at gendanne den gamle postredigerer. Men brug dette som et middel til en ende.

Vi anbefaler også at tjekke dette flotte indlæg på Gutenberg myth-busting, som kan svare på eventuelle yderligere spørgsmål, du måtte have.

Prøv Gutenberg Demo

Vil du lege med Gutenberg uden at installere den? Tjek Frontenberg, en begrænset front-end demo af WordPress Gutenberg editor.

Resumé

Alt i alt var vi helt imponerede over den nye Gutenberg WordPress editor, det er bestemt noget, vi er spændte på for fremtiden. Vi opfordrer alle til at gribe en kopi af det fra WordPress-depotet og installere det på et dev- eller staging-websted. Dette er vores chance for at hjælpe med at opbygge redaktøren, som vi alle har ønsket. Vi kan have den samme oplevelse Medium folk gør, men i vores foretrukne CMS! Holdet her hos Kinsta vil helt sikkert tage lidt tid at hjælpe med at give feedback.

Har du prøvet Gutenberg endnu? I så fald vil vi gerne høre dine tanker, både gode og dårlige.