Developing WordPress Blocks without React

Code. Free public domain CC0

One of the most common complaints I hear from long term WordPress developers boils down to the fact that to develop blocks for the WordPress Block Editor, you need to set up the JavaScript development environment (Node.js + npm + @wordpress/scripts) in order to start building blocks.

This is not entirely true, as it is in fact possible to build blocks without any of this, and just use vanilla JavaScript.

I covered the basics of what this could look like in a series on Online Workshops last year:

Note: for those who prefer to learn by reading/looking at code, there’s also a companion GitHub repository:

https://github.com/jonathanbossenger/wp-learn-javascript

Block basics

Implementing Attributes

Using Attributes with existing Components

Implmenting Block Controls

Block Supports

Putting it all together


2 responses to “Developing WordPress Blocks without React”

  1. anon Avatar
    anon

    i suppose this means it wouldn’t be possible to use any of npm packages like @wordpress/server-side-render cause they’re made for react..?

    https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/

    1. Jonathan Avatar

      Nope, you can access the component on the global wp object, when the editor is loaded via wp.serverSideRender

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.