{"id":48273,"date":"2023-01-25T12:09:47","date_gmt":"2023-01-25T11:09:47","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=48273&#038;preview=true&#038;preview_id=48273"},"modified":"2023-08-24T10:36:25","modified_gmt":"2023-08-24T09:36:25","slug":"wordpress-og-metaboks-til-indlaeg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/","title":{"rendered":"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/dk\/blog\/advanced-custom-fields\/#what\">Brugerdefinerede felter<\/a> giver mulighed for at tildele ekstra oplysninger til webstedsindhold. Disse oplysninger er normalt kendt som <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">metadata<\/a>.<\/p>\n<blockquote><p>Metadata er oplysninger om oplysninger. I WordPress&#8217; tilf\u00e6lde er det oplysninger, der er forbundet med indl\u00e6g, brugere, kommentarer og vilk\u00e5r.<\/p>\n<p>I betragtning af metadatas mange-til-en-forholdet i WordPress er dine muligheder temmelig ubegr\u00e6nsede. Du kan have s\u00e5 mange metaindstillinger, som du \u00f8nsker, og du kan gemme stort set hvad som helst derinde.<\/p>\n<p><em>\u2014<a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbook<\/a><\/em><\/p><\/blockquote>\n<p>Her er nogle eksempler p\u00e5 metadata, du kan vedh\u00e6fte til et indl\u00e6g ved hj\u00e6lp af brugerdefinerede felter:<\/p>\n<ul>\n<li>De geografiske koordinater for et sted eller en fast ejendom<\/li>\n<li>Datoen for en begivenhed<\/li>\n<li>ISBN-nummeret eller forfatteren til en bog<\/li>\n<li>Dagens hum\u00f8r hos forfatteren af indl\u00e6gget<\/li>\n<\/ul>\n<p>Og der er mange flere.<\/p>\n<p>Ud af boksen giver WordPress ikke en nem m\u00e5de at tilf\u00f8je og administrere brugerdefinerede felter p\u00e5. I den klassiske editor vises brugerdefinerede felter i en boks, der er placeret nederst p\u00e5 siden, under indl\u00e6gseditoren.<\/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=\"Brugerdefinerede felter i den klassiske editor.\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Brugerdefinerede felter i den klassiske editor.<\/figcaption><\/figure>\n<p>I Gutenberg er brugerdefinerede felter som standard deaktiveret, men du kan vise dem ved at v\u00e6lge det tilsvarende element i indl\u00e6gsindstillingerne.<\/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=\"Tilf\u00f8jelse af panelet med brugerdefinerede felter til blokredigeringsprogrammet.\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">Tilf\u00f8jelse af panelet med brugerdefinerede felter til blokredigeringsprogrammet.<\/figcaption><\/figure>\n<p>Desv\u00e6rre er der ingen m\u00e5de at vise metadata p\u00e5 frontend p\u00e5 uden at bruge et plugin eller f\u00e5 h\u00e6nderne beskidte med kode.<\/p>\n<p>Hvis du er bruger, kan du finde flere <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">fremragende plugins<\/a>, der g\u00f8r jobbet for dig derude. Men hvis du er udvikler og \u00f8nsker at f\u00e5 mere ud af WordPress tilpassede felter, integrere dem problemfrit i blokredigeringsprogrammet og vise dem p\u00e5 frontend af dit WordPress-websted ved hj\u00e6lp af en tilpasset Gutenberg-blok, s\u00e5 er du kommet til det rette sted.<\/p>\n<p>S\u00e5 hvis du spekulerer p\u00e5, hvad der er den bedste m\u00e5de at bruge WordPress-brugerdefinerede felter p\u00e5 b\u00e5de i <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a> og den <a href=\"https:\/\/kinsta.com\/blog\/wordpress-tinymce-editor\/\">klassiske editor<\/a> for WordPress-udviklere, er det hurtige svar &#8220;at skabe et plugin, der fungerer b\u00e5de til den klassiske editor og Gutenberg&#8221;.<\/p>\n<p>Men du skal ikke bekymre dig for meget. Hvis det kan v\u00e6re lidt tricky at skabe et plugin til at administrere brugerdefinerede felter i begge editorer, vil vi fors\u00f8ge at g\u00f8re processen s\u00e5 ligetil som muligt. N\u00e5r du forst\u00e5r de koncepter, som vi vil diskutere i denne artikel, vil du f\u00e5 de n\u00f8dvendige f\u00e6rdigheder til at administrere brugerdefinerede metafelter i Gutenberg og bygge alle slags websteder.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Denne artikel foruds\u00e6tter, at du er bekendt med teknologier som <a href=\"https:\/\/kinsta.com\/blog\/what-is-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> og <a href=\"https:\/\/kinsta.com\/blog\/what-is-javascript\/\">JavaScript<\/a>. Grundl\u00e6ggende kendskab til WordPress-udvikling er ogs\u00e5 p\u00e5kr\u00e6vet.<\/p>\n<p>Hvis du er ny inden for udvikling af Gutenberg-blokke, skal du s\u00f8rge for at tjekke vores tidligere vejledninger, f\u00f8r du begynder at l\u00e6se denne artikel:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-blokke\/\">Bygning af brugerdefinerede Gutenberg-blokke<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">S\u00e5dan opretter du dynamiske blokke til Gutenberg<\/a><\/li>\n<\/ul>\n<p>Hvis du foretr\u00e6kker videoindhold, kan du tjekke vores gratis videokursus om <a href=\"https:\/\/kinsta.com\/courses\/course\/gutenberg-block-development\/\">udvikling af brugerdefinerede Gutenberg-blokke<\/a>.<\/p>\n<\/aside>\n\n<p><strong>Bem\u00e6rk: F\u00f8r du g\u00f8r noget, skal du sikre dig, at du har en <a href=\"https:\/\/kinsta.com\/dk\/blog\/saadan-installeres-node-js\/\">opdateret version af Node.js<\/a> p\u00e5 din computer.<\/strong><\/p>\n<p>N\u00e5r det er sagt, er her vores oversigt:<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>Opret et blokplugin med det officielle create-block-v\u00e6rkt\u00f8j<\/h2>\n<p>Det f\u00f8rste skridt er at oprette et nyt plugin med alle de filer og afh\u00e6ngigheder, der er n\u00f8dvendige for at registrere en ny blok-type. Block-plugin&#8217;et vil give dig mulighed for nemt at oprette en brugerdefineret bloktype til administration og visning af brugerdefinerede metadata.<\/p>\n<p>For at oprette en ny bloktype bruger vi det officielle <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a>-v\u00e6rkt\u00f8j. Du kan f\u00e5 en detaljeret oversigt over, hvordan du bruger create-block-v\u00e6rkt\u00f8jet, i vores <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-blokke\/#create-block\">tidligere artikel<\/a> om udvikling af Gutenberg-blokke.<\/p>\n<p>\u00c5bn dit kommandolinjev\u00e6rkt\u00f8j, naviger til <strong>plugins<\/strong>-mappen p\u00e5 dit <a href=\"https:\/\/kinsta.com\/dk\/wordpress-hosting\/scenemiljoeer\/\">WordPress-udviklingswebsted<\/a>, og k\u00f8r f\u00f8lgende kommando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>N\u00e5r du bliver bedt om det, skal du tilf\u00f8je f\u00f8lgende oplysninger:<\/p>\n<ul>\n<li><strong>Den skabelonvariant, der skal bruges til denne blok:<\/strong> dynamic<\/li>\n<li><strong>Den blok, der anvendes til identifikation (ogs\u00e5 navnet p\u00e5 outputmappen)<\/strong>: metadata-block<\/li>\n<li><strong>Det interne navnerum for bloknavnet (noget unikt for dine produkter)<\/strong>: meta-fields<\/li>\n<li><strong>Visningstitlen for din blok:<\/strong> Meta Fields<\/li>\n<li><strong>Den korte beskrivelse af din blok (valgfrit):<\/strong> Blokbeskrivelse (valgfri)<\/li>\n<li><strong>Dashiconet for at g\u00f8re det lettere at identificere din blok (valgfrit<\/strong> ): bog<\/li>\n<li><strong>Kategorinavnet for at hj\u00e6lpe brugerne med at gennemse og finde din blok<\/strong>: Widgets<\/li>\n<li><strong>\u00d8nsker du at tilpasse WordPress-plugin&#8217;et?<\/strong> Ja\/Nej<\/li>\n<\/ul>\n<p>Lad os tage et \u00f8jeblik til at gennemg\u00e5 disse detaljer og fors\u00f8ge at forst\u00e5, hvor de bruges.<\/p>\n<ul>\n<li><strong>Den blok slug, der bruges til identifikation<\/strong>, definerer pluginets <strong>mappenavn<\/strong> og <strong>tekstdom\u00e6ne<\/strong>.<\/li>\n<li><strong>Det interne navnerum for bloknavnet<\/strong> definerer blokens <strong>interne navnerum<\/strong> og <strong>funktionspr\u00e6fiks<\/strong>, der bruges i hele pluginets kode.<\/li>\n<li><strong>Visningstitlen for din blok<\/strong> definerer <strong>plugin-navnet<\/strong> og det <strong>bloknavn<\/strong>, der bruges i editorgr\u00e6nsefladen.<\/li>\n<\/ul>\n<p>Ops\u00e6tningen kan tage et par minutter. N\u00e5r processen er afsluttet, f\u00e5r du en liste over de tilg\u00e6ngelige kommandoer.<\/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 plugin er installeret med succes.\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Block plugin er installeret med succes.<\/figcaption><\/figure>\n<p>F\u00f8r du g\u00e5r videre til n\u00e6ste afsnit, skal du i dit <a href=\"https:\/\/kinsta.com\/blog\/linux-commands\/\">kommandolinjev\u00e6rkt\u00f8j<\/a> navigere til din plugin-mappe og k\u00f8re f\u00f8lgende kommandoer:<\/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>S\u00f8rg for at k\u00f8re kommandoen <code>npm start<\/code> hver gang du starter dit Gutenberg-udviklingsmilj\u00f8.<\/p>\n<p>N\u00e5r du k\u00f8rer <code>npm start<\/code>, k\u00f8rer en watcher i terminalen og genopbygger JS- og CSS-filer efter eventuelle \u00e6ndringer (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">l\u00e6s mere<\/a>).<\/p>\n<\/aside>\n\n<p>Du er klar til at bygge din kode. Det n\u00e6ste skridt er at redigere pluginets prim\u00e6re PHP-fil for at bygge en metaboks til Classic Editor.<\/p>\n<p>S\u00e5 f\u00f8r du g\u00e5r videre til n\u00e6ste afsnit, skal du <strong>installere og aktivere plugin<\/strong>&#8216;<strong>et <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a><\/strong>.<\/p>\n<p>\u00c5bn derefter sk\u00e6rmen Plugins, og aktiver det nye plugin <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=\"Aktiver plugins.\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Aktiver plugins.<\/figcaption><\/figure>\n<h2>Tilf\u00f8j et metafelt til den klassiske editor<\/h2>\n<p>I forbindelse med <a href=\"https:\/\/kinsta.com\/dk\/blog\/deaktiveres-gutenberg-wordpress-editor\/\">Classic Editor<\/a> er en metaboks en beholder med formularelementer til indtastning af specifikke oplysninger, f.eks. indl\u00e6gsforfatter, tags, kategorier osv.<\/p>\n<p>Ud over de indbyggede metabokse kan plugin-udviklere tilf\u00f8je et vilk\u00e5rligt antal <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">brugerdefinerede metabokse<\/a> for at inkludere HTML-formularelementer (eller ethvert <a href=\"https:\/\/kinsta.com\/blog\/learn-html\/\">HTML-indhold<\/a>), hvor plugin-brugere kan indtaste plugin-specifikke data.<\/p>\n<p>WordPress API indeholder nyttige funktioner til nemt at registrere brugerdefinerede metabokse for at inkludere alle de HTML-elementer, som dit plugin skal bruge for at fungere.<\/p>\n<p>For at komme i gang skal du f\u00f8je f\u00f8lgende kode til PHP-filen for det plugin, du lige har oprettet:<\/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> registrerer en ny metaboks, mens callback-funktionen opbygger den HTML, der skal inds\u00e6ttes i metaboksen. Vi vil ikke dykke dybere ned i dette emne, da det ligger uden for rammerne af vores artikel, men du kan finde alle de detaljer, du har brug for, <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">her<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">her<\/a> og <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">her<\/a>.<\/p>\n<p>Det n\u00e6ste skridt er at oprette en funktion, der gemmer de data, der er indtastet af indl\u00e6gsforfatteren, hver gang <code>save_post<\/code> <a href=\"https:\/\/kinsta.com\/blog\/wordpress-hooks\/\">hook&#8217;en<\/a> udl\u00f8ses (se <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Developer Resources<\/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>Igen, tjek online-dokumentationen for detaljer. Her vil vi blot p\u00e5pege understregningstegnet (<code>_<\/code>), der g\u00e5r forud for metan\u00f8glen. Dette fort\u00e6ller WordPress at skjule n\u00f8glerne til disse brugerdefinerede felter fra listen over tilg\u00e6ngelige brugerdefinerede felter som standard og g\u00f8r dine brugerdefinerede felter kun synlige i din brugerdefinerede metaboks.<\/p>\n<p>Billedet nedenfor viser, hvordan den brugerdefinerede metaboks ser ud i den klassiske editor:<\/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 brugerdefineret metaboks i den klassiske editor.\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">En brugerdefineret metaboks i den klassiske editor.<\/figcaption><\/figure>\n<p>Hvis du nu deaktiverer plugin&#8217;et Classic Editor og kontrollerer, hvad der sker i <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-wordpress-editor\/\">blok-editoren<\/a>, vil du se, at metaboksen stadig vises og fungerer, men ikke helt p\u00e5 den m\u00e5de, du m\u00e5ske forventer.<\/p>\n<p>Vores m\u00e5l er at skabe et system til h\u00e5ndtering af metadata, der er knyttet til blogindl\u00e6g eller <a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-brugerdefinerede-indlaegstyper\/\">brugerdefinerede indl\u00e6gstyper<\/a>, som integreres problemfrit i blokredigeringsprogrammet. Derfor vil den kode, der er vist indtil videre, kun v\u00e6re n\u00f8dvendig for at sikre bagudkompatibilitet med den klassiske editor.<\/p>\n<p>S\u00e5 f\u00f8r vi g\u00e5r videre, fort\u00e6ller vi WordPress at fjerne den brugerdefinerede metaboks fra blokeditoren ved at tilf\u00f8je <code>__back_compat_meta_box<\/code> -flaget til <code>add_meta_box<\/code> -funktionen (se ogs\u00e5 <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Meta Box Compatibility Flags<\/a> og <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">Bagudkompatibilitet<\/a>).<\/p>\n<p>Lad os g\u00e5 tilbage til callback-funktionen, der registrerer metaboksen, og \u00e6ndre den som f\u00f8lger:<\/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>Gem plugin-filen, og g\u00e5 tilbage til din WordPress-administrator. Nu b\u00f8r du ikke l\u00e6ngere se den brugerdefinerede metaboks i blokeditoren. Hvis du i stedet genaktiverer den klassiske editor, vil din brugerdefinerede metaboks dukke op igen.<\/p>\n<h2>Tilf\u00f8j brugerdefinerede metafelter til Gutenberg-blokeditor (tre muligheder)<\/h2>\n<p>I vores tidligere artikler om udvikling af Gutenberg-blokke gav vi detaljerede oversigter over editoren, dens dele, og hvordan du udvikler <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-blokke\/\">statiske blokke<\/a> og <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">dynamiske blokke<\/a>.<\/p>\n<p>Som vi n\u00e6vnte, tager vi i denne artikel et skridt videre og diskuterer, hvordan du tilf\u00f8jer brugerdefinerede metafelter til blogindl\u00e6g.<\/p>\n<p>Der er flere m\u00e5der at gemme og bruge indl\u00e6gsmetadata p\u00e5 i Gutenberg. Her vil vi d\u00e6kke f\u00f8lgende:<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Opret en brugerdefineret blok til at gemme og vise brugerdefinerede metafelter<\/h3>\n<p>I dette afsnit viser vi dig, hvordan du opretter og administrerer brugerdefinerede metafelter fra en <strong>dynamisk blok<\/strong>. If\u00f8lge Block Editor Handbook er et <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">indl\u00e6gsmetafelt<\/a> &#8220;et WordPress-objekt, der bruges til at gemme ekstra data om et indl\u00e6g&#8221;, og vi skal f\u00f8rst registrere et nyt metafelt, f\u00f8r vi kan bruge det.<\/p>\n<h4>Registrer brugerdefinerede metafelter<\/h4>\n<p>F\u00f8r du registrerer et brugerdefineret metafelt, skal du sikre dig, at den <a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-brugerdefinerede-indlaegstyper\/\">indl\u00e6gstype<\/a>, der skal bruge det, underst\u00f8tter brugerdefinerede felter. N\u00e5r du registrerer et brugerdefineret metafelt, skal du desuden indstille parameteren <code>show_in_rest<\/code> til <code>true<\/code>.<\/p>\n<p>Nu tilbage til plugin-filen. Tilf\u00f8j f\u00f8lgende kode:<\/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> registrerer en metan\u00f8gle for de angivne posttyper. I koden ovenfor har vi registreret to brugerdefinerede metafelter for alle posttyper, der er registreret p\u00e5 dit websted, og som underst\u00f8tter brugerdefinerede felter. Du kan finde flere oplysninger i <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">funktionsreferencen<\/a>.<\/p>\n<p>N\u00e5r det er gjort, skal du \u00e5bne filen <strong>src\/index.js<\/strong> for dit block-plugin.<\/p>\n<h4>Registrer bloktypen p\u00e5 klienten<\/h4>\n<p>Naviger nu til mappen <strong>wp-content\/plugins\/metadata-block\/src<\/strong>, og \u00e5bn 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 statiske blokke ville vi ogs\u00e5 have set en <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-blokke\/#indexjs\"><code>save<\/code> funktion<\/a>. I dette tilf\u00e6lde mangler funktionen <code>save<\/code>, fordi vi har installeret en dynamisk blok. Det indhold, der vises p\u00e5 frontend, genereres dynamisk via PHP.<\/p>\n<h4>Opbyg bloktypen<\/h4>\n<p>Naviger til mappen <strong>wp-content\/plugins\/metadata-block\/src<\/strong>, og \u00e5bn filen <strong>edit.js<\/strong>. Du b\u00f8r se f\u00f8lgende kode (kommentarer er fjernet):<\/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>Her skal du tilf\u00f8je koden til at generere den blok, der skal gengives i editoren.<\/p>\n<p>Det f\u00f8rste skridt er at importere de komponenter og funktioner, der er n\u00f8dvendige for at opbygge blokken. Her er den komplette liste over afh\u00e6ngigheder:<\/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>Hvis du har l\u00e6st vores tidligere artikler, b\u00f8r du v\u00e6re bekendt med mange af disse <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\"><code>import<\/code> -deklarationer<\/a>. Her vil vi blot pege p\u00e5 et par af dem:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>N\u00e5r du har importeret disse afh\u00e6ngigheder, kan du se her, hvordan du <code>useSelect<\/code> og <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> er en brugerdefineret hook til at <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/#build-the-block-to-be-rendered-in-the-editor\">hente rekvisitter fra registrerede selektorer<\/a>. Vi vil bruge den til at hente den aktuelle indl\u00e6gstype (se ogs\u00e5 <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\">@wordpress\/data-reference<\/a> og <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">introduktion af useDispatch og useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> er en brugerdefineret hook, der g\u00f8r det muligt for blokke at hente og \u00e6ndre indl\u00e6gsmetafelter. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">Det er defineret<\/a> som en &#8220;hook, der returnerer v\u00e6rdien og en setter for den angivne egenskab af den n\u00e6rmeste leverede enhed af den angivne type&#8221;. Den returnerer &#8220;et array, hvor det f\u00f8rste element er egenskabsv\u00e6rdien, det andet er setteren og det tredje er det fulde v\u00e6rdiobjekt fra REST API, der indeholder flere oplysninger som <code>raw<\/code>, <code>rendered<\/code> og <code>protected<\/code> props&#8221;. (Se ogs\u00e5 <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">Generelle opdateringer af Block Editor API<\/a>.)<\/li>\n<\/ul>\n<p>Denne kode giver den aktuelle <code>postType<\/code>, et objekt med metafelter (<code>meta<\/code>) og en setterfunktion til at opdatere dem (<code>setMeta<\/code>).<\/p>\n<p>Udskift nu den nuv\u00e6rende kode for funktionen <code>Edit()<\/code> med f\u00f8lgende:<\/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>Igen:<\/p>\n<ul>\n<li>Vi brugte <code>useSelect<\/code> til at f\u00e5 den aktuelle posttype.<\/li>\n<li><code>useEntityProp<\/code> returnerer et array af metafelter og en setter-funktion til at indstille nye metav\u00e6rdier.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> og <code>updateBookAuthorMetaValue<\/code> er to event handlers til at gemme v\u00e6rdier for metafelter.<\/li>\n<\/ul>\n<p>Det n\u00e6ste skridt er at opbygge JSX-koden (JavaScript XML), der returneres af <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> giver et <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">indholdsdefinerbart<\/a> input, mens <code>TextControl<\/code> giver simple tekstfelter.<\/p>\n<p>Vi har ogs\u00e5 oprettet et sidebar-panel med to inputfelter til brug i stedet for de to formularkontroller, der er inkluderet i blokken.<\/p>\n<p>Gem filen, og g\u00e5 tilbage til editoren. Tilf\u00f8j blokken <strong>Meta Fields<\/strong> fra blokinserter og udfyld bogens titel og forfatter.<\/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=\"En brugerdefineret blok inklusive to brugerdefinerede metafelter\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">En brugerdefineret blok, der indeholder to brugerdefinerede metafelter.<\/figcaption><\/figure>\n<p>Du vil bem\u00e6rke, at hver gang du \u00e6ndrer v\u00e6rdien af feltet i blokken, \u00e6ndres v\u00e6rdien i det tilsvarende tekstfelt i sidebaren ogs\u00e5.<\/p>\n<p>Dern\u00e6st skal vi oprette den PHP-kode, der genererer den HTML, der skal gengives p\u00e5 frontend.<\/p>\n<h4>Vis blokken p\u00e5 frontend<\/h4>\n<p>\u00c5bn PHP-hovedfilen igen i din kodeeditor, og omskriv callback-funktionen, der genererer output af blokken, som f\u00f8lger:<\/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>Denne kode er ganske selvforklarende. F\u00f8rst bruger vi <code>get_post_meta<\/code> til at hente v\u00e6rdierne for de brugerdefinerede metafelter. Derefter bruger vi disse v\u00e6rdier til at opbygge blokindholdet. Til sidst returnerer callback-funktionen blokkens HTML-kode.<\/p>\n<p>Blokken er klar til at blive brugt. Vi har med vilje holdt koden i dette eksempel s\u00e5 enkel som muligt, men ved hj\u00e6lp af Gutenbergs native komponenter kan du bygge mere avancerede blokke og f\u00e5 mest muligt ud af WordPress brugerdefinerede metafelter.<\/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=\"En brugerdefineret blok med flere metafelter.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">En brugerdefineret blok med flere metafelter.<\/figcaption><\/figure>\n<p>I vores eksempel brugte vi <code>h3<\/code> og <code>p<\/code> elementer til at bygge blokken til frontend.<\/p>\n<p>Men du kan vise dataene p\u00e5 mange m\u00e5der. Det f\u00f8lgende billede viser en simpel uordnet liste af metafelter.<\/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=\"En eksempelblok p\u00e5 frontend.\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">En eksempelblok p\u00e5 frontend.<\/figcaption><\/figure>\n<p>Du finder den komplette kode for dette eksempel i <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">denne offentlige gist<\/a>.<\/p>\n<h3>Tilf\u00f8jelse af en brugerdefineret metaboks til dokumentets sidebar<\/h3>\n<p>Den anden mulighed er at vedh\u00e6fte brugerdefinerede metafelter til indl\u00e6g ved hj\u00e6lp af et plugin, der genererer et indstillingspanel i Document Sidebar.<\/p>\n<p>Processen er ret lig det foreg\u00e5ende eksempel, bortset fra at vi i dette tilf\u00e6lde ikke har brug for en blok til at administrere metadata. Vi opretter en komponent til at generere et panel med et s\u00e6t kontroller i Document sidebar ved at f\u00f8lge disse trin:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Opret et nyt blok-plugin med create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registrer en brugerdefineret metaboks til den klassiske editor<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registrer de brugerdefinerede metafelter i hovedpluginfilen via funktionen register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registrer et plugin i filen index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Opbyg komponenten ved hj\u00e6lp af indbyggede Gutenberg-komponenter<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Opret et nyt blokplugin med v\u00e6rkt\u00f8jet create-block<\/h4>\n<p>For at oprette et nyt blokplugin skal du f\u00f8lge trinene i det <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">foreg\u00e5ende afsnit<\/a>. Du kan oprette et nyt plugin eller redigere de scripts, vi byggede i det foreg\u00e5ende eksempel.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registrer en brugerdefineret metaboks til den klassiske editor<\/h4>\n<p>Dern\u00e6st skal du registrere en brugerdefineret metaboks for at sikre bagudkompatibilitet for WordPress-websteder, der stadig bruger Classic Editor. Processen er den samme som beskrevet i det <a href=\"#add-a-meta-box-to-the-classic-editor\">foreg\u00e5ende afsnit<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registrer de brugerdefinerede metafelter i hovedpluginfilen<\/h4>\n<p>Det n\u00e6ste trin er at registrere de brugerdefinerede metafelter i hovedpluginfilen via funktionen <code>register_post_meta()<\/code>. Igen kan du f\u00f8lge det <a href=\"#register-custom-meta-fields\">foreg\u00e5ende eksempel<\/a>.<\/p>\n<h4 id=\"option-2-register-plugin\">Registrer et plugin i filen index.js<\/h4>\n<p>N\u00e5r du har gennemf\u00f8rt de foreg\u00e5ende trin, er det tid til at registrere et plugin i <strong>index.js<\/strong>-filen for at gengive en brugerdefineret komponent.<\/p>\n<p>F\u00f8r du registrerer plugin&#8217;et, skal du oprette en mappe <strong>components<\/strong> i plugin&#8217;ets <strong>src<\/strong>-mappe. Inde i mappen <strong>components<\/strong> skal du oprette en ny <strong>MetaBox.js<\/strong>-fil. Du kan v\u00e6lge det navn, som du synes er passende for din komponent. Du skal blot s\u00f8rge for at f\u00f8lge den <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">bedste praksis for navngivning<\/a> i React.<\/p>\n<p>F\u00f8r du g\u00e5r videre, skal du installere <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">modulet<code>@wordpress\/plugins<\/code><\/a> fra dit kommandolinjev\u00e6rkt\u00f8j.<\/p>\n<p>Stop processen (mac), installer modulet, og start processen igen:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>N\u00e5r det er gjort, skal du \u00e5bne filen <strong>index.js<\/strong> i dit plugin og tilf\u00f8je f\u00f8lgende kode.<\/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>Denne kode er ret selvforklarende. Vi vil dog gerne tage et \u00f8jeblik til at dv\u00e6le ved de to <code>import<\/code> statements for de l\u00e6sere, der ikke har avancerede React-f\u00e6rdigheder.<\/p>\n<p>Med den f\u00f8rste <code>import<\/code> -erkl\u00e6ring omsluttede vi navnet p\u00e5 funktionen i kr\u00f8llede parenteser. Med den anden <code>import<\/code> -erkl\u00e6ring er komponentens navn ikke omsluttet af kr\u00f8llede parenteser.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En <code>import<\/code> -erkl\u00e6ring uden parenteser bruges til at <strong>importere standardeksporten<\/strong>. En <code>import<\/code> -meddelelse med parenteser bruges til at <strong>importere en navngiven eksport<\/strong>. Yderligere oplysninger kan findes i f\u00f8lgende ressourcer:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Import og eksport af komponenter<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Import af en komponent<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">Hvorn\u00e5r skal jeg bruge parenteser til ES6-import?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Derefter skal du registrere dit plugin:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> registrerer blot et plugin. Funktionen accepterer to parametre:<\/p>\n<ul>\n<li>En unik streng, der identificerer plugin&#8217;et<\/li>\n<li>Et objekt med plugin-indstillinger. Bem\u00e6rk, at <code>render<\/code> -egenskaben <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">skal angives<\/a> og skal v\u00e6re en gyldig funktion.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Opbygning af komponenten ved hj\u00e6lp af indbyggede Gutenberg-komponenter<\/h4>\n<p>Det er tid til at bygge vores React-komponent. \u00c5bn filen <strong>MetaBox.js<\/strong> (eller hvad du nu kaldte den) og tilf\u00f8j f\u00f8lgende import statements:<\/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> udf\u00f8rer <strong>funktionssammens\u00e6tning<\/strong>, hvilket betyder, at resultatet af en funktion sendes videre til en anden funktion. f\u00f8r du kan bruge <code>compose<\/code>, skal du muligvis installere det tilsvarende modul:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Vi vil se funktionen <code>compose<\/code> i aktion om lidt.<\/li>\n<li><code>withSelect<\/code> og <code>withDispatch<\/code> er to <strong>komponenter af h\u00f8jere orden<\/strong>, der giver dig mulighed for at hente eller sende data fra eller til et WordPress-lager. <code>withSelect<\/code> bruges til at injicere statsafledte props ved hj\u00e6lp af registrerede <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">selektorer<\/a>, <code>withDispatch<\/code> bruges til at sende props ved hj\u00e6lp af registrerede <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">action creators<\/a>.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> g\u00f8r elementer i dokumentets sidebj\u00e6lke klar (se kildekoden <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>Dern\u00e6st skal du oprette komponenten til at vise metabokspanelet i Document sidebar. I din <strong>MetaBox.js-fil<\/strong> skal du tilf\u00f8je f\u00f8lgende kode:<\/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>Lad os opdele denne kode.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\"><code>PluginDocumentSettingPanel<\/code> -elementet<\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">g\u00f8r et nyt panel<\/a> i dokumentets sidebar klar. Vi indstiller titlen (&#8220;Book details&#8221;) og ikonet og indstiller <code>initialOpen<\/code> til <code>false<\/code>, hvilket betyder, at panelet oprindeligt er lukket.<\/li>\n<li>Inden for <code>PluginDocumentSettingPanel<\/code> har vi tre tekstfelter og et <code>DateTimePicker<\/code> -element, som giver brugeren mulighed for at indstille udgivelsesdatoen.<\/li>\n<li><code>withSelect<\/code> giver adgang til funktionen <code>select<\/code>, som vi bruger til at hente <code>metaFields<\/code> og <code>postType<\/code>. <code>withDispatch<\/code> giver adgang til funktionen <code>dispatch<\/code>, som g\u00f8r det muligt at opdatere metadatav\u00e6rdierne.<\/li>\n<li>Endelig giver funktionen <code>compose<\/code> os mulighed for at sammens\u00e6tte vores komponent med <code>withSelect<\/code> og <code>withDispatch<\/code> komponenter af h\u00f8jere orden. Dette giver komponenten adgang til egenskaberne <code>metaFields<\/code> og <code>postType<\/code> og til funktionen <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Gem din <strong>MetaBox.js<\/strong>-fil, og opret et nyt indl\u00e6g p\u00e5 dit WordPress-udviklingswebsted, og tag et kig p\u00e5 Document Sidebar. Du b\u00f8r se det nye panel med <strong>bogdetaljer<\/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=\"Et brugerdefineret metabox-panel i Gutenberg.\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Et brugerdefineret metabox-panel i Gutenberg.<\/figcaption><\/figure>\n<p>K\u00f8r nu dine tests. Indstil v\u00e6rdierne for dine brugerdefinerede metafelter, og gem indl\u00e6gget. Genindl\u00e6s derefter siden, og tjek, om de v\u00e6rdier, du har indtastet, er p\u00e5 plads.<\/p>\n<p>Tilf\u00f8j den blok, vi har bygget i det foreg\u00e5ende afsnit, og tjek, om alt fungerer korrekt.<\/p>\n<h3>Tilf\u00f8jelse af en brugerdefineret sidebar til at administrere indl\u00e6gsmetadata<\/h3>\n<p>Hvis du har et stort antal brugerdefinerede metafelter, der skal tilf\u00f8jes til dine indl\u00e6g eller brugerdefinerede indl\u00e6gstyper, kan du ogs\u00e5 oprette en brugerdefineret indstillingssidebar specielt til dit plugin.<\/p>\n<p>Processen er meget lig det foreg\u00e5ende eksempel, s\u00e5 hvis du har forst\u00e5et de trin, der blev diskuteret i det foreg\u00e5ende afsnit, vil du ikke have nogen problemer med at bygge en brugerdefineret sidebar til Gutenberg.<\/p>\n<p>Igen:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Opret et nyt blok-plugin med create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Registrer en brugerdefineret metaboks til den klassiske editor<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Registrer de brugerdefinerede metafelter i hovedpluginfilen via funktionen register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Registrer et plugin i filen index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Opbyg komponenten ved hj\u00e6lp af indbyggede Gutenberg-komponenter<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Opret et nyt blokplugin med v\u00e6rkt\u00f8jet create-block<\/h4>\n<p>For at oprette et nyt blokplugin skal du igen f\u00f8lge de trin, der er beskrevet ovenfor. Du kan oprette et nyt plugin eller redigere de scripts, der er bygget i de tidligere eksempler.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registrer en brugerdefineret metaboks til den klassiske editor<\/h4>\n<p>Registrer nu en brugerdefineret metaboks for at sikre bagudkompatibilitet for WordPress-websteder, der stadig bruger den klassiske editor. Processen er den samme som beskrevet i det foreg\u00e5ende afsnit.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registrer de brugerdefinerede metafelter i hovedpluginfilen<\/h4>\n<p>Registrer de brugerdefinerede metafelter i hovedpluginfilen via funktionen <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">Registrer et plugin i filen index.js<\/h4>\n<p>Opret nu en tom <strong>CustomSidebar.js<\/strong>-fil i din <strong>komponentmappe<\/strong>.<\/p>\n<p>N\u00e5r det er gjort, skal du \u00e6ndre din <strong>index.js<\/strong>-fil som f\u00f8lger:<\/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 ovenst\u00e5ende kode importerer vi f\u00f8rst komponenten <code>CustomSidebar<\/code>, og derefter fort\u00e6ller vi <code>registerPlugin<\/code> -funktionen, at den skal gengive den nye komponent.<\/p>\n<h4 id=\"#option-3-build-component\">Opbygning af komponenten ved hj\u00e6lp af indbyggede Gutenberg-komponenter<\/h4>\n<p>\u00c5bn derefter filen <strong>CustomSidebar.js<\/strong>, og tilf\u00f8j f\u00f8lgende afh\u00e6ngigheder:<\/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\u00f8r bem\u00e6rke, at vi importerer to nye komponenter:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> vi skal tilf\u00f8je f\u00f8lgende nye komponenter: Vi skal tilf\u00f8je et ikon til Gutenberg-v\u00e6rkt\u00f8jslinjen, som, n\u00e5r der klikkes p\u00e5 det, viser en sidebar, herunder indholdet pakket ind i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\"><code>&lt;PluginSidebar \/&gt;<\/code> -elementet<\/a> (komponenten er ogs\u00e5 dokumenteret <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\/\">renderer et menupunkt<\/a> under Plugins i <strong>More Menu<\/strong> dropdown og kan bruges til at aktivere den tilsvarende <code>PluginSidebar<\/code> -komponent (se ogs\u00e5 <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 bygge din brugerdefinerede 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 sidste trin er komponentsammens\u00e6tningen med <code>withSelect<\/code> og <code>withDispatch<\/code> komponenter af h\u00f8jere orden:<\/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>Gem dine \u00e6ndringer, og tjek derefter editor-gr\u00e6nsefladen. Hvis du \u00e5bner rullemenuen <strong>Indstillinger<\/strong>, vil du se et nyt punkt <strong>Metadata Sidebar<\/strong> under afsnittet <strong>Plugins<\/strong>. Hvis du klikker p\u00e5 det nye element, aktiveres din helt nye brugerdefinerede sidebar.<\/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=\"PluginSidebarMoreMenuItem-komponenten tilf\u00f8jer et menupunkt under Options - Plugins.\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">PluginSidebarMoreMenuItem-komponenten tilf\u00f8jer et menupunkt under Options &#8211; Plugins.<\/figcaption><\/figure>\n<p>Det samme sker, n\u00e5r du klikker p\u00e5 bogikonet i \u00f8verste h\u00f8jre hj\u00f8rne.<\/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=\"Sidebj\u00e6lken Plugin Settings Sidebar.\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">Sidebj\u00e6lken Plugin Settings Sidebar.<\/figcaption><\/figure>\n<p>G\u00e5 nu tilbage til dit udviklingswebsted, og opret et nyt blogindl\u00e6g. Udfyld dine metafelter, og tilf\u00f8j derefter blokken til editorens l\u00e6rred. Den skal indeholde de samme metav\u00e6rdier, som du indtastede i din brugerdefinerede sidebar.<\/p>\n<p>Gem indl\u00e6gget, og f\u00e5 vist siden p\u00e5 frontend. Du b\u00f8r se dit kort med bogens titel, forfatter, forlag og udgivelsesdato.<\/p>\n<p>Du finder den fulde kode for denne artikel i denne <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">offentlige gist<\/a>.<\/p>\n<h2>Yderligere l\u00e6sning<\/h2>\n<p>I denne artikel har vi d\u00e6kket flere emner, fra selektorer til komponenter af h\u00f8jere orden og meget mere. Vi har ogs\u00e5 linket de bedste ressourcer, vi har brugt som reference i hele artiklen.<\/p>\n<p>Men hvis du \u00f8nsker at dykke dybere ned i disse emner, kan du ogs\u00e5 tjekke f\u00f8lgende yderligere ressourcer:<\/p>\n<h3>Gutenberg-dokumentation og officielle WordPress-ressourcer<\/h3>\n<ul>\n<li>Plugin Handbook \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Brugerdefinerede metabokse<\/a><\/li>\n<li>Plugin-h\u00e5ndbog \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">H\u00e5ndtering af indl\u00e6gsmetadata<\/a><\/li>\n<li>How-to Guides \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Meta Boxes<\/a><\/li>\n<li>How-to Guides \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Plugin Sidebar<\/a><\/li>\n<li>H\u00e5ndbog om blokredigering \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>Pakkehenvisning \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Pakker \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">Sammenligning med Redux<\/a><\/li>\n<li>Pakker \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">withDispatch<\/a><\/li>\n<li>Pakker \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Pakker \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Pakker \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">select<\/a><\/li>\n<\/ul>\n<h3>Flere officielle ressourcer<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Komponenter af h\u00f8jere orden<\/a> i React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Action-skabere<\/a> i Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">Udledning af data med selektorer<\/a> i Redux<\/li>\n<\/ul>\n<h3>Yderligere ressourcer fra f\u00e6llesskabet<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Fantastiske hooks og hvor man kan bruge dem<\/a> (af Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">WordPress Data Series Oversigt og introduktion<\/a> (af Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Airbnb React\/JSX-stilguide for Airbnb<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">React Higher-Order Components (HOC&#8217;er)<\/a> (af Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Funktionssammens\u00e6tning i JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Anmodning om data i Gutenberg med getEntityRecords<\/a> (af Ryan Welcher)<\/li>\n<\/ul>\n<h3>Nyttig l\u00e6sning fra Kinsta-webstedet<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">Hvad er React.js? Et kig p\u00e5 det popul\u00e6re JavaScript-bibliotek<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/dk\/blog\/react-bedste-praksisser\/\">React Best Practices til at forbedre dit spil i 2026<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/dk\/blog\/react-komponentbiblioteker\/\">React UI-komponentbiblioteker<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-workflow\/\">S\u00e5dan opretter du en effektiv WordPress-arbejdsgang for udviklere<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-udviklerlon\/\">WordPress Developer Salary: Gennemsnittet, plus hvordan du kan \u00f8ge din<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/what-is-javascript\/\">Hvad er JavaScript? Et kig p\u00e5 Web&#8217;s mest popul\u00e6re Scripting sprog<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/errors-in-javascript\/\">En endelig guide til h\u00e5ndtering af fejl i JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/dk\/blog\/javascript-biblioteker\/\">De 40 bedste JavaScript-biblioteker og -frameworks i 2026<\/a><\/li>\n<\/ul>\n<h2>Opsummering<\/h2>\n<p>I denne tredje artikel i vores serie om udvikling af Gutenberg-blokke d\u00e6kkede vi nye avancerede emner, som skulle g\u00f8re det billede, der blev skitseret i tidligere artikler om <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-blokke\/\">udvikling af statiske<\/a> og <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">dynamiske blokke<\/a>, mere komplet.<\/p>\n<p>Du skulle nu v\u00e6re i stand til at udnytte potentialet i brugerdefinerede felter i Gutenberg og skabe mere avancerede og funktionelle WordPress-websteder.<\/p>\n<p>Men der er mere. Med de f\u00e6rdigheder, du har f\u00e5et fra vores artikler om blokudvikling, b\u00f8r du ogs\u00e5 have en god id\u00e9 om, hvordan du kan udvikle React-komponenter uden for WordPress. Gutenberg er jo trods alt en React-baseret SPA.<\/p>\n<p>Og nu er det op til dig! Har du allerede oprettet Gutenberg-blokke, der bruger bruger tilpassede metafelter? Del dine kreationer med os i kommentarerne nedenfor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Brugerdefinerede felter giver mulighed for at tildele ekstra oplysninger til webstedsindhold. Disse oplysninger er normalt kendt som metadata. Metadata er oplysninger om oplysninger. I WordPress&#8217; tilf\u00e6lde &#8230;<\/p>\n","protected":false},"author":36,"featured_media":48274,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[765,754],"class_list":["post-48273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-tips","topic-wordpress-udvikling"],"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\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.\" \/>\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\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:09:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T09:36:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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 \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg\",\"datePublished\":\"2023-01-25T11:09:47+00:00\",\"dateModified\":\"2023-08-24T09:36:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\"},\"wordCount\":4155,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\",\"name\":\"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"datePublished\":\"2023-01-25T11:09:47+00:00\",\"dateModified\":\"2023-08-24T09:36:25+00:00\",\"description\":\"Gutenberg \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress tips\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/wordpress-tips\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"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\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg","description":"Gutenberg \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.","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\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/","og_locale":"da_DK","og_type":"article","og_title":"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg","og_description":"Gutenberg \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.","og_url":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2023-01-25T11:09:47+00:00","article_modified_time":"2023-08-24T09:36:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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 \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Carlo Daniele","Estimeret l\u00e6setid":"24 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg","datePublished":"2023-01-25T11:09:47+00:00","dateModified":"2023-08-24T09:36:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/"},"wordCount":4155,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/","url":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/","name":"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","datePublished":"2023-01-25T11:09:47+00:00","dateModified":"2023-08-24T09:36:25+00:00","description":"Gutenberg \u00e6ndrer den m\u00e5de, vi bruger metabokse og brugerdefinerede felter. I denne artikel l\u00e6rer du at administrere metadata i blokeditoren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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\/dk\/blog\/wordpress-og-metaboks-til-indlaeg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"WordPress tips","item":"https:\/\/kinsta.com\/dk\/emner\/wordpress-tips\/"},{"@type":"ListItem","position":3,"name":"S\u00e5dan tilf\u00f8jes metabokse og brugerdefinerede felter til indl\u00e6g i Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","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\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/48273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=48273"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/48273\/revisions"}],"predecessor-version":[{"id":49289,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/48273\/revisions\/49289"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/translations\/fr"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48273\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/48274"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=48273"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=48273"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=48273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}