Styling Gutenberg Kolonner Blokk

0
19

WordPress 5.0 er raskt nærmer seg, og den nye Gutenberg editor kommer med det. Det har vært mye diskusjon i WordPress samfunnet over hva det betyr for brukerne, designere og utviklere. Og mens Gutenberg er sikker på å forbedre skriftlig erfaring, det kan føre til litt av en hodepine for utviklere som trenger nå å sikre sine plugins og temaer er oppdatert og kompatible.

En av de klareste eksempler på hvordan du kan sørge for at temaet er kompatibel med WordPress 5.0 og Gutenberg er å legge til noen grunnleggende stiler for de nye blokkene Gutenberg introduserer. Bortsett fra den grunnleggende HTML-blokker (som avsnitt, overskrifter, lister og bilder) som sannsynligvis allerede har stiler, vil du nå ha noen komplisert blokker som du sannsynligvis ikke har redegjort for, som sitater, cover-bilder, knapper og kolonner. I denne artikkelen kommer vi til å ta en titt på noen styling konvensjoner for Gutenberg-blokkene, og legg deretter til våre egne stiler for Gutenbergs Kolonner blokk.

Blokk navnekonvensjoner

Første ting først: hvordan er Gutenberg-blokker heter? Hvis du er kjent med koden inspector, kan du åpne opp på en side ved hjelp av den blokken du ønsker å style, og se det for deg selv:

Den Gutenberg Trekk Sitat blokk har en klasse av wp-blokk-pullquote.

Nå, det kan bli tungvint å gjøre det for hver og en blokk du ønsker å style, og heldigvis, det er en metode til galskap. Gutenberg blokker bruke en form av Blokk, Element, Modifier (BEM) naming convention. Den viktigste forskjellen er at øverste nivå for hver av blokkene er wp . Så, for vår trekke sitat, navnet er wp-blokk-pullquote. Kolonner ville være wp-blokk-kolonner, og så videre. Du kan lese mer om det i WordPress Utvikling Håndbok.

Klasse navn forbeholdet

Det er et lite forbehold her i at blokka navn kan ikke være den eneste klasse navn du arbeider med. I eksemplet ovenfor, ser vi at klassen alignright er også brukt. Og Gutenberg kommer med to nye klasser: alignfull og alignwide. Vil du se i vår kolonner at det er også en klasse for å fortelle oss hvor mange det er. Men vi kommer til dette snart.

Å bruke din egen klasse navn

Gutenberg blokkerer også gi oss en måte å bruke vår egen klasser:

Klassen er lagt til valg panelet i Gutenberg-editor (til venstre). Det blir brukt til elementet, som vist i DevTools (høyre).

Dette er flott hvis du ønsker å ha et felles sett med klasser for blokker på tvers av ulike temaer, ønsker å bruke allerede eksisterende klasser til blokker der det er fornuftig, eller ønsker å ha variasjoner på blokker.

Mye som gjeldende (eller “Classic”) WordPress innlegg editor, Gutenberg gjør så få valgmuligheter som mulig for front end, etterlot det meste av de tunge løftene til oss. Dette omfatter kolonner, som i utgangspunktet bare er nok stiler for å gjøre dem form kolonner. Så vi må legge til polstringen, marginer, og responsiv stiler.

Styling kolonner

Tid til å komme til sakens kjerne: la oss stil enkelte kolonner! Det første vi trenger å gjøre er å finne et tema som vi kan bruke. Det er ikke så mange som har omfattende Gutenberg støtte ennå, men det er faktisk godt i vårt tilfelle. I stedet, vi kommer til å bruke et tema som er fleksible nok til å gi oss et godt utgangspunkt: Astra.

Astra er tilgjengelig for gratis WordPress Tema Katalog. (Kilde)

Astra er en gratis, rask og fleksibel tema som har blitt utviklet for å fungere med side utbyggere. Det betyr at det kan gi oss en veldig god start mal for våre spalter. Uttaler hvorav, vi trenger noe av innholdet. Her er hva vi vil arbeide med:

Våre spalter inne i Gutenberg-editor.

Vi har en tre-kolonne layout med bilder, overskrifter, tekst og bilder. Bildet over er hva kolonnene ser ut som innsiden av Gutenberg-editor. Her er hva de ser ut som på fronten:

Våre kolonner på den fronten.

Du kan se det er noen forskjeller mellom hva vi ser i editoren og hva vi ser på fronten. Spesielt, det er ingen mellomrom i mellom kolonnene på fronten. Den venstre delen av overskriften på fronten er også stilt opp med den venstre kanten av den første kolonnen. I editoren, det er ikke fordi vi bruker alignfull klasse.

Merk: For å få til denne opplæringen, vi kommer til å behandle .alignfull, .alignwide, og ingen justering samme, siden Astra tema ikke støtter den nye klasser ennå.

Hvordan Gutenberg kolonner arbeid

Nå som vi har et tema, og vi skal svare på spørsmålet: “hvordan gjøre kolonner i Gutenberg-arbeid?”

Inntil nylig, var de faktisk ved hjelp av CSS rutenett, men så byttet til flexbox. (Begrunnelsen var at flexbox tilbyr bredere nettleser støtter.) Når det er sagt, stiler er super lys:

.wp-blokk-kolonner {
skjerm: flex;
}

.wp-blokk-kolonne {
flex: 1;
}

Vi har fått en penn med den siste stiler hvis du ønsker å se resultat vi sikter til. Du kan se på det som Gutenberg er bare å definere flexbox og deretter om hver kolonne bør ha samme lengde. Men du vil også legge merke til et par andre ting:

  • Foreldrene beholder wp-blokk-kolonner.
  • Det er også klassen har-3-kolonner, og legg merke til antall kolonner for oss. Gutenberg støtter alt fra to til seks kolonner.
  • De enkelte kolonnene har klassen wp-blokk-kolonnen.

