Over the years, I’ve been slowly upgrading my WordPress website, using it as my playground to test features and updates, maintaining a bespoke theme that was always up to date with the latest tools while allowing me to easily extend and customise both the front-end and the WordPress editing experience through best practices. The aim was always to have a starting point, a clean codebase to start all my projects, each with their own unique needs.
Embracing change
When I first heard of Gutenberg, way back in early 2016-2017, I was excited and scared. They took the huge undertaking of updating the way content was edited in a platform that hosts millions of sites, in an effort to compete with up and coming services like Squarespace, Wix and GoDaddy, advanced website builders with unique and new approaches. For a couple of years after the announcement, it felt like a 50/50 if the improvements would be worth changing all the processes we had to develop code. You are used to updating and adding new tools and technologies as time goes by, but it had been years of learning to enhance a simple WYSIWYG to create advanced layouts that could be altered by everyday internet users.
For years, the code seemed to be stuck in between progress and stability, in a weird limbo, a never-ending journey of small and big compromises to make editing the content as frictionless as possible, while making each site both bespoke and future-proof for each of my clients needs.
Between plugins and themes, there was never a consistent way to create reusable and consistent pieces of code that could be dropped in an out, without adding a lot of code bloat and maintenance headaches. Navigating this balance was the hardest part of each of my projects.
What the WordPress team set out to do more than 6 years ago, it’s finally paying off.
There is no more compromises when it comes to visualise the ideal experience of adding, editing and customising bespoke content. I can simple say:
- I need to add snippets of raw code, that can optionally display the source code as plain text alongside the working preview.
- I need the preview to be fully interactive.
- I need to add as many as I want, and edit them easily and quite regularly alongside the rest of the page content, without leaving the editing screen.
- Use Tailwind v3 to customise each snippet without having to save big files or require additional unique stylesheets.
- Allow each snippet to have its own dependencies, quirks and necessities, without affecting the speed or the ease of use.
- And most importantly: It can be built fast enough for a prototype to be implemented in just a few hours, before committing any more time to the final production code. And that codebase is clean enough to not required any refactors. Build fast and build up.
Where before the path of lest effort would have been to use a third-party service and embed each snippet separately, now I have a block for that. Because I created it.
I was initially hesitant of the move to React for the entirety of the site editor. But it ultimately forced me as a developer to up my skills and move my attention to full Javascript and Typescript development environments, an absolute necessary step in web development 6 years ago.
And after a rocky start, I can confidently say that WordPress now allows to fully extend the visual experience of creating and editing a site in a consistent way that users can understand in an intuitive way.
So I made my own custom Snippet Preview Block (Currently in beta):
I just recently finished the first working version, although I wouldn’t say it’s ready for prime time. At its heart, it uses a web component for a consistent experience, an iframe for the interactive preview and higlight.js for the snippet of code. It will serve me to showcase the small pieces of work that illustrates some of my writing on my portfolio. But having the ability to easily prototype these idea and have it working within minutes, gives me the power to play in exciting ways with the process of editing any and all content on a website. The kind of thing that drove me to development on the first place.
I will update this page with the Github repo as soon as I test and polish a few more things.