If you prefer a quick start, you can use one of the examples from the Gutenberg Examples repository and skip below. See the package documentation for configuration details. The package abstracts these libraries away to standardize and simplify development, so you won’t need to handle the details for configuring webpack or babel. You use Babel as a plugin to webpack to transform both ESNext and JSX to JavaScript. Babel transforms JavaScript from one format to another. Webpack is a pluggable tool that processes JavaScript and creates a compiled bundle that runs in a browser. There are different tools that can perform this transformation or build step WordPress uses webpack and Babel. By using a build step you can organize your code into smaller modules and files that can be bundled together into a single download.Using a transformation step allows for tools to optimize the code to work on the widest variety of browsers.It makes for simpler code that is easier to read and write.There are a few reasons to use ESNext and this extra step of transformation: If you want to develop on Gutenberg itself, see the Getting Started documentation.īrowsers cannot interpret or run ESNext and JSX syntaxes, so we must use a transformation step to convert these syntaxes to code that browsers can understand. Let’s set up your development environment to use these syntaxes, we’ll cover development for your plugin to work with the Gutenberg project (ie: the block editor).

See the ESNext syntax documentation for explanation and examples about common code differences between standard JavaScript and ESNext. JSX is a custom syntax extension to JavaScript, created by React project, that allows you to write JavaScript using a familiar HTML tag-like syntax. Browse: Home / Block Editor Handbook / How-to Guides / How to use JavaScript with the Block Editor / JavaScript Build Setup JavaScript Build Setup EditĮSNext is JavaScript written using syntax and features only available in a version newer than browser support-the support browser versions is referred to as ECMAScript 5 (ES5).

Javascript install