[Vad är] WordPress Gutenberg Blocks & Hur man använder dem väl

WordPress Gutenberg-redaktören anlände med WordPress 5.0 redan i december 2018. Mer känd som "blockredaktör", den nya funktionen byter sida och skapande av inlägg från den vanliga rutan i tidigare versioner till en mer sidbyggare-liknande upplevelse.

Gutenberg blocks leverera nu ett modulärt tillvägagångssätt för innehållsskapande. I stället för att använda kod för att lägga till ett annat element på en sida kan du istället byta ut ett block. Till exempel kan du byta ut ett textblock för ett videoblock eller tabell ungefär som när du bygger en sida Beaver Builder eller Elementor. Det är en utveckling som väntat länge, men nu är det här du kommer snabbt att undra hur du någonsin skapat sidor utan det!

Gutenberg blocks

Om du uppdaterar till WordPress 5.0 och senare, och du borde göra det nu, har du märkt att användargränssnittet har gått vidare. Du ser fortfarande den traditionella sidomenyn till vänster och innehållsmenyn till höger men i mitten har allt förändrats.

Innan uppdateringen såg du en tom titel och innehållsruta där du byggde din sida eller inlägg. Nu ser du ett tomt avsnitt i mitten med ett titelblock och textblock som redan är befolkat. Den högra menyn ändras dynamiskt beroende på vad du gör. Först visar den traditionella kategori-, tagg- och funktionsbildalternativ som tidigare men nu introduceras en Block-flik.

På fliken Block kan du redigera det enskilda blocket som de sidbyggare som erbjuder mycket frihet när det gäller design. Vad du ser på fliken Block beror på blocket i fråga, men alla har möjlighet att lägga till anpassad CSS.

Gutenberg blocks introducera ett verkligt modulärt tillvägagångssätt för siddesign. Du har möjlighet att fortsätta göra saker på samma sätt eller dyka djupare. Du kan justera varje block för att se subtilt eller markant annorlunda ut eller få dem alla att fungera som en sömless hela. Det är ett mycket kraftfullt och förlåtande system.

Användning Gutenberg blocks

Det fantastiska med WordPress-redesignen är att det är tillräckligt lika för hur saker och ting fungerade innan att användargränssnittet fortfarande är bekant. Även om du inte känner till de nya blocken kan du ändå lägga till din sidrubrik, lägga till ditt innehåll, lägga till valfria koder och widgets och publicera som tidigare. Det kan se lite annorlunda ut men det fungerar ungefär detsamma.

Detta är perfekt för enstaka bloggare eller de som är nya på WordPress. Eftersom ett centralt element i CMS är dess användarvänlighet har utvecklarna på något sätt lyckats lägga till mer avancerade funktioner utan att göra det totala systemet svårare att använda.

Du kan fortfarande skapa en sida på några minuter med standardalternativ men nu kan du gå mycket djupare utan att behöva lära dig en kodrad eller ens veta hur en kortkod ser ut.

Det är dessa saker som gör Gutenberg blocks så användbart.

Du kan antingen använda Gutenberg blocks eller inte.

Standardinställningen för sida och inlägg betyder att du fortfarande kan formatera sidinnehållet någon annanstans och helt enkelt kopiera och klistra in det på sidan. Klistra in titeln i titelblocket och sidinnehållet i textblocket. Om det är allt du behöver är skapandet så enkelt som tidigare. Om du vill ta det längre kan du.

Om du vill dyka in i hur blockredigeraren fungerar ser du några fler alternativ:

• Välj den lilla '+' ikonen bredvid mittblocket för att lägga till ett nytt block.
• Välj "H" för att lägga till en rubrik.
• Välj listikonen för att lägga till en lista i ditt block.
• Välj bildikonen för att lägga till en bild.

Alla fyra dessa alternativ är tillgängliga från innehållsmenyn men att ha dem tillgängliga för varje block innebär att du kan skapa ditt innehåll i vilken design du vill. De enskilda utestående blocken kan redigeras och inramas individuellt och var och en kommer att återspeglas på den färdiga sidan.

