Den nuvarande visuella redigeraren för WordPress har inte fått många förändringar under åren och har för det mesta förblivit densamma. Även om detta inte är en dålig sak tycker många att det är dags för en förändring. Andra plattformar som Medium eller Ghost ger en riktigt unik och uppfriskande upplevelse för författare, så varför kan inte WordPress? Tja, många bidragsgivare och volontärer har arbetat med den nya Gutenberg WordPress-redigeraren bakom kulisserna under de senaste 6+ månaderna. Deras mål? Att göra det enkelt och roligt att lägga till rikt innehåll till WordPress. Idag kommer vi att dyka ner i den nya redigeraren och diskutera några fördelar och nackdelar.

Vad är Gutenberg?

Gutenberg är en ny redigerare för WordPress. Den är döpt efter Johann Gutenberg, som uppfann en tryckpress med rörlig trycktyp för mer än 500 år sedan. Den nuvarande visuella redigeraren kräver en hel del av oss att med att använda kortkoder och HTML för att få saker att fungera. Deras mål är att göra det lättare, särskilt för dem som just har börjat med WordPress. De omfamnar ”små block” och hoppas kunna lägga till mer avancerade layoutalternativ. Du kan kolla in det officiella exemplet. För att vara rättvis mot utvecklarna och laget som arbetar med detta är det viktigt att notera att detta för närvarande är i beta-och testfasen, det är inte redo att köras på produktionssidor ännu. Men vi ville dyka in och se för oss själva vad all hype handlar om. Vi kommer att se till att hålla det här inlägget uppdaterat allteftersom förbättringar och ändringar släpps. Det verkar som om Matt Mullenweg (grundaren) hoppas få 100 000 aktiva installationer innan detta officiellt kommer att slås samman med WordPress-kärnan. Vilket är vettigt, eftersom detta kommer att lösa en hel del buggar, frågor, och låta dem bearbeta nya idéer och önskemål om funktioner.

Eftersom Gutenberg fortfarande är i testfasen uppmuntrar teamet som arbetar med det människor att prova det och lämna kommentarer och feedback i WordPress supportforum eller öppna ett ärende på GitHub. Eller så kan du gå med i de diskussioner som äger rum i #core-editor på WordPress-kärnans Slack. Gutenberg kommer att levereras med WordPress 5.0.

Hur man installerar Gutenberg

I skrivande stund har Gutenberg-pluginet lite över 20 000 aktiva installationer med över 290 000 totala nedladdningar och ett betyg på 2.5 av 5 stjärnor. Det kräver också WordPress version 4.8 för att använda det.

Gutenberg WordPress plugin

Gutenberg WordPress plugin

Du kan ladda ner den senaste versionen av Gutenberg från WordPress-arkivet eller genom att söka efter den i din WordPress-panel under ”Lägg till nya” plugin. Återigen rekommenderar vi att du installerar detta på en testplats eller använder värdens staging-miljö.

Installera Gutenberg WordPress plugin

Installera Gutenberg WordPress plugin

Utforska Gutenberg

När du har installerat Gutenberg ser du länkar under dina inlägg som låter dig öppna Gutenberg-redigeraren. De ersätter inte standard WordPress-redigeraren, vilket är en bra sak enligt vår mening, eftersom du under testfasen kan du byta fram och tillbaka. Från och med den senaste versionen stöder den nu anpassade sidtyper och sidor också.

Gutenberg länk på inlägg

Gutenberg länk på inlägg

