Hur man gör anpassade Gutenberg-block med Advanced Custom Fields Pro
Sedan version 5.8 av Advanced Custom Fields (ACF) Pro kan du använda ACF för att skapa anpassade Gutenberg-block. Allt du behöver hantera är PHP-mallarna. Detta gör det mycket enkelt för utvecklare som ännu inte har erfarenhet av det moderna Javascript som krävs att skapa anpassade block för Gutenberg med någon av fälttyperna ACF har att erbjuda. Tänk på att den här funktionen endast är tillgänglig i den betalda versionen (Pro) av Advanced Custom Fields. Det är inte tillgängligt i gratisversionen så du måste köpa en licens.
Om du är en WordPress-redaktör eller en webbansvarig som inte vill dyka djupt in i kodning är det här inlägget definitivt något för dig. Men om du vill vara en WordPress-tema eller plugin-utvecklare rekommenderar jag att du tar steget för att lära dig hur du skapar dina egna anpassade block. Men att använda avancerade anpassade fält för att skapa block kan ge en bra introduktion till hantering av anpassade block i Gutenberg.
Skapa ett Gutenberg-block med ACF
Det finns i princip tre enkla steg för att skapa ett anpassat Gutenberg-block med avancerade anpassade fält. Den första är lätt och förmodligen bekant; ställa in de fält (inställningar) du vill ha i ditt block. Det andra steget är att använda ACF:s funktion för att registrera ett Gutenberg-block. Och det tredje steget är att skriva PHP-mallen för blocket. Du skriver helt enkelt HTML och hanterar inställningarna precis som du annars skulle göra med ACF-fält. Och det är allt! (Okej, det kanske finns ett fjärde steg; styla ditt block. Men det går jag inte in på i det här inlägget).
Skapa dina inställningar/fält
Om du har använt avancerade anpassade fält tidigare vet du förmodligen hur du ställer in fält. Du kan använda Advanced Custom Fields admin-gränssnitt för att göra detta. Eller om du vill att blockinställningarna ska vara inbäddade i ditt plugin eller tema skriv ut inställningarna med PHP. Jag har ett komplett referensinlägg om hur man lägger till ACF-inställningar med PHP.
Det kritiska du behöver göra med din grupp är att ställa in platsen på "Blockera". Men eftersom vi inte har registrerat vårt block än, kommer det att vara standard till "Alla". Lämna det där, spara dina fält och låt oss gå vidare till registrerar vårt block.
Registrera ett Gutenberg-block
I ditt tema functions.phpeller plugin-kod måste du skriva en funktion kopplad till acf/init, och ringa [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()för att registrera ett block. Eftersom den här funktionen är ganska ny i ACF och beror på att ett plugin ska aktiveras rekommenderar jag att du slår in din kod i en if-check för att säkerställa att ditt tema eller plugin inte kraschar din WordPress.
Att registrera ett block med ACF liknar faktiskt hur vi skulle registrera ett anpassat Gutenberg-block manuellt. Med ACF måste du ange ett unikt slugifierat namn för att blockera name. Jag rekommenderar att du använder ett självförklarande namn, t.ex. ctaför ett uppmaningsblock, eller author-cardför ett block som visar författare eller liknande. Om du är lite bekant med Gutenberg kanske du är medveten om att alla block måste registreras med ett namnområde, en /, och sedan deras snigelnamn. Till exempel WordPress namnutrymme är core, så till exempel styckeblocket i WordPress heter core/paragraph. Med ACF kommer namnutrymmet att vara acf, så till exempel kommer blocket ovan att registreras inom Gutenberg som acf/yourblock. Om du registrerar dina fält med PHP, som du kommer att se senare, måste vi komma ihåg detta.
I categoryanger du vilken Gutenberg-kategori du vill att ditt block ska visas i. För närvarande är möjliga värden common, formatting, layout, widgets, eller embed. Om du skapar anpassade Gutenberg-kategorier kan du lägga till dem till dem om du vill. Ange ett ikonnamn iconfrån WordPress Dashicons (minus).
För att informera ACF om hur man renderar detta block har du två val: antingen ange ett funktionsnamn till nyckeln render_callback(som ovan), eller ange ett mallnamn i ditt tema till nyckeln render_template. Så om du hellre vill hänvisa direkt till en mall, t.ex. template-parts/block-yourblock.phpi ditt tema, gör du det så här och tar bort render_callback:
Koppla din fältgrupp till ditt registrerade block
När du är nöjd med din blockregistreringskod är det dags att koppla ditt block till de inställningar du gjort tidigare. Om du skapade fälten i admin, gå helt enkelt tillbaka och välj ditt block i Plats. Och om du lade till fältgruppen med PHP, ange värdet ‘ acf/yourblock‘ på plats där yourblockär det du angav enligt nameovan.
Skriv mallen
Det sista steget, och det roligaste, är att skriva mallen för blockutgången!
Placeringen av din blockrendering beror på vad du valde att använda i din blockregistrering, render_callbackeller render_template.
Om du angav ett funktionsnamn i render_callbackmåste du definiera denna funktion i ditt temas functions.phpeller plugin-kod. Du får fyra parametrar till din funktion, som du ser nedan:
Den första parametern, $blockinnehåller viss information från Gutenberg. Till exempel kommer varje Gutenberg-block nästan alltid att ha className, som du bör ställa in som klass på ditt yttersta omslag. $block['align']för justering kan också ställas in och något du vill lägga till också. Den andra parametern, $content, kommer alltid att vara tom med ACF (denna skulle fyllas i om du lade till kapslade block, men det är inte möjligt med ACF). Boolean $is_previewkommer att vara sant om vi för närvarande tittar på blockrenderingen i förhandsgranskningsläge i Gutenberg-redigeraren. Och slutligen $post_idär inlägget som detta block läggs till i.
När det gäller fälten hämtar du fält som du normalt skulle göra, med get_field(). HTML-utdata är helt upp till dig och hur du vill mata ut dina fält.
Om du istället angav en mallfil render_template, skapa helt enkelt filen på den angivna platsen i ditt tema. Inuti den har du tillgång till exakt samma globala variabler som med funktionen ovan (till exempel $block). Till exempel:
Och det är allt som krävs. Så enkelt är det att skapa dina anpassade Gutenberg-block med ACF.
Slutsats
Så enkelt det här var, att förlita sig på ett plugin – särskilt ett betalt – är ingen bra slutlösning om du vill utveckla teman eller plugins. Tänk på att dina block kommer att sluta fungera om du flyttar din temakod till en annan WordPress utan ACF Pro. Eller där dina fältinställningar inte har ställts in (såvida du inte har bäddat 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örvänta dig att varje användare ska köpa sin egen licens av ACF Pro för att få ditt tema att fungera! Men det här är en bra tillfällig lösning för de som inte kan eller vill behöva koda.
Om du är övertygad om att du behöver ta steget och lära dig Javascript och Gutenberg, kolla in min introduktion till Gutenberg-inlägget eller Gutenberg-kategorin på den här webbplatsen för att lära dig mer.