How to use JavaScript with the Block Editor Edit

The Block Editor Handbook contains information on the APIs available for working with this new setup. The goal of this tutorial is to get you comfortable using the API reference and snippets of code found within.

What is JavaScript

JavaScript is a programming language which is loaded and executed in your web browser; compared to PHP which is run by a web server with the results sent to the browser, typically as HTML.

The block editor introduced in WordPress 5.0 is written in JavaScript, with the code run in the browser, and not on the server, this allows for a richer and more dynamic user experience. It also requires you to learn how to use JavaScript to extend and enhance the block editor.

Top ↑

Table of Contents

  1. Plugins Background
  2. Loading JavaScript
  3. Extending the Block Editor
  4. Troubleshooting
  5. JavaScript Versions and Building
  6. Scope your code
  7. JavaScript Build Step
  8. ESNext Syntax