Detta är något Elementor (och sidbyggare gillar det som Divi) har gjort i flera år med stor effekt. Du kan nu göra ungefär samma sak inom WordPress.

Du hittar vår mer om Divi i vår Elegant Themes omdömen.

Att skapa en sida med blockredigeraren är enkel:

1. Välj Ny sida eller Nytt inlägg från WordPress-sidmenyn.
2. Skriv eller klistra in din sidrubrik i titelblocket.
3. Skriv eller klistra in ditt innehåll i textblocket.
4. Välj ikonen '+' till höger om blocket för att lägga till ett nytt block.
5. Välj det lämpligaste blocket i popup-rutan.
6. Fyll i huvudblockelementen i mittrutan.
7. Välj ikonen med tre punkter längst upp i blocket som du lade till för att ändra design eller anpassa.
8. För att lägga till anpassad CSS, välj Avancerat från höger meny.
9. Välj Publicera två gånger för att gå live.

Även om det är väldigt enkelt att använda blockredigeraren kan du dyka mycket djupare om du behöver. Menyikonen med tre punkter vid varje block öppnar en uppsjö av anpassningsalternativ beroende på blocket. Du kan duplicera blocket, infoga andra block före eller efter, ändra HTML-attribut, gruppera block med mera beroende på tillgängliga alternativ.

Dessutom kan utvecklare, tillsammans med standardblocken som kommer med WordPress, också skapa sina egna block-plugins. Med tanke på den enorma användarbasen och utvecklartalangen hos WordPress finns det redan många block-plugins tillgängliga efter bara ett års användning.

Vanligt använda block

WordPress har inkluderat ett antal block som täcker kärnsidan. Var och en gör det enkelt att lägga till olika sidelement samtidigt som man tillåter anpassade designfunktioner för det blocket ensam. Det är ett kraftfullt redigeringsalternativ som kan användas med stor effekt.

Standarden Gutenberg blocks inom WordPress inkluderar:

• Textblock - Det traditionella innehållsblocket där du kan arbeta exakt som tidigare och ändra med HTML eller kortkoder.
• Rubrik - Rubrikblock med standardinställningarna H1, H2, H3, H4.
• Lista - Ett separat block som du kan använda för att skapa utmärkta listor antingen ordnade eller oordnade.
• Galleri - Ett galleriblock som aktiverade anpassad formatering av bilder som passar ditt sidinnehåll.
• Bild - Ett specifikt bildblock som fungerar på samma sätt som galleriet men för enstaka bilder.
• Citat - Ett utestående block som låter dig markera citat eller recensioner på en sida.
• Ljud - Ett specifikt block för funktion Klicka för att spela upp ljudklipp i sidinnehållet.
• Omslag - Ett nytt block som låter dig placera en omslagsbild för din sida eller inlägg som kan komplettera den utvalda bilden.
• Video - Ett videoblock som fungerar som ljud och gör det enkelt att visa video på en sida eller ett inlägg.

Allt du kan göra med Gutenberg blocks du brukade kunna göra med den ursprungliga redigeraren men det var inte alltid användarvänligt eller tillgängligt för nya användare. Denna blockdesign gör det enkelt för alla att bygga sina sidor på ett logiskt och linjärt sätt.

De bästa Gutenberg block plugins

Standard WordPress Gutenberg blocks täcka det mesta du sannolikt kommer att behöva från ditt CMS. Vi nämnde dock tidigare att utvecklare också har börjat producera sina egna Gutenberg -block -plugins för att lägga till ännu fler funktioner. Det finns dussintals block -plugins av olika kvaliteter och vi har samlat några av våra favoriter här.

Låt oss ta en titt på några av dem nu.

Vi kommer att titta på:

1. Verktygssatsblock
2. Ultimate Block
3. Ultimate Addons för Gutenberg
4. Advanced Open water Gutenberg Blocks
5. Stapelbar Gutenberg Blocks
6. Atomblock
7. Otterblock
8. Block från Templatic
9. Kadence-block

