Over the years, I've built lots of plugins, and every time, I had to code the structure of the administration pages from the WordPress dashboard.
Most of the time, the plugins were 'client plugins', meaning I was hired to build them based on a brief.
In that case, I didn't really have the freedom to design them how I see fit.
But since I started publishing my own plugins through Tadamus I'm finally free to design and structure the pages as I see fit. It all started with WP Fusion Slack.
And here comes the problem that I want to discuss here. How do I prevent the repetitive task of implementing the same design structure for all the pages?
First steps
The thought that came to mind was to use a front-end framework or library like React or Svelte.
And since the block editor is based on React, I went for React. Although, my geek spirit still thinks I should have used Svelte 😅.
At some point, I'll write a follow-up article on how I configured React, Babel, and Webpack to be able to create and render pages in the dashboard.
Introducing the WP UI
Now, after choosing React, I had to refactor the components I created for the first admin page into a small library, which eventually got turned into an NPM package called WP UI.
It can also be found in the Github repo.
In it, I added everything I used on the first page, and since then, I have kept adding components that I thought I'd be using going forward.
I did my best to keep the components as extendable as possible, so please feel free to check them out and let me know if you have any suggestions.
Suggestions
Currently, the package is in an initial phase. So, I'm open to any kind of feedback from you guys. So please let me know in the comments section or our contact form.
Also, if any of you guys think it would help you if I document the process of creating this library, please let me know. 🙂
Top comments (0)