{"id":49321,"date":"2023-01-25T11:13:00","date_gmt":"2023-01-25T11:13:00","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=49321&#038;preview=true&#038;preview_id=49321"},"modified":"2023-09-21T12:25:02","modified_gmt":"2023-09-21T12:25:02","slug":"wordpress-lagg-till-meta-box-till-post","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/","title":{"rendered":"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/se\/blog\/advanced-custom-fields\/#what\">Anpassade f\u00e4lt<\/a> \u00e4r ett s\u00e4tt att tilldela extra information till webbplatsens inneh\u00e5ll. Dessa bitar av information brukar kallas <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">metadata<\/a>.<\/p>\n<blockquote><p>Metadata \u00e4r information om information. I WordPress fall s\u00e5 \u00e4r det information som \u00e4r kopplad till inl\u00e4gg, anv\u00e4ndare, kommentarer och termer.<\/p>\n<p>Med tanke p\u00e5 metadatans m\u00e5nga-till-en-f\u00f6rh\u00e5llande i WordPress s\u00e5 \u00e4r dina alternativ ganska obegr\u00e4nsade. Du kan ha s\u00e5 m\u00e5nga metauppgifter som du vill, och d\u00e4r kan du lagra n\u00e4stan vad som helst.<\/p>\n<p><em>\u2013 <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbook<\/a><\/em><\/p><\/blockquote>\n<p>H\u00e4r \u00e4r n\u00e5gra exempel p\u00e5 metadata som du kan bifoga till ett inl\u00e4gg med hj\u00e4lp av anpassade f\u00e4lt:<\/p>\n<ul>\n<li>De geografiska koordinaterna f\u00f6r en plats eller en fastighet<\/li>\n<li>Datum f\u00f6r en h\u00e4ndelse<\/li>\n<li>ISBN eller f\u00f6rfattare till en bok<\/li>\n<li>Dagens hum\u00f6r hos f\u00f6rfattaren till inl\u00e4gget<\/li>\n<\/ul>\n<p>Och det finns m\u00e5nga fler.<\/p>\n<p>WordPress erbjuder tyv\u00e4rr inget enkelt s\u00e4tt att l\u00e4gga till och hantera anpassade f\u00e4lt. I den klassiska redigeraren s\u00e5 visas anpassade f\u00e4lt exempelvis i en ruta som \u00e4r placerad l\u00e4ngst ner p\u00e5 sidan, under inl\u00e4ggsredigeraren.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142717 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Anpassade f\u00e4lt i den klassiska redigeraren.\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Anpassade f\u00e4lt i den klassiska redigeraren.<\/figcaption><\/figure>\n<p>Anpassade f\u00e4lt \u00e4r som standard inaktiverade i Gutenberg, men du kan visa dem genom att v\u00e4lja motsvarande objekt i inl\u00e4ggsinst\u00e4llningarna.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142718 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"L\u00e4gg till panelen f\u00f6r anpassade f\u00e4lt i blockredigeraren.\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">L\u00e4gg till panelen f\u00f6r anpassade f\u00e4lt i blockredigeraren.<\/figcaption><\/figure>\n<p>Det finns tyv\u00e4rr inget s\u00e4tt att visa metadata p\u00e5 frontend utan att anv\u00e4nda ett plugin eller smutsa ner h\u00e4nderna med kod.<\/p>\n<p>Om du \u00e4r en anv\u00e4ndare s\u00e5 hittar du flera <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">utm\u00e4rkta plugins<\/a> som g\u00f6r jobbet \u00e5t dig. Men du kanske \u00e4r en utvecklare och vill f\u00e5 ut mer av WordPress anpassade f\u00e4lt? Exempelvis integrera dem s\u00f6ml\u00f6st i blockredigeraren och visa dem p\u00e5 frontend av din WordPress-webbplats med hj\u00e4lp av ett anpassat Gutenberg-block? D\u00e5 \u00e4r du p\u00e5 r\u00e4tt plats.<\/p>\n<p>Om du undrar hur man anv\u00e4nder WordPress anpassade f\u00e4lt p\u00e5 b\u00e4sta m\u00f6jliga s\u00e4tt, b\u00e5de i <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">Gutenberg<\/a> och den <a href=\"https:\/\/kinsta.com\/blog\/wordpress-tinymce-editor\/\">klassiska redigeraren<\/a> f\u00f6r WordPress-utvecklare, \u00e4r det snabba svaret &#8221;Skapa ett plugin som b\u00e5de fungerar f\u00f6r den klassiska redigeraren och Gutenberg&#8221;.<\/p>\n<p>Men oroa dig inte f\u00f6r mycket. Om det \u00e4r lite knepigt att skapa ett plugin f\u00f6r att hantera anpassade f\u00e4lt i b\u00e5da redigerarna s\u00e5 ska vi f\u00f6rs\u00f6ka g\u00f6ra processen s\u00e5 enkel som m\u00f6jligt. Snart s\u00e5 har du koll p\u00e5 de koncept som vi kommer att diskutera i den h\u00e4r artikeln. D\u00e5 kommer du exempelvis att f\u00e5 de f\u00e4rdigheter som beh\u00f6vs f\u00f6r att hantera anpassade metaf\u00e4lt i Gutenberg och bygga alla typer av webbplatser.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Den h\u00e4r artikeln f\u00f6ruts\u00e4tter att du \u00e4r bekant med tekniker som <a href=\"https:\/\/kinsta.com\/se\/blog\/vad-node-js\/\">Node.js<\/a> &#038; <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a>, <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> och <a href=\"https:\/\/kinsta.com\/blog\/what-is-javascript\/\">JavaScript<\/a>. Det kr\u00e4vs \u00e4ven grundl\u00e4ggande kunskaper om WordPress-utveckling.<\/p>\n<p>Om du \u00e4r en nyb\u00f6rjare n\u00e4r det g\u00e4ller utveckling av Gutenberg-block s\u00e5 ska du se till att l\u00e4sa v\u00e5ra tidigare guider innan du b\u00f6rjar l\u00e4sa den h\u00e4r artikeln:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/gutenberg-block\/\">Bygga anpassade Gutenberg-block<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">Hur man skapar dynamiska block f\u00f6r Gutenberg<\/a><\/li>\n<\/ul>\n<p>Om du f\u00f6redrar videoinneh\u00e5ll s\u00e5 kan du kolla in v\u00e5r kostnadsfria videokurs om <a href=\"https:\/\/kinsta.com\/courses\/course\/gutenberg-block-development\/\">utveckling av anpassade Gutenbergblock<\/a>.<\/p>\n<\/aside>\n\n<p><strong>Obs: Innan du g\u00f6r n\u00e5got s\u00e5 m\u00e5ste du se till att du har en <a href=\"https:\/\/kinsta.com\/se\/blog\/hur-du-installerar-node-js\/\">uppdaterad version av Node.js<\/a> p\u00e5 din dator<\/strong><\/p>\n<p>Med detta sagt, h\u00e4r \u00e4r v\u00e5r \u00f6versikt:<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Skapa en blockplugin med det officiella verktyget create-block<\/h2>\n<p>Det f\u00f6rsta steget \u00e4r att skapa ett nytt plugin med alla filer och beroenden som beh\u00f6vs f\u00f6r att registrera en ny blocktyp. Med blockpluginet s\u00e5 kan du enkelt skapa en anpassad blocktyp f\u00f6r hantering och visning av anpassad metadata.<\/p>\n<p>F\u00f6r att skapa en ny blocktyp s\u00e5 anv\u00e4nder vi det officiella verktyget <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a>. F\u00f6r en detaljerad \u00f6versikt \u00f6ver hur du anv\u00e4nder create block-verktyget s\u00e5 kan du exempelvis l\u00e4sa v\u00e5r <a href=\"https:\/\/kinsta.com\/se\/blog\/gutenberg-block\/#create-block\">tidigare artikel<\/a> om utveckling av Gutenberg-block.<\/p>\n<p>\u00d6ppna ditt kommandoradsverktyg, navigera till <strong>plugins<\/strong>-katalogen p\u00e5 din <a href=\"https:\/\/kinsta.com\/se\/wordpress-hosting\/staging\/\">WordPress-utvecklingswebbplats<\/a> och k\u00f6r f\u00f6ljande kommando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>N\u00e4r du blir tillfr\u00e5gad s\u00e5 l\u00e4gger du till f\u00f6ljande uppgifter:<\/p>\n<ul>\n<li><strong>Den mallvariant som ska anv\u00e4ndas f\u00f6r det h\u00e4r blocket: <\/strong>dynamisk<\/li>\n<li><strong>Den blocknamn som anv\u00e4nds f\u00f6r identifiering (\u00e4ven namnet p\u00e5 utdatamappen):\u00a0<\/strong>metadata-block<\/li>\n<li><strong>Det interna namnomr\u00e5det f\u00f6r blocknamnet (n\u00e5got unikt f\u00f6r dina produkter):\u00a0<\/strong>meta-f\u00e4lt<\/li>\n<li><strong>Titeln f\u00f6r blocket:\u00a0<\/strong>Metaf\u00e4lt<\/li>\n<li><strong>Den korta beskrivningen av blocket (valfritt):\u00a0<\/strong>Blockbeskrivning<\/li>\n<li><strong><strong>Dashicon f\u00f6r att g\u00f6ra det l\u00e4ttare att identifiera ditt block (valfritt): <\/strong><\/strong>bok<\/li>\n<li><strong><strong>Kategorinamnet f\u00f6r att hj\u00e4lpa anv\u00e4ndarna att bl\u00e4ddra och uppt\u00e4cka ditt block: <\/strong><\/strong>widgets<\/li>\n<li><strong><strong>Vill du anpassa WordPress-pluginet?: <\/strong><\/strong>Ja\/Nej<\/li>\n<\/ul>\n<p>L\u00e5t oss ta en stund f\u00f6r att granska dessa detaljer och f\u00f6rs\u00f6ka f\u00f6rst\u00e5 var de anv\u00e4nds.<\/p>\n<ul>\n<li><strong>Blocket slug som anv\u00e4nds f\u00f6r identifiering<\/strong> definierar pluginets <strong>mappnamn<\/strong> och <strong>textdom\u00e4n<\/strong><\/li>\n<li><strong>Det interna namnomr\u00e5det f\u00f6r blocknamnet<\/strong> definierar blockets <strong>interna namnomr\u00e5de<\/strong> och <strong>funktionsprefix<\/strong> som anv\u00e4nds i hela pluginets kod.<\/li>\n<li><strong>Visningstiteln f\u00f6r ditt block<\/strong> definierar <strong>pluginets namn<\/strong> och det <strong>blocknamn<\/strong> som anv\u00e4nds i redigeringsgr\u00e4nssnittet.<\/li>\n<\/ul>\n<p>Inst\u00e4llningen kan ta ett par minuter. N\u00e4r processen \u00e4r klar s\u00e5 f\u00e5r du en lista \u00f6ver tillg\u00e4ngliga kommandon.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"Block-pluginet har installerats framg\u00e5ngsrikt.\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Block-pluginet har installerats framg\u00e5ngsrikt.<\/figcaption><\/figure>\n<p>Innan du g\u00e5r vidare till n\u00e4sta avsnitt s\u00e5 ska du navigera till plugin-mappen i ditt <a href=\"https:\/\/kinsta.com\/blog\/linux-commands\/\">kommandoradsverktyg<\/a> och k\u00f6ra f\u00f6ljande kommandon:<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Se till att k\u00f6ra kommandot <code>npm start<\/code> varje g\u00e5ng som du startar din Gutenberg-utvecklingsmilj\u00f6.<\/p>\n<p>Som ett resultat av <code>npm start<\/code> s\u00e5 kommer en watcher att k\u00f6ras i terminalen och bygga om JS- och CSS-filer efter eventuella \u00e4ndringar (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">l\u00e4s mer<\/a>).<\/p>\n<\/aside>\n\n<p>Du \u00e4r redo att bygga din kod. N\u00e4sta steg \u00e4r att redigera pluginets huvudsakliga PHP-fil f\u00f6r att bygga en metaruta f\u00f6r den Klassiska redigeraren.<\/p>\n<p>S\u00e5 innan du g\u00e5r vidare till n\u00e4sta avsnitt ska du <strong>installera och aktivera pluginet <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Klassisk Redigerare<\/a><\/strong>.<\/p>\n<p>\u00d6ppna sedan sk\u00e4rmen Plugins och aktivera det nya pluginet <strong>Meta Fields<\/strong>.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143199 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Aktivera plugins.\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Aktivera plugins.<\/figcaption><\/figure>\n<h2>L\u00e4gg till en metaruta i den klassiska redigeraren<\/h2>\n<p>I den <a href=\"https:\/\/kinsta.com\/se\/blog\/inaktiverar-gutenberg-wordpress-redigerare\/\">klassiska redigeraren<\/a> s\u00e5 \u00e4r en metaruta en container med formul\u00e4relement f\u00f6r att skriva in specifik information, exempelvis inl\u00e4ggsf\u00f6rfattare, taggar, kategorier osv.<\/p>\n<p>F\u00f6rutom de inbyggda metarutorna s\u00e5 kan utvecklare av plugins l\u00e4gga till ett obegr\u00e4nsat antal <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">anpassade metarutor<\/a> f\u00f6r att inkludera HTML-formul\u00e4relement (eller annat <a href=\"https:\/\/kinsta.com\/blog\/learn-html\/\">HTML-inneh\u00e5ll<\/a>) d\u00e4r pluginens anv\u00e4ndare kan skriva in plugin-specifika uppgifter.<\/p>\n<p>WordPress API tillhandah\u00e5ller anv\u00e4ndbara funktioner f\u00f6r att enkelt registrera anpassade metarutor s\u00e5 att de inkluderar alla de HTML-element som ditt plugin beh\u00f6ver f\u00f6r att fungera.<\/p>\n<p>F\u00f6r att komma ig\u00e5ng s\u00e5 l\u00e4gger du till f\u00f6ljande kod i PHP-filen f\u00f6r det plugin som du just har skapat:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post',\n\t\t'side',\n\t\t'default'\n\t );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n\t  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n\t  $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n\t  $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n\t  ?&gt;\n\t  &lt;div class=\"inside\"&gt;\n\t  \t  &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\t\n\t\t  &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t  &lt;\/div&gt;\n\t  &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>Funktionen <code>add_meta_box<\/code> registrerar en ny metaruta, medan callback-funktionen bygger upp den HTML som ska injiceras i metarutan. Vi kommer inte att djupdyka mer i det h\u00e4r \u00e4mnet eftersom det ligger utanf\u00f6r ramen f\u00f6r v\u00e5r artikel, men du hittar alla detaljer som du beh\u00f6ver <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">h\u00e4r<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">h\u00e4r<\/a> och <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">h\u00e4r<\/a>.<\/p>\n<p>N\u00e4sta steg \u00e4r att skapa en funktion som sparar de uppgifter som har matats in av inl\u00e4ggsf\u00f6rfattaren varje g\u00e5ng som <code>save_post<\/code> &#8211;<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpresskrokar\/\">kroken<\/a> blir utl\u00f6st (se <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Utvecklingsresurser<\/a>):<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_author'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\t$author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n\tupdate_post_meta( $post_id, '_meta_fields_book_title', $title );\n\tupdate_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>\u00c5terigen, kolla in online-dokumentationen f\u00f6r detaljer. Vi vill bara n\u00e4mna de understrykningstecken (<code>_<\/code>) som f\u00f6reg\u00e5r metanyckeln. Detta s\u00e4ger till WordPress att d\u00f6lja nycklarna f\u00f6r dessa anpassade f\u00e4lt fr\u00e5n listan \u00f6ver standarm\u00e4ssigt tillg\u00e4ngliga anpassade f\u00e4lt. Det g\u00f6r \u00e4ven att dina anpassade f\u00e4lt endast syns i din anpassade metaruta.<\/p>\n<p>Bilden nedan visar hur den anpassade metarutan ser ut i Klassisk redigerare:<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142726 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"En anpassad metaruta i den klassiska redigeraren.\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">En anpassad metaruta i den klassiska redigeraren.<\/figcaption><\/figure>\n<p>Pr\u00f6va nu att inaktivera pluginet Klassisk redigerare och kontrollera vad som h\u00e4nder i <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">blockredigeraren.<\/a> D\u00e5 ser du att metarutan fortfarande visas och fungerar, men inte exakt p\u00e5 det s\u00e4tt som du kanske f\u00f6rv\u00e4ntar dig.<\/p>\n<p>V\u00e5rt m\u00e5l \u00e4r att skapa ett system f\u00f6r att hantera metadata som \u00e4r kopplade till blogginl\u00e4gg eller <a href=\"https:\/\/kinsta.com\/se\/blog\/anpassade-wordpress-inlaggstyper\/\">anpassade inl\u00e4ggstyper<\/a> som integreras s\u00f6ml\u00f6st i blockredigeraren. Av denna anledning s\u00e5 kommer den kod som visats hittills endast att beh\u00f6vas f\u00f6r att s\u00e4kerst\u00e4lla bak\u00e5tkompatibilitet med den klassiska redigeraren.<\/p>\n<p>S\u00e5 innan vi g\u00e5r vidare ska vi tala om f\u00f6r WordPress att ta bort den anpassade metaboxen fr\u00e5n blockredigeraren genom att l\u00e4gga till flaggan <code>__back_compat_meta_box<\/code> till funktionen <code>add_meta_box<\/code> (se \u00e4ven <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Flaggor f\u00f6r metaboxkompatibilitet<\/a> och <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">bak\u00e5tkompatibilitet<\/a>).<\/p>\n<p>L\u00e5t oss nu g\u00e5 tillbaka till callback-funktionen som registrerar metarutan och \u00e4ndra den enligt f\u00f6ljande:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post', \n\t\t'side',\n\t\t'default',\n\t\t\/\/ hide the meta box in Gutenberg\n\t\tarray('__back_compat_meta_box' =&gt; true)\n\t );\n}<\/code><\/pre>\n<p>Spara plugin-filen och g\u00e5 tillbaka till din WordPress-administrat\u00f6r. Nu b\u00f6r du inte l\u00e4ngre se den anpassade metarutan i blockredigeraren. Om du ist\u00e4llet \u00e5teraktiverar den klassiska redigeraren s\u00e5 kommer din anpassade metaruta att dyka upp igen.<\/p>\n<h2>L\u00e4gg till anpassade metaf\u00e4lt i Gutenbergs blockredigerare (tre alternativ)<\/h2>\n<p>I v\u00e5ra tidigare artiklar om utveckling av Gutenberg-block s\u00e5 gav vi detaljerade \u00f6versikter \u00f6ver redigeraren, dess delar och hur man utvecklar <a href=\"https:\/\/kinsta.com\/se\/blog\/gutenberg-block\/\">statiska block<\/a> och <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">dynamiska block<\/a>.<\/p>\n<p>Som vi n\u00e4mnde tidigare s\u00e5 \u00e4r det t\u00e4nkt att den h\u00e4r artikeln tar allt ett steg l\u00e4ngre och diskuterar hur du l\u00e4gger till anpassade metaf\u00e4lt till blogginl\u00e4gg.<\/p>\n<p>Det finns flera s\u00e4tt att lagra och anv\u00e4nda postmetadata i Gutenberg. H\u00e4r kommer vi att g\u00e5 igenom f\u00f6ljande:<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Skapa ett anpassat block f\u00f6r att lagra och visa anpassade metaf\u00e4lt<\/h3>\n<p>I det h\u00e4r avsnittet s\u00e5 visar vi hur du skapar och hanterar anpassade metaf\u00e4lt fr\u00e5n ett <strong>dynamiskt block<\/strong>. Enligt Blockredigerarens handbok s\u00e5 \u00e4r ett <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">postmetaf\u00e4lt<\/a> &#8221;ett WordPress-objekt som anv\u00e4nds f\u00f6r att lagra extra data om ett inl\u00e4gg&#8221; och vi m\u00e5ste f\u00f6rst registrera ett nytt metaf\u00e4lt innan vi kan anv\u00e4nda det.<\/p>\n<h4>Registrera anpassade metaf\u00e4lt<\/h4>\n<p>Innan du registrerar ett anpassat metaf\u00e4lt s\u00e5 m\u00e5ste du se till att den <a href=\"https:\/\/kinsta.com\/se\/blog\/anpassade-wordpress-inlaggstyper\/\">inl\u00e4ggstyp<\/a> som ska anv\u00e4nda detta har st\u00f6d f\u00f6r anpassade f\u00e4lt. N\u00e4r du registrerar ett anpassat metaf\u00e4lt s\u00e5 b\u00f6r du dessutom st\u00e4lla in parametern <code>show_in_rest<\/code> till <code>true<\/code>.<\/p>\n<p>Nu \u00e5terg\u00e5r vi till plugin-filen. L\u00e4gg till f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n    foreach( $metafields as $metafield ){\n        \/\/ Pass an empty string to register the meta key across all existing post types.\n        register_post_meta( '', $metafield, array(\n            'show_in_rest' =&gt; true,\n            'type' =&gt; 'string',\n            'single' =&gt; true,\n            'sanitize_callback' =&gt; 'sanitize_text_field',\n            'auth_callback' =&gt; function() { \n                return current_user_can( 'edit_posts' );\n            }\n        ));\n    }  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> registrerar en metanyckel f\u00f6r de angivna inl\u00e4ggstyperna. I koden ovan s\u00e5 har vi registrerat tv\u00e5 anpassade metaf\u00e4lt f\u00f6r alla inl\u00e4ggstyper som \u00e4r registrerade p\u00e5 din webbplats och som st\u00f6der anpassade f\u00e4lt. Mer information finns i <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">funktionsreferensen<\/a>.<\/p>\n<p>N\u00e4r du \u00e4r klar s\u00e5 \u00f6ppnar du filen <strong>src\/index.js<\/strong> f\u00f6r ditt blockplugin.<\/p>\n<h4>Registrera blocktypen p\u00e5 klienten<\/h4>\n<p>Navigera nu till mappen <strong>wp-content\/plugins\/metadata-block\/src<\/strong> och \u00f6ppna filen <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\tedit: Edit,\n} );<\/code><\/pre>\n<p>Med statiska block s\u00e5 skulle vi \u00e4ven ha sett en <a href=\"https:\/\/kinsta.com\/se\/blog\/gutenberg-block\/#indexjs\"><code>save<\/code>-funktion<\/a>. I det h\u00e4r fallet s\u00e5 saknas funktionen <code>save<\/code> eftersom vi har installerat ett dynamiskt block. Inneh\u00e5llet som visas p\u00e5 frontend kommer att genereras dynamiskt via PHP.<\/p>\n<h4>Skapa blocktypen<\/h4>\n<p>Navigera till mappen <strong>wp-content\/plugins\/metadata-block\/src<\/strong> och \u00f6ppna filen <strong>edit.js<\/strong>. Du b\u00f6r se f\u00f6ljande kod (kommentarer \u00e4r borttagna):<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>H\u00e4r l\u00e4gger du till koden f\u00f6r att generera blocket som ska \u00e5terges i redigeraren.<\/p>\n<p>Det f\u00f6rsta steget \u00e4r att importera de komponenter och funktioner som beh\u00f6vs f\u00f6r att skapa blocket. H\u00e4r \u00e4r den fullst\u00e4ndiga listan \u00f6ver beroenden:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Om du har l\u00e4st v\u00e5ra tidigare artiklar s\u00e5 b\u00f6r du k\u00e4nna till m\u00e5nga av dessa <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\"><code>import<\/code> -deklarationer<\/a>. H\u00e4r ska vi bara ta upp ett par av dem:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>N\u00e4r du har importerat dessa beroenden s\u00e5 kan du se <code>useSelect<\/code> och <code>useEntityProp<\/code> i <code>Edit()<\/code>-funktionen:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> \u00e4r en anpassad krok f\u00f6r att <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/#build-the-block-to-be-rendered-in-the-editor\">h\u00e4mta props fr\u00e5n registrerade selektorer<\/a>. Vi kommer att anv\u00e4nda den f\u00f6r att h\u00e4mta den aktuella posttypen (se \u00e4ven <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\">@wordpress\/data-referensen<\/a> och <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">Introduktion av useDispatch och useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> \u00e4r en anpassad krok som g\u00f6r det m\u00f6jligt f\u00f6r block att h\u00e4mta och \u00e4ndra metaf\u00e4lt f\u00f6r inl\u00e4gg. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">Den definieras<\/a> som en &#8221;krok som returnerar v\u00e4rdet och en inst\u00e4llare f\u00f6r den angivna egenskapen f\u00f6r den n\u00e4rmaste tillhandah\u00e5llna enheten av den angivna typen&#8221;. Den returnerar &#8221;en array d\u00e4r den f\u00f6rsta posten \u00e4r egenskapsv\u00e4rdet, den andra \u00e4r inst\u00e4llaren och den tredje \u00e4r det fullst\u00e4ndiga v\u00e4rdeobjektet fr\u00e5n REST API som inneh\u00e5ller mer information som <code>raw<\/code>, <code>rendered<\/code> och <code>protected<\/code> props&#8221;. (Se \u00e4ven <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">uppdateringar av det allm\u00e4nna API: et f\u00f6r blockredigerare<\/a>.)<\/li>\n<\/ul>\n<p>Den h\u00e4r koden tillhandah\u00e5ller aktuell <code>postType<\/code>, ett objekt med metaf\u00e4lt (<code>meta<\/code>) och en inst\u00e4llningsfunktion f\u00f6r att uppdatera dem (<code>setMeta<\/code>).<\/p>\n<p>Ers\u00e4tt nu den nuvarande koden f\u00f6r funktionen <code>Edit()<\/code> med f\u00f6ljande:<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n\tconst blockProps = useBlockProps();\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\tconst bookTitle = meta[ '_meta_fields_book_title' ];\n\tconst bookAuthor = meta[ '_meta_fields_book_author' ];\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_title: newValue } );\n    };\n\tconst updateBookAuthorMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_author: newValue } );\n\t};\nreturn ( ... );\n}<\/code><\/pre>\n<p>\u00c5terigen:<\/p>\n<ul>\n<li>Vi anv\u00e4nde <code>useSelect<\/code> f\u00f6r att f\u00e5 fram den aktuella posttypen.<\/li>\n<li><code>useEntityProp<\/code> returnerar en matris med metaf\u00e4lt och en inst\u00e4llningsfunktion f\u00f6r att st\u00e4lla in nya metav\u00e4rden.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> och <code>updateBookAuthorMetaValue<\/code> \u00e4r tv\u00e5 h\u00e4ndelsehanterare f\u00f6r att spara v\u00e4rden f\u00f6r metaf\u00e4lt.<\/li>\n<\/ul>\n<p>N\u00e4sta steg \u00e4r att bygga JSX-koden (JavaScript XML) som returneras av <code>Edit()<\/code>-funktionen:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n\t...\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelBody \n\t\t\t\t\ttitle={ __( 'Book Details' )}\n\t\t\t\t\tinitialOpen={true}\n\t\t\t\t&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={__( 'Book title' )}\n\t\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Book author' ) }\n\t\t\t\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;RichText \n\t\t\t\t\ttagName=\"h3\"\n\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\t\/&gt;\n\t\t\t\t&lt;TextControl\n\t\t\t\t\tlabel=\"Book Author\"\n\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>Komponenten <code>RichText<\/code> ger en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">inneh\u00e5llsanpassad<\/a> inmatning, medan <code>TextControl<\/code> ger enkla textf\u00e4lt.<\/p>\n<p>Vi skapade \u00e4ven en sidof\u00e4ltspanel som inneh\u00e5ller tv\u00e5 inmatningsf\u00e4lt som ska anv\u00e4ndas i st\u00e4llet f\u00f6r de tv\u00e5 formul\u00e4rkontroller som ing\u00e5r i blocket.<\/p>\n<p>Spara filen och g\u00e5 tillbaka till redigeraren. L\u00e4gg till blocket <strong>Meta Fields<\/strong> fr\u00e5n blockinfogaren och fyll i bokens titel och f\u00f6rfattare.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142769 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Ett anpassat block som inneh\u00e5ller tv\u00e5 anpassade metaf\u00e4lt.\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Ett anpassat block som inneh\u00e5ller tv\u00e5 anpassade metaf\u00e4lt.<\/figcaption><\/figure>\n<p>Du kommer att m\u00e4rka att n\u00e4r du \u00e4ndrar v\u00e4rdet p\u00e5 f\u00e4ltet i blocket s\u00e5 \u00e4ndras \u00e4ven v\u00e4rdet i motsvarande textf\u00e4lt i sidof\u00e4ltet.<\/p>\n<p>D\u00e4refter s\u00e5 m\u00e5ste vi skapa PHP-koden som genererar HTML-koden som ska visas p\u00e5 frontend.<\/p>\n<h4>Visa blocket p\u00e5 frontend<\/h4>\n<p>\u00d6ppna PHP-huvudfilen igen i din kodredigerare och skriv om callback-funktionen som genererar blockets utdata p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n\tregister_block_type(\n\t\t__DIR__ . '\/build',\n\t\tarray(\n\t\t\t'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n\t\t)\n\t);\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n\t\n\t$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n\t$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n\t$output = \"\";\n\n\tif( ! empty( $book_title ) ){\n\t\t$output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n\t}\n\tif( ! empty( $book_author ) ){\n\t\t$output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n\t}\n\tif( strlen( $output ) &gt; 0 ){\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n\t} else {\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n\t}\n}<\/code><\/pre>\n<p>Den h\u00e4r koden \u00e4r ganska sj\u00e4lvf\u00f6rklarande. Vi anv\u00e4nder f\u00f6rst <code>get_post_meta<\/code> f\u00f6r att h\u00e4mta v\u00e4rdena f\u00f6r de anpassade metaf\u00e4lten. Sedan s\u00e5 anv\u00e4nder vi dessa v\u00e4rden f\u00f6r att bygga upp blockets inneh\u00e5ll. Slutligen s\u00e5 returnerar callback-funktionen blockets HTML-uppgifter.<\/p>\n<p>Blocket \u00e4r redo att anv\u00e4ndas. Vi har avsiktligt h\u00e5llit koden i det h\u00e4r exemplet s\u00e5 enkel som m\u00f6jligt. Med hj\u00e4lp av Gutenberg&#8217;s inhemska komponenter s\u00e5 kan du dock bygga mer avancerade block och f\u00e5 ut s\u00e5 mycket som m\u00f6jligt av WordPress anpassade metaf\u00e4lt.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142768 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Ett anpassat block som inneh\u00e5ller flera metaf\u00e4lt.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Ett anpassat block som inneh\u00e5ller flera metaf\u00e4lt.<\/figcaption><\/figure>\n<p>I v\u00e5rt exempel s\u00e5 anv\u00e4nde vi elementen <code>h3<\/code> och <code>p<\/code> f\u00f6r att bygga blocket f\u00f6r frontend.<\/p>\n<p>Men du kan visa data p\u00e5 m\u00e5nga olika s\u00e4tt. F\u00f6ljande bild visar en enkel oordnad lista med metaf\u00e4lt.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142770 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Ett exempel p\u00e5 ett block p\u00e5 frontend.\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Ett exempel p\u00e5 ett block p\u00e5 frontend.<\/figcaption><\/figure>\n<p>Du hittar den fullst\u00e4ndiga koden f\u00f6r det h\u00e4r exemplet i den <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">h\u00e4r offentliga gist<\/a>.<\/p>\n<h3>L\u00e4gga till en anpassad metaf\u00e4ltruta i dokumentets sidof\u00e4lt<\/h3>\n<p>Det andra alternativet \u00e4r att f\u00e4sta anpassade metaf\u00e4lt till inl\u00e4gg med hj\u00e4lp av ett plugin som genererar en inst\u00e4llningsruta i dokument-sidof\u00e4ltet.<\/p>\n<p>Processen \u00e4r ganska lik det f\u00f6reg\u00e5ende exemplet, f\u00f6rutom att vi i det h\u00e4r fallet inte kommer att beh\u00f6va ett block f\u00f6r att hantera metadata. Vi kommer att skapa en komponent f\u00f6r att generera en panel som inneh\u00e5ller en upps\u00e4ttning kontroller i sidof\u00e4ltet f\u00f6r dokument enligt f\u00f6ljande steg:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Skapa ett nytt blockplugin med create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registrera en anpassad metaruta f\u00f6r Klassisk redigerare<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registrera de anpassade metaf\u00e4lten i den huvudsakliga plugin-filen via funktionen register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registrera ett plugin i filen index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Bygg komponenten med hj\u00e4lp av inbyggda Gutenberg-komponenter<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Skapa en ny blockplugin med verktyget create-block<\/h4>\n<p>F\u00f6r att skapa ett nytt blockplugin s\u00e5 f\u00f6ljer du stegen i <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">f\u00f6reg\u00e5ende avsnitt<\/a>. Du kan skapa ett nytt plugin eller redigera de skript som vi byggde i det f\u00f6reg\u00e5ende exemplet.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registrera en anpassad metaruta f\u00f6r den klassiska redigeraren<\/h4>\n<p>D\u00e4refter s\u00e5 m\u00e5ste du registrera en anpassad metaruta f\u00f6r att s\u00e4kerst\u00e4lla bak\u00e5tkompatibilitet f\u00f6r WordPress-webbplatser som fortfarande anv\u00e4nder Klassisk redigerare. Processen \u00e4r densamma som beskrivs i <a href=\"#add-a-meta-box-to-the-classic-editor\">f\u00f6reg\u00e5ende avsnitt<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registrera de anpassade metaf\u00e4lten i den huvudsakliga plugin-filen<\/h4>\n<p>N\u00e4sta steg \u00e4r att registrera de anpassade metaf\u00e4lten i den huvudsakliga plugin-filen via funktionen <code>register_post_meta()<\/code>. Du kan \u00e5terigen f\u00f6lja det <a href=\"#register-custom-meta-fields\">tidigare exemplet<\/a>.<\/p>\n<h4 id=\"option-2-register-plugin\">Registrera ett plugin i filen index.js<\/h4>\n<p>N\u00e4r du har genomf\u00f6rt de tidigare stegen s\u00e5 \u00e4r det dags att registrera ett plugin i <strong>index.js<\/strong>-filen f\u00f6r att rendera en anpassad komponent.<\/p>\n<p>Innan du registrerar pluginet s\u00e5 skapar du mappen <strong>Komponenter<\/strong> i pluginets <strong>src<\/strong>-mapp. I mappen <strong>Komponenter<\/strong> s\u00e5 skapar du den nya filen <strong>MetaBox.js<\/strong>. Du kan v\u00e4lja vilket namn som du tycker \u00e4r bra f\u00f6r din komponent. Se bara till att f\u00f6lja <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">b\u00e4sta praxis f\u00f6r namngivning<\/a> i React.<\/p>\n<p>Innan du g\u00e5r vidare s\u00e5 installerar du <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">pluginet<code>@wordpress\/plugins<\/code> <\/a> fr\u00e5n ditt kommandoradsverktyg.<\/p>\n<p>Stoppa processen (mac), installera pluginet och starta processen igen:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>N\u00e4r du \u00e4r klar s\u00e5 \u00f6ppnar du filen <strong>index.js<\/strong> i ditt plugin och l\u00e4gger till f\u00f6ljande kod.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>Koden \u00e4r ganska sj\u00e4lvf\u00f6rklarande. Vi vill dock stanna en stund vid de tv\u00e5 <code>import<\/code>-satserna f\u00f6r de l\u00e4sare som inte har avancerade React-kunskaper.<\/p>\n<p>Med det f\u00f6rsta <code>import<\/code>-meddelandet s\u00e5 omsl\u00f6t vi funktionens namn inom parenteser. I det andra <code>import<\/code>-meddelandet s\u00e5 \u00e4r komponentens namn inte omslutet av parenteser.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ett <code>import<\/code>-meddelande utan parenteser anv\u00e4nds f\u00f6r att <strong>importera standardexporten<\/strong>. Ett <code>import<\/code>-meddelande med parenteser anv\u00e4nds f\u00f6r att <strong>importera en namngiven export<\/strong>. Ytterligare information finns i f\u00f6ljande resurser:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Import och export av komponenter<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Importera en komponent<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">N\u00e4r ska jag anv\u00e4nda h\u00e4ngande parenteser f\u00f6r ES6-import?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Registrera sedan ditt plugin:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> registrerar helt enkelt ett plugin. Funktionen tar emot tv\u00e5 parametrar:<\/p>\n<ul>\n<li>En unik str\u00e4ng som identifierar pluginet<\/li>\n<li>Ett objekt med inst\u00e4llningar f\u00f6r pluginet. Observera att egenskapen <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">m\u00e5ste anges<\/a> och vara en giltig funktion.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Bygg komponenten med hj\u00e4lp av inbyggda Gutenberg-komponenter<\/h4>\n<p>Det \u00e4r dags att bygga v\u00e5r React-komponent. \u00d6ppna filen <strong>MetaBox.js<\/strong> (eller vad du nu kallade den) och l\u00e4gg till f\u00f6ljande importutsagor:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>Funktionen <code>compose<\/code> utf\u00f6r <strong>funktionskomposition<\/strong>, vilket inneb\u00e4r att resultatet av en funktion skickas vidare till en annan funktion. Innan du kan anv\u00e4nda <code>compose<\/code> s\u00e5 kan du beh\u00f6va installera motsvarande modul:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Om du vill anv\u00e4nda funktionen <code>compose<\/code> s\u00e5 m\u00e5ste du f\u00f6rst installera den aktuella modulen.<\/li>\n<li><code>withSelect<\/code> och <code>withDispatch<\/code> \u00e4r tv\u00e5 <strong>komponenter av h\u00f6gre ordning<\/strong> som g\u00f6r att du kan h\u00e4mta eller skicka data fr\u00e5n eller till en WordPress-butik. <code>withSelect<\/code> anv\u00e4nds f\u00f6r att injicera tillst\u00e5ndsl\u00f6sa props med hj\u00e4lp av registrerade <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">selektorer<\/a>, <code>withDispatch<\/code> anv\u00e4nds f\u00f6r att skicka props med hj\u00e4lp av registrerade <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">\u00e5tg\u00e4rdsskapare<\/a>.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> skapar objekt i sidof\u00e4ltet f\u00f6r dokument (se k\u00e4llkoden <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">p\u00e5 Github<\/a>).<\/li>\n<\/ul>\n<p>D\u00e4refter s\u00e5 ska du skapa komponenten f\u00f6r att visa panelen med metarutan i dokument-sidof\u00e4ltet. L\u00e4gg till f\u00f6ljande kod i din fil <strong>MetaBox.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n\tif ( 'post' !== postType ) return null;\n\n\treturn(\n\t\t&lt;PluginDocumentSettingPanel \n\t\t\ttitle={ __( 'Book details' ) } \n\t\t\ticon=\"book\"\n\t\t\tinitialOpen={ false }\n\t\t&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_title }\n\t\t\t\t\tlabel={ __( \"Title\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_author }\n\t\t\t\t\tlabel={ __( \"Author\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_publisher }\n\t\t\t\t\tlabel={ __( \"Publisher\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;DateTimePicker\n\t\t\t\t\tcurrentDate={ metaFields._meta_fields_book_date }\n\t\t\t\t\tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n\t\t\t\t\t__nextRemoveHelpButton\n\t\t\t\t\t__nextRemoveResetButton\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t);\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n\t\tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n\t\tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n\t\tsetMetaFields ( newValue ) {\n\t\t\tdispatch('core\/editor').editPost( { meta: newValue } )\n\t\t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>L\u00e5t oss dela upp den h\u00e4r koden.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\">Elementet<code>PluginDocumentSettingPanel<\/code><\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">visar en ny panel<\/a> i dokumentets sidof\u00e4lt. Vi st\u00e4ller in titeln (&#8221;Book details&#8221;) f\u00f6r ikonen och st\u00e4ller in <code>initialOpen<\/code> till <code>false<\/code>, vilket inneb\u00e4r att panelen \u00e4r st\u00e4ngd fr\u00e5n b\u00f6rjan.<\/li>\n<li>Inom <code>PluginDocumentSettingPanel<\/code> s\u00e5 har vi tre textf\u00e4lt och ett <code>DateTimePicker<\/code>-element som g\u00f6r det m\u00f6jligt f\u00f6r anv\u00e4ndaren att ange publiceringsdatum.<\/li>\n<li><code>withSelect<\/code> ger tillg\u00e5ng till funktionen <code>select<\/code> som vi anv\u00e4nder f\u00f6r att h\u00e4mta <code>metaFields<\/code> och <code>postType<\/code>. <code>withDispatch<\/code> ger tillg\u00e5ng till funktionen <code>dispatch<\/code>, som g\u00f6r det m\u00f6jligt att uppdatera metadata-v\u00e4rdena.<\/li>\n<li>Slutligen s\u00e5 g\u00f6r funktionen <code>compose<\/code> det m\u00f6jligt att komponera v\u00e5r komponent med <code>withSelect<\/code> och <code>withDispatch<\/code>, som \u00e4r komponenter av h\u00f6gre ordning. Detta ger komponenten tillg\u00e5ng till egenskaperna <code>metaFields<\/code> och <code>postType<\/code> och funktionen <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Spara din <strong>MetaBox.js<\/strong>-fil och skapa ett nytt inl\u00e4gg p\u00e5 din WordPress-utvecklingswebbplats och ta en titt p\u00e5 Dokument-sidof\u00e4ltet. Du b\u00f6r se den nya panelen f\u00f6r <strong>bokdetaljer<\/strong>.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"En anpassad metabox-panel i Gutenberg.\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">En anpassad metabox-panel i Gutenberg.<\/figcaption><\/figure>\n<p>K\u00f6r nu dina tester. Ange v\u00e4rdena f\u00f6r dina anpassade metaf\u00e4lt och spara inl\u00e4gget. Ladda sedan sidan p\u00e5 nytt och kontrollera om v\u00e4rdena som du har angett finns p\u00e5 plats.<\/p>\n<p>L\u00e4gg till blocket som vi har byggt i f\u00f6reg\u00e5ende avsnitt och kontrollera om allt fungerar som det ska.<\/p>\n<h3>L\u00e4gga till ett anpassat sidof\u00e4lt f\u00f6r att hantera inl\u00e4ggets metadata<\/h3>\n<p>Du kanske har ett stort antal anpassade metaf\u00e4lt att l\u00e4gga till i dina inl\u00e4gg eller anpassade inl\u00e4ggstyper? D\u00e5 kan du exempelvis skapa ett sidof\u00e4lt f\u00f6r anpassade inst\u00e4llningar specifikt f\u00f6r ditt plugin.<\/p>\n<p>Processen \u00e4r mycket lik det f\u00f6reg\u00e5ende exemplet. Har du f\u00f6rst\u00e5tt de steg som diskuterades i det f\u00f6reg\u00e5ende avsnittet? D\u00e5 kommer du troligtvis inte att ha n\u00e5gra sv\u00e5righeter med att bygga ett anpassat sidof\u00e4lt f\u00f6r Gutenberg.<\/p>\n<p>\u00c5terigen:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Skapa ett nytt blockplugin med create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">G\u00f6r en registrering av en anpassad metaruta f\u00f6r Klassisk redigerare<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">L\u00e4gg till de anpassade metaf\u00e4lten i den huvudsakliga plugin-filen via funktionen register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Addera ett plugin i filen index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Bygg komponenten med hj\u00e4lp av inbyggda Gutenberg-komponenter<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Skapa en ny blockplugin med verktyget create-block<\/h4>\n<p>F\u00f6r att skapa ett nytt blockplugin s\u00e5 f\u00f6ljer du \u00e5terigen de steg som har diskuterats ovan. Du kan skapa ett nytt plugin eller redigera de skript som byggdes i de tidigare exemplen.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registrera en anpassad metaruta f\u00f6r den klassiska redigeraren<\/h4>\n<p>Registrera nu en anpassad metaruta f\u00f6r att s\u00e4kerst\u00e4lla bak\u00e5tkompatibilitet f\u00f6r WordPress-webbplatser som fortfarande anv\u00e4nder Klassisk redigerare. Processen \u00e4r densamma som beskrivs i f\u00f6reg\u00e5ende avsnitt.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registrera de anpassade metaf\u00e4lten i den huvudsakliga plugin-filen<\/h4>\n<p>G\u00f6r en registrering av de anpassade metaf\u00e4lten i den huvudsakliga plugin-filen via funktionen <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">L\u00e4gg till ett plugin i filen index.js<\/h4>\n<p>Skapa nu en tom <strong>CustomSidebar.js<\/strong>-fil i din <strong>komponentmapp<\/strong>.<\/p>\n<p>N\u00e4r du \u00e4r klar s\u00e5 \u00e4ndrar du din <strong>index.js<\/strong>-fil p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n    render: CustomSidebar\n} );<\/code><\/pre>\n<p>Med koden ovan s\u00e5 importerar vi f\u00f6rst komponenten <code>CustomSidebar<\/code> och s\u00e4ger sedan till funktionen <code>registerPlugin<\/code> att den nya komponenten ska \u00e5terges.<\/p>\n<h4 id=\"#option-3-build-component\">Bygg komponenten med hj\u00e4lp av inbyggda Gutenberg-komponenter<\/h4>\n<p>\u00d6ppna sedan filen <strong>CustomSidebar.js<\/strong> och l\u00e4gg till f\u00f6ljande beroenden:<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Du b\u00f6r l\u00e4gga m\u00e4rke till att vi importerar tv\u00e5 nya komponenter:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code>.N\u00e4r du klickar p\u00e5 den s\u00e5 visas ett sidof\u00e4lt med inneh\u00e5llet i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\"><code>&lt;PluginSidebar \/&gt;<\/code>-elementet<\/a> (komponenten \u00e4r \u00e4ven dokumenterad <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">p\u00e5 GitHub<\/a>).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">g\u00f6r om ett menyalternativ<\/a> under Plugins i rullgardinsmenyn<strong> Mer menyer<\/strong> och kan anv\u00e4ndas f\u00f6r att aktivera motsvarande komponent <code>PluginSidebar<\/code> (se \u00e4ven <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">p\u00e5 GitHub<\/a>).<\/li>\n<\/ul>\n<p>Nu kan du bygga din anpassade komponent:<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n        \n    if ( 'post' !== postType ) return null;\n\n    return (\n        &lt;&gt;\n            &lt;PluginSidebarMoreMenuItem \n                target=\"metadata-sidebar\" \n                icon=\"book\"\n            &gt;\n                Metadata Sidebar\n            &lt;\/PluginSidebarMoreMenuItem&gt;\n            &lt;PluginSidebar \n                name=\"metadata-sidebar\" \n                icon=\"book\" \n                title=\"My Sidebar\"\n            &gt;\n                &lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_title }\n                            label={ __( \"Title\" ) }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_author }\n                            label={ __(\"Author\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_publisher }\n                            label={ __(\"Publisher\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ metaFields._meta_fields_book_date }\n                            onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/PluginSidebar&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>Det sista steget \u00e4r komponentkompositionen med <code>withSelect<\/code> och <code>withDispatch<\/code> komponenter av h\u00f6gre ordning:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n        metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n        setMetaFields ( newValue ) {\n            dispatch('core\/editor').editPost( { meta: newValue } )\n        }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Spara \u00e4ndringarna och kontrollera sedan redigeringsgr\u00e4nssnittet. Om du \u00f6ppnar rullgardinsmenyn <strong>Alternativ<\/strong> s\u00e5 ser du det nya objektet <strong>Metadata Sidebar<\/strong> under avsnittet <strong>Plugins<\/strong>. Om du klickar p\u00e5 det nya objektet s\u00e5 aktiveras ditt helt nya anpassade sidof\u00e4lt.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143176 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"Komponenten PluginSidebarMoreMenuItem l\u00e4gger till ett menyalternativ under Alternativ - Plugins.\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">Komponenten PluginSidebarMoreMenuItem l\u00e4gger till ett menyalternativ under Alternativ &#8211; Plugins.<\/figcaption><\/figure>\n<p>Samma sak h\u00e4nder n\u00e4r du klickar p\u00e5 bokikonen i det \u00f6vre h\u00f6gra h\u00f6rnet.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143175 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"Sidof\u00e4ltet f\u00f6r plugininst\u00e4llningar.\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">Sidof\u00e4ltet f\u00f6r plugininst\u00e4llningar.<\/figcaption><\/figure>\n<p>G\u00e5 nu tillbaka till din utvecklingswebbplats och skapa ett nytt blogginl\u00e4gg. Fyll i dina metaf\u00e4lt och l\u00e4gg sedan till blocket i redigerarens canvas. Det ska inneh\u00e5lla samma metav\u00e4rden som du skrev in i ditt anpassade sidof\u00e4lt.<\/p>\n<p>Spara inl\u00e4gget och f\u00f6rhandsgranska sidan i frontend. Du b\u00f6r se ditt kort med boktitel, f\u00f6rfattare, f\u00f6rlag och publiceringsdatum.<\/p>\n<p>Du hittar hela koden f\u00f6r den h\u00e4r artikeln i den h\u00e4r <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">offentliga gist<\/a>.<\/p>\n<h2>Ytterligare l\u00e4sning<\/h2>\n<p>I den h\u00e4r artikeln s\u00e5 har vi g\u00e5tt igenom flera \u00e4mnen, fr\u00e5n selektorer till komponenter av h\u00f6gre ordning och mycket mer. Vi har \u00e4ven l\u00e4nkat till de fr\u00e4msta resurserna som vi anv\u00e4nde som referenser i hela artikeln.<\/p>\n<p>Men om du vill dyka djupare i dessa \u00e4mnen s\u00e5 kan du \u00e4ven kolla in dessa ytterligare resurser:<\/p>\n<h3>Gutenberg-dokumentation och officiella WordPress-resurser<\/h3>\n<ul>\n<li>Pluginhandbok \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Anpassade Metaboxar<\/a><\/li>\n<li>Pluginhandbok \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">Hantering av postmetadata<\/a><\/li>\n<li>Instruktionsguider \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Metaboxar<\/a><\/li>\n<li>Guide\/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Pluginet Sidebar<\/a><\/li>\n<li>Handbok f\u00f6r blockredigerare \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">Pluginet Sidebar<\/a><\/li>\n<li>Paketreferens \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Paket \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">J\u00e4mf\u00f6relse med Redux<\/a><\/li>\n<li>Paket \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">withDispatch<\/a><\/li>\n<li>Paket \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Paket \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Paket \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">v\u00e4lj<\/a><\/li>\n<\/ul>\n<h3>Fler officiella resurser<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Komponenter av h\u00f6gre ordning<\/a> i React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Handlingskapare<\/a> i Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">Att h\u00e4mta data med selektorer<\/a> i Redux<\/li>\n<\/ul>\n<h3>Ytterligare resurser fr\u00e5n community<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Fantastiska krokar och var du kan anv\u00e4nda dem<\/a> (av Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">\u00d6versikt och introduktion till WordPress Dataserier<\/a>\u00a0(av Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Airbnb React\/JSX stilguide f\u00f6r Airbnb<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">React Komponenter av h\u00f6gre ordning (HOCs)<\/a> (av Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Funktionskomposition i JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Beg\u00e4r data i Gutenberg med getEntityRecords<\/a> (av Ryan Welcher)<\/li>\n<\/ul>\n<h3>Anv\u00e4ndbar l\u00e4sning fr\u00e5n Kinsta-webbplatsen<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">Vad \u00e4r React.js? En titt p\u00e5 det popul\u00e4ra JavaScript-biblioteket<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/react-basta-praxis\/\">B\u00e4sta praxis f\u00f6r React f\u00f6r att f\u00f6rb\u00e4ttra din f\u00f6rm\u00e5ga<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/react-komponent-bibliotek\/\">Bibliotek f\u00f6r React UI-komponenter<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-arbetsflode\/\">Hur man skapar ett effektivt WordPress-arbetsfl\u00f6de f\u00f6r utvecklare<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-utvecklarloner\/\">L\u00f6n f\u00f6r WordPress-utvecklare: Genomsnittet och hur du kan \u00f6ka din l\u00f6n<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/what-is-javascript\/\">Vad \u00e4r JavaScript? En titt p\u00e5 webbens mest popul\u00e4ra skriptspr\u00e5k<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/errors-in-javascript\/\">En slutgiltig guide f\u00f6r hantering av fel i JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/javascript-biblioteken\/\">De 40 b\u00e4sta JavaScript-biblioteken och ramverken f\u00f6r 2026<\/a><\/li>\n<\/ul>\n<h2>Sammanfattning<\/h2>\n<p>Det h\u00e4r var den tredje artikeln i v\u00e5r serie om utveckling av Gutenbergblock. Vi tog upp nya avancerade \u00e4mnen som b\u00f6r g\u00f6ra bilden som skisserades i tidigare artiklar om <a href=\"https:\/\/kinsta.com\/se\/blog\/gutenberg-block\/\">statisk<\/a> och <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">dynamisk blockutveckling<\/a> mer komplett.<\/p>\n<p>Du b\u00f6r nu kunna dra nytta av potentialen hos anpassade f\u00e4lt i Gutenberg och skapa mer avancerade och funktionella WordPress-webbplatser.<\/p>\n<p>Men det finns mer. Med de f\u00e4rdigheter som du har f\u00e5tt fr\u00e5n v\u00e5ra artiklar om blockutveckling s\u00e5 b\u00f6r du \u00e4ven ha en god uppfattning om hur du kan utveckla React-komponenter utanf\u00f6r WordPress. Gutenberg \u00e4r trots allt ett React-baserat SPA.<\/p>\n<p>Och nu \u00e4r det upp till dig! Har du redan skapat Gutenbergblock som anv\u00e4nder anpassade metaf\u00e4lt? Dela dina skapelser med oss i kommentarerna nedan.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anpassade f\u00e4lt \u00e4r ett s\u00e4tt att tilldela extra information till webbplatsens inneh\u00e5ll. Dessa bitar av information brukar kallas metadata. Metadata \u00e4r information om information. I WordPress &#8230;<\/p>\n","protected":false},"author":36,"featured_media":49322,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[843],"class_list":["post-49321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-21T12:25:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg\",\"datePublished\":\"2023-01-25T11:13:00+00:00\",\"dateModified\":\"2023-09-21T12:25:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\"},\"wordCount\":4622,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\",\"name\":\"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"datePublished\":\"2023-01-25T11:13:00+00:00\",\"dateModified\":\"2023-09-21T12:25:02+00:00\",\"description\":\"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-tips\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/wordpress-tips\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/se\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg","description":"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/","og_locale":"sv_SE","og_type":"article","og_title":"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg","og_description":"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.","og_url":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2023-01-25T11:13:00+00:00","article_modified_time":"2023-09-21T12:25:02+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Carlo Daniele","Ber\u00e4knad l\u00e4stid":"24 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg","datePublished":"2023-01-25T11:13:00+00:00","dateModified":"2023-09-21T12:25:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/"},"wordCount":4622,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/","url":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/","name":"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","datePublished":"2023-01-25T11:13:00+00:00","dateModified":"2023-09-21T12:25:02+00:00","description":"Gutenberg \u00e4ndrar hur vi anv\u00e4nder metaboxar och anpassade f\u00e4lt i WordPress. I den h\u00e4r artikeln l\u00e4r du dig att hantera metadata i blockredigeraren som ett proffs.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-lagg-till-meta-box-till-post\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"WordPress-tips","item":"https:\/\/kinsta.com\/se\/topics\/wordpress-tips\/"},{"@type":"ListItem","position":3,"name":"S\u00e5 h\u00e4r l\u00e4gger du till metaboxar och anpassade f\u00e4lt till inl\u00e4gg i Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/se\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/49321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=49321"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/49321\/revisions"}],"predecessor-version":[{"id":50869,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/49321\/revisions\/50869"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/translations\/fr"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/49321\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/49322"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=49321"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=49321"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=49321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}