{"id":228133,"date":"2022-10-16T09:38:00","date_gmt":"2022-10-16T06:38:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228133"},"modified":"2022-11-09T00:53:12","modified_gmt":"2022-11-08T21:53:12","slug":"anvaenda-postmetafaelt-foer-att-lagra-attribut-i-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/anvaenda-postmetafaelt-foer-att-lagra-attribut-i-wordpress-block-editor-gutenberg\/","title":{"rendered":"Anv\u00e4nda postmetaf\u00e4lt f\u00f6r att lagra attribut i WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>N\u00e4r du registrerar och lagrar attribut i WordPress block editor (Gutenberg) har du m\u00f6jlighet att lagra dem som postmeta ist\u00e4llet f\u00f6r de vanliga blockattributen.<\/p>\n<p>Med den h\u00e4r metoden kan du ha en inst\u00e4llning i ditt block som kan styra n\u00e5got inl\u00e4ggsbrett eller p\u00e5 mallen.<\/p>\n<p><strong>En viktig anm\u00e4rkning om rendering av inl\u00e4ggsmetaattribut<\/strong><\/p>\n<p>Du kan inte rendera inl\u00e4ggsmetaattribut med en JavaScript-sparmetod. Ett beslut togs av Gutenberg-teamet f\u00f6r att f\u00f6rhindra detta, eftersom block som renderar post-metaf\u00e4lt l\u00e4tt kan brytas p\u00e5 grund av att post-meta \u00e4ndras n\u00e5gon annanstans p\u00e5 posten.<\/p>\n<p>I den h\u00e4r guiden kommer vi att ut\u00f6ka vad vi redan har byggt i v\u00e5r <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenberg plugin guide<\/a>, och \u00e4ven <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dynamic Block guiden<\/a>.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>Var bekant med <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa plugins f\u00f6r WordPress Gutenberg<\/a><\/li>\n<li>Var bekant <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">med dynamiska block och rendering p\u00e5 serversidan<\/a><\/li>\n<\/ul>\n<h2>Registrera Post Meta i PHP<\/h2>\n<p>Innan vi kan anv\u00e4nda ett postmetaf\u00e4lt i JavaScript m\u00e5ste vi se till att vi har registrerat det i PHP med <code>register_meta<\/code>och att <code>show_in_rest<\/code>argumentet har satts till sant.<\/p>\n<p>F\u00f6lj upp guiden f\u00f6r <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dynamic Block<\/a>, \u00f6ppna root-PHP-filen f\u00f6r plugin-programmet (i det h\u00e4r fallet <code>wholesome-plugin.php<\/code>) och l\u00e4gg till f\u00f6ljande kod l\u00e4ngst ner i filen efter alla andra funktioner:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_block_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; __( 'Wholesome Plugin \u2013 hello from the editor!', 'wholesome-plugin' ),\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Denna kod registrerar ett metaf\u00e4lt som kallas <code>_wholesomecode_wholesome_plugin_block_text<\/code>f\u00f6r <code>post<\/code>posttypen. Det s\u00e4kerst\u00e4ller ocks\u00e5 att REST API kan komma \u00e5t detta metaf\u00e4lt med <code>show_in_rest<\/code>v\u00e4rdet satt till sant.<\/p>\n<p>Vi skickar ocks\u00e5 funktionen <code>__return_true<\/code>till <code>auth_callback<\/code>argumentet f\u00f6r att s\u00e4kerst\u00e4lla att vi har beh\u00f6righet att komma \u00e5t den h\u00e4r parametern. Om vi \u200b\u200bville ha b\u00e4ttre s\u00e4kerhet f\u00f6r denna parameter skulle vi \u00e4ndra detta till en anpassad funktion som kontrollerar en viss anv\u00e4ndarroll.<\/p>\n<h2>Registrera inl\u00e4ggets metaattribut i JavaScript<\/h2>\n<p>\u00c5terigen, efter den f\u00f6reg\u00e5ende guiden, \u00f6ppna upp <code>\/src\/index.js<\/code>och ers\u00e4tt <code>attributes<\/code>med f\u00f6ljande:<\/p>\n<pre><code>attributes: {\n  blockText: {\n    meta: '_wholesomecode_wholesome_plugin_block_text',\n    source: 'meta',\n  },\n},\n<\/code><\/pre>\n<p>Ist\u00e4llet f\u00f6r att ange typen av attribut och tilldela ett standardv\u00e4rde, definierar vi ist\u00e4llet meta-nyckeln som dataattributet kommer ifr\u00e5n och indikerar att <code>source<\/code>attributet \u00e4r <code>meta<\/code>.<\/p>\n<p>Som anges i varningen h\u00f6gst upp i den h\u00e4r guiden kan du inte komma \u00e5t postmetaf\u00e4ltattribut via JavaScript- <code>save<\/code>metoden, s\u00e5 kompilera pluginet med <code>npm start<\/code>och l\u00e5t oss se hur vi kan mata ut metan.<\/p>\n<h2>Rendering av Post Meta<\/h2>\n<p>Eftersom vi har sparat v\u00e5rt attribut som post-meta, kan vi mata ut detta var som helst i WordPress med hj\u00e4lp av <code>get_post_meta<\/code>(f\u00f6rutsatt att vi har <code>$post_id<\/code>):<\/p>\n<pre><code>get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );\n<\/code><\/pre>\n<p>Om vi \u200b\u200bforts\u00e4tter med <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dynamic Block-guiden<\/a>, l\u00e5t oss se hur vi kan komma \u00e5t detta attribut p\u00e5 serversidan i PHP.<\/p>\n<p>Meta \u00e4r inte tillg\u00e4nglig via <code>$attributes<\/code>parametern f\u00f6r <code>render_callback<\/code>, eftersom post-metaattribut inte \u00f6verf\u00f6r sitt v\u00e4rde till denna parameter, men vi kan komma \u00e5t det globala <code>$post<\/code>objektet f\u00f6r att f\u00e5 post-ID.<\/p>\n<p>Med detta i \u00e5tanke, l\u00e5t oss uppdatera v\u00e5r <code>register_block_type<\/code>f\u00f6r att skicka inl\u00e4ggets meta:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  array(\n    'editor_script'   =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'editor_style'    =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'render_callback' =&gt; function( $attributes, $content) {\n      global $post;\n      $block_text = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_block_text', true );\n      return \"&lt;p class='wp-block-wholesomecode-wholesome-plugin'&gt;$block_text&lt;\/p&gt;\";\n    },\n    'style'           =&gt; 'wholesomecode-wholesome-plugin-block',) );\n<\/code><\/pre>\n<p>Observera att vi inte l\u00e4ngre beh\u00f6ver registrera <code>attributes<\/code>h\u00e4r, eftersom vi endast kommer \u00e5t postmetaf\u00e4ltet via <code>get_post_meta<\/code>funktionen.<\/p>\n<h3>Anv\u00e4nda blocket<\/h3>\n<p>Detta \u00e4r inte det b\u00e4sta anv\u00e4ndningsfallet f\u00f6r den h\u00e4r typen av meta, men n\u00e4r vi anv\u00e4nder blocket kan vi se att eftersom vi lagrar attributen som post-meta, om vi uppdaterar attributet i ett block, uppdaterar det alla block, som inl\u00e4ggets meta lagras mot inl\u00e4gget, inte det enskilda blocket:<\/p>\n<p>Post-metaattribut i aktion<\/p>\n<ul>\n<li>Ta en titt p\u00e5 att skapa <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kapslade underordnade block med <code>InnerBlocks<\/code>komponenten<\/a><\/li>\n<li>Ta ytterligare anv\u00e4ndning av post-meta i Gutenberg genom <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-custom-meta-boxes-using-the-wordpress-block-editor-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa anpassade metaboxar i Gutenberg<\/a><\/li>\n<li>Ta en titt p\u00e5 hur du <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anv\u00e4nder inst\u00e4llningar f\u00f6r att lagra data i alternativtabellen i Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e4r du registrerar och lagrar attribut i WordPress block editor (Gutenberg) har du m\u00f6jlighet att lagra dem som postmeta ist\u00e4llet f\u00f6r de vanliga blockattributen.<\/p>\n","protected":false},"author":1,"featured_media":223685,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[942,901,922,818,724,868],"tags":[1173],"class_list":["post-228133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-koda","category-oevrig","category-plugins-3","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228133"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}