Styling Gutenberg Kolumner Block

0
20

WordPress 5.0 är snabbt närmar sig, och den nya Gutenberg redaktör kommer med det. Det har varit en hel del diskussion i WordPress samfundet över exakt vad det innebär för användare, designers och utvecklare. Och medan Gutenberg är säker på att förbättra skriva upplevelse, det kan orsaka lite av en huvudvärk för utvecklare som nu måste se till sina plugins och teman är uppdaterad och kompatibla.

En av de tydligaste sätt kan du se till att ditt tema är kompatibel med WordPress 5.0 och Gutenberg är att lägga till några grundläggande stilar för den nya block Gutenberg införs. Bortsett från den grundläggande HTML-block (såsom paragrafer, rubriker, listor, bilder) som förmodligen redan har stilar, du kommer nu att ha några komplex block som du troligen inte stod för, som att dra citat, täcka bilder, knappar och kolumner. I denna artikel kommer vi att ta en titt på några styling konventioner för Gutenberg block, och sedan lägga till våra egna stilar för Gutenbergs Kolumner block.

Blockera namnkonventioner

Första saker först: hur är Gutenberg block heter? Om du är bekant med koden inspektör, kan du öppna upp det på en sida med hjälp av blocket som du vill ha för stil, och kolla upp det för dig:

Gutenberg Dra Citat block har en klass av wp-block-pullquote.

Nu, kan det bli besvärligt att göra det för varje block du vill ha för stil, och som tur är finns det en metod för galenskap. Gutenberg block använda en form av Block, Element, Modifier (BEM) namngivning. Den huvudsakliga skillnaden är att den översta nivån för varje block är wp . Så, för vår dra citat, den heter wp-block-pullquote. Kolumnerna skulle vara wp-block-kolumner, och så vidare. Du kan läsa mer om det i WordPress Utveckling Handbok.

Klass namn varning

Det är en liten brasklapp här i att blockera namn kan inte vara den enda klass namn som du arbetar med. I exemplet ovan ser vi att klassen alignright är också tillämpas. Och Gutenberg kommer med två nya klasser: alignfull och alignwide. Du kommer att se i våra kolumner som det finns också en klass för att berätta för oss hur många det är. Men vi kommer till det snart.

Applicera din egen klass namn

Gutenberg block ger oss också ett sätt att tillämpa våra egna klasser:

Klassen lagts till i kontrollpanelen i Gutenberg redaktör (vänster). Det får tillämpas till den del, som kan ses i DevTools (höger).

Det är bra om du vill ha en gemensam uppsättning klasser för block i olika teman, vill tillämpa tidigare existerande klasser till block där det är vettigt, eller vill ha variationer på block.

Ungefär som den nuvarande (eller “Klassiska”) WordPress inlägg redaktör, Gutenberg gör så få val som möjligt för den främre, vilket innebär att merparten av de tunga lyft för oss. Detta inbegriper kolumner, som i princip bara innehåller tillräckligt stilar för att få dem att bilda kolumner. Så vi måste lägga utfyllnad, marginaler, och lyhörd stilar.

Styling kolumner

Dags att få till den springande punkten är: låt oss stil vissa kolumner! Det första vi behöver göra är att hitta ett tema som vi kan använda. Det är inte alltför många som har omfattande Gutenberg stöd ännu, men det är faktiskt bra i vårt fall. Istället kommer vi att använda ett tema som är flexibel nog att ge oss en bra utgångspunkt: Astra.

Astra är tillgänglig för gratis WordPress Tema-Katalogen. (Källa)

Astra är ett gratis, snabbt och flexibelt tema som har utformats för att arbeta med sidan byggare. Det innebär att det kan ge oss en riktigt bra start på en mall för våra kolumner. På tal om det, vi behöver lite innehåll. Här är vad vi kommer att arbeta med:

Våra kolumner inuti Gutenberg redaktör.

Vi har ett tre-kolumns layout med bilder, rubriker och text. Bilden ovan är vad kolumnerna ser ut inuti Gutenberg redaktör. Det här är vad de ser ut på den fronten:

Våra kolumner på den fronten.

Du kan se att det finns några skillnader mellan vad vi ser i editorn och vad vi ser på den fronten. Framför allt, det finns inget avstånd mellan kolumnerna på den fronten. Den vänstra änden av rubriken på den fronten är också ställde upp med den vänstra kanten på den första kolumnen. I editorn, det är inte för att vi använder alignfull klass.

Obs: För att skapa denna tutorial, vi kommer att behandla .alignfull, .alignwide, och ingen anpassning, eftersom Astra tema inte har stöd för den nya klasser ännu.

Hur Gutenberg kolumner arbete

Nu när vi har ett tema, kommer vi att svara på frågan: “hur gör kolumner i Gutenberg arbete?”

Tills nyligen, att de faktiskt var med hjälp av CSS nätet, men sedan bytte till flexbox. (Resonemanget var att flexbox erbjuder större webbläsare.) Som sagt, stilar är super ljus:

.wp-block-kolumner {
display: flex;
}

.wp-block-en kolumn {
flex: 1;
}

Vi har fått en penna med den slutliga stilar om du vill se de resultat vi strävar efter. Du kan se i det som Gutenberg är bara att definiera flexbox och sedan ange varje kolumn bör vara samma längd. Men du kommer också att märka ett par andra saker:

  • Den överordnade behållare är wp-block-kolumner.
  • Det är också den klass har-3-kolumner, notera antalet kolumner för oss. Gutenberg stöder allt från två till sex kolumner.
  • Den enskilda kolumner har klassen wp-block-kolumnen.

