So I wrote this thing that does some stuff with WordPress using webpack (two of my favorite things in the development landscape). While it most certainly could have a use case and user base of solely me, I figured it couldn’t hurt to share publicly.

With that said, that thing I wrote, Peanut For WordPress, is an application (and maybe it’s a lightweight framework?) built to help with the development process of creating plugins, themes, and blocks. Similar to WordPress scripts package, it’ll compile all the client side code you need for your blocks and plugins. It will also give you the ability to create reusable “components” within your themes and blocks. 

Components?

Peanut was built to help create “components” within your WordPress site that could be easily used in multiple ways. It extends WordPress’ Template Parts functionality in order to encapsulate all the code for a component into one area. These modular components can then be easily customized via argument “props” and reused across different elements (i.e. WordPress blocks and themes).

In a nutshell (pun intended), the goal is to empower you to save time while building all the things you love in WordPress.

Load what you want, when you want

Loading specific sections of your website quickly and efficiently is essential for maintaining fast website performance. While it may seem like a straightforward task, the ability to load content precisely when and how you desire plays a crucial role in enhancing the speed of your website.

Our focus on fast loading client side code hinges on the idea of being able to load parts of your site through bits and pieces (i.e. components) when and how you want. Is lazy loading a component as it comes into view your go to technique? We got you covered. Got a component that’s double your existing page weight and you would prefer to load it asynchronously after being triggered by a user driven event? You can do that too! Want to only server side render the HTML and CSS for a component and then load the JavaScript on demand? That’s in the works too (hey, we’re still in the alpha phase).

Want to learn more or try it out?

We’ll be updating this post and others at our website, so check there to learn more.

If you want to go ahead and get started, check out our evolving documentation on GitBook.

There you’ll find a quick start guide as well as examples of how to build themes, plugins, and blocks with Peanut for WordPress.

If you’re feeling adventurous, you can also head on over to our GitHub repo to dive into the source code.

What’s Next?

Development of Peanut is currently in the early alpha stages. We’ve done our proof of concept and now it’s time to craft it into a real boy. So don’t be surprised to see new features added and refine. (and hopefully nothing breaks)

One of the major features we’re still working on is the “Component Whiteboard”. Similar to Storybook for React, this will be a part of the application that allows for prototyping out components easily. There’s already the early stages of the tooling available within the Alpha release. We might even be able to get a sort of faux-hot-reloading going using the WP JSON api route we’ve created for Peanut components. You can find out more by visiting our documentation on GitBook.

To keep up with updates, you can follow us on GitHub or LinkedIn.