Hur man använder Gutenberg (WordPress Editor)


hur man använder gutenberg blockÅr 2018 flyttade WordPress från sin länge redaktör till en som den kallade “Gutenberg”.


Till skillnad från den gamla redaktören använder WordPress-användare nu en modern drag-and-drop-blockredigerare för att bygga och anpassa webbplatser, publicera innehåll och sälja sina tjänster och produkter online.

Oavsett om du är en långvarig användare som försöker förstå den nya redaktören, eller om du är helt ny i WordPress, kommer den här guiden att lära dig repen. Du lär dig:

  • Hur Gutenberg-block skiljer sig från den klassiska redaktören.
  • Hur man använder blockbyggaren för att skapa och redigera sidor.
  • Vad Gutenberg-blocken gör.
  • Hur man låser upp extra inställningar med sidofältet.
  • Hur man använder verktygsfältet för att bli mer produktiv.

Classic Editor vs. Gutenberg Blocks

Växlingen från klassisk redaktör till Gutenberg-block är ett stort steg för WordPress. Låt oss titta på hur redaktören har utvecklats.

Den klassiska WordPress Editor

Från 2003 till 2018 gav WordPress sina användare en grundläggande textredigerare.

Wordpress-Classic-Editor

Den klassiska WordPress-redigeraren var din typiska WYSIWYG (“vad du ser är vad du får”) redaktör.

Med andra ord, du skrev ditt innehåll i det öppna fältet, formaterade det med hjälp av verktygsfältet och det är mer eller mindre hur din text såg ut på din webbplats.

Wordpress-WYSIWYG-Editor

Det är ett tillräckligt enkelt gränssnitt och ett som många WordPress-användare vände sig med under åren. Men det hade sina begränsningar.

Till exempel:

Wordpress-Sida-Exempel

Så här kommer innehållet att visas på webbplatsen när det publicerats. Men du skulle bara kunna bekräfta att allt översatt okej från redaktör till sida med funktionen ”Förhandsvisning”.

Det fanns inget sätt att skriva innehåll inom sidans faktiska sammanhang. Dessutom krävde det ett visst kännedom om HTML eller ett över-beroende av plugins för att kunna bygga mer avancerade mönster och layouter.

Under 2018 avsåg WordPress att korrigera dessa begränsningar genom att släppa den nya WordPress-redigeraren (dvs. Gutenberg).

Gutenberg Block Editor

Den nya WordPress-redigeraren är en dra-och-släpp-blockredigerare.

Gutenberg

Detta innebär att innehåll inte längre skrivs i en huvudredaktör. Enskilda block tappas på plats för att bygga ut innehållet på en sida.

Gutenberg-Blocks

När varje block är valt kommer det med ett unikt verktygsfält. Detta möjliggör en mer strömlinjeformad och anpassad redigeringsupplevelse eftersom du bara har visat de redaktionella kontrollerna du behöver vid den tiden.

Gutenberg-redaktören har också gjort det mycket lättare att lägga till de typer av innehåll och layouter som annars skulle vara för tidskrävande eller svårt för en WordPress-nybörjare att göra på egen hand.

Fler-Gutenberg-Block-Exempel

Dessutom finns det inget gissningsspel längre. Det du skapar inom blockredigeraren är hur det visas på din webbplats. Teckensnitt, styling och layouter matchar alla:

Wordpress-sida-Exempel-med-Gutenberg

Är en WordPress Editor bättre än den andra?

När det gäller det som är bättre – den klassiska redaktören eller Gutenberg – måste du ta reda på det själv.

Även om WordPress automatiskt kommer med Gutenberg, kan användare installera Classic Editor-plugin om de inte är redo att flytta till blockredigeraren ännu.

Det finns också andra redigeringstilläggsalternativ tillgängliga. Elementor och Beaver Builder är två av de mer populära dra-och-släpp-redigeringsalternativen, Blockera kategorier
även om de passar bäst för professionella designers och utvecklare som behöver låsa upp fler funktioner.

Låt oss nu ta ett djupare dyk in i Gutenberg och ge dig en bättre uppfattning om vad du kan förvänta dig av WordPress drag-and-drop-redigeraren.