Många av dessa Gutenberg-block-plugins är helt gratis medan andra erbjuder gratis block med möjlighet att uppgradera till mer avancerade premiumblock. Vi nämnde i varje beskrivning de som är gratis och där det finns premiumalternativ.

Var och en installeras på samma sätt som du installerar andra WordPress-plugin. Välj det från WordPress.org och installera och aktivera eller ladda ner filerna till din dator och ladda upp dem till din WordPress-installation. När du väl har installerat bör du se att dina nya blockalternativ visas med standardblockerat när du väljer '+' på en sida.

1. Verktygssatsblock

Verktygssatsblock är ett av våra favoritblock-redigeringsprogram för WordPress. Det är ett förstklassigt plugin som visar att även om du kan få bra grejer gratis är det ibland värt att betala lite extra för kraft och bekvämlighet. Plugin installeras på samma sätt som andra plugins och lägger till de nya blocken i den befintliga menyn.

Blocken inkluderar anpassade inläggstyper, anpassad taxonomi, anpassade fält, mallar, vyer, paginering, oändlig rullning, Ajax-block, WooCommerce, Google Maps, formulär, betalningar och till och med åtkomstkontroll. Några av dessa block hittar du inte i något gratis plugin, varför vi har markerat verktygssatsblock.

En av de bästa funktionerna i Toolset är möjligheten att skapa dynamiskt genererat innehåll utan att behöva göra någon anpassad PHP-kod. Toolset integreras direkt med WordPress Block Editor och låter dig dra dynamiskt innehåll var som helst.

Som några exempel på vad du kan göra: 

• Skapa rubriker baserat på titlar
• Ställ in knapptexter och uppmaningar från anpassade fält
• Ställ in bildkällor för fält eller anpassade fält
• och så vidare

Följande video är en utmärkt förklaring av funktionerna i Toolset Blocks:

De flesta av oss vet hur kraftfulla anpassade fält och inläggstyper kan vara och att kunna implementera det på en sida är fantastiskt. Förutom formulär, layouter, vyer, åtkomstkontroller och andra kraftfulla funktioner är det otroligt enkelt att rekommendera detta plugin trots att det är en premiumprodukt.

Ibland är gratis inte det bästa priset och det är en av dessa tider.

2. Ultimate Block

Ultimate Block sätts på bloggare men skulle fungera lika bra på alla WordPress-webbplatser. Plugin är gratis och innehåller ett urval av reklam och mycket användbara redigeringsblock som är idealiska för bloggare men kan också visa sig vara användbara för marknadsförare, e-handelssajter, småföretag och alla som vill att deras innehåll ska sticka ut.

Block inkluderar recensioner, innehållsförteckning, uppmaningar till handling, innehållsväxlar, bildreglage, innehållsfilers, vittnesmål, social delning, nedräkningstimer, förloppsindikatorer, inläggsnät och stjärnklassificering Utvecklaren säger att de har mer på vägen också.

Ultimate Blocks har ännu ett knep i ärmen i sin block manager. Ett enkelt gränssnitt som hjälper dig att aktivera eller inaktivera block för att göra sidan enkel att skapa. Det betyder att du kan ladda ner samlingen och bara aktivera de block som du sannolikt kommer att använda, vilket gör att sidan är rörig medan du skapar.

3. Gutenberg Blocks - Ultimate Addons för Gutenberg

Gutenberg Blocks - Ultimate Addons för Gutenberg är från samma utvecklare som superb Astra WordPress -tema. Det kostnadsfria pluginet lägger till en rad block för daglig användning som är enkla att använda och erbjuder ett brett utbud av anpassningsalternativ. De kommer alla att fungera med Astra också vilket är bra om du använder det temat.

