{"id":233440,"date":"2023-02-14T12:22:00","date_gmt":"2023-02-14T09:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233440"},"modified":"2022-11-10T23:42:02","modified_gmt":"2022-11-10T20:42:02","slug":"hur-man-goer-anpassade-gutenberg-block-med-advanced-custom-fields-pro","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-goer-anpassade-gutenberg-block-med-advanced-custom-fields-pro\/","title":{"rendered":"Hur man g\u00f6r anpassade Gutenberg-block med Advanced Custom Fields Pro"},"content":{"rendered":"\n

Sedan version 5.8<\/a> av Advanced Custom Fields (ACF) Pro kan du anv\u00e4nda ACF f\u00f6r att skapa anpassade Gutenberg-block. Allt du beh\u00f6ver hantera \u00e4r PHP-mallarna. Detta g\u00f6r det mycket enkelt f\u00f6r utvecklare som \u00e4nnu inte har erfarenhet av det moderna Javascript som kr\u00e4vs att skapa anpassade block f\u00f6r Gutenberg med n\u00e5gon av f\u00e4lttyperna ACF har att erbjuda. T\u00e4nk p\u00e5 att den h\u00e4r funktionen endast \u00e4r tillg\u00e4nglig i den betalda versionen (Pro<\/a>) av Advanced Custom Fields. Det \u00e4r inte tillg\u00e4ngligt i gratisversionen s\u00e5 du m\u00e5ste k\u00f6pa en licens.<\/p>\n

Om du \u00e4r en WordPress-redakt\u00f6r eller en webbansvarig som inte vill dyka djupt in i kodning \u00e4r det h\u00e4r inl\u00e4gget definitivt n\u00e5got f\u00f6r dig. Men om du vill vara en WordPress-tema eller plugin-utvecklare rekommenderar jag att du tar steget f\u00f6r att l\u00e4ra dig hur du skapar dina egna anpassade block. Men att anv\u00e4nda avancerade anpassade f\u00e4lt f\u00f6r att skapa block kan ge en bra introduktion till hantering av anpassade block i Gutenberg.<\/p>\n

Skapa ett Gutenberg-block med ACF<\/h2>\n

Det finns i princip tre enkla steg f\u00f6r att skapa ett anpassat Gutenberg-block med avancerade anpassade f\u00e4lt. Den f\u00f6rsta \u00e4r l\u00e4tt och f\u00f6rmodligen bekant; st\u00e4lla in de f\u00e4lt (inst\u00e4llningar) du vill ha i ditt block. Det andra steget \u00e4r att anv\u00e4nda ACF:s funktion f\u00f6r att registrera ett Gutenberg-block. Och det tredje steget \u00e4r att skriva PHP-mallen f\u00f6r blocket. Du skriver helt enkelt HTML och hanterar inst\u00e4llningarna precis som du annars skulle g\u00f6ra med ACF-f\u00e4lt. Och det \u00e4r allt! (Okej, det kanske finns ett fj\u00e4rde steg; styla ditt block. Men det g\u00e5r jag inte in p\u00e5 i det h\u00e4r inl\u00e4gget).<\/p>\n

Skapa dina inst\u00e4llningar\/f\u00e4lt<\/h3>\n

Om du har anv\u00e4nt avancerade anpassade f\u00e4lt tidigare vet du f\u00f6rmodligen hur du st\u00e4ller in f\u00e4lt. Du kan anv\u00e4nda Advanced Custom Fields admin-gr\u00e4nssnitt f\u00f6r att g\u00f6ra detta. Eller om du vill att blockinst\u00e4llningarna ska vara inb\u00e4ddade i ditt plugin eller tema skriv ut inst\u00e4llningarna med PHP. Jag har ett komplett referensinl\u00e4gg om hur man l\u00e4gger till ACF-inst\u00e4llningar med PHP<\/a>.<\/p>\n

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

Det kritiska du beh\u00f6ver g\u00f6ra med din grupp \u00e4r att st\u00e4lla in platsen p\u00e5 "Blockera". Men eftersom vi inte har registrerat v\u00e5rt block \u00e4n, kommer det att vara standard till "Alla". L\u00e4mna det d\u00e4r, spara dina f\u00e4lt och l\u00e5t oss g\u00e5 vidare till registrerar v\u00e5rt block.<\/p>\n

Registrera ett Gutenberg-block<\/h3>\n

I ditt tema functions.php<\/code>eller plugin-kod m\u00e5ste du skriva en funktion kopplad till acf\/init<\/code>, och ringa [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>f\u00f6r att registrera ett block. Eftersom den h\u00e4r funktionen \u00e4r ganska ny i ACF och beror p\u00e5 att ett plugin ska aktiveras rekommenderar jag att du sl\u00e5r in din kod i en if-check f\u00f6r att s\u00e4kerst\u00e4lla att ditt tema eller plugin inte kraschar din WordPress.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
Att registrera ett block med ACF liknar faktiskt hur vi skulle registrera ett anpassat Gutenberg-block manuellt. Med ACF m\u00e5ste du ange ett unikt slugifierat namn f\u00f6r att blockera name<\/code>. Jag rekommenderar att du anv\u00e4nder ett sj\u00e4lvf\u00f6rklarande namn, t.ex. cta<\/code>f\u00f6r ett uppmaningsblock, eller author-card<\/code>f\u00f6r ett block som visar f\u00f6rfattare eller liknande. Om du \u00e4r lite bekant med Gutenberg kanske du \u00e4r medveten om att alla block m\u00e5ste registreras med ett namnomr\u00e5de, en \/<\/code>, och sedan deras snigelnamn. Till exempel WordPress namnutrymme \u00e4r core<\/code>, s\u00e5 till exempel styckeblocket i WordPress heter core\/paragraph<\/code>. Med ACF kommer namnutrymmet att vara acf, s\u00e5 till exempel kommer blocket ovan att registreras inom Gutenberg som acf\/yourblock<\/code>. Om du registrerar dina f\u00e4lt med PHP, som du kommer att se senare, m\u00e5ste vi komma ih\u00e5g detta.<\/p>\n
I category<\/code>anger du vilken Gutenberg-kategori du vill att ditt block ska visas i. F\u00f6r n\u00e4rvarande \u00e4r m\u00f6jliga v\u00e4rden common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, eller embed<\/code>. Om du skapar anpassade Gutenberg-kategorier kan du l\u00e4gga till dem till dem om du vill. Ange ett ikonnamn icon<\/code>fr\u00e5n WordPress Dashicons<\/a> (minus).<\/p>\n
F\u00f6r att informera ACF om hur man renderar detta block har du tv\u00e5 val: antingen ange ett funktionsnamn till nyckeln render_callback<\/code>(som ovan), eller ange ett mallnamn i ditt tema till nyckeln render_template<\/code>. S\u00e5 om du hellre vill h\u00e4nvisa direkt till en mall, t.ex. template-parts\/block-yourblock.php<\/code>i ditt tema, g\u00f6r du det s\u00e5 h\u00e4r och tar bort render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Koppla din f\u00e4ltgrupp till ditt registrerade block<\/h2>\n
N\u00e4r du \u00e4r n\u00f6jd med din blockregistreringskod \u00e4r det dags att koppla ditt block till de inst\u00e4llningar du gjort tidigare. Om du skapade f\u00e4lten i admin, g\u00e5 helt enkelt tillbaka och v\u00e4lj ditt block i Plats. Och om du lade till f\u00e4ltgruppen med PHP, ange v\u00e4rdet ’ acf\/yourblock<\/code>’ p\u00e5 plats d\u00e4r yourblock<\/code>\u00e4r det du angav enligt name<\/code>ovan.<\/p>\n
Skriv mallen<\/h2>\n
Det sista steget, och det roligaste, \u00e4r att skriva mallen f\u00f6r blockutg\u00e5ngen!<\/p>\n
Placeringen av din blockrendering beror p\u00e5 vad du valde att anv\u00e4nda i din blockregistrering, render_callback<\/code>eller render_template<\/code>.<\/p>\n
Om du angav ett funktionsnamn i render_callback<\/code>m\u00e5ste du definiera denna funktion i ditt temas functions.php<\/code>eller plugin-kod. Du f\u00e5r fyra parametrar till din funktion, som du ser nedan:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
Den f\u00f6rsta parametern, $block<\/code>inneh\u00e5ller viss information fr\u00e5n Gutenberg. Till exempel kommer varje Gutenberg-block n\u00e4stan alltid att ha className<\/code>, som du b\u00f6r st\u00e4lla in som klass p\u00e5 ditt yttersta omslag. $block['align']<\/code>f\u00f6r justering kan ocks\u00e5 st\u00e4llas in och n\u00e5got du vill l\u00e4gga till ocks\u00e5. Den andra parametern, $content<\/code>, kommer alltid att vara tom med ACF (denna skulle fyllas i om du lade till kapslade block, men det \u00e4r inte m\u00f6jligt med ACF). Boolean $is_preview<\/code>kommer att vara sant om vi f\u00f6r n\u00e4rvarande tittar p\u00e5 blockrenderingen i f\u00f6rhandsgranskningsl\u00e4ge i Gutenberg-redigeraren. Och slutligen $post_id<\/code>\u00e4r inl\u00e4gget som detta block l\u00e4ggs till i.<\/p>\n
N\u00e4r det g\u00e4ller f\u00e4lten h\u00e4mtar du f\u00e4lt som du normalt skulle g\u00f6ra, med get_field()<\/code>. HTML-utdata \u00e4r helt upp till dig och hur du vill mata ut dina f\u00e4lt.<\/p>\n
Om du ist\u00e4llet angav en mallfil render_template<\/code>, skapa helt enkelt filen p\u00e5 den angivna platsen i ditt tema. Inuti den har du tillg\u00e5ng till exakt samma globala variabler som med funktionen ovan (till exempel $block<\/code>). Till exempel:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
Och det \u00e4r allt som kr\u00e4vs. S\u00e5 enkelt \u00e4r det att skapa dina anpassade Gutenberg-block med ACF.<\/p>\n
Slutsats<\/h2>\n
S\u00e5 enkelt det h\u00e4r var, att f\u00f6rlita sig p\u00e5 ett plugin \u2013 s\u00e4rskilt ett betalt \u2013 \u00e4r ingen bra slutl\u00f6sning om du vill utveckla teman eller plugins. T\u00e4nk p\u00e5 att dina block kommer att sluta fungera om du flyttar din temakod till en annan WordPress utan ACF Pro. Eller d\u00e4r dina f\u00e4ltinst\u00e4llningar inte har st\u00e4llts in (s\u00e5vida du inte har b\u00e4ddat in dem i din kod med PHP eller ser till att exportera och importera dem). Som en tema (eller plugin) utvecklare som distribuerar kod kan du inte f\u00f6rv\u00e4nta dig att varje anv\u00e4ndare ska k\u00f6pa sin egen licens av ACF Pro f\u00f6r att f\u00e5 ditt tema att fungera! Men det h\u00e4r \u00e4r en bra tillf\u00e4llig l\u00f6sning f\u00f6r de som inte kan eller vill beh\u00f6va koda.<\/p>\n
Om du \u00e4r \u00f6vertygad om att du beh\u00f6ver ta steget och l\u00e4ra dig Javascript och Gutenberg, kolla in min introduktion till Gutenberg-inl\u00e4gget<\/a> eller Gutenberg-kategorin<\/a> p\u00e5 den h\u00e4r webbplatsen f\u00f6r att l\u00e4ra dig mer.<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Det h\u00e4r inl\u00e4gget f\u00f6rklarar hur du kan anv\u00e4nda ACF f\u00f6r att skapa anpassade Gutenberg-block d\u00e4r allt du beh\u00f6ver hantera \u00e4r PHP-mallarna. Inget Javascript beh\u00f6vs!<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,724,838,848,901,922,1110,922,818,818,838,848,724,868,868],"tags":[1173],"class_list":["post-233440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-guide-foer-nyboerjare","category-handledningar","category-oevrig","category-n-a","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233440","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=233440"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233440\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}