Hur man använder Gutenberg Block Editor

Låt oss granska Gutenberg-blockredigeraren genom att ställa in en ny sida (eller inlägg).

Börja med WordPress-menyn till vänster på skärmen. Om du vill skapa en ny webbsida, håll muspekaren över “Sidor” och välj “Lägg till ny”. Om du vill skapa ett nytt blogginlägg, håll muspekaren över “Inlägg” och välj “Lägg till nytt”.

Wordpress-add-new-page

Lägg till en titel

Med din nya sida eller inlägg skapat, ge den en titel i blocket “Lägg till titel”:

Gutenberg-Titel-Block

Skapa ditt första block

Paragrafer utgör vanligtvis huvuddelen av innehållet vi lägger på en webbsida, varför det första blocket som Gutenberg ger oss alltid är ett avsnittblock:

Gutenberg-New-Punkt-Block

Om du vill börja med ett stycke, lägg till markören i det tomma blocket som säger “Börja skriva eller skriv / för att välja ett block”. När du skriver fyller ditt innehåll blocket.

Anpassa innehåll i ett block

För att anpassa stilen på ditt stycke använder du verktygsfältet som visas precis ovanför det.

Inriktning

Med de flesta Gutenberg-block har du möjlighet att ändra inriktningen på innehållet i blocket:

Gutenberg-Alignment

Vänster är standard. Du kan också välja att mittjustera eller högerjustera ditt innehåll.

formatering

Varje gång det finns text i ett block kan du formatera den med fetstil:

Gutenberg-Punkt-Bold

Gör texten kursiv:

Gutenberg-Punkt-Italic

Eller lägg till en hyperlänk:

Gutenberg-Punkt-Link

Om du vill öppna dina länkar i ett nytt webbläsarfönster klickar du på nedpilen i hyperlänkfältet. När du är klar med dina ändringar klickar du på “Retur” -pilen för att spara länken.

Ytterligare stilalternativ

Om du klickar på nedåtpilen i verktygsfältet hittar du ytterligare alternativ för textstylering:

Gutenberg-More-text-alternativ

“Kod” utformar din text som om den var skriven i en kodredigerare:

Gutenberg-Punkt-kod

“Inline image” gör att du kan linda din text runt en bild:

Gutenberg-Punkt-inline

Som ni ser är detta inte ett effektivt sätt att para bilder och text bredvid varandra i Gutenberg. (Vi granskar ett annat sätt att göra det senare.)

Det sista alternativet här låter dig lägga till en genomströmning genom markerad text:

Gutenberg-Punkt-Struken

Fler blockalternativ

Den sista knappen i verktygsfältet visar alltid fler blockalternativ:

Gutenberg-Mer-Block-alternativ

Dessa alternativ kommer att vara desamma oavsett vilken typ av block du redigerar.

Låt oss snabbt sammanfatta vad dessa gör:

  • Dölj blockinställningar: Försvinner sidofältet till höger.
  • Duplicera: Gör en exakt kopia av detta block.
  • Sätt in innan: Lägger till ett nytt tomt block ovanför detta.
  • Sätt i efter: Lägger till ett nytt tomt block under det här.
  • Redigera som HTML: Förvandlar blocket till en kodredigerare om du vill skriva i HTML.
  • Lägg till återanvändbara block: Sparar blocket så att du kan återanvända det någon annanstans på webbplatsen.
  • Ta bort blocket: Raderar blocket.

Transformera block

Det finns en annan knapp i verktygsfältet som du måste vara medveten om:

Gutenberg-Switch-Blocks

Men den här knappen ser inte alltid så ut, så kom ihåg att den första knappen låter dig förvandla det aktuella blocket till ett relaterat.

Till exempel kan du förvandla ett textbaserat block som stycke till rubrik, lista eller citat. Du kan dock inte förvandla något som ett stycke till en bild eller en separatorrad. Du behöver ett nytt block för det.

Lägg till ett nytt block

För att lägga till ett nytt block på din sida har du ett antal alternativ.

Sätt in före / efter

Du har redan sett alternativen Infoga före / Infoga efter i blockets verktygsfält. Det är ett sätt att göra det.

