Hur man lägger till anpassade blockstilar till WordPress Gutenberg-block

En något mindre känd funktion i Gutenberg är möjligheten att ställa in olika stilar för block. Du kan registrera så många olika stilar på vilken typ av block som helst för att ge samma block olika design. Möjliga stilar för block visas som ett avsnitt i editorns högra sida. Varje stil får sin egen förhandsvisning. Om du hanterar stilar korrekt bör byte mellan stilar omedelbart uppdatera designen i editorn såväl som i frontend.

WordPress dokumentation för den här funktionen är för närvarande inte så komplett och informativ som den skulle kunna vara. Så i det här inlägget tar vi en detaljerad titt på hur du kan lägga till dina anpassade blockstilar och hur du ska hantera stylingen för dem.

Sättet den här funktionen fungerar på är att när Gutenberg upptäcker att en blocktyp har registrerats som minst en stil, kommer "Styles"-rutan automatiskt att visas på höger sida i editorn. Inuti den kan redigeraren välja mellan standardstilen eller valfri blockstil som har lagts till.

I tidigare versioner (åtminstone före WordPress 5.3) krävde registrering av en anpassad stil att du också registrerade standardstilen ("ingen stil"). Lyckligtvis fixades detta i de senaste versionerna av WordPress, så nu behöver du bara registrera dina anpassade stilar, och WordPress kommer att lägga till standardstilen automatiskt.

Du kan registrera anpassade blockstilar på två sätt; med PHP eller med Javascript. Vi ska ta en titt på båda. Men först några a-ha’s angående hanteringen av dina stilar.

En anteckning om köstilar för Gutenberg

Det kan finnas viss förvirring om hur och var du ska lägga till dina stilar (CSS-filer); endast till redigeraren, till frontend eller en stilmall för båda. Ett av huvudsyften med Gutenberg-redigeraren är att se till att du korrekt kan förhandsgranska hur ditt inläggsinnehåll kommer att se ut i redigeraren. Så det rekommenderas att du ser till att dina anpassade stilar tillämpas i redigeraren såväl som i frontend.

Hur du hanterar detta beror verkligen på ditt projekt och din befintliga stilmallsinställning. Om du utvecklar ett komplett tema inkluderar du förmodligen redan blockstyling i din frontend-stilmall. Du kan överväga att lägga till en separat stilmall som du bara ställer i kö för redigeraren. Men detta kan vara svårt att underhålla om du lägger till många olika stilar. Du måste uppdatera dina stilar på två ställen och se till att resultatet är detsamma. Lösningen för det skulle vara att behålla en stilmall som du ställer i kö för både editor och frontend. Men då skulle din frontend behöva ladda minst två separata stilmallar och det kanske inte är idealiskt.

En annan lösning är att använda t.ex. SCSS eller LESS och ställa in @importspå ett sådant sätt att du bara behöver skriva dina blockstilar en gång, och det appliceras på både editor och frontend. Som du kommer att se nedan när du använder PHP för att registrera anpassade blockstilar, har du ännu ett alternativ; för att lägga till inline-stilar. Dessa stilar kommer att tillämpas i både editor och frontend. I frontend kommer de att läggas till av WordPress som en anpassad inline <style type="text/css">...</style>i rubriken.

Hur du än väljer att lösa det, vet att det finns ett par nya krokar för registerstilar (och skript) för Gutenberg. Om du vill ställa en stilmall i kö för både frontend och editor, använd kroken enqueue_block_assets. Om du bara vill lägga till en stilmall för redigeraren, ställ den i kö i kroken enqueue_block_editor_assets.

Hur man applicerar styling på de anpassade blockstilarna

Anpassade blockstilar kommer att läggas till som en klass av ett visst mönster på den yttersta HTML-taggen för blocket.

CSS-klassen för blockstilar läggs till i form av " is-style-<stylename>". Om du till exempel döper din stil till " outline", kommer blocket att få klassen " is-style-outline".

Men du kan uppleva att Gutenberg-redigeraren i vissa fall kommer att åsidosätta din styling. Jag rekommenderar att du prefixer din editor-stil med väljaren editor-styles-wrapperför att säkerställa att dina stilar "vinner". Tänk på att den här klassen inte finns i frontend, så för att vara säker kan du behöva lägga till två väljare, som så (om du använder samma stilmall för både editor och frontend):

.is-style-colored-bottom-border, 
.editor-styles-wrapper .is-style-colored-bottom-border { 
    border-bottom: 2px solid purple;
}

Lägga till anpassade blockstilar med PHP

För att lägga till en anpassad blocktyp med PHP använder vi funktionen [register_block_style](https://developer.wordpress.org/reference/functions/register_block_style/)(). Dokumentationen saknar tyvärr information i vilken krok vi ska använda, men jag har haft tur med kroken init.

Du måste känna till Gutenberg-namnavståndet för din blocktyp för att kunna lägga till en anpassad stil på den. Alla vanliga WordPress-block har namnutrymmet " core" följt av a /och en slugversion av deras namn. Till exempel är Gutenbergs namn för standardstyckeblocket core/paragraph.

Registrering av en anpassad blockstil görs i sin enklaste form så här:

Ovanstående kod lägger till en anpassad blockstil till rubrikblocktypen, vilket skulle resultera i klassen is-style-colored-bottom-borderpå vilken rubrik som helst som har valt denna stil.

Den här funktionen ger dig två metoder för att lägga till din CSS (om du inte har lagt till den på något annat sätt); antingen genom att tillhandahålla inline CSS som en sträng, eller tillhandahålla ett registrerat formatmallshandtag som WordPress ställer i kö åt dig om det behövs.

Om du vill lägga till inline-stil (kom ihåg att detta påverkar både editor och frontend), lägg till elementet ‘ inline_style‘ till funktionsanropet och skriv ut hela CSS som en sträng som dess värde:

Om du hellre vill få funktionen att ställa i kö till en stilmall, ge dess handtag till elementet ‘ style_handle‘.

Justera platsen för din stilmall så att den passar ditt projekt. Stilarket kommer att tillämpas på både editor och frontend, men den här gången kommer frontend att göra en separat begäran om att inkludera denna stilmall. Den här metoden rekommenderas inte om du lägger till flera blockstilar. Frontend kommer att bromsas avsevärt genom att begära en hel massa separata stilmallar.

Lägga till anpassade blockstilar med Javascript

Om du hellre vill lägga till dina blockstilar med hjälp av Javascript är detta lika enkelt som med PHP.

Du måste lägga en Javascript-fil i kö till endast editor-kroken: enqueue_block_editor_assets. Ditt skript kommer förmodligen inte att behöva några beroenden, men jag föredrar att lägga till åtminstone ‘ wp-blocks‘ som beroende.

add_action('enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'myguten-script', 
        get_template_directory_uri(). '/assets/js/myguten.js', 
        ['wp-blocks']
    );
});

Justera filnamnet och platsen för att passa ditt projekt.

I din Javascript-fil använder du funktionen registerBlockStyle()i wp.blocksobjektet för att registrera anpassade blockstilar. Att lägga till samma blockstil som vi gjorde i PHP ovan skulle se ut så här:

wp.blocks.registerBlockStyle('core/heading', {
    name: 'colored-bottom-border',
    label: 'Colored bottom border'
});

Och det är allt! Lätt som en plätt.

Avregistrerar blockstilar

Precis som du kan registrera en blockstil, kan en blockstil också avregistreras. Kanske vill du ta bort några av WordPresss standardblockstilar? Som med att registrera blockstilar kan du också avregistrera blockstilar med antingen PHP eller Javascript. Men valet mellan dessa två metoder är inte längre ett preferensval.

Du kan inte avregistrera ett block med PHP om det var registrerat med Javascript, och vice versa. Så du måste ta reda på hur stilen du vill ta bort registrerades och matcha det med antingen PHP eller Javascript. Jag tror att alla WordPress-blockstilar läggs till med Javascript (citera mig inte om detta!). Så om du vill ta bort några av dessa, måste du gå Javascript-vägen.

Avregistrering av en blockstil med PHP görs genom att anropa funktionen unregister_block_style(), ange blocktypen och stilnamnet du vill ta bort. Att till exempel avregistrera stilen som lagts till ovan i det här inlägget (förutsatt att den var registrerad med PHP) skulle se ut så här:

add_action('init', function() {
    unregister_block_style('core/heading', 'colored-bottom-border');
});

Avregistrering av en blockstil med Javascript görs på liknande sätt med funktionen unregisterBlockStyle()i wp.blocksobjektet. Men med Javascript är det en fråga om vilket skript som körs först, och du kan stöta på problem när ditt skript körs före registreringen. För att lösa detta använder vi Gutenbergs motsvarighet till jQuerys "dokument redo" (jQuery(document).ready(function() { ... });), och lägger även till ytterligare ett beroende till ditt skript.

Låt oss börja med att lägga till ett nytt skriptberoende på din Javascript-fil i kö till ‘ wp-edit-post‘:

add_action('enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'myguten-script', 
        get_template_directory_uri(). '/assets/js/myguten.js', 
        ['wp-blocks', 'wp-edit-post']
    );
});

Och inuti din Javascript-fil, slå in ditt avregistreringsfunktionsanrop inuti wp.domReady(function() { ... }), så här:

wp.domReady(function() {
    wp.blocks.unregisterBlockStyle('core/quote', 'large');
});

Som ovanstående kod visar, med Javascript kan vi nu ta bort WordPresss "Large"-stil på Quote-blocket. Om du försökte göra samma sak med PHP skulle det inte fungera.

En sidoanteckning om avregistrering av blockstilar

Du kanske märker att även om du har tagit bort alla anpassade blockstilar på ett block, så försvinner inte rutan "Styles" i redigeraren. Den stannar kvar med endast valet "Standard" inuti. Om du vill ta bort rutan "Stilar" helt för att inte förvirra redigerare, kan du helt enkelt avregistrera standardstilen också (t.ex. wp.blocks.unregisterBlockStyle('core/quote', 'large')). Detta tar helt bort rutan "Styler" från Gutenberg-redigeraren.