[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. Denna funktion l\u00e5ter dig l\u00e4gga till en metabox med ditt anpassade inneh\u00e5ll antingen l\u00e4ngst ner eller p\u00e5 sidan n\u00e4r du redigerar ett inl\u00e4gg. Denna metod fungerar fortfarande, \u00e4ven i Gutenberg-redigeraren!<\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\")
<\/a><\/p>\nDet ser dock lite avigt ut j\u00e4mf\u00f6rt med resten av Gutenbergs sidof\u00e4ltsinneh\u00e5ll. Och f\u00f6r att inte n\u00e4mna, du skulle beh\u00f6va skriva inmatningskod manuellt (kryssruta, textinmatningar etc) med PHP och \u00e4ven skriva ytterligare kod f\u00f6r att spara dem n\u00e4r inl\u00e4gget uppdateras. Och om du ville att dina inl\u00e4ggsmetainst\u00e4llningar skulle vara dynamiska (s\u00e4g att du ville d\u00f6lja ett f\u00e4lt om inte n\u00e5got annat f\u00e4lt var aktiverat), s\u00e5 m\u00e5ste du manuellt st\u00e4lla ett skript i k\u00f6 och ja, du gissade r\u00e4tt, hantera den dynamiska logiken manuellt att g\u00f6mma sig och visa. Allt detta \u00e4r nu f\u00f6r\u00e5ldrat och gjort enklare med den nya Javascript-baserade Gutenberg-redigeraren. Vi kan ganska enkelt g\u00f6ra n\u00e5got s\u00e5nt h\u00e4r:<\/p>\n
![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\")
<\/a><\/p>\nProcessen<\/h2>\n
Processen \u00e4r som f\u00f6ljer:<\/p>\n
\n- Vi registrerar varje anpassad postmeta-nyckel vi vill l\u00e4gga till i PHP med hj\u00e4lp av
[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>, och st\u00e4ller in den som tillg\u00e4nglig i WP REST API. Detta \u00e4r ett n\u00f6dv\u00e4ndigt steg f\u00f6r att g\u00f6ra inl\u00e4ggets meta tillg\u00e4nglig i Gutenberg-redigeraren.<\/li>\n- Vi skapar en Javascript-fil och k\u00f6ar den specifikt till editorn (endast).<\/li>\n
- Inuti Javascript-filen registrerar vi ett plugin
[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>som s\u00e4ger \u00e5t det att rendera v\u00e5r komponent.<\/li>\n- Inuti den komponenten kan vi mata ut vad vi beh\u00f6ver. Vi kan anv\u00e4nda WordPresss inbyggda komponenter f\u00f6r att enkelt rendera olika typer av inst\u00e4llningar. Och med hj\u00e4lp av WordPress-datapaket kan vi h\u00e4mta och uppdatera inl\u00e4ggets metav\u00e4rden direkt n\u00e4r de \u00e4ndras.<\/li>\n<\/ul>\n
L\u00e5t oss g\u00e5 rakt in i det och b\u00f6rja med PHP-delen; registrera inl\u00e4gget meta.<\/p>\n
Registrerar inl\u00e4gg meta<\/h2>\n
F\u00f6r varje inl\u00e4ggsmeta du vill l\u00e4gga till i Gutenbergs sidof\u00e4lt m\u00e5ste du registrera dig med [register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. Detta \u00e4r n\u00f6dv\u00e4ndigt f\u00f6r att g\u00f6ra dem tillg\u00e4ngliga via WP REST API (som Gutenberg anv\u00e4nder) och d\u00e4rmed tillg\u00e4ngliga i v\u00e5rt Javascript.<\/p>\nI ditt temas functions.php<\/code>fil eller n\u00e5gon annan aktiv PHP-fil, l\u00e4gg till en funktion kopplad till ’ init<\/code>’-kroken. Inuti funktionen upprepar du a register_post_meta()<\/code>f\u00f6r varje anpassad postmeta du vill l\u00e4gga till. Funktionen tar tre argument; f\u00f6rsta parametern \u00e4r inl\u00e4ggstypen du vill registrera meta f\u00f6r (st\u00e4ll in som tom str\u00e4ng f\u00f6r alla inl\u00e4ggstyper). Den andra parametern \u00e4r meta-nyckelnamnet f\u00f6r din meta. Och den tredje \u00e4r en rad inst\u00e4llningar. Det \u00e4r h\u00e4r vi definierar att denna meta ska vara tillg\u00e4nglig i WP REST API genom att s\u00e4tta ’ show_in_rest<\/code>’ p\u00e5 sant.<\/p>\nL\u00e5t oss till exempel s\u00e4ga att jag vill l\u00e4gga till en v\u00e4xel p\u00e5\/av och en textinmatning till redigerarens sidof\u00e4lt. Det betyder att jag efterlyser register_post_meta()<\/code>en boolesk respektive en str\u00e4ngv\u00e4rdestyp. Jag vill ocks\u00e5 begr\u00e4nsa dessa inl\u00e4ggsmeta till enbart inl\u00e4ggstyp ’inl\u00e4gg’. Det skulle se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\nadd_action( 'init', function() {\n register_post_meta( 'post', '_my_custom_bool', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'boolean',\n ] );\n\u00a0\n register_post_meta( 'post', '_my_custom_text', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'string',\n ] );\n} );<\/code><\/pre>\nNu har jag en post-meta-nyckel _my_custom_bool<\/code>och _my_custom_text<\/code>klar och tillg\u00e4nglig i Gutenberg. Jag rekommenderar att du byter namn p\u00e5 dem till n\u00e5got som \u00e4r vettigt f\u00f6r dig.<\/p>\nRegistrera v\u00e5rt Javascript-plugin<\/h2>\n
F\u00f6r v\u00e5rt n\u00e4sta steg l\u00e4gger vi till en Javascript-fil och ser till att st\u00e4lla den i k\u00f6 med PHP.<\/p>\n
T\u00e4nk p\u00e5 att jag skriver Javascript-koden i ES6-syntax. Det betyder att jag har st\u00e4llt in ett webbpaket\/Babel-konfiguration f\u00f6r att kompilera min fil till en separat l\u00e4sbar Javascript-fil f\u00f6r webbl\u00e4saren.<\/p>\n
Jag har en guide om hur du st\u00e4ller in detta om du \u00e4r os\u00e4ker p\u00e5 hur det fungerar:<\/p>\n
Vi m\u00e5ste se till att WordPress laddar v\u00e5rt skript i editorn. Vi g\u00f6r detta genom att koppla en funktion till enqueue_block_editor_assets<\/code>och anropa [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>:<\/p>\nadd_action( 'enqueue_block_editor_assets', function() {\n wp_enqueue_script(\n 'awp-custom-meta-plugin', \n get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n [ 'wp-edit-post' ],\n false,\n false\n );\n} );<\/code><\/pre>\nJag antar att du \u00e4r bekant med hur man st\u00e4ller skript i k\u00f6 och kan ers\u00e4tta v\u00e4rdena med dina egna. Som andra parameter tillhandah\u00e5ller jag s\u00f6kv\u00e4gen till byggfilen (inte k\u00e4llfilen). F\u00f6r att s\u00e4kerst\u00e4lla att v\u00e5rt skript inte laddas f\u00f6r tidigt, st\u00e4ller jag in ’ wp-edit-post<\/code>’ som ett beroende. Det \u00e4r paketet vi beh\u00f6ver f\u00f6r att hantera post-meta.<\/p>\nL\u00e5t oss nu g\u00e5 vidare till Javascript-delen.<\/p>\n
F\u00f6rst m\u00e5ste vi anropa [registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>och skicka vidare v\u00e5r komponent f\u00f6r att rendera panelen i Gutenberg-dokumentets sidof\u00e4lt. Denna funktion finns i wp.plugins<\/code>paketet, s\u00e5 jag destrukturerar den \u00f6verst. Jag gillar att h\u00e5lla ordning p\u00e5 mina filer, s\u00e5 jag skapar en annan fil; "awp-custom-postmeta-fields.js" f\u00f6r att inneh\u00e5lla den renderade komponenten och importera den.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n render() {\n return(<AWP_Custom_Plugin \/>);\n }\n} );<\/code><\/pre>\nAtt skriva v\u00e5r komponent<\/h2>\n
L\u00e5t oss b\u00f6rja skapa en grundl\u00e4ggande komponent som inte g\u00f6r n\u00e5got annat \u00e4n att bara sitta d\u00e4r p\u00e5 r\u00e4tt plats, s\u00e5 vi f\u00e5r det ur v\u00e4gen f\u00f6rst. F\u00f6r att rendera en komponent i Gutenbergs dokumentsidof\u00e4lt anv\u00e4nder vi [PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>komponenten. Vi kan st\u00e4lla in attribut som en title<\/code>, icon<\/code>och className<\/code>. Och vad som \u00e4n finns inuti kommer att \u00e5terges i dokumentets sidof\u00e4lt. F\u00f6r nu matar jag bara ut lite text "Hej d\u00e4r."<\/p>\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() => {\n return(\n <PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\">\n <PanelRow>\n Hello there.\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\nMed ovanst\u00e5ende kod (kompilerad) f\u00e5r vi detta:<\/p>\n