Denna information är tillräckligt för oss att komma igång.

Styling föräldrarna

Eftersom vi har flexbox tillämpas som standard, den bästa åtgärden att vidta för att se till att dessa kolumner ser bra ut på den fronten i en större skärm sammanhang som vi såg tidigare.

Först och främst, låt oss lägga några marginaler på dessa så att de inte kör in i varandra, eller andra faktorer:

/* Lägger till vertikala andrum till full rad av kolonner. */
.wp-block-kolumner {
margin: 20px 0;
}

/* Lägg till horiztonal andrum mellan enskilda kolumner. */
.wp-block-en kolumn {
margin: 0 20px;
}

Eftersom det är rimligt att anta kolumner kommer inte att vara den enda block på sidan har vi lagt till övre och nedre marginalerna till hela förälder behållaren så att det finns någon separation mellan kolumnerna och andra block på sidan. Sedan, så de kolumner som inte kör upp mot varandra, vi tillämpar vänster och höger marginaler för varje enskild kolumn.

Kolumner, med vissa marginaler läggs till.

Dessa börjar se bättre ut redan! Om du vill att de ska se mer enhetlig, kan du alltid kasta text-align: justify; på kolumnerna.

Att göra kolumner lyhörd

Layouten börjar falla isär när vi flytta till en mindre skärm bredder. Astra gör ett fint jobb med att minska teckenstorlek som vi krymper ner, men när vi börjar för att komma runt 764px, det börjar bli lite trångt:

Våra kolumner på 764px brett.

Vid denna punkt, eftersom vi har tre kolumner, kan vi uttryckligen stil kolumner med hjälp av den .har-3-kolumner klass. Den enklaste lösningen skulle vara att ta bort flexbox helt och hållet:

@media (max-width: 764px) {
.wp-block-kolumner.har-3-kolumner {
display: block;
}
}

Detta skulle automatiskt konvertera våra kolumner i block. Alla vill vi nu måste göra är att justera utfyllnad och vi är bra att gå — det är inte den bästa lösningen, men det är läsbar. Jag skulle vilja få lite mer kreativ, dock. I stället kommer vi att göra den första kolumnen bredast, och sedan de andra två kommer att förbli kolumner under den första.

Detta endast kommer att fungera, beroende på innehåll. Jag tror att här är det förlåtligt att ge Yoda prioritet som den mest anmärkningsvärda Jedi Master.

Låt oss se vad som ser ut som:

@media screen and (max-width: 764px) {
.wp-block-kolumner.har-3-kolumner {
flex-flöde: rad wrap;
}

.har-3-kolumner .wp-block-kolumn:first-child {
flex-grund: 100%;
}
}

I de första raderna efter det att media query, vi är inriktad på .har-3-kolumner för att ändra flex-flöde för att ro wrap. Detta kommer att tala om för webbläsaren att tillåta kolumner att fylla behållaren men linda när det behövs.

Då vi som mål den första kolumnen med .wp-block-kolumn:first-child och vi berättar för webbläsaren att göra flex-grund 100%. Detta säger, “göra den första kolumnen fylla allt tillgängligt utrymme.” Och eftersom vi är inslagning kolumner, de andra två kommer automatiskt att flytta till nästa rad. Vårt resultat är denna:

Vårt nyrenoverade lyhörd kolumner.

Det fina med denna layout är att med rad-wrap, kolumner alla bli full bredd på de minsta skärmarna. Fortfarande, när de börjar få svårt att läsa innan att vi skulle hitta en bra brytpunkt och ställa in stilar för oss själva. Runt 478px bör göra fint:

@media (max-width: 478px) {
.wp-block-kolumner.har-3-kolumner {
display: block;
}

.wp-block-en kolumn {
margin: 20px 0;
}
}

Detta tar bort flex layout, och vänder marginalerna på enskilda kolumner, upprätthålla avståndet mellan dem när de flyttar till en staplad layout.

Vår lilla skärmen layout.

Igen, kan du se alla dessa begrepp möts i följande demo:

Se Pennan Gutenberg Kolumner av Joe Casabona (@jcasabona) på CodePen.

Om du vill se en annan levande exempel, kan du hitta en här.

Att linda upp

Så, där har ni det! I den här guiden, vi undersökt hur Gutenbergs Kolumner block fungerar, det är klass namngivning, och sedan tillämpas grundläggande stilar för att göra kolumner ser bra ut på varje skärm storlek på den fronten. Härifrån kan du ta den här koden och köra med det — vi har knappt skrapat på ytan och du kan göra massor mer med CSS ensam. Till exempel, jag har nyligen gjort denna prissättning tabellen med endast Gutenberg Kolumner:

(Demo)

Och, naturligtvis, det är de andra blocken. Gutenberg lägger mycket makt i händerna på redaktörer, men ännu mer i händerna på temat utvecklare. Vi behöver inte längre bygga infrastruktur för att göra mer komplexa layouter i WordPress-editorn, och vi behöver inte längre instruera användare att infoga kortkoder eller HTML för att få vad de behöver på en sida. Vi kan lägga till lite CSS till våra teman och låter innehållsskapare att göra resten.

Om du vill få mer ingående i att förbereda ditt tema för Gutenberg, du kan kolla in min kurs, Teman med Gutenberg. Vi går igenom hur man utformar massor av olika block, ställa egna färgpaletter, block mallar och mycket mer.