Styling van de Gutenberg Kolommen Blokkeren

0
26

WordPress 5.0 is snel nadert, en de nieuwe Gutenberg-editor komt. Er is veel discussie in de WordPress gemeenschap over wat het precies betekent voor de gebruikers, ontwerpers en ontwikkelaars. En terwijl Gutenberg is zeker aan het verbeteren van het schrijven van ervaring, het kan leiden tot een beetje hoofdpijn voor ontwikkelaars die nu moeten zorgen dat hun plug-ins en thema ‘ s zijn bijgewerkt en compatibel.

Een van de duidelijkste manieren kunt u ervoor zorgen dat uw thema is compatibel met WordPress 5.0 en Gutenberg is het toevoegen van een aantal fundamentele stijlen voor de nieuwe blokken Gutenberg introduceert. Afgezien van de eenvoudige HTML-blokken (zoals alinea ‘ s, kopjes, lijsten en afbeeldingen) die waarschijnlijk al hebben stijlen, je hebt nu een aantal complexe blokken die u waarschijnlijk nog niet verwerkt, zoals de trek van offertes, het deksel afbeeldingen, knoppen en kolommen. In dit artikel gaan we een kijkje nemen op enkele styling conventies voor het Gutenberg blokjes, en voeg vervolgens onze eigen stijlen voor Gutenberg ‘ s de Kolommen blokkeren.

Blok naamgeving

Eerste dingen eerst: hoe Gutenberg blokken genoemd? Als u bekend bent met de code inspecteur, kunt u dat op een pagina met behulp van het blok dat u wilt stijl, en check het zelf:

Het Gutenberg-Pull-Quote blok heeft een klasse van wp-blok-pullquote.

Nu, het kan omslachtig om dat te doen voor ieder blok dat u wilt stijl, en gelukkig is er een methode om de waanzin. Gutenberg blokken gebruiken een vorm van het Blok, Element Fonetisch (BEM) naamgeving. Het belangrijkste verschil is dat de top-niveau voor elk van de blokken is wp . Dus, voor onze trek offerte, de naam van wp-blok-pullquote. Kolommen zou wp-blok-kolommen, enzovoort. U kunt er meer over lezen in de WordPress Ontwikkeling Handboek.

Naam van de klasse addertje onder het gras

Er is een klein addertje onder het gras hier in dat de generieke naam is misschien niet de enige cursus die naam je mee bezig bent. In het bovenstaande voorbeeld zien we dat de klasse alignright wordt ook toegepast. En Gutenberg komt met twee nieuwe klassen: alignfull en alignwide. U zult zien in onze kolommen, dat er ook een klasse om ons te vertellen hoeveel het er zijn. Maar we krijgen om dat snel.

Het toepassen van je eigen klasse namen

Gutenberg blokken geven ons ook een manier om onze eigen klassen:

De klasse toegevoegd aan de opties van het deelvenster in het Gutenberg-editor (links). Het wordt toegepast op het element, zoals te zien is in DevTools (rechts).

Dit is groot als u wilt een gemeenschappelijke set van klassen voor blokken in verschillende thema ‘ s wilt toepassen eerder bestaande klassen te blokken waar het zin heeft, of wil hebben variaties op blokken.

Net als de huidige (“Klassieke”) WordPress post editor, Gutenberg maakt een paar keuzes mogelijk voor de front-end, terwijl de meeste van het zware werk voor ons. Dit omvat de kolommen, die eigenlijk alleen maar zijn genoeg stijlen om ze vorm kolommen. Dus moeten we de ruimte, de marges, en responsieve stijlen.

Styling kolommen

Tijd om tot de kern van de zaak: laten we de stijl van sommige kolommen! Het eerste wat we moeten doen is het vinden van een thema die we kunnen gebruiken. Er zijn niet te veel met uitgebreide Gutenberg nog niet ondersteund, maar dat is eigenlijk goed in ons geval. In plaats daarvan gaan we gebruiken thema ‘ s die flexibel genoeg om ons een goed uitgangspunt: Astra.

Astra is gratis beschikbaar in het WordPress Theme Directory. (Bron)

Astra is een gratis, snel en flexibel thema dat is ontworpen om te werken met pagina bouwers. Dat betekent dat het kan geven ons een heel goed begin sjabloon voor onze kolommen. Spreken van die, hebben we een aantal content. Hier is wat we aan de slag met:

Onze zuilen in het Gutenberg-editor.

We hebben een drie-kolom lay-out met afbeeldingen, titels en tekst. De afbeelding hierboven is wat de kolommen lijken in het Gutenberg-editor. Hier is wat ze zien eruit als op de front-end:

Onze columns op de front-end.

U kunt zien zijn er een paar verschillen tussen wat we zien in de editor en wat zien we op de front-end. Het meest opvallend is, is er geen afstand tussen de kolommen op de front-end. Het linker uiteinde van de kop op de voorkant is ook uitgelijnd met de linkerrand van de eerste kolom. In de editor, het is niet omdat we met behulp van de alignfull klasse.

Opmerking: omwille van deze tutorial gaan we aan de behandeling .alignfull, .alignwide, en geen uitlijning hetzelfde, aangezien de Astra thema biedt geen ondersteuning voor de nieuwe klassen nog.

Hoe Gutenberg kolommen werk

Nu hebben we een thema, we antwoord geven op de vraag: “hoe doen kolommen in Gutenberg te werk?”

Tot voor kort waren dat eigenlijk met behulp van CSS grid, maar daarna overgestapt naar de flexbox. (De redenering was dat flexbox biedt bredere steun van de browser.) Dat gezegd hebbende, de stijlen zijn super licht:

.wp-blok-zuilen {
display: flex;
}

.wp-blok-kolom {
flex: 1;
}

We hebben een pen met de laatste stijlen als u wilt zien van het resultaat dat we beogen. U kunt er in zien dat Gutenberg is alleen het definiëren van de flexbox en dan met vermelding van elke kolom moeten dezelfde lengte. Maar je zult ook merken een paar andere zaken:

  • De bovenliggende container wp-blok-kolommen.
  • Er is ook de klasse-3-kolommen, onder vermelding van het aantal kolommen voor ons. Gutenberg ondersteunt overal van twee tot zes kolommen.
  • De afzonderlijke kolommen hebben de class-wp-blok-kolom.

Deze informatie is genoeg voor ons aan de slag te gaan.

Styling van de ouders

Aangezien we flexbox standaard toegepast, de beste actie is om te zorgen dat deze kolommen een goede kijk op de front-end in een groter scherm context zoals we eerder al zagen.

Eerst en vooral, laat toevoegen marges om deze zo zijn ze niet actief naar elkaar, of andere elementen:

/* Voeg verticale ruimte in de planning om de volledige rij van de kolommen. */
.wp-blok-zuilen {
margin: 20px 0;
}

/* Toevoegen horiztonal ademruimte tussen de afzonderlijke kolommen. */
.wp-blok-kolom {
margin: 0 20px;
}

Want het is redelijk om te veronderstellen dat de kolommen niet alleen de blokken op de pagina zijn toegevoegd, boven-en ondermarge voor het geheel van de bovenliggende container, zodat er een zekere scheiding tussen de kolommen en andere blokken op de pagina. Dan, zodat de kolommen niet tegen elkaar, we passen de linker-en rechtermarge voor iedere kolom.

Kolommen met een bepaalde marge toegevoegd.

Deze beginnen te kijken al beter! Als u wilt dat ze zien meer uniforme, kunt u altijd gooien text-align: justify; in de kolommen.

Het maken van de kolommen reageren

De lay-out begint uit elkaar te vallen als we verhuizen naar een kleinere scherm breedtes. Astra is een leuke baan met een vermindering van de font grootte als we omlaag verkleinen, maar wanneer we beginnen te krijgen rond 764px, dingen beginnen te krijgen een beetje krap:

Onze columns op 764px breed.

Op dit punt, want wij hebben drie kolommen, kunnen we expliciet de stijl van de kolommen met behulp van de .-3-kolommen klasse. De eenvoudigste oplossing zou zijn om het verwijderen van flexbox totaal:

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

Dit zou automatisch zetten onze kolommen in blokken. Al zouden we nu moeten doen is het aanpassen van de vulling en we zijn er goed te gaan — het is niet de mooiste oplossing, maar het is leesbaar. Ik wil graag een beetje meer creatief, dat wel. In plaats daarvan maken we de eerste kolom de breedste, en vervolgens de andere twee blijven kolommen onder de eerste.

Dit werkt alleen afhankelijk van de inhoud. Ik denk dat hier het vergeven te geven Yoda prioriteit als de meest opmerkelijke Jedi Master.

Laten we eens kijken hoe dat eruit ziet:

@media screen and (max-width: 764px) {
.wp-blok-kolommen.-3-kolommen {
flex-flow: rij-wrap;
}

.-3-kolommen .wp-blok-kolom:first-child {
flex-basis: 100%;
}
}

In de eerste paar regels na de media query, we richten .-3-kolommen wijzigen van de flex-flow op rij wrap. Dit vertelt de browser om de kolommen te vullen van de container, maar wikkel wanneer dat nodig is.

Vervolgens richten we ons op de eerste kolom .wp-blok-kolom:eerste kind en we vertellen de browser te maken van de flex-basis 100%. Deze zegt, “maak de eerste kolom vult u alle beschikbare ruimte.” En aangezien we de verpakking kolommen, de andere twee zullen automatisch naar de volgende regel. Ons resultaat is dit:

Onze nieuwe responsive kolommen.

Het leuke aan deze baan is dat met rij-wrap, de kolommen worden over de volledige breedte op de kleinste schermen. Nog steeds, als ze beginnen te moeilijk om te lezen voor dat we moeten vinden van een goede breekpunt en stel de stijlen onszelf. Rond 478px moet mooi doen:

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

.wp-blok-kolom {
margin: 20px 0;
}
}

Dit verwijdert de flex-lay-out, en keert de marges op de afzonderlijke kolommen, het handhaven van de afstand tussen hen als zij verhuizen naar een gestapelde indeling.

Onze kleine scherm lay-out.

Nogmaals, je kunt zien dat al deze begrippen komen samen in de volgende demo:

Zie de Pen Gutenberg Kolommen door Joe Casabona (@jcasabona) op CodePen.

Als u wilt zien van een andere live voorbeeld, vindt u hier.

Inpakken

Zo, daar hebt u het! In deze tutorial hebben we onderzocht hoe Gutenberg ‘ s de Kolommen blokkeren werkt, het is klasse naamgeving, en vervolgens toegepast basic stijlen te maken van de kolommen er goed uitzien op elke grootte van het scherm op de voorkant. Vanaf hier kunt u deze code en voer met het — we hebben nauwelijks krassen op het oppervlak en je kunt nog veel meer met de CSS alleen. Bijvoorbeeld, ik heb onlangs deze prijslijst met alleen Gutenberg Kolommen:

(Live Demo)

En natuurlijk zijn er de andere blokken. Gutenberg heeft veel macht in de handen van de content editors, maar nog meer in de handen van thema ontwikkelaars. We hoeven niet langer te bouwen van de infrastructuur voor het uitvoeren van meer complexe lay-outs in de editor van WordPress, en we niet langer nodig hebben om gebruikers te instrueren voor het invoegen van shortcodes of HTML om te krijgen wat nodig is op een pagina. Kunnen We een beetje CSS onze thema ‘ s en laat de makers van content doen de rest.

Wilt u meer diepte in de voorbereiding van uw thema voor Gutenberg, kunt u check out mijn cursus, Theming met Gutenberg. We gaan over hoe om de stijl van veel verschillende blokken, het instellen van custom kleur paletten, blok sjablonen en meer.