Viktigt: När WordPress 5.0 släpps kommer Gutenberg att vara standardredigeraren (#41316), men du kommer fortfarande att ha möjlighet att installera den klassiska redigeraren om du stöter på kompatibilitetsproblem (som ses i den nya informationen som kommer nedan).

WordPress 5.0 Gutenberg kommentar

WordPress 5.0 Gutenberg kommentar

Gutenberg lägger till en ny meny i din WordPress-panel som innehåller en demo (som ses nedan) och möjligheten att skapa ett nytt inlägg. Återigen är den här menyn förmodligen bara för teständamål, som du kan se ser den visuella redigeraren ganska annorlunda ut än den du förmodligen är van vid. Den har en mycket liknande känsla som Medium, vilket vi tycker är bra.

Gutenberg redigerare demo

Gutenberg redigerare demo

Om du tittar på både Gutenberg-redigeraren och den nuvarande visuella redigeraren sida vid sida (Klicka för att förstora) kan du se hur mycket mer skrivutrymme Gutenberg har, särskilt på mindre skärmar. För människor som skriver på bärbara datorer, kommer Gutenberg att bli en välkommen förändring! Det är verkligen inriktat på att ”skriv först” och försöker ge en mindre distraherande miljö.

Jämförelse mellan Gutenberg vs nuvarande redigerare

Jämförelse mellan Gutenberg vs nuvarande redigerare

I Gutenberg-redigeraren kan du klicka på ”Inläggsinställningar” för att ta bort det högra sidofältet. Och medan detta ger dig tillgång till ännu mer av din skärm är det ungefär halvvägs mellan det för närvarande tillgängliga distraktionsfria skrivläget. Vi försökte använda Shift+Alt+W för att starta det i Gutenberg men det verkar inte fungera ännu. Det kan vara så att de inte har lagt till detta ännu. Men vi är ganska säkra på att de kommer göra det, eftersom det förmodligen finns en hel del människor som använder detta.

Dölj inläggsinställningar

Dölj inläggsinställningar (halvvägs till distraktionsfritt skrivläge)

För att växla mellan visuella redigerare-läget och textredigeraren (kod) finns det nu en rullgardinsmeny längst upp till vänster. Du kommer att märka att det nu finns HTML-kommentarer i början och slutet av varje block. Till exempel skulle följande tillåta dig att skapa ett textblock. Detta gör att du kan skapa blocken direkt från textredigeringsläget. Men det lägger också till mycket mer skräp än du förmodligen är van vid om du redigerar i det här läget.

Gutenberg textredigerare

Gutenberg textredigerare

När du markerar över ett block finns det alternativ för att enkelt flytta det upp eller ner med pilarna, ta bort det eller gå in i blockets inställningar. Detta är mycket likt de kontroller som är tillgängliga för dig på Medium.

Arbeta med Gutenberg-block

Arbeta med Gutenberg-block

Vi blev också förvånade över hur bra det fungerade på mobilen direkt utan att behöva göra något särskilt. Om du behöver infoga en bild snabbt eller lägga till ett stycke innan du publicerar ett inlägg på språng, ser det ut som Gutenberg kommer att göra det väldigt enkelt.

Gutenberg-redigeraren på mobilen

Gutenberg-redigeraren på mobilen

En av de första sakerna du förmodligen kommer att märka är att TinyMCE-verktygsfältet du har varit van vid att se i flera år nu är borta. Den ersätts nu med en rullgardinsmeny om du klickar på ”Infoga”. Det beror på att Gutenberg försöker bli av med sitt beroende av TinyMCE-integrationen. Eller gör de det?

TinyMCE finns inte mer

TinyMCE finns inte mer

Här är vad Matt Mullenweg hade att säga om det.

”Vad vi försöker göra är att flytta det så att du bara behöver lära dig om block en gång och när du lärt dig om bildblocket, det kan vara i ett inlägg, i ett sidofält, på en sida, i en anpassad posttyp, kommer det att fungera exakt på samma sätt. Vad som än är integrerat med det, låt oss säga ett plugin som tar in dina Google-bilder eller din Dropbox, det kommer nu fungera överallt också.”– Matt Mullenweg (källa: WP Tavern)

Men Andrew Roberts, projektledaren för TinyMCE nådde också ut till oss och klarade upp några saker med avseende av vad som händer med TinyMCE och Gutenberg.

Jag har varit med i Gutenberg-teamet sedan starten. Det har varit en gemensam insats. Det är förmodligen värt att notera att TinyMCEs kärnredigeringsmotor driver den ”redigerbara” komponent som i sin tur driver de flesta av blocken. Tabellblocket till exempel. Det kommer sannolikt att vara kvar under överskådlig framtid. Det klassiska textblocket är också i huvudsak TinyMCE-redigeraren. Hur framträdande detta blir är förmodligen beroende av feedback från communityt. Det finns faktiskt en Pull Request (#1394) på gång som i huvudsak gör Gutenberg till ett omslag för den ”gamla” redigeraren så att befintliga TinyMCE plugins och knappar skulle fungera. Återstår att se om det blir inkluderat. Oavsett, det är troligt att WP och TinyMCE kärnteam kommer att arbeta tillsammans för att säkerställa att en mer ordbehandlingslik användarupplevelse på WordPress. Även om det så småningom blir ett plugin. Relaterat, har en av anledningarna till att vi har arbetat med det utmärkta Gutenberg-teamet varit att föra dessa begrepp till det bredare TinyMCE-communityt under de närmaste 12 månaderna. Det gör att du föra in blockbaserade redigeringskoncept i din egen anpassade applikation. – Andrew Roberts

Nedan är några nya blocktillägg som vi tyckte var ganska coola.

Tabellblock och Textkolumnblock

Enkla tabeller är mycket enklare nu, eftersom du kan infoga dem som block i redigeraren. Tidigare var du tvungen att antingen använda ett 3:e parts-plugin eller HTML-kod. För närvarande kan du enkelt lägga till en 2×2-tabell med alternativet Infoga och du kan inte styla det utan att gå in i textvyn. Även om vi så småningom antar att du kommer att kunna göra alla dessa saker från den visuella redigeraren.

Gutenberg tabeller

Gutenberg tabeller

De har också lagt till möjligheten att lägga till responsiva textkolumnblock, vilket är bra! För närvarande kan du välja mellan en 2, 3 och 4 kolumnlayout. Responsiva kolumner i WordPress har alltid varit svårt tidigare och kräver oftast ett tredjeparts-plugin för att fungera korrekt.

Gutenberg kolumner

Gutenberg kolumner

Live HTML-Block

De har också vad vi kallar ett Live HTML-block. Du kan infoga din kod och sedan se en förhandsgranskning från höger i blocket. Detta är faktiskt en ganska cool idé och kan faktiskt hindra några av oss från att behöva växla fram och tillbaka mellan visuella redigerare och textredigerare-lägen.

HTML-block i Gutenberg-redigeraren

HTML-block i Gutenberg-redigeraren

Dra och släpp bilder

Från och med Gutenberg 0.5.0 kan du nu dra och släppa bilder direkt till ett bildblock, precis som du är van vid med den visuella redigeraren. Det finns dock en fade-effekt när man gör detta vilket är ganska konstigt. Vi kan lätt se att detta skulle bli ett problem.

Dra och släpp bilder

Dra och släpp bilder

Du kan också nu lägga till ytterligare CSS-klasser till vissa block.

Lägg till CSS-klass

Lägg till CSS-klass

Senaste Block

Med alla block som byggs in i Gutenberg-redigeraren, och förmodligen med många fler på vägg, lade de till ”senaste block” för att försöka hjälpa till att påskynda processen med infogning.

Senaste block

Senaste block

Omslagstextalternativ

Från och med Gutenberg 0.9.0 introducerade de också några nya visuella stilar och alternativ för omslagstext. Du kan enkelt ändra teckenstorleken, göra den till en anfang och ändra färgen med deras nya anpassade färgpaletts-komponent.

Gutenberg omslagstext

Gutenberg omslagstext

Slack Automatisk komplettering

En cool funktion som läggs till i Gutenberg 1.1.0 är möjligheten att använda Komplettera automatiskt för att infoga block. För dem av oss som använder Slack dagligen är detta ett mycket välbekant sätt att snabbt formatera innehåll som du vill ha det. Att ha möjlighet att minimera klick och utnyttja mer av tangentbordet är alltid en bra sak!

Gutenberg automatisk komplettering (bildkälla: WordPress.org)

Gutenberg automatisk komplettering (bildkälla: WordPress.org)

Innehållsförteckning och Förankringsstöd

De har också lagt till en innehållsförteckning på sidofältet. De är klickbara länkar så att du enkelt kan hoppa till ett avsnitt i din artikel. Detta kan komma till nytta när du skriver långt textinnehåll.

Gutenberg innehållsförteckning

Gutenberg innehållsförteckning

En annan funktion som du nu kan använda på block är ankare. Detta är faktiskt ganska spännande och något som har behövts i kärnan under lång tid. Genom att lägga ankare kan du sedan länka direkt till en viss sektion eller rubrik i artikeln. Detta är bra för att dela, samt skapa Hoppa till-menyer i SERPs.

Gutenberg ankarstöd

Gutenberg ankarstöd

Ord och Block-räknare

De flesta av oss är vana vid att se det totala antalet ord längst ner i WYSIWYG-redigeraren. Tja, i Gutenberg 1.2.1 lade de till detta som en liten informativ popup du snabbt kan visa. Du kan se det totala antalet ord, antalet block och antalet rubriker.

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner
Gutenberg ord och block-räknare

Gutenberg ord och block-räknare

Pullcitat-Block och nya justeringssalternativ

Förutom att bara ha standard blockcitat som vi har använt i flera år, har de också lagt till pullcitat. Och ja, pullcitat är något annat. Det är också trevligt att se några variationer på placeringen av blocken. I flera år har den vanliga visuella redigeraren gett dig möjlighet att vänsterjustera, centrera, högerjustera och ingen justering. Med Gutenberg-redigeraren för WordPress, kan du också justera bredd(som framgår nedan), och justera till full bredd.

Gutenberg pullcitat justerad bredd

Gutenberg pullcitat justerad bredd

Knapp

Det finns också en inbyggd metod för att lägga till en enkel knapp. Även om det inte finns så många alternativ här ännu är det trevligt att se, eftersom många bloggare och utgivare behöver enklare sätt att lägga till Call to action till sina blogginlägg. Just nu måste du använda HTML eller lita på en 3:e parts knapp/kortkodsplugin.

Gutenberg-knappen

Gutenberg-knappen

Inbäddnings-alternativ

Om du ville ha mer lättillgängliga inbäddningsalternativ, ja, då har du definitivt fått din önskan uppfylld! Gutenberg gör det superenkelt att bädda in medieinnehåll, oavsett om det är YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit och många fler.  Medan du kunde bädda in alla dessa tidigare insåg många inte detta eftersom det inte nämndes i den visuella redigeraren. I kombination med den nya blockupplevelsen och justeringsalternativen är vi inte säkra på vad som verkligen kunde göras bättre. Även om de kanske måste omorganisera saker allteftersom, eftersom det lätt kan bli rörigt.

Gutenberg inbäddningsalternativ

Gutenberg inbäddningsalternativ

Fördelar med Gutenberg WordPress redigerare

Här är några fördelar vi ser med den nuvarande Gutenberg-redigeraren.

En annan sak som fångade vårt öga var att i Gutenberg 0.4.0, nämnde de i sina utvecklingsloggar, att lägga till ett API för hantering av inklistrat innehåll. (Syftet är att ha specifik hantering för att konvertera Word, Markdown, Google Docs till infödda WordPress block.) Detta skulle vara fantastiskt. Just nu är kopieringen från Google Docs till WordPress helt trasig.

Nackdelar med Gutenberg WordPress redigerare

Och här är några nackdelar vi ser i den nuvarande Gutenberg-redigeraren. Kom ihåg att den fortfarande är i testfasen, så många av dessa saker kommer förmodligen att lösas eller läggas till.

Gutenberg meta-lådor

Gutenberg meta-lådor

Utvecklare har börjat uttrycka sin oro över Gutenberg. Ahmad Awais har också släppt en standardformulering för Gutenberg för att hjälpa WordPress tema- och plugin-utvecklare kick-starta sin utveckling med Gutenberg. Värt att kolla in. Och många av er undrar nog, kommer Gutenberg att vara valfri eller inte? Svaret är nej. När de lanserar Gutenberg officiellt i WordPress-kärnan, kommer du inte att kunna stänga av den. Eftersom detta kommer att bli den officiella redigeraren för WordPress. Det finns dock ett gratisplugin som heter Classic Editor som du kan använda för att återställa den gamla redigeraren. Men använd detta som ett medel för att nå ett mål. Vi rekommenderar också att du kollar in detta välskrivna inlägg om Gutenberg-myter som kan svara på eventuella ytterligare frågor du kanske har.

Prova Gutenberg Demo

Vill du leka med Gutenberg utan att installera det? Kolla in Frontenberg, en begränsad front-end demo av WordPress Gutenberg-redigeraren. För vidare läsning rekommenderar vi att du tar en titt på vår WordPress 5.0 guide: Vad är nytt i WordPress 5.0 (Så förbereder du dig för Gutenberg) Introduktion till temat Twenty Twenty.

Dessutom, om du inte är redo ännu kan du inaktivera den nya redigeraren. Här är vår guide: Så här inaktiverar du Gutenberg WordPress-redigerare.

Sammanfattning

Sammantaget var vi ganska imponerade med den nya Gutenberg WordPress redigeraren, det är definitivt något vi ser fram emot. Vi uppmuntrar alla att ladda ner en kopia av det från WordPress-arkivet och installera det på en dev eller staging-webbplats. Detta är vår chans, hörni, att hjälpa till att bygga redigeraren vi alla velat ha. Vi kan ha samma erfarenhet som Mediumfolk har, men i vårt favorit-CMS! Teamet här på Kinsta kommer definitivt att ta tid att hjälpa till att ge feedback. Har du provat Gutenberg än? Om så är fallet skulle vi gärna höra dina tankar, både bra och dåliga.


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket