{"id":3122,"date":"2019-05-26T00:49:43","date_gmt":"2019-05-26T00:49:43","guid":{"rendered":"https:\/\/hyperdrivedesigns.com\/?p=3122"},"modified":"2019-06-02T02:01:45","modified_gmt":"2019-06-02T02:01:45","slug":"wordpress-react-ready-with-webpack-and-babel-bundled-in-core","status":"publish","type":"post","link":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/","title":{"rendered":"WordPress React Ready with Webpack and Babel bundled in core"},"content":{"rendered":"

Thank you WordPress Team! Webpack and Babel now come packaged in WordPress, time to start building some custom Gutenberg Blocks without spending time, a lot of time setting up your local build setup. Being a PHP developer first, dealing with all of the new JavaScript and the React framework, I spent many hours trying to just set up my local WordPress instance just to start building.<\/p>\n

Now with the newest version of WordPress 5.2.1, Webpack and Babel come baked into WordPress core ready to compile your ESNext JavaScript code.<\/p>\n

Let us take a look and build a very basic block using these new features.<\/p>\n

In my plugins folder, I am going to create a new directory using the terminal in my VSCode editor.<\/p>\n

mkdir my-esnext-block<\/code><\/pre>\n
then lets cd into the new directory<\/p>\n
cd my-esnext-block<\/code><\/pre>\n
now let’s create a package.json file in this directory run this command in your terminal:<\/p>\n
npm init<\/code><\/pre>\n
 <\/p>\n
\"npm-init<\/pre>\n
The next step is to install the packages required. You can install packages using the npm command npm install. If you pass the –save-dev parameter, npm will write the package as a dev dependency in the package.json file. The –save-exact parameter instructs npm to save an exact version of a dependency, not a range of valid versions. See npm install documentation for more details.
\nSo using the terminal, and you are still in your new plugin directory run:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
After installing, a node_modules directory is created with the modules and their dependencies which will include everything you need to start coding using React JS and ESNext JS.<\/p>\n
Also, if you look at the package.json file it will include a new section:<\/p>\n
\"devDependencies\": {\r\n  \"@wordpress\/scripts\": \"3.1.0\"\r\n}<\/code><\/pre>\n
The @wordpress\/scripts package handles the dependencies and default configuration for Webpack and Babel. The scripts package expects the source file to compile to be found at src\/index.js, and will save the compiled output to build\/index.js.<\/p>\n
With that in mind, let\u2019s set up a basic block. Create a new folder called src and a new file called index.js with the following content:<\/p>\n
Since this tutorial mainly covers the wordpress scripts block package, we will just use the block code from the wordpress github repo for examples of gutenberg blocks located here:\u00a0 https:\/\/github.com\/WordPress\/gutenberg-examples<\/a><\/p>\n
const { __, setLocaleData } = wp.i18n;\r\nconst { registerBlockType } = wp.blocks;\r\n\r\nconst blockStyle = {\r\n  backgroundColor: \"#900\",\r\n  color: \"#fff\",\r\n  padding: \"20px\"\r\n};\r\n\r\nregisterBlockType(\"gutenberg-examples\/example-01-basic-esnext\", {\r\n  title: __(\"Example: HDD Basic (esnext)\", \"gutenberg-examples\"),\r\n  icon: \"universal-access-alt\",\r\n  category: \"layout\",\r\n  edit() {\r\n    return <div style={blockStyle}>Hello World, step 1 (from the editor).<\/div>;\r\n  },\r\n  save() {\r\n    return (\r\n      <div style={blockStyle}>Hello World, step 1 (from the frontend).<\/div>\r\n    );\r\n  }\r\n});\r\n<\/code><\/pre>\n
now lets register our block
\nwe will create our plugins main php file index.php and place the following code in this new file:<\/p>\n
<?php\r\n\/**\r\n * Plugin Name: Gutenberg HDD Examples Basic EsNext\r\n * Plugin URI: https:\/\/github.com\/WordPress\/gutenberg-examples\r\n * Description: This is a plugin demonstrating how to register new blocks for the Gutenberg editor.\r\n * Version: 1.0.2\r\n * Author: the Gutenberg Team\r\n *\r\n * @package gutenberg-examples\r\n *\/\r\ndefined( 'ABSPATH' ) || exit;\r\n\/**\r\n * Load all translations for our plugin from the MO file.\r\n*\/\r\nadd_action( 'init', 'gutenberg_examples_01_esnext_load_textdomain' );\r\nfunction gutenberg_examples_01_esnext_load_textdomain() {\r\n\tload_plugin_textdomain( 'gutenberg-examples', false, basename( __DIR__ ) . '\/languages' );\r\n}\r\n\/**\r\n * Registers all block assets so that they can be enqueued through Gutenberg in\r\n * the corresponding context.\r\n *\r\n * Passes translations to JavaScript.\r\n *\/\r\nfunction gutenberg_examples_01_esnext_register_block() {\r\n\tif ( ! function_exists( 'register_block_type' ) ) {\r\n\t\t\/\/ Gutenberg is not active.\r\n\t\treturn;\r\n\t}\r\n\twp_register_script(\r\n\t\t'gutenberg-examples-01-esnext',\r\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\r\n\t\tarray( 'wp-blocks', 'wp-i18n', 'wp-element' ),\r\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\r\n\t);\r\n\tregister_block_type( 'gutenberg-examples\/example-01-basic-esnext', array(\r\n\t\t'editor_script' => 'gutenberg-examples-01-esnext',\r\n\t) );\r\n  if ( function_exists( 'wp_set_script_translations' ) ) {\r\n    \/**\r\n     * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',\r\n     * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see\r\n     * https:\/\/make.wordpress.org\/core\/2018\/11\/09\/new-javascript-i18n-support-in-wordpress\/\r\n     *\/\r\n    wp_set_script_translations( 'gutenberg-examples-01-esnext', 'gutenberg-examples' );\r\n  }\r\n}\r\nadd_action( 'init', 'gutenberg_examples_01_esnext_register_block' );<\/code><\/pre>\n
 <\/p>\n
Now we need to use the wordpress scrips package and convert our React code in our index.js file for the build process. In the package json file we need to tell it what to use to build. Add the following to your package.json file in your new plugins folder.<\/p>\n
\"scripts\": {\r\n  \"start\": \"wp-scripts start\",\r\n  \"build\": \"wp-scripts build\"\r\n},<\/code><\/pre>\n
for development, you can use ‘npm run start’
\nfor production, you can use ‘npm run build’<\/p>\n
Final package.json file:<\/p>\n
{\r\n  \"name\": \"my-esnext-block\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"start\": \"wp-scripts start\",\r\n    \"build\": \"wp-scripts build\"\r\n  },\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"@wordpress\/scripts\": \"3.2.1\"\r\n  }\r\n}\r\n<\/code><\/pre>\n
Now using the terminal run this command:<\/p>\n
npm run build<\/code><\/pre>\n
After using\u00a0 npm run build command and there are no errors in our terminal we should have a build folder with our index.js file located in there.<\/p>\n
so here is what our plugin file folder structure looks like:<\/p>\n
\"Plugin<\/p>\n
We should be able to see our new block in the editor<\/p>\n
\"\"<\/p>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
And here it is on the front end:<\/p>\n
\"front<\/p>\n
Again, Kudos to the WordPress team for getting this build package into core and saving everyone so much time. This new feature\u00a0 allows us to start building new Gutenberg blocks much quicker without the headache of setting up Webpack. Theme developers can start using it also. Just create a package.json file in the theme root directory, create a src\/index.js folder file in the theme root, and start writing your React code.\u00a0 Be sure you are in theme root when you do all of your terminal commands.<\/p>\n","protected":false},"excerpt":{"rendered":"
Thank you WordPress Team! Webpack and Babel now come packaged in WordPress, time to start building some custom Gutenberg Blocks without spending time, a lot of time setting up your local build setup. Being a PHP developer first, dealing with<\/p>\n","protected":false},"author":1,"featured_media":192,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[27,28,15],"tags":[],"acf":false,"yoast_head":"\nWordPress React Ready with Webpack and Babel bundled in core - Hyperdrive Designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress React Ready with Webpack and Babel bundled in core - Hyperdrive Designs\" \/>\n<meta property=\"og:description\" content=\"Thank you WordPress Team! Webpack and Babel now come packaged in WordPress, time to start building some custom Gutenberg Blocks without spending time, a lot of time setting up your local build setup. Being a PHP developer first, dealing with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/\" \/>\n<meta property=\"og:site_name\" content=\"Hyperdrive Designs\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-26T00:49:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-02T02:01:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/10\/blue-triangles-wp-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2250\" \/>\n\t<meta property=\"og:image:height\" content=\"1875\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Darren\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Darren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/\",\"url\":\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/\",\"name\":\"WordPress React Ready with Webpack and Babel bundled in core - Hyperdrive Designs\",\"isPartOf\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\"},\"datePublished\":\"2019-05-26T00:49:43+00:00\",\"dateModified\":\"2019-06-02T02:01:45+00:00\",\"author\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\"},\"breadcrumb\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperdrivedesigns.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress React Ready with Webpack and Babel bundled in core\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\",\"url\":\"https:\/\/hyperdrivedesigns.com\/\",\"name\":\"Hyperdrive Designs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\",\"name\":\"Darren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"caption\":\"Darren\"},\"url\":\"https:\/\/hyperdrivedesigns.com\/author\/darren\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress React Ready with Webpack and Babel bundled in core - Hyperdrive Designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/","og_locale":"en_US","og_type":"article","og_title":"WordPress React Ready with Webpack and Babel bundled in core - Hyperdrive Designs","og_description":"Thank you WordPress Team! Webpack and Babel now come packaged in WordPress, time to start building some custom Gutenberg Blocks without spending time, a lot of time setting up your local build setup. Being a PHP developer first, dealing with","og_url":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/","og_site_name":"Hyperdrive Designs","article_published_time":"2019-05-26T00:49:43+00:00","article_modified_time":"2019-06-02T02:01:45+00:00","og_image":[{"width":2250,"height":1875,"url":"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/10\/blue-triangles-wp-1.png","type":"image\/png"}],"author":"Darren","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Darren","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/","url":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/","name":"WordPress React Ready with Webpack and Babel bundled in core - Hyperdrive Designs","isPartOf":{"@id":"https:\/\/hyperdrivedesigns.com\/#website"},"datePublished":"2019-05-26T00:49:43+00:00","dateModified":"2019-06-02T02:01:45+00:00","author":{"@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6"},"breadcrumb":{"@id":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hyperdrivedesigns.com\/wordpress-react-ready-with-webpack-and-babel-bundled-in-core\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperdrivedesigns.com\/"},{"@type":"ListItem","position":2,"name":"WordPress React Ready with Webpack and Babel bundled in core"}]},{"@type":"WebSite","@id":"https:\/\/hyperdrivedesigns.com\/#website","url":"https:\/\/hyperdrivedesigns.com\/","name":"Hyperdrive Designs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6","name":"Darren","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","caption":"Darren"},"url":"https:\/\/hyperdrivedesigns.com\/author\/darren\/"}]}},"_links":{"self":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/3122"}],"collection":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/comments?post=3122"}],"version-history":[{"count":0,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/3122\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media\/192"}],"wp:attachment":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media?parent=3122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/categories?post=3122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/tags?post=3122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}