Denne informasjonen er nok for oss til å komme i gang.

Styling foreldre

Siden vi har flexbox anvendt standard er den beste handling er å sørge for at disse kolonnene for å se bra ut på den fronten i en større skjerm kontekst som vi så tidligere.

Først og fremst, la oss legge til litt marginer til disse slik at de ikke kjører inn i hverandre, eller andre elementer:

/* Legge til vertikal pusterom til hel rad av kolonner. */
.wp-blokk-kolonner {
margin: 20 piksler 0;
}

/* Legge til horiztonal pusterom mellom de enkelte kolonner. */
.wp-blokk-kolonne {
margin: 0 20 piksler;
}

Siden det er rimelig å anta kolonnene vil ikke være den eneste blokker på siden, vi har lagt til topp-og bunnmargen til hele overordnede beholderen slik at det er noen separasjon mellom kolonnene og andre blokker på siden. Deretter, så kolonnene ikke kjøre opp mot hverandre, bruker vi venstre og høyre marg til hver enkelt kolonne.

Kolonner med noen marginer lagt til.

Disse begynner å se bedre ut allerede! Hvis du vil ha dem til å se mer ensartet, kan du alltid kaste text-align: justify; på kolonnene, også.

Gjør kolonner for responsive

Oppsettet begynner å falle fra hverandre når vi flytter til mindre skjerm bredder. Astra gjør en fin jobb med å redusere skriftstørrelser som vi krympe ned, men når vi begynner å komme seg rundt 764px, ting begynner å bli litt trangt:

Våre spalter på 764px bredt.

På dette punktet, siden vi har tre kolonner, kan vi eksplisitt stil kolonner ved hjelp av den .har-3-kolonner klasse. Den enkleste løsningen ville være å fjerne flexbox helt:

@media (maks bredde: 764px) {
.wp-blokk-kolonner.har-3-kolonner {
display: block;
}
}

Dette vil automatisk konvertere våre kolonner i blokker. Alle hadde vi trenger å gjøre nå er å justere polstring og vi er gode til å gå — det er ikke den peneste løsningen, men det er lesbar. Jeg ønsker å få en litt mer kreativ, skjønt. I stedet, vi vil gjøre den første kolonnen den bredeste, og deretter de to andre vil forbli kolonner under den første.

Dette vil bare fungere, avhengig av innhold. Jeg tror her er det forgivable å gi Yoda prioritert som den mest bemerkelsesverdige Jedi Master.

La oss se hva som ser ut som:

@media-skjerm, og (maks bredde: 764px) {
.wp-blokk-kolonner.har-3-kolonner {
flex-flow: rad wrap;
}

.har-3-kolonner .wp-blokk-kolonnen:first-child {
flex-grunnlag: 100%;
}
}

I de første linjene etter media søket, vi målretter mot .har-3-kolonner for å endre flex-strømmen til rad wrap. Dette vil fortelle leseren å tillate kolonner for å fylle beholderen, men brytes når det er nødvendig.

Så, vi målrette den første kolonnen med .wp-blokk-kolonnen:første barn og vi fortelle leseren å gjøre flex-basis 100%. Dette sier, “ta det første kolonne fylle all tilgjengelig plass.” Og siden vi er innpakning kolonner, de to andre vil automatisk gå til neste linje. Våre resultat er dette:

Våre nylig responsive kolonner.

Fin del om dette oppsettet er at med rad wrap, kolonner alle bli full bredde på de minste skjermene. Likevel, som de begynner å bli vanskelig å lese før det, bør vi finne en god stoppunkt og angi stiler oss selv. Rundt 478px bør gjøre pent:

@media (maks bredde: 478px) {
.wp-blokk-kolonner.har-3-kolonner {
display: block;
}

.wp-blokk-kolonne {
margin: 20 piksler 0;
}
}

Dette fjerner flex layout, og reverserer marginer på de enkelte kolonner, og for å opprettholde avstanden mellom dem som flytter de til et stablet oppsett.

Våre små skjerm-layout.

Igjen, du kan se alle disse begrepene kommer sammen i følgende demo:

Se Penn Gutenberg Kolonner av Joe Casabona (@jcasabona) på CodePen.

Hvis du ønsker å se en annen levende eksempel, kan du finne det her.

Innpakning opp

Så, der har du det! I denne opplæringen, har vi undersøkt hvordan Gutenbergs Kolonner blokkere fungerer, det er klasse navnekonvensjoner, og deretter brukt grunnleggende stiler for å gjøre kolonnene ser bra ut på hver skjerm størrelse på fronten. Herfra kan du ta denne koden og kjøre med den, for vi har knapt riper overflaten og du kan gjøre mange flere med CSS alene. For eksempel, jeg har nylig laget denne prisen tabell ved hjelp av bare Gutenberg Kolonner:

(Live Demo)

Og, selvfølgelig, det er de andre blokkene. Gutenberg legger mye makt i hendene på innhold redaktører, men enda mer i hendene på tema utviklere. Vi trenger ikke lenger å bygge opp infrastrukturen for å gjøre mer komplekse layouter i WordPress redaktør, og vi trenger ikke lenger å instruere brukere til å sette inn koder eller HTML til å få hva du trenger på en side. Vi kan legge til litt CSS til våre temaer og la innholdsleverandører gjøre resten.

Hvis du ønsker å komme mer i dybden i å forberede temaet for Gutenberg, kan du sjekke ut min kurs, Tematisere med Gutenberg. Vi går over hvordan stil massevis av forskjellige blokker, angi egendefinerte fargepaletter, blokkere maler, og mer.