{"id":66,"date":"2019-11-16T12:01:42","date_gmt":"2019-11-16T12:01:42","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=66"},"modified":"2019-12-25T12:07:18","modified_gmt":"2019-12-25T12:07:18","slug":"setting-up-a-block","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/setting-up-a-block\/","title":{"rendered":"Setting up a block"},"content":{"rendered":"\n<p>Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\">WordPress block editor handbook<\/a>, that uses the <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">@wordpress\/package<\/a> to work with the webpack and Babel libraries, without too much hassle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alternative: Advanced Custom Fields Pro<\/h3>\n\n\n\n<p>A month after I wrote the first version of this post it turns out that for most blocks developing with React\/ES6 is too time consuming, and for &#8216;daily use&#8217; I turned to Advanced Custom Fields Pro. I tried Block Lab (free version) too, which works fine also, and may even be easier to work with than ACF.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> Steps in short<\/h2>\n\n\n\n<p>Assumed Node.js and npm are installed, enter<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">mkdir new-block\ncd new-block\nnpm init<\/pre>\n\n\n\n<p>Next install the WordPress packages and all their dependencies. This may take a while.<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">npm install --save-dev --save-exact @wordpress\/scripts<\/pre>\n\n\n\n<p>Add the following code to <code>package.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">\"scripts\": {\n  \"start\": \"wp-scripts start\",\n  \"build\": \"wp-scripts build\"\n},<\/pre>\n\n\n\n<p>To start watching files and building the JavaScript while developing your block, type<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">npm start<\/pre>\n\n\n\n<p>To create the production code, enter the command<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">npm run build<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Trouble shooting<\/h2>\n\n\n\n<p>When continuing development after an interruption, I often forget to restart watching\/compiling with <code>npm start<\/code> and wonder why any change in the code fails to make any change in the output.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the WordPress block editor handbook, that uses the @wordpress\/package to work with the webpack and Babel libraries, without too much hassle. Alternative: Advanced Custom Fields Pro A month after I wrote [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4],"tags":[6],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-gutenberg","category-wordpress","tag-npm"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":6,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/66\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}