Block inkluderar infoboxar, knappar, avancerade rubriker, teamblock, prissättning, sociala andelar, vittnesmål, ikonlistor, Gravity Form-block, marknadsföringsblock, offert, uppmaningar, kontaktformulär 7-block, Google Maps och mer.

Utvecklarna säger att dessa block har optimerats för sidhastighet samtidigt som de erbjuder sömless integration med Astra -temat och inom något annat tema. Du har liknande anpassningsalternativ som dessa andra plugins för att skjuta block till befintliga sidor. Bara detta gör det här pluginet värt att kolla in.

4. Avancerad Gutenberg

Avancerad Gutenberg från Joom United lägger till över tjugo redaktörsblock som ett gratis WordPress-plugin. Det finns ett anständigt utbud av alternativ här från den vanliga kolumnen och rubriken till mer avancerade block. De är väl utformade med ett minimalt gränssnitt som fortfarande på något sätt erbjuder alla anpassningsalternativ som du sannolikt behöver.

Block inkluderar författarprofiler, anpassade CCS-block, WooCommerce, avancerade knappar, kontaktformulär, avancerade listor, kartor, vittnesmål, räknare, inloggnings- och registreringsblock, video- och bildblock, social delning och länkning, inläggssammanfattningar, Lightbox-block och mycket mer .

Varje integrerad sömlesspå en sida och levereras komplett med det avancerade anpassningsalternativet med hjälp av trepunktsmenyn. De exakta alternativen varierar beroende på blocket i fråga men täcker de vanligaste situationerna, färg, storlek, strecksats, inriktning och så vidare.

5. Stapelbar Gutenberg Blocks

Stapelbar Gutenberg Blocks var en annan tidig ankomst till uppdateringen och släppte några mycket användbara anpassade block för WordPress-redigeraren. De flesta stapelbara block är gratis men utvecklaren erbjuder också några premiumblock som adresserar specifika användningar om du behöver dem.

Gratis block inkluderar postblock, funktionsgaller, dragspel, uppmaning till handling, kort, sidhuvud, video-popup, prissättning, anmälningsblock, distans, avdelare, funktionslista och andra. Det finns totalt 23 gratisblock.

Som en extra fördel är Stackable ett modulsystem så att du kan lägga till de block du sannolikt behöver medan du lämnar de andra ute. Detta kan ha en liten lagrings- och sidhastighetsfördel beroende på hur din webbplats är inställd. Hur som helst är det en trevlig tillagd funktion som kan hålla sakerna magra i bakänden.

6. Atomblock

Atomblock var en av de första pluginsna på scenen och erbjuder nu 15 gratisblock och några WordPress-teman för att komplettera denna nya designfrihet. Block inkluderar vittnesmål, prissättning, nyhetsbrev, postnät, avancerade kolumner, dela ikoner, uppmaning till handling, författarprofil och andra användbara block.

Plugin är gratis, liksom de flesta teman. När du väl har installerat ser du en ny serie block i blockavsnittet på en ny sida eller ett inlägg. Leta efter AB Post Grid etc. för att identifiera Atomic Block-funktionerna.

Precis som dessa andra plugin-program för redigeringsblock kan du anpassa utseendet på dem i den avancerade menyn. Du har liknande alternativ när det gäller opacitet, färg, positionering och så vidare med den extra fördelen med ytterligare val om du använder ett Atomic Block-tema. Det är en mindre extrafunktion men det finns!

7. Gutenberg Blocks och mallbibliotek av Otter

Gutenberg Blocks och mallbibliotek av Otter är en munfull av ett namn som är mycket mer smältbart när det gäller funktioner. Det är ett gratis, lätt plugin som innehåller några väldesignade block som bygger på de som tillhandahålls av WordPress bara med fler designalternativ.

Block inkluderar sektioner, avancerade rubriker, knappar, prissättning, vittnesmål, Google Maps, författarbioblock, postgaller, Font Awesome, delning och ett kortblock. Alla är optimerade för sidhastighet såväl som för funktioner och medan de lyser på dessa funktioner är de ett utmärkt komplement till standardblocken.