Om du klickar bort från ditt befintliga block och håller muspekaren över toppen av det ser du ett litet plustecken visas:

Gutenberg-add-Block-Cross

När du klickar på det kommer det att avslöja dina block:

Gutenberg-add-Block-plustecknet

Välj det du vill lägga till det nya blocket ovanför det du redan har.

Om du håller muspekaren över den nedre delen av blocket ser du samma plustecken. Den enda skillnaden är att det kommer att lägga till ett nytt block under det du har.

Använd ditt tangentbord

Ett annat sätt att lägga till ett nytt block är genom att trycka på “Return” -tangenten på tangentbordet:

Gutenberg-add-Block-Enter

Detta kommer omedelbart att lägga till ett nytt stycken block på sidan.

Om du vill ändra det till ett annat slags block kan du använda plustecknet till vänster om det nya blocket:

Gutenberg-Change-New-Block

Eller så kan du skriva en snedstreck (/) följt av namnet på det block du vill använda:

Gutenberg-Change-Block-Slash

Om du till exempel vill lägga till en bild skriver du “/ image”. Blockalternativet kommer att fyllas automatiskt när du skriver det matchande namnet.

Lägg till ett block från verktygsfältet

Du kan alltid bara använda den grundläggande add block-funktionen i verktygsfältet:

Gutenberg-add-Block

Bläddra igenom alternativen eller skriv namnet på blocket du letar efter.

Flytta ett block

När du har börjat skapa block kan du kanske välja att du inte är nöjd med ordningen i vilken de visas. Eller kanske du lagt till ett block ovan när det borde ha varit under.

Det finns inget behov av att ta bort block eller klipp ut och klistra in innehåll från ett block till ett annat. Lösningen är enkel.

Gutenberg är en drag-and-drop block editor. Detta innebär att du enkelt kan flytta dina block där du vill.

Det finns två sätt att göra detta.

Använd flyttapilarna

Det första alternativet är att använda flyttpilarna på vänster sida av varje block. Håll muspekaren över blocket du vill flytta så hittar du en upp- och ned-pil:

Gutenberg-move-Pilar

Om allt du vill göra är att flytta ett block upp eller ner en gång, fungerar det här alternativet bra.

Gutenberg-moved-Block

Använd dra-och-släpp

Om du vill göra ett mer drastiskt omarrangemang av dina block bör du använda dra och släpp.

Den ligger på samma plats som pilarna. Håll muspekaren över blocket du vill flytta och ta tag i punkterna som visas i mitten. Du kommer att se din markör ändras till en hand när du gör det:

Gutenberg-Grab-dra-och-släpp

När du flyttar blocket till en ny del av sidan, se till att du ser en mörk linje innan du tappar den:

Gutenberg-Move-Block

Detta låter dig veta att du flyttar blocket till tillgängligt utrymme. Utan den linjen fungerar inte dra och släpp.

Radera ett block

Om du bestämmer dig för att ta bort ett block helt, har du också alternativ med detta.

Du har sett en av dessa redan. Det finns i ditt blocks ytterligare alternativ. Klicka bara på “Ta bort block” så raderas det.

Du kan alltid ta bort det på ett gammaldags sätt. Placera markören i blocket och använd tangentbordets “Delete” -knapp för att ta bort den.

Observera dock att om det är ett textbaserat block måste du ta bort innehållet först innan du kan ta bort det på detta sätt. För allt annat – en bild, inbäddad widget, etc. – kan du bara använda “Radera” -tangenten.

Du kan också markera blocket (genom att dra markören över det) och sedan trycka på “Radera” -tangenten. Detta är användbart om du vill markera och ta bort mer än ett block åt gången.

Skapa ett återanvändbart block

Återanvändbara block är praktiska när du vill skapa ett element som kan användas över hela världen, som ett reklamblock för dina blogginlägg eller en uppmaning till handling.

Gutenberg-Skapa-Åter-Block

Istället för att försöka återskapa blocket på de sidor det behöver gå på, öppna dina blockalternativ och klicka på “Lägg till återanvändbara block”. Ge det sedan ett namn:

Gutenberg-Name-Åter

