{"id":4211,"date":"2023-11-17T20:06:31","date_gmt":"2023-11-17T19:06:31","guid":{"rendered":"https:\/\/www.knowboard.de\/?p=4211"},"modified":"2023-11-17T20:06:36","modified_gmt":"2023-11-17T19:06:36","slug":"custom-fields-in-gutenberg","status":"publish","type":"post","link":"https:\/\/www.knowboard.de\/custom-fields-in-gutenberg\/","title":{"rendered":"Custom Fields in Gutenberg"},"content":{"rendered":"\n<p>Gutenberg\/block editor is using javascript and REST API, so to make this custom field editable via block editor, we need to register this field and make it available in WordPress REST API:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>register_post_meta(\n\t'post',\n\t'_my_data',\n\t&#91;\n\t\t'show_in_rest' => true,\n\t\t'single'       => true,\n\t\t'type'         => 'string',\n\t\t'auth_callback' => function() {\n\t\t\treturn current_user_can( 'edit_posts' );\n\t\t}\n\t]\n);\n<\/code><\/pre>\n\n\n\n<p>So, we need to create a js script, and create\/<a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-plugins\/#registerPlugin\">register<\/a>\u00a0editor plugin, and create a \u201cmeta box\u201d using \u201c<a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/slotfills\/plugin-document-setting-panel\/\">PluginDocumentSettingPanel<\/a>\u201d component.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const MyDataSettings = () => {\n \n\treturn (\n\t\t&lt;PluginDocumentSettingPanel name=\"my-data\" title=\"My Data\">\n\t\t\t&lt;TextControl value='' onChange='' \/>\n\t\t&lt;\/PluginDocumentSettingPanel>\n\t);\n};\nif (window.pagenow === 'post') {\n\tregisterPlugin('mydata', {\n\t\trender: MyDataSettings,\n\t\ticon: null,\n\t});\n}\n<\/code><\/pre>\n\n\n\n<p>And after we add the code above we will see the meta box, but it will do nothing.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const MyDataSettings = () => {\n\tconst {\n\t\tmeta,\n\t\tmeta: { _my_data },\n\t} = useSelect((select) => ({\n\t\tmeta: select('core\/editor').getEditedPostAttribute('meta') || {},\n\t}));\n \n\tconst { editPost } = useDispatch('core\/editor');\n \n\tconst &#91;myData, setMyData] = useState(_my_data);\n \n\tuseEffect(() => {\n\t\teditPost({\n\t\t\tmeta: {\n\t\t\t\t...meta,\n\t\t\t\t_my_data: myData,\n\t\t\t},\n\t\t});\n\t}, &#91;myData]);\n \n\treturn (\n\t\t&lt;PluginDocumentSettingPanel name=\"my-data\" title=\"My Data\">\n\t\t\t&lt;TextControl value={myData} onChange={setMyData} \/>\n\t\t&lt;\/PluginDocumentSettingPanel>\n\t);\n};<\/code><\/pre>\n\n\n\n<p>I forgot to mention that, we need to enqueue the script. The easiest way is to simply use\u00a0<code>enqueue_block_editor_assets<\/code>\u00a0action hook because this hook will properly enqueue our script to post edit screen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'enqueue_block_editor_assets', function() {\n\twp_enqueue_script(\n\t\t'my-data',\n\t\ttrailingslashit( plugin_dir_url( __FILE__ ) ) . 'my-data.min.js',\n\t\t&#91; 'wp-element', 'wp-blocks', 'wp-components', 'wp-editor' ],\n\t\t'0.1.0',\n\t\ttrue\n\t);\n} );<\/code><\/pre>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-d3b66924-88c9-42af-99c4-6e1b36a627c0\" href=\"https:\/\/www.knowboard.de\/wp-content\/uploads\/2023\/11\/my-data-master.zip\">my-data-master<\/a><a href=\"https:\/\/www.knowboard.de\/wp-content\/uploads\/2023\/11\/my-data-master.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-d3b66924-88c9-42af-99c4-6e1b36a627c0\">Herunterladen<\/a><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-shellcreeper wp-block-embed-shellcreeper\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"yGaSURsvZI\"><a href=\"https:\/\/shellcreeper.com\/custom-field-meta-box-in-gutenberg-editor\/\">Custom Field &#038; Meta Box in Gutenberg Editor<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Custom Field &#038; Meta Box in Gutenberg Editor&#8221; &#8212; Shellcreeper\" src=\"https:\/\/shellcreeper.com\/custom-field-meta-box-in-gutenberg-editor\/embed\/#?secret=UYezMP5mLw#?secret=yGaSURsvZI\" data-secret=\"yGaSURsvZI\" width=\"600\" height=\"338\"  marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/github.com\/turtlepod\/my-data\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg\/block editor is using javascript and REST API, so to make this custom field editable via block editor, we need to register this field and make it available in WordPress REST API: So, we need to create a js script, and create\/register\u00a0editor plugin, and create a \u201cmeta box\u201d using \u201cPluginDocumentSettingPanel\u201d component. And after we add&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-4211","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry","no-media"],"_links":{"self":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/4211"}],"collection":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/comments?post=4211"}],"version-history":[{"count":1,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/4211\/revisions"}],"predecessor-version":[{"id":4217,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/4211\/revisions\/4217"}],"wp:attachment":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/media?parent=4211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/categories?post=4211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/tags?post=4211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}