WordPress 5.0 är precis runt hörnet, och många av oss känner oss glada och oroliga samtidigt. Gutenberg ger en stor förändring i hur vi använder WordPress, och det finns definitivt viss oro över vad som kommer att hända med våra webbplatser om vi ska uppdatera våra installationer utan att tidigare testa det. Men oroa dig inte, vi har ett inlägg om hur du inaktiverar Gutenberg WordPress-redigerare (även om det är bara tillfälligt) för att förhindra teman och plugins som ännu inte stöds från att störa våra webbplatser.
Du kan bli förvånad över att veta att vi redan använder WordPress 5.0. Det gör vi faktiskt! Som Matt sa på Make WordPress bloggen:
Om vi håller 5.0-utgåvan till strikt 4.9.8 + Gutenberg, kommer vi att ha en utgåva som är samtidigt stor och en icke-händelse när det gäller ny kod. Allt är ordentligt testat. På vissa sätt är 5.0 redan i praktiken ute bland oss, och några framåtblickande värdar installerar och aktiverar redan Gutenberg för nya installationer.
Detta innebär att vi redan har WordPress 5.0 på våra servrar: det är bara WordPress 4.9.8, med Gutenberg i kärnan. Egentligen är det inte allt, eftersom WordPress 5.0 kommer med en extra post, som är det helt nya standardtemat Twenty Nineteen.
Så låt oss dyka in och se vad som är nytt.
- Om Gutenberg och Twenty Nineteen
- Installera Twenty Nineteen
- Utseendet och känslan hos Twenty Nineteen
- Teman för Gutenberg: En Utvecklares Tillvägagångssätt
Om Gutenberg och Twenty Nineteen
Några av er kanske ogillar Gutenberg. Debatten om den nya redigeraren är långt ifrån över, men överväg Gutenbergs uttalade omfattning:
Dessa anpassade block ändrar hur användare, utvecklare och värdar interagerar med WordPress för att bygga rikt webbinnehåll enklare och mer intuitivt, och därmed demokratisera publicering och arbete för alla, oavsett teknisk förmåga.
Detta är Gutenbergs syfte, och Twenty Nineteen tar saker och ting ett steg framåt, eftersom det byggts med Gutenberg och för Gutenberg. Det är ett minimalt, typografi-drivet bloggtema med en enda kolumn-layout, och kan användas för att bygga ett brett utbud av webbplatser, från personliga bloggar till små företagswebbplatser.
Att skriva om Twenty Nineteen betyder oftast att vi skriver om Gutenberg. I Twenty Nineteen låter Gutenberg användare inte bara skapa rikt innehåll utan även att bygga hela sina webbplatser i redigeraren. Enligt Allan Cole på Make WordPress blogg.
Ger Gutenberg användarna en aldrig tidigare skådad nivå av frihet att anpassa sin webbplats layout och design. För att fullt ut uppnå sin vision behöver användarna en ny generation av flexibla teman, byggda för att dra nytta av den kreativa frihet som Gutenberg erbjuder. Med detta i åtanke, kommer WordPress 5.0 att lanseras med ett helt nytt standardtema: Twenty Nineteen
I temat Twenty Nineteen är Gutenberg mer än en innehållsbyggare, det är en webbplatsbyggare, och WordPress-användare kan bygga hela sina webbplatser med hjälp av dessa block. Och om Gutenberg inte är din grej ännu, lägger de flesta av de populära sidbyggarpluginsen också till stöd för Gutenberg.
(Föreslagen läsning: En introduktion till temat Twenty Twenty)
Installera Twenty Nineteen
Twenty Nineteen bör följa utgivningsplanen för den nya stora WordPress-utgåvan. WordPress 5.0 bör dock släppas den 19 November, och det är möjligt att en fungerande version av Twenty Nineteen inte kommer att vara klar vid det datumet. Se alla möjliga releasedatum för WordPress 5.0. Hur som helst, är temat tillgängligt för nedladdning på Github, och kommer att stanna där tills det slås samman med kärnan.
Twenty Nineteen är baseras på både _s och gutenberg-starter-theme och kommer med Sass. När du har hämtat .zip-paketet, extrahera temat och ladda upp/flytta tema-mappen på /wp-content/themes-katalogen av din utvecklingsinstallation. Du kan också ladda upp det från din WordPress-panel.
Kinsta-klienter kan installera det på sina staging-miljöer. Om du inte hostas med Kinsta kan du fortfarande installera det på din lokala maskin.
Utseendet och känslan hos Twenty Nineteen
Layouten med en kolumn betonar innehållet och passar bäst till breda och fullbredds-block. Temat stöder nu ett sidfotsfält och levereras med tre navigeringsmenyer: den primära menyn och menyn sociala länkar, båda placerade i sidhuvudet, och sidfotmenyn, som finns i sidfoten.
Bloggsidan ser ut som en vanlig bloggsida med utvalda bilder aktiverade. Enstaka inlägg och sidor visar bäst potentialen i den nuvarande versionen av Gutenberg som webbplatsbyggare.
Eftersom det är helt baserat på Gutenberg, är Twenty Nineteens funktioner mestadels beroende av Gutenbergs utvecklingscykel och tillgången av block. Vi kan lägga till widget-block, kortkodsblock, gallerier, HTML-kod, och så vidare. Men alla dessa block kommer långt ifrån att täcka alla våra behov. Men lyckligtvis har vi flera plugins som tillåter oss att lägga till nya block till Gutenberg, som Atomic Blocks, Advanced Gutenberg och Stackable. Det finns till och med projekt som Gutenberg Cloud som har vuxit fram.
Om du tycker att temat ser alltför minimalt ut, tänk då på att Twenty Nineteen fortfarande är ett pågående arbete. Vi är inte säkra på om det kommer att slås samman i kärnan när WordPress 5.0 kommer att släppas, och vi kan förvänta oss flera tillägg och bugglösningar inom närmsta framtiden. Dessutom finns det många frågor som fortfarande är olösta och funktioner som måste genomföras. Nu stöder Twenty Nineteen undermenyer men inte Anpassade sidhuvud och Video-sidhuvuden. Hur som helst kan vi förvänta oss att ytterligare funktioner läggs till inom rimlig tid.
Om du är intresserad av temats status, kolla in den fullständiga listan över problem på Github.
Teman för Gutenberg: En Utvecklares Tillvägagångssätt
Gutenberg ger direkt grundläggande stöd för blockstilar i teman, och temautvecklare är fria att åsidosätta Gutenbergs standardstilar med sina egna stilar. Men utvecklare kan också helt utelämna anpassade stilar och bestämma sig för att förlita sig uteslutande på Gutenberg för stilblock på webbplatsens frontend.
Att ha en redigerare som ser ut och känns som det resulterande innehållet förbättrar författarens skrivupplevelse och gör det möjligt för alla att känna sig bekväma med användargränssnittet.
Hur som helst kräver vissa Gutenbergs stilar och presentationsfunktioner teman för att uttryckligen lägga till stöd för dem, och detta kan göras genom att anropa add_theme_supportin i functions.php-filen när after_setup_theme-åtgärden utlöses. Här är ett exempel på en funktionsimplementering:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Nedan listas ett urval av dessa Gutenberg-funktioner, varav några också stöds av Twenty Nineteen. Du hittar den fullständiga listan över funktioner i Gutenberg-handboken.
Att Lägga till Stöd för Gutenberg-block presentationstilar
Ett av målen för teamet bakom Gutenberg var att bygga ett flexibelt system för formatering inom teman och att komma så nära som möjligt ”visuell paritet mellan front-end och redigeraren”. Syftet är att ge användaren en korrekt förhandsgranskning av innehållet som det kommer att se ut på frontenden.
För att uppnå detta mål, var teamet tvungen att separera presentationsstilar och strukturella stilar. Som standard laddas inte presentationsstilar på frontenden för att undvika att påverka webbplatsens utseende. Hur som helst kan nya teman dra nytta av Gutenbergs presentationsstilar genom att helt enkelt aktivera dem med följande registrering (se handboken för ytterligare detaljer):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );Som du kanske kan förvänta dig stöder Twenty nineteen Gutenbergs blockstilar. Den enskilda inläggssidan ser på frontenden ut ungefär som sidan för att redigera inlägget, där den enda skillnaden är den utvalda bilden, som visas på ett skrivbord som en bakgrundsbild som täcker hela visningsområdet. Bilden nedan visar Gutenberg i action på backenden.
Och här är samma inlägg på frontenden.
Breda och fullbreddsjusteringar
Gutenberg ger också två ytterligare justeringsalternativ: bred och fullbreddsjustering, men du kan bara välja bred eller fullbreddsjustering om ditt tema stöder dem. Om det gör det, visar Gutenberg två ytterligare justeringsikoner.
Bilden nedan visar centerjustering, bred bredd och fullbredds-bilder i Twenty Nineteen.
Temautvecklare kan lägga till stöd för bred och fullbreddsjusteringar genom att aktivera dem i funktionsfilen med ett enda uttryck:
// Add support for full and wide align images
add_theme_support( 'align-wide' );När vi har lagt till stöd för bred och fullbreddsjusteringar, bör vi ge CSS-uttrycken för ytterligare två CSS klasser alignfull och alignwide. Twenty Nineteen ger följande stilar:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Observera: Var försiktig när du använder det här alternativet, eftersom det kan orsaka problem om du byter tema (Läs mer om detta ämne på Github).
Redigeringsstil
Redigeringsstilen är en funktion som introducerades med WordPress 3.0 så att temautvecklare kan lägga till anpassade stilar till TinyMCE-redigeraren. Gutenberg stöder också den här funktionen, men det fungerar annorlunda än den klassiska redigeraren, som laddar stilar direkt i redigerarens iframe. Gutenberg lägger till specifika CSS-väljare, eftersom den inte använder en iframe.
Vi kan lägga till stöd för redigeringsstilar enligt följande:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Denna funktion stöds också av Twenty Nineteen. Du kan dyka djupare in i detta ämne i Redigeringsstilar i Gutenberg.
Block-färgpaletter
Gutenberg tillhandahåller en generisk färgväljare i redigerarens Färginställningar-panel. Temautvecklare kan förbättra det här verktyget genom att lägga till anpassade färgpaletter så att användarna snabbt kan hämta rätt färg för blockbakgrund och text. Detta är en tvåstegsprocess:
Först måste vi tillhandahålla en rad färger:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Sedan måste vi ange motsvarande stilar i temats stilmall:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Klassnamn börjar med has-, följt av färgens slugg skrivet med bindestreck, och slutar med kontexten, som kan vara färg eller bakgrundsfärg. För närvarande stöder Twenty Nineteen inte block-färgpaletter, men vi kan enkelt ändra detta med ett barntema.
Om du istället vill inaktivera en anpassad färgpalett måste du lägga till följande rad i temats eller barntemats functions-fil:
add_theme_support( 'disable-custom-colors' );Block-Teckenstorlekar
Ett tema kan också åsidosätta Gutenbergs standarduppsättning av teckenstorlekar. Här är ett exempel på koden du bör lägga till i functions-filen:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );De nya teckenstorlekarna läggs till i teckenstorleksväljaren i Gutenbergs Textinställningar.
Därefter måste vi ange motsvarande stilar i temats stilmall. Klassnamnet bör börja med has-, följt av teckenstorlekens namn separerat med bindestreck och sluta med -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen ger inte specifika teckenstorlekar och bygger på Gutenbergs standardvärden.
Observera: Kom ihåg att för att få all denna kod att fungera bör du ansluta den genom after_setup_theme-åtgärden.
Sammanfattning
Twenty Nineteen kan fungera bra för personliga bloggar, och du kan tänka på det mer som en vit duk än ett fullt fungerande WordPress-tema. En så minimal approach kan vara lite begränsande när det gäller att bygga webbplatser för företag och e-handel, men oroa dig inte: nya funktioner bör tillkomma inom kort, och vi skulle kunna se en mer kraftfull version av Twenty Nineteen snart.
Under tiden kan du också titta på några teman som redan stöder Gutenberg. Atomic Blocks, GeneratePress, Gutentype och Divi för att nämna några, men många andra borde komma snart. Eftersom WordPress 5.0 närmar sig så snabbt, är stöd för Gutenberg inte valfritt, och temautvecklare bör omfamna den nya WordPress-redigeraren så snart som möjligt för att hålla steget före konkurrensen.
Har du installerat Twenty Nineteen eller något annat tema som stöder Gutenberg? Vi vill gärna höra dina tankar i kommentarerna nedan.
Carlo är en passionerad älskare av webbdesign och frontend-utveckling. Han har sysslat med WordPress i över 10 år, även i samarbete med italienska och europeiska universitet och utbildningsinstitutioner. Carlo har dessutom skrivit dussintals artiklar och guider om WordPress, som är publicerade både på italienska och internationella webbplatser, samt på tryckta tidskrifter. Du hittar Carlo på X och LinkedIn.
Lämna ett svar