När du har sparat kommer du att kunna hämta och använda den på samma sätt som någon av Gutenbergs block. Du hittar den i en ny kategori som heter “Återanvändbar”:

Gutenberg-Åter-Kategori

En rundtur i Gutenbergblocken

Den klassiska WordPress-redaktören lämnade mycket att önska när det gäller att hjälpa användare att skapa komplexa innehåll och layouter. Gutenberg block blockerar den vägspärren.

Låt oss bekanta oss med blocken:

Blockera kategorier

WordPress har gjort ett trevligt jobb med att organisera sina block i kategorier.

Vanliga block

Dessa är dina vanliga block:

Common-Blocks

Grundtext och visuella element som du använder på en sida kommer att finnas här.

Formatera block

Dessa är dina formateringsblock:

Formaterings-Blocks

De flesta av dessa är utvecklarvänliga block, så du kanske inte behöver så mycket. Bordet och citatblocken kan komma till nytta.

Layoutblock

Dessa är dina layoutblock:

Layout-Blocks

Om du vill lägga till pauser till ditt innehåll (som med stort utrymme eller separatorrad) eller specialelement (som en knapp), hittar du dessa saker här.

Widgets blockerar

Dessa är dina widgetar:

Widgets-Blocks

För det mesta är det dessa element som bör gå in i din bloggs sidofält, inte visas på dina sidor. De enda undantagen du hittar är block skapade av andra plugins, som detta WPForms-exempel.

Bäddar in block

Dessa är dina inbäddningar:

Inbäddningar-Blocks

Du använder dessa för att ta med innehåll från andra plattformar. Det här är bra för att bädda in saker som YouTube-videor, SoundCloud-klipp och Twitter-inlägg.

De vanligaste Gutenberg-blocken

Som ni ser finns det dussintals Gutenberg-block tillgängliga. Som sagt, det finns vissa element som alla använder för att skapa sidor eller inlägg i WordPress, så börja med att lära dig grunderna:

Avsnitt Block

Använd avsnittblocket för att lägga till vanlig text på din sida.

Punkt-Block

Rubrikblock

Använd rubrikblocket för att lägga till en rubrik på din sida.

Rubrik-Block

Dessa låter dig introducera nya ämnen på sidan och samtidigt göra ditt innehåll lättare att läsa. Med knapparna H2, H3 och H4 kan du också skapa en hierarki till sidrubrikerna.

Listblock

Använd listblocket för att lägga till en punktlista eller numrerad lista på sidan:

List-Block

Detta är också användbart för att förbättra läsbarheten.

Bildblock

Använd bildblocket för att lägga till en bild på din sida.

Bild-Block

Du kan ladda upp en bild från din enhet eller välja en som redan finns i ditt mediebibliotek.

Video Block

Använd videoblocket för att bädda in en bild på din sida.

Video-Block

Du kan ladda upp en videofil, välja en från ditt bibliotek eller dra den in från en länk.

Eftersom videor tar mycket utrymme är det bästa alternativet att spara din fil på en videodelningsplattform som Vimeo eller YouTube. Sedan bädda in den med en länk.

Du kommer inte att använda videoblocket för det här. Sök istället efter motsvarande inbäddning.

YouTube har en:

YouTube-Bädda

Precis som Vimeo:

Vimeo-Bädda

Du bör göra samma sak för alla ljudfiler (som podcast eller ljudspår) som du vill lägga till på sidan. Använd antingen Audio-blocket eller motsvarande inbäddning (som för Spotify) för att göra detta.

Knappblock

Använd knappblocket för att rikta dina besökare eller läsare att vidta åtgärder:

Button-Block

Detta kan leda dem till: “Schema nu”, “Registrera dig”, “Läs mer” osv.

Media- och textblock

Som nämnts tidigare är alternativet Inline-bild i stycket block ett ineffektivt sätt att slå samman text och bilder. Använd istället Media och Text-blocket för att göra detta:

Media-and-Text-Block

Kolumner Block

Ett annat sätt att placera två olika block (av samma eller olika typ) bredvid varandra är att använda kolumnblocket:

Column-Block