Det finns extra anpassningar och några biblioteksalternativ för varje block. Du kan justera varje block efter dina specifika behov eller använda ett biblioteksalternativ för att ta en färdig design och använda den i blocket. Det är snabbt och väldigt enkelt.

8. Block av Templatic

Block av utvecklare Templatic är en annan solid post i vår lista över fantastiska Gutenberg -block -plugins. Vi har stor respekt för templatiska teman och dessa block fungerar med eller utan ett av deras teman. Om du använder ett templat -tema glider dessa block direkt in och är bra att gå. Om du inte använder ett tematiskt tema kommer dessa block fortfarande att integrera sömlessin i din design.

Blocken är gratis och inkluderar författarbio, varningar, delning av sociala medier, separatorer, omslagsbild, rubrikalternativ, karta, prissättning, knappar och ett Tweet-block. Var och en har de grundläggande funktionerna fram och i mitten med anpassningar tillgängliga via menyn. De är väldigt enkla att använda och visas bredvid alla standardblock på den nya sidan eller inläggsskärmen.

Det finns några bra block här men pluginet har inte uppdaterats på nästan ett år. De fungerar med den nuvarande versionen av WordPress när vi testade dem i tid för den här artikeln, men vi vet inte när nya block kommer.

9. Kadence-block

Kadence-block har både gratis och premiumalternativ som förstärker standardblocken inom WordPress. Den fria versionen har tolv block och en inbyggd redaktör medan premiumversionen på $ 59 per år lägger till sju premiumblock, unika animeringsalternativ och support. Det finns också ett tredje alternativ, för $ 99 per år kan du komma åt alla premiumredigeringsblock plus alla Kadence-teman och produkter.

Block inkluderar sidlayoutblock, informationsrutor, avancerade gallerier, vittnesmål, videoblock, dragspel, knappar, flikar, ikoner, avancerade rubriker och bilder. Premiumversionen lägger till rutnät och karusellblock, produktkaruseller, modellblock, bildöverlagringar, delat innehåll och video-popup-fönster.

Varje block har ett anpassat redigeringsavsnitt där du kan ändra position, kontur, färg, bildstorlek, opacitet och en rad andra faktorer. Om du arbetar inom en specifik design eller ram kan du enkelt implementera block i den designen med hjälp av redigeraren.

Sammanfattning av Gutenberg blocks och deras plugins

Gutenberg blocks är en utmärkt utveckling av WordPress. De tar allt vi vet och älskar om snabb sida eller inlägg skapande och driver det framåt. WordPress erbjuder fortfarande sin signaturanvändarvänlighet och låga inträdesbarriär för nybörjare samtidigt som det erbjuder mer erfarna eller designorienterade användare möjlighet att sticka ut. Denna balans mellan form och funktion är värd att fira.

Liksom Gutenberg-blockplugins som vi har i den här listan. De gratis pluginsna erbjuder nästan allt du behöver för att skapa sidor. Möjligheten att dela upp en sida eller lägga upp i enskilda komponenter och utforma var och en tills den helt enkelt är perfekt.

Även dessa premium-plugins är värda kostnaden. De brukar erbjuda högre standarder när det gäller design och användbarhet och även några block som inte finns någon annanstans. Medan premium är Toolset Blocks utmärker sig för att erbjuda en rad block som du inte hittar i något gratis plugin som sökning, åtkomstkontroll, WooCommerce och anpassade inlägg och anpassade fält.

Har du ett favoritplugg-plugin från Gutenberg? Älskar du en som vi inte har nämnt här? Berätta om dem nedan om du gör det!

Om författaren

Författare: Jamie Kavanaghwebbplats: https://www.coastalcontent.co.uk/e-post: jamie@collectiveray.com

Jamie, en ingenjör till utbildning är vår främsta tekniska skribent och forskare. Jamie driver också Coastal Content, ett innehållsmarknadsförings-, copywriting- och webbdesignföretag baserat från Cornwall i Storbritannien.