Do you know about the WordPress “Data Layer”? If you’re anything like me, you’ve maybe heard the term or have a vague idea of it. OK- if you’re really anything like me, you’ll admit you have not actually heard the term and have no idea what it is. To remedy this issue, I took the new Using the WordPress Data Layer course on Learn WordPress. Impressive stuff.

See, to be honest, when I heard Matt Mullenweg say “Learn JavaScript Deeply,” I didn’t really take him up on it. Sure I’m fairly handy with JavaScript- heck we even built WPWallet using Vue.js and the WP REST API- but I’ve largely ignored what’s been happening specifically over in Gutenberg territory. My WordPress focus has mostly been outside of the block editor.

The result is that the last five or so years of WordPress core development have really flown over my head. While there’s been visible “end-user” progress happening inside the block editor, it feels like only recently that a ton of developer-friendly stuff is just starting to surface as well.

I say “starting to surface” because the entire paradigm of WordPress- from how project leadership communicates, where code is written and discussed, to how well new features are being documented- has shifted. Most of this stuff is just beginning to look stable enough to use and much of it isn’t really “documented” in the way that we think about classical documentation. Instead, there’s been a focus on the “Block Editor Handbook” as the new location for much of this information, including packages like @wordpress/env that should really be presented to the community outside the context of the block editor. Your mileage attempting to navigate through the handbook’s narrowly-columned, weirdly laid-out content may vary.

Take the WordPress Data Layer as an example. In (overly) simplistic terms, the WordPress Data Layer is a way to interact with WordPress data purely through JavaScript. It allows you to create and modify WordPress data through small apps/components that you can write and mount purely in JavaScript. There’s tons of scaffolding and build-tools ready, built-in functionality for managing state or syncing/caching with the REST API, and an entire component library of pre-designed, interactive UI elements like modals, buttons, toasts, and more.

What’s striking about this data layer course is that you’re developing something for WordPress, using this fancy new modern JavaScript, but outside of the block editor itself. And yet, most of WordPress outside the block editor is not taking advantage of any of this, except for maybe the newish Site Health tools page. The potential is there, but even WordPress core hasn’t really shown this potential to the larger community by using it. The example in the course has you essentially recreating a WP List Table, an element I specifically called out as needing an admin makeover.

This course (the content of which has already been hidden inside the handbook) is a great first step in breaking down the walls between block editing and the rest of the WordPress admin.

The truth is that “Learn JavaScript Deeply” should’ve been “Learn React/Redux Deeply” because the first thing you’ll notice when you do start digging into this stuff is that most of the exciting things happening in WordPress are built off of- or based on the mindset of- React.js.

React.js is a framework that very clearly comes out of Facebook: you can tell it was designed by engineers with no concern for beauty or aesthetics. It’s ugly but it’s extremely functional. Disagree? Just compare the landing pages for reactjs.org and vuejs.org. Dip your toes into JSX but shield your eyes. God forbid we enjoy looking at something. (This seems to be the motto for most of the Gutenberg UI components.)

So I’ve mostly missed the boat on React.js and found myself more intrigued by Laravel + Vue.js. But now that I’m digging into the JavaScript coming out of WordPress, I’m a little more intrigued.

In a decade (if Gutenberg hasn’t driven us all to madness first), I believe there will be a divide between “JavaScript developers” and “WordPress JavaScript developers”- much the same way that “PHP developers” look at the idiosyncrasies of “WordPress PHP developers” and scoff. Not that one is better/worse, but just that WordPress always brings its own flavor to the party. This is definitely happening here. I am starting to see WordPress actually being an entry point for advanced JavaScript development, something I wouldn’t have said six months ago.

If you’re at all interested in a taste of what’s happening inside the JavaScript world of WordPress, this is a great first step. Even if you don’t know React, I challenge you to step through the course, write (don’t copy/paste) the code out yourself, and see what you think.

Using the WordPress Data Layer

Update: Explore part two of my journey into WP’s JavaScript: Recreating the Quick Draft dashboard widget using the WordPress Data Layer