För att lägga till ytterligare kolumner till höger eller vänster, håll muspekaren över blocken inuti kolumnen och tryck på plustecknet. Det är samma sak som att lägga till ett nytt block, bara detta kommer att lägga till dem horisontellt.

Sociala medier inbäddade block

Istället för att använda inbäddningskoden från sociala medier för att placera ett inlägg på din sida, lägg till länken till inlägget här:

Social-Media-Bädda

Det finns inbäddade block för Facebook, Twitter och Instagram, så hitta det Bädda in blocket som motsvarar ditt sociala mediapost.

Klassiskt block

Det klassiska blocket låter dig fortsätta skapa innehåll i WordPress med den klassiska redigeraren:

Gutenberg-Classic-Block

Det klassiska blocket spelar också upp varje gång en webbplats går från den klassiska redaktören till Gutenberg-redaktören. Gutenberg försöker inte automatiskt konvertera din text till sina egna block. Det sätter dem bara i det klassiska redigeringsgränssnittet.

Om du vill konvertera ditt klassiska block till Gutenberg-block, gå till “Fler alternativ” och välj “Konvertera till block”:

Gutenberg-Convert-Blocks

Det kommer att göra sitt bästa för att konvertera varje element i din redigerare till ett motsvarande block:

Gutenberg-Konverterade-Blocks

Kom bara ihåg att granska de utmatade blocken för eventuella fel innan du sparar dina ändringar.

WordPress-pluginblock

De flesta av de populära plugins som används av WordPress-användare är Gutenberg-kompatibla. I vissa fall har dessa insticksprogram skapat specialblock som dyker upp i din redigerare.

Om du till exempel använder ett plugin för kontaktformulär som WPForms, du bör hitta ett motsvarande block för det:

WPForms-Block

Skapa bara ditt formulär i plugin-programmet och leta sedan det i listrutan som anges här. Du behöver inte spåra upp och klistra in dina kortkoder längre.

Yoast, en populär SEO-plugin, är en annan som har lagt till nya block till Gutenberg:

Yoast-Blocks

WooCommerce, WordPresss e-handelslösning har gjort samma sak:

WooCommerce-Blocks

Det finns också “ultimata” Gutenberg-plugins som lägger till ett gäng nya block till din byggare Ultimate Addons för Gutenberg:

Ultimate-Addons-Gutenberg

Dessa typer av plugins utökar funktionaliteten för din blockbyggare. Om du bygger en webbplats som behöver specialelement – som Google Maps, testimonialblock eller eCommerce-funktionalitet – kan du lägga till dem i Gutenberg med plugins som dessa.

En översikt över dokumentet och blockera sidofältet

Nu när du har fått blockredigeraren låt oss vända vår uppmärksamhet på dokumentet och blockera sidofältet.

När markören finns i titelblocket eller någonstans på sidan där ett block inte finns, pekar sidofältet på dokumentinställningarna:

Dokument sidofält

Dessa låter dig kontrollera saker som status och utseende på sidan.

Här är de viktigaste du behöver veta:

Status och synlighet

Status-and-synlighetPå den här panelen kan du justera vem som kan se sidan (offentlig, privat eller lösenordsskyddad) såväl som när den publiceras (om inte omedelbart). Om du vill ta bort sidan helt. Du kan göra det här också.

PermalinkAnvänd den här panelen för att byta snigel (den identifierande delen av URL: n). Till exempel:

https://mywebsite.com/Gutenberg-blocket-builder /

Utvald bildDen visade bilden är miniatyrbilden som folk ser när dina blogginlägg dyker upp i ditt huvudbloggflöde. Det är också vad sociala medieplattformar använder när man visar förhandsgranskningar av dina länkar.

kategorier

kategorierDetta är endast tillgängligt för blogginlägg. Använd detta för att hålla dina ämnen organiserade.

Tags

TagsDetta är en annan inställning som endast är tillgänglig för blogginlägg. Använd detta för att lägga till nyckelord som visas i ditt inlägg och hjälpa läsarna att hitta innehåll i relaterade ämnen.

När markören är placerad i något av blocken på din sida (utom titeln) byter sidofältet till en blockredigerare:

Block Sidebar

Denna sidofält ger dig ytterligare redigeringsalternativ för dina block om du vill ha dem. Blocksidefältet kommer att ändras baserat på den typ av block du arbetar med.

Till exempel visar styckesidfältet redigeringsalternativ för:

Punkt-Block-Sidebar

Du kan justera storleken på din text såväl som färgen på texten eller bakgrunden på blocket. Om du vet hur du använder CSS-klasser kan du ytterligare anpassa utseendet på blocket med “Avancerade inställningar”.

Bildfältet, å andra sidan, ger dig dessa inställningar:

Bild-Block-Sidebar

Du kan lägga till alt-text till bilden (viktigt för SEO), ändra bildstorlek och länka bilden till en webbsida.

Vissa block erbjuder inga ytterligare inställningar i sidofältet som Twitter-inbäddningen:

Twitter-Block-Sidebar

Det enda du kan göra är att skapa en anpassad CSS-klass under “Avancerade inställningar”.

Nedersta raden: om du någonsin känner att du inte kan redigera ditt block helt med blockverktygsfältet, kolla i sidofältet för ytterligare alternativ.

Vad du ska göra med verktygsfältet

Den sista delen av redigeraren du behöver bekanta dig med är verktygsfältet som sitter längst upp på det:

Gutenberg-Toolbar

Det här kan se ut som bara en plats att lagra knapparna “Förhandsvisning” och “Publicera”, men det finns mycket mer du kan och skall använd verktygsfältet för.

Låt oss granska det väsentliga:

Blocks

Den första knappen i verktygsfältet är där du kan komma åt nya block:

Gutenberg-Toolbar-Blocks

Ångra göra om

De följande två knapparna låter dig ångra (pilen pekar till vänster) eller göra om (pilen pekar åt höger) den senaste ändringen du gjorde på sidan:

Gutenberg-Toolbar-Ångra

Sidinfo

För dig som vill skapa sidor som är lätta för dina besökare att söka igenom ger knappen “i” (info) dig en översikt över ditt innehåll:

Gutenberg-Toolbar-Info

Du kommer se:

  • Hur många ord har du skrivit.
  • Hur många rubriker finns det med en uppdelning av titlarna nedan.
  • Hur många stycken finns det.
  • Hur många block har du använt.

Det är ord- och rubrikräkningen som är de viktigaste informationen att fokusera på här.

Sidstruktur

Nästa del av verktygsfältet visar vart och ett av blocken du har använt för att skapa din sida:

Gutenberg-Block-Navigation

Använd detta för att direkt bläddra till det block du vill arbeta med. Detta är användbart för att redigera innehåll på längre sidor och inlägg.

Spara inställningar

Du kommer att använda dessa tre första knappar på varje sida eller inlägg du skapar:

Gutenberg-Save-inställningar

Använd “Spara utkast” för att spara dina ändringar privat medan du arbetar på en sida.

Använd “Förhandsgranska” för att se sidan på din webbplats.

Använd “Publicera” för att driva din sida till den direkta webbplatsen. När sidan har publicerats kommer denna knapp att ändras till “Uppdatera”. Använd det här för att spara och driva nya versioner av dina sidor till webbplatsen.

inställningar

När du klickar på växelikonen (inställningar) döljer eller visar den Gutenbergs sidofält. Så här ser det ut när det är inaktiverat:

Gutenberg-Toolbar-Inställningar-Disabled

Så här ser det ut när det är aktiverat:

Gutenberg-Toolbar-Inställningar-aktiverade

Fler alternativ

Den sista knappen i verktygsfältet visar ytterligare alternativ och verktyg. Använd detta om du vill anpassa din Gutenberg-arbetsyta.

Gutenberg-Toolbar-Mer-alternativ

Se

Den första uppsättningen av alternativ som hänför sig till “Visa”:

Gutenberg-Toolbar-View

“Top Toolbar” flyttar verktygsfältet ur dina block och fastnar det på toppen av skärmen:

Gutenberg-Top-Toolbar

Redigeringsalternativen ändras fortfarande baserat på det block du har valt. Den enda skillnaden är att den bara finns överst på sidan nu.

“Spotlight Mode” försvinner alla block som inte används:

Gutenberg-Spotlight-läge

Om du vill ha hjälp med att fokusera på ett block i taget är detta ett användbart verktyg för att aktivera.

”Helskärmsläge” är Gutenbergs distraktionsfria skrivläge:

Gutenberg helskärm-Mode

Den tar bort WordPress-menyerna uppe och vänster samt Gutenbergs sidofält till höger.

Editor Mode

Nästa uppsättning alternativ är för redigeringsläge.

Gutenberg-Alternativ-Editor

Som standard sätter Gutenberg användare in i “Visual Editor”.

Om du föredrar att komponera din sida i HTML kan du växla till “Code Editor”:

Gutenberg-Code-Editor

Ett mer effektivt och renare sätt att redigera dina block i HTML är dock att hantera det individuellt (eftersom du förmodligen inte behöver redigera hela sidans kod).

Du kan komma åt kodredigeraren under “Redigera som HTML”:

Gutenberg-Edit-HTML

Detta konverterar blocket till HTML:

Gutenberg-HTML-Block

Redigera det som det är lämpligt. Om du vill konvertera det tillbaka till visuellt läge öppnar du blockalternativen och väljer “Redigera visuellt”:

Gutenberg-Edit-Visuellt

Verktyg

Gutenberg kommer också med en uppsättning verktyg som gör att du kan effektivisera din upplevelse i redaktören:

Gutenberg-Tools

Det första verktyget är “Block Manager”:

Gutenberg-Block-Manager

Till skillnad från blocknavigeringsverktyget som vi såg tidigare, låter det här du inaktivera alla block du inte använder. På det sättet, när det är dags att söka efter ett nytt block, behöver du inte bläddra igenom block som du aldrig kommer att använda.

“Hantera återanvändbara block” tar dig till redigeraren för återanvändbara block:

Gutenberg-Åter-Blocks

Det är här dina sparade block lagras. Om du vill redigera föräldrakopian av blocket (eller skapa en ny helt) gör du här.

Medan Gutenberg verkligen har gjort det lättare att skapa innehåll i WordPress, kan vissa av åtgärderna bli tråkiga. Genom att använda Gutenbergs “Genvägar” kan du göra saker som ångra din senaste redigering, duplicera ett block, kursivera markerad text och spara dina ändringar med bara ditt tangentbord.

Gutenberg-snabbtangenter

Allt alternativet “Kopiera innehåll” gör är att markera och kopiera alla block på sidan. Använd det här för att skapa en ny sida som liknar innehåll och design. Gå bara till Sidor> Lägg till nytt och klistra sedan in dina block på den tomma sidan.

Det sista alternativet här kallas “Alternativ”. Men vad det verkligen gör är att du kan inaktivera vissa delar av dokumentinställningarna på sidofältet:

Gutenberg-sidebar-alternativ

Återigen, om du upptäcker att det finns vissa delar av redigeraren du inte använder (som sidattribut), inaktivera dem här så att de inte distraherar från de element du behöver använda.

Sammanfatta

Eftersom WordPress hade använt samma redaktör sedan dag 1, fanns det en viss motreaktion när Gutenberg först introducerades.

Men om du tittar på drag-and-drop-tävlingen som samlas upp runt WordPress (Wix, Shopify, Squarespace, etc.), var det dags för en förändring.

Denna redaktörsutveckling har lönat sig, vilket gör att WordPress kan betjäna användare på alla nivåer. Användarna skördar nu följande fördelar som följer med att bygga webbplatser med en blockredigerare:

  • En personlig redigeringsvy som gör dig mer produktiv.
  • Lättare att skapa och anpassa innehåll.
  • Mer avancerad skapelse av innehåll utan teknisk kunskap som tidigare behövts.
  • Återanvändbara block blockerar design och säkerställer konsistens över hela världen.
  • Enklare att lägga till och konfigurera konverteringselement (som knappar och formulär för uppmaning).
  • Populära plugins och teman är Gutenberg-kompatibla.
  • Snabbare tid att lansera.

Från och med 2022 kommer den klassiska redaktören inte längre att vara tillgänglig. Så nu är den perfekta tiden att ta reda på hur du ska få Gutenberg att fungera för dig.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me