{"id":5995,"date":"2020-04-30T07:58:00","date_gmt":"2020-04-30T05:58:00","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=5995"},"modified":"2020-04-29T18:17:09","modified_gmt":"2020-04-29T16:17:09","slug":"conditionally-prevent-publishing-updating-gutenberg","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/conditionally-prevent-publishing-updating-gutenberg-5995\/","title":{"rendered":"Conditionally prevent publishing\/updating in Gutenberg"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">It is possible to disable the publish\/update button in Gutenberg. With that, we could, for example, force the user to add data to a custom block that adds metadata to a custom post type.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><code>lockPostSaving<\/code> and <code>unlockPostSaving<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The functions <code>lockPostSaving()<\/code> and <code>unlockPostSaving()<\/code> from the <code>data<\/code> module allow to lock and unlock the publish\/update possibility in Gutenberg. The functions get a name as the parameter to be able to lock a post or page with multiple conditions. Until one lock is not unlocked, the post cannot be published or updated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In practice, locking the button looks like that:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">wp.data.dispatch( <span class=\"hljs-string\">'core\/editor'<\/span> ).lockPostSaving( <span class=\"hljs-string\">'requiredValueLock'<\/span> );<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">And unlocking it again like that:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">wp.data.dispatch( <span class=\"hljs-string\">'core\/editor'<\/span> ).unlockPostSaving( <span class=\"hljs-string\">'requiredValueLock'<\/span> );<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In conjunction with the <code>subscribe()<\/code> function from the <code>data<\/code> module, which fires when something in the editor changes, we can monitor a condition and lock\/unlock the content depending on if the condition is met or not.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example that locks the button when the meta key <code>required_value<\/code> is empty:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">const<\/span> {\n\tsubscribe,\n\tselect,\n\tdispatch,\n} = wp.data;\n\nwp.domReady( () =&gt; {\n\t<span class=\"hljs-keyword\">const<\/span> postType = select( <span class=\"hljs-string\">'core\/editor'<\/span> ).getCurrentPostType();\n\n\t<span class=\"hljs-keyword\">if<\/span> ( postType === <span class=\"hljs-string\">'portfolio'<\/span> ) {\n\t\tlet locked = <span class=\"hljs-keyword\">false<\/span>;\n\n\t\t<span class=\"hljs-comment\">\/\/ Subscribe to editor state changes.<\/span>\n\t\tlet checkRequiredField = subscribe( () =&gt; {\n\t\t\t<span class=\"hljs-comment\">\/\/ Get meta values of post.<\/span>\n\t\t\t<span class=\"hljs-keyword\">const<\/span> meta = select( <span class=\"hljs-string\">'core\/editor'<\/span> ).getEditedPostAttribute( <span class=\"hljs-string\">'meta'<\/span> );\n\t\t\t<span class=\"hljs-keyword\">if<\/span> ( meta.required_value !== undefined &amp;&amp; meta.required_value === <span class=\"hljs-string\">''<\/span> ) {\n\t\t\t\t<span class=\"hljs-comment\">\/\/ Lock post, if not already locked.<\/span>\n\t\t\t\t<span class=\"hljs-keyword\">if<\/span> ( ! locked ) {\n\t\t\t\t\tlocked = <span class=\"hljs-keyword\">true<\/span>;\n\t\t\t\t\tdispatch( <span class=\"hljs-string\">'core\/editor'<\/span> ).lockPostSaving( <span class=\"hljs-string\">'requiredValueLock'<\/span> );\n\t\t\t\t}\n\t\t\t} <span class=\"hljs-keyword\">else<\/span> {\n\t\t\t\t<span class=\"hljs-comment\">\/\/ Unlock post if locked.<\/span>\n\t\t\t\t<span class=\"hljs-keyword\">if<\/span> ( locked ) {\n\t\t\t\t\tlocked = <span class=\"hljs-keyword\">false<\/span>;\n\t\t\t\t\tdispatch( <span class=\"hljs-string\">'core\/editor'<\/span> ).unlockPostSaving( <span class=\"hljs-string\">'requiredValueLock'<\/span> );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n} );<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">First, we store <code>subscribe<\/code>, <code>select<\/code>, and <code>dispatch<\/code> from the <code>data<\/code> module in variables with the same name, to have less writing work later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We use <code>wp.domReady()<\/code> to wait until the editor finished loading and check if the currently viewed content is of the <code>portfolio<\/code> post type. Only for those posts, we want to check the condition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We hook us to editor changes with <code>subscribe()<\/code>, and the code inside its parameter function is called each time the editor changes. On a change, we get the meta values of the post. If a block changes a meta value, that value is returned instead of the one from the database.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we check if <code>meta.required_value<\/code> exists (if there is a value for the meta key <code>required_value<\/code>), and if it is an empty string. If that is true, we lock the post if it is not already locked.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the key does not exist or is not empty, we unlock the post again.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is possible to disable the publish\/update button in Gutenberg. With that, we could, for example, force the user to add data to a custom block that adds metadata to a custom post type.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-5995","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":"bf7fd11b5cb742af8c755203dff4aaa4","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/bf7fd11b5cb742af8c755203dff4aaa4"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=5995"}],"version-history":[{"count":2,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5995\/revisions"}],"predecessor-version":[{"id":5997,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5995\/revisions\/5997"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=5995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=5995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=5995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}