{"id":1397,"date":"2020-04-30T15:02:00","date_gmt":"2020-04-30T08:02:00","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1397"},"modified":"2020-06-21T09:33:31","modified_gmt":"2020-06-21T02:33:31","slug":"common-javascript-for-gutenberg","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/common-javascript-for-gutenberg\/","title":{"rendered":"Common JavaScript Pattern (for Custom Gutenberg Block)"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>This tutorial assumes you know the basic of JavaScript like function, array, and object.<\/p><\/blockquote>\n\n\n\n<p>Creating a custom Gutenberg block seems intimidating at first. But it&#8217;s really not that hard after knowing how it works.<\/p>\n\n\n\n<p>The first step to that is knowing the JavaScript syntaxes that is often used in block development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Self Invoking Function<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">(function() {\n  \n  \/\/ all vars and functions declared here can't be used outside\n\n} )();<\/code><\/pre>\n\n\n\n<p>This is a function that runs itself. Mainly used as a wrapper to scope the current code. So any vars or functions declared here won&#8217;t spill elsewhere.<\/p>\n\n\n\n<p>You can pass in variables and set an <strong>alias <\/strong>to them:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">(function( b, be ) {\n\n  \/\/ You can call `wp.blocks` as `b`\n\n} )( wp.blocks, wp.blockEditor );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. Use Strict<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">(function() { 'use strict';\n  \/\/ ...\n} )();<\/code><\/pre>\n\n\n\n<p>By adding this simple string, the browser will treat your script differently.<\/p>\n\n\n\n<p>There is no longer a silent JS error. You will get a proper error message shown in the Developer Console. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Let and Const<\/h2>\n\n\n\n<p>These are 2 new types of variable to replace <code>var<\/code>:<\/p>\n\n\n\n<ul><li><code>const<\/code> means the value of the variable will NOT change.<\/li><li><code>let<\/code> means the value of the variable will be changed.<\/li><\/ul>\n\n\n\n<p>This puts <code>var<\/code> in a weird spot since it can mean both. By using <code>let<\/code> or <code>const<\/code>, you let other developer know whether you can or cannot change the value.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let myLet = 'this value will change';\n\nconst MY_CONST = 'this value will not and cannot change';\n\nvar myVar = 'who knows what will happen to this';<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. Arrow Function (<code>=&gt;<\/code>)<\/h2>\n\n\n\n<p>Simplifies inline-function and prevents the value of <code>this<\/code> to be overridden. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ Old inline function:\n\nlet sumNumber = function( num1, num2 ) {\n  return num1 + num2;\n};\n\n\/\/ New arrow function:\n\nsumNumber = ( num1, num2 ) => {\n  return num1 + num2;\n};\n\n\/\/ If the function only has 1 line and it's a return statement,\n\/\/ You can simplify it even further:\n\nsumNumber = ( num1, num2 ) => num1 + num2;<\/code><\/pre>\n\n\n\n<p>If the function <strong>only has 1 parameter<\/strong>, the parentheses are optional:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let timesTwo = ( num ) => num * 2;\n\n\/\/ parentheses can be removed:\ntimesTwo = num => num * 2;\n\n\/\/ But I personally prefer to be more verbose like this:\ntimesTwo = ( num ) => { return num * 2; }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">5. Destructuring Assignment <\/h2>\n\n\n\n<p>Assigns part of an Object into variables.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let myObject= {\n  item1: { ... },\n  item2: { ... },\n  item3: { ... }\n};\n\n\/\/ (1) This is the old way of assigning object into variable:\nvar item1 = myObject.item1;\nvar item2 = myObject.item2;\n\n\/\/ (2) This is the new syntax called Destructuring assignment:\nconst { item1, item2 } = myObject;<\/code><\/pre>\n\n\n\n<p>Both do the exact same thing, but the latter is cleaner.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Spread Operator (<code>...<\/code>)<\/h2>\n\n\n\n<p>Merges an array into another array.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let array1 = [ 'text2', 'text3' ];\n\nlet array2 = [ 'text1', ...array1, 'text4' ]; \/\/ using triple dot\n\nconsole.log( array2 ); \/\/ [ 'text1', 'text2', 'text3 , 'text4' ]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">7. Array Map<\/h2>\n\n\n\n<p>Loops each item of an array and modifies it. This is an inline version of using For loop.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let nums = [ 1, 2, 3, 4, 5 ];\n\nlet numsSquared = nums.map( (n) => {\n  return n * n;\n} );\n\nconsole.log( numsSquared ); \/\/ [ 1, 4, 9, 16, 25 ]<\/code><\/pre>\n\n\n\n<p>Since Array Map returns an array, you can <strong>combine it with spread operator<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let nums = [ 1, 2, 3, 4, 5 ];\n\nlet nums2 = [\n  0,\n  ...nums.map( (n) => { return n * n; } ),\n  36,\n  49,\n  64,\n];\n\nconsole.log( nums2 ); \/\/ [ 0, 1, 4, 9, 16, 25, 36, 49, 64 ];<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">8. A bit of React<\/h2>\n\n\n\n<p>Gutenberg uses JS Library called React. It can create an HTML element with this function:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">wp.element.createElement( tag, attributes, children )<\/code><\/pre>\n\n\n\n<p>For example, let&#8217;s make this markup with React:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"html\" class=\"language-html\">&lt;div class=\"my-div\">\n  &lt;h1> Hello World &lt;\/h1>\n  &lt;p style=\"background-color: #ff00ee\"> Lorem ipsum dolor sit amet &lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const el = wp.element.createElement; \/\/ create shortcut\n\nel( 'div', { className: 'my-div' }, [\n  el( 'h1', {}, 'Hello World' )\n  el( 'p', { style: { backgroundColor: '#ff00ee' } }, 'Lorem ipsum dolor sit amet' )\n] );<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>That&#8217;s all folks! The next step is to read our past tutorial about <a rel=\"noreferrer noopener\" aria-label=\"creating custom Gutenberg block (opens in a new tab)\" href=\"https:\/\/pixelstudio.id\/blog\/create-a-custom-block-manually\/\" target=\"_blank\">creating a custom Gutenberg block<\/a>. I should have started with this one, but better late than never.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>If you have any question about the JavaScript above, let me know in the comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Creating a custom Gutenberg block seems intimidating at first. The first step to outcome that is to understand the common JavaScript syntaxes.<\/p>\n","protected":false},"author":1,"featured_media":1414,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[22,32],"class_list":["post-1397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg","tag-gutenberg","tag-javascript"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1397"}],"version-history":[{"count":6,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1397\/revisions"}],"predecessor-version":[{"id":1643,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1397\/revisions\/1643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1414"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}