{"id":233723,"date":"2023-02-21T13:40:00","date_gmt":"2023-02-21T10:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233723"},"modified":"2022-11-11T12:03:14","modified_gmt":"2022-11-11T09:03:14","slug":"hur-man-laegger-till-anpassade-blockstilar-till-wordpress-gutenberg-block","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-laegger-till-anpassade-blockstilar-till-wordpress-gutenberg-block\/","title":{"rendered":"Hur man l\u00e4gger till anpassade blockstilar till WordPress Gutenberg-block"},"content":{"rendered":"\n

En n\u00e5got mindre k\u00e4nd funktion i Gutenberg \u00e4r m\u00f6jligheten att st\u00e4lla in olika stilar f\u00f6r block. Du kan registrera s\u00e5 m\u00e5nga olika stilar p\u00e5 vilken typ av block som helst f\u00f6r att ge samma block olika design. M\u00f6jliga stilar f\u00f6r block visas som ett avsnitt i editorns h\u00f6gra sida. Varje stil f\u00e5r sin egen f\u00f6rhandsvisning. Om du hanterar stilar korrekt b\u00f6r byte mellan stilar omedelbart uppdatera designen i editorn s\u00e5v\u00e4l som i frontend.<\/p>\n

WordPress dokumentation f\u00f6r den h\u00e4r funktionen<\/a> \u00e4r f\u00f6r n\u00e4rvarande inte s\u00e5 komplett och informativ som den skulle kunna vara. S\u00e5 i det h\u00e4r inl\u00e4gget tar vi en detaljerad titt p\u00e5 hur du kan l\u00e4gga till dina anpassade blockstilar och hur du ska hantera stylingen f\u00f6r dem.<\/p>\n

\"Hur<\/a><\/p>\n

S\u00e4ttet den h\u00e4r funktionen fungerar p\u00e5 \u00e4r att n\u00e4r Gutenberg uppt\u00e4cker att en blocktyp har registrerats som minst en stil, kommer "Styles"-rutan automatiskt att visas p\u00e5 h\u00f6ger sida i editorn. Inuti den kan redigeraren v\u00e4lja mellan standardstilen eller valfri blockstil som har lagts till.<\/p>\n

I tidigare versioner (\u00e5tminstone f\u00f6re WordPress 5.3) kr\u00e4vde registrering av en anpassad stil att du ocks\u00e5 registrerade standardstilen ("ingen stil"). Lyckligtvis fixades detta i de senaste versionerna av WordPress, s\u00e5 nu beh\u00f6ver du bara registrera dina anpassade stilar, och WordPress kommer att l\u00e4gga till standardstilen automatiskt.<\/p>\n

Du kan registrera anpassade blockstilar p\u00e5 tv\u00e5 s\u00e4tt; med PHP eller med Javascript. Vi ska ta en titt p\u00e5 b\u00e5da. Men f\u00f6rst n\u00e5gra a-ha’s ang\u00e5ende hanteringen av dina stilar.<\/p>\n

En anteckning om k\u00f6stilar f\u00f6r Gutenberg<\/h2>\n

Det kan finnas viss f\u00f6rvirring om hur och var du ska l\u00e4gga till dina stilar (CSS-filer); endast till redigeraren, till frontend eller en stilmall f\u00f6r b\u00e5da. Ett av huvudsyften med Gutenberg-redigeraren \u00e4r att se till att du korrekt kan f\u00f6rhandsgranska hur ditt inl\u00e4ggsinneh\u00e5ll kommer att se ut i redigeraren. S\u00e5 det rekommenderas att du ser till att dina anpassade stilar till\u00e4mpas i redigeraren s\u00e5v\u00e4l som i frontend.<\/p>\n

Hur du hanterar detta beror verkligen p\u00e5 ditt projekt och din befintliga stilmallsinst\u00e4llning. Om du utvecklar ett komplett tema inkluderar du f\u00f6rmodligen redan blockstyling i din frontend-stilmall. Du kan \u00f6verv\u00e4ga att l\u00e4gga till en separat stilmall som du bara st\u00e4ller i k\u00f6 f\u00f6r redigeraren. Men detta kan vara sv\u00e5rt att underh\u00e5lla om du l\u00e4gger till m\u00e5nga olika stilar. Du m\u00e5ste uppdatera dina stilar p\u00e5 tv\u00e5 st\u00e4llen och se till att resultatet \u00e4r detsamma. L\u00f6sningen f\u00f6r det skulle vara att beh\u00e5lla en stilmall som du st\u00e4ller i k\u00f6 f\u00f6r b\u00e5de editor och frontend. Men d\u00e5 skulle din frontend beh\u00f6va ladda minst tv\u00e5 separata stilmallar och det kanske inte \u00e4r idealiskt.<\/p>\n

En annan l\u00f6sning \u00e4r att anv\u00e4nda t.ex. SCSS eller LESS och st\u00e4lla in @imports<\/code>p\u00e5 ett s\u00e5dant s\u00e4tt att du bara beh\u00f6ver skriva dina blockstilar en g\u00e5ng, och det appliceras p\u00e5 b\u00e5de editor och frontend. Som du kommer att se nedan n\u00e4r du anv\u00e4nder PHP f\u00f6r att registrera anpassade blockstilar, har du \u00e4nnu ett alternativ; f\u00f6r att l\u00e4gga till inline-stilar. Dessa stilar kommer att till\u00e4mpas i b\u00e5de editor och frontend. I frontend kommer de att l\u00e4ggas till av WordPress som en anpassad inline <style type=\"text\/css\">...<\/style><\/code>i rubriken.<\/p>\n

Hur du \u00e4n v\u00e4ljer att l\u00f6sa det, vet att det finns ett par nya krokar f\u00f6r registerstilar (och skript) f\u00f6r Gutenberg. Om du vill st\u00e4lla en stilmall i k\u00f6 f\u00f6r b\u00e5de frontend och editor, anv\u00e4nd kroken enqueue_block_assets<\/code>. Om du bara vill l\u00e4gga till en stilmall f\u00f6r redigeraren, st\u00e4ll den i k\u00f6 i kroken enqueue_block_editor_assets<\/code>.<\/p>\n

Hur man applicerar styling p\u00e5 de anpassade blockstilarna<\/h2>\n

Anpassade blockstilar kommer att l\u00e4ggas till som en klass av ett visst m\u00f6nster p\u00e5 den yttersta HTML-taggen f\u00f6r blocket.<\/p>\n

CSS-klassen f\u00f6r blockstilar l\u00e4ggs till i form av " is-style-<stylename><\/code>". Om du till exempel d\u00f6per din stil till " outline<\/code>", kommer blocket att f\u00e5 klassen " is-style-outline<\/code>".<\/p>\n

Men du kan uppleva att Gutenberg-redigeraren i vissa fall kommer att \u00e5sidos\u00e4tta din styling. Jag rekommenderar att du prefixer din editor-stil med v\u00e4ljaren editor-styles-wrapper<\/code>f\u00f6r att s\u00e4kerst\u00e4lla att dina stilar "vinner". T\u00e4nk p\u00e5 att den h\u00e4r klassen inte finns i frontend, s\u00e5 f\u00f6r att vara s\u00e4ker kan du beh\u00f6va l\u00e4gga till tv\u00e5 v\u00e4ljare, som s\u00e5 (om du anv\u00e4nder samma stilmall f\u00f6r b\u00e5de editor och frontend):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
L\u00e4gga till anpassade blockstilar med PHP<\/h2>\n
F\u00f6r att l\u00e4gga till en anpassad blocktyp med PHP anv\u00e4nder vi funktionen [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. Dokumentationen saknar tyv\u00e4rr information i vilken krok vi ska anv\u00e4nda, men jag har haft tur med kroken init<\/code>.<\/p>\n
Du m\u00e5ste k\u00e4nna till Gutenberg-namnavst\u00e5ndet f\u00f6r din blocktyp f\u00f6r att kunna l\u00e4gga till en anpassad stil p\u00e5 den. Alla vanliga WordPress-block har namnutrymmet " core<\/code>" f\u00f6ljt av a \/<\/code>och en slugversion av deras namn. Till exempel \u00e4r Gutenbergs namn f\u00f6r standardstyckeblocket core\/paragraph<\/code>.<\/p>\n
Registrering av en anpassad blockstil g\u00f6rs i sin enklaste form s\u00e5 h\u00e4r:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
Ovanst\u00e5ende kod l\u00e4gger till en anpassad blockstil till rubrikblocktypen, vilket skulle resultera i klassen is-style-colored-bottom-border<\/code>p\u00e5 vilken rubrik som helst som har valt denna stil.<\/p>\n
Den h\u00e4r funktionen ger dig tv\u00e5 metoder f\u00f6r att l\u00e4gga till din CSS (om du inte har lagt till den p\u00e5 n\u00e5got annat s\u00e4tt); antingen genom att tillhandah\u00e5lla inline CSS som en str\u00e4ng, eller tillhandah\u00e5lla ett registrerat formatmallshandtag som WordPress st\u00e4ller i k\u00f6 \u00e5t dig om det beh\u00f6vs.<\/p>\n
Om du vill l\u00e4gga till inline-stil (kom ih\u00e5g att detta p\u00e5verkar b\u00e5de editor och frontend), l\u00e4gg till elementet ’ inline_style<\/code>’ till funktionsanropet och skriv ut hela CSS som en str\u00e4ng som dess v\u00e4rde:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Om du hellre vill f\u00e5 funktionen att st\u00e4lla i k\u00f6 till en stilmall, ge dess handtag till elementet ’ style_handle<\/code>’.<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
Justera platsen f\u00f6r din stilmall s\u00e5 att den passar ditt projekt. Stilarket kommer att till\u00e4mpas p\u00e5 b\u00e5de editor och frontend, men den h\u00e4r g\u00e5ngen kommer frontend att g\u00f6ra en separat beg\u00e4ran om att inkludera denna stilmall. Den h\u00e4r metoden rekommenderas inte om du l\u00e4gger till flera blockstilar. Frontend kommer att bromsas avsev\u00e4rt genom att beg\u00e4ra en hel massa separata stilmallar.<\/p>\n
L\u00e4gga till anpassade blockstilar med Javascript<\/h2>\n
Om du hellre vill l\u00e4gga till dina blockstilar med hj\u00e4lp av Javascript \u00e4r detta lika enkelt som med PHP.<\/p>\n
Du m\u00e5ste l\u00e4gga en Javascript-fil i k\u00f6 till endast editor-kroken: enqueue_block_editor_assets<\/code>. Ditt skript kommer f\u00f6rmodligen inte att beh\u00f6va n\u00e5gra beroenden, men jag f\u00f6redrar att l\u00e4gga till \u00e5tminstone ’ wp-blocks<\/code>’ som beroende.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
Justera filnamnet och platsen f\u00f6r att passa ditt projekt.<\/p>\n
I din Javascript-fil anv\u00e4nder du funktionen registerBlockStyle()<\/code>i wp.blocks<\/code>objektet f\u00f6r att registrera anpassade blockstilar. Att l\u00e4gga till samma blockstil som vi gjorde i PHP ovan skulle se ut s\u00e5 h\u00e4r:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
Och det \u00e4r allt! L\u00e4tt som en pl\u00e4tt.<\/p>\n
Avregistrerar blockstilar<\/h2>\n
Precis som du kan registrera en blockstil, kan en blockstil ocks\u00e5 avregistreras. Kanske vill du ta bort n\u00e5gra av WordPresss standardblockstilar? Som med att registrera blockstilar kan du ocks\u00e5 avregistrera blockstilar med antingen PHP eller Javascript. Men valet mellan dessa tv\u00e5 metoder \u00e4r inte l\u00e4ngre ett preferensval.<\/p>\n
Du kan inte avregistrera ett block med PHP om det var registrerat med Javascript, och vice versa. S\u00e5 du m\u00e5ste ta reda p\u00e5 hur stilen du vill ta bort registrerades och matcha det med antingen PHP eller Javascript. Jag tror att alla WordPress-blockstilar l\u00e4ggs till med Javascript (citera mig inte om detta!). S\u00e5 om du vill ta bort n\u00e5gra av dessa, m\u00e5ste du g\u00e5 Javascript-v\u00e4gen.<\/p>\n
Avregistrering av en blockstil med PHP g\u00f6rs genom att anropa funktionen unregister_block_style()<\/code>, ange blocktypen och stilnamnet du vill ta bort. Att till exempel avregistrera stilen som lagts till ovan i det h\u00e4r inl\u00e4gget (f\u00f6rutsatt att den var registrerad med PHP) skulle se ut s\u00e5 h\u00e4r:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
Avregistrering av en blockstil med Javascript g\u00f6rs p\u00e5 liknande s\u00e4tt med funktionen unregisterBlockStyle()<\/code>i wp.blocks<\/code>objektet. Men med Javascript \u00e4r det en fr\u00e5ga om vilket skript som k\u00f6rs f\u00f6rst, och du kan st\u00f6ta p\u00e5 problem n\u00e4r ditt skript k\u00f6rs f\u00f6re registreringen. F\u00f6r att l\u00f6sa detta anv\u00e4nder vi Gutenbergs motsvarighet till jQuerys "dokument redo" (jQuery(document).ready(function() { ... });<\/code>), och l\u00e4gger \u00e4ven till ytterligare ett beroende till ditt skript.<\/p>\n
L\u00e5t oss b\u00f6rja med att l\u00e4gga till ett nytt skriptberoende p\u00e5 din Javascript-fil i k\u00f6 till ’ wp-edit-post<\/code>’:<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
Och inuti din Javascript-fil, sl\u00e5 in ditt avregistreringsfunktionsanrop inuti wp.domReady(function() { ... })<\/code>, s\u00e5 h\u00e4r:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Som ovanst\u00e5ende kod visar, med Javascript kan vi nu ta bort WordPresss "Large"-stil p\u00e5 Quote-blocket. Om du f\u00f6rs\u00f6kte g\u00f6ra samma sak med PHP skulle det inte fungera.<\/p>\n
En sidoanteckning om avregistrering av blockstilar<\/h3>\n
Du kanske m\u00e4rker att \u00e4ven om du har tagit bort alla anpassade blockstilar p\u00e5 ett block, s\u00e5 f\u00f6rsvinner inte rutan "Styles" i redigeraren. Den stannar kvar med endast valet "Standard" inuti. Om du vill ta bort rutan "Stilar" helt f\u00f6r att inte f\u00f6rvirra redigerare, kan du helt enkelt avregistrera standardstilen ocks\u00e5 (t.ex. wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>). Detta tar helt bort rutan "Styler" fr\u00e5n Gutenberg-redigeraren.<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Det h\u00e4r inl\u00e4gget f\u00f6rklarar hur man st\u00e4ller in blockstilar f\u00f6r block i Gutenberg, med antingen PHP eller Javascript – och ber\u00f6r id\u00e9er f\u00f6r att l\u00f6sa stilmallar.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,724,838,942,942,848,901,1110,807,807,818,818,838,848,724,868,868],"tags":[1173],"class_list":["post-233723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-guide-foer-nyboerjare","category-gutenberg-9","category-handledningar","category-n-a","category-php-9","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233723"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233723\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}