Once upon a time, the Internet was a glorious display of visuals – like a carnival in the 90s. Over time, the Internet became a place where people began to do real work instead of using basic HTML to build their MySpace pages.
As we marched on and technology advanced, so too have the expectations of users. Users have implicit expectations around what constitutes a good user experience:
- Forms with instant feedback
- Rich and complex content that is truly “what you see is what you get”
- Immediate visual feedback
- Drag and drop technology
Making a truly good user experience is hard, and it’s getting harder.
A few years back, Gutenberg (eventually the Block Editor) became the future of WordPress. It was a massively complex undertaking. The engineers that designed it knew they were building something big. They built dozens of small excellent pieces that come together to make the great interface called the Block Editor.
These pieces are what makeup Gutenberg. If we’re smart, we can use the same functionality to build our own excellent user experience.
The Road to GiveWP 3.0: The Visual Form Builder
At GiveWP we empower people and organizations to create donation forms that maximize their fundraising efforts. At the core of our user experience is the customer’s ability to build a form that fits their specific needs, looks clear to the donor, and just works. Right now our forms work like classic data entry. You use a bunch of settings to describe the form visually and functionally, and then you view it on the front end. It’s how many applications have worked for a long time.
But we wanted to do better.
We had mountains of user feedback that detailed what folks want, need, and expect out of GiveWP donations forms… We knew we couldn’t just keep adding on to how our forms worked – There needed to be a fundamental change.
We also knew we didn’t want to spend three years building it or delivering something that didn’t address those needs. Enter Gutenberg.
The Block Editor has a canvas area where the user can place blocks and move them around freely. It has the concept of blocks to begin with — something you define more of and it just pops up. These blocks have their own settings, and the page (or form?) itself has settings. The user builds exactly what they want with the proper amount of guidance, so the front end is no surprise.
As a whole, the Block Editor did more than we needed; as Gutenberg pieces, it contained just about everything we wanted.
Building Blocks for the Next Generation of WordPress Donation forms
We took to the Gutenberg repository on Github and started testing. In a surprisingly short time, we arranged the pieces (the list view, canvas, inspector, and so forth) into a block editor for our donation forms.
It would restrict to only our blocks, allowing for some blocks to have multiple fields and others to only have one field. It looks familiar, like the Block Editor, and yet distinct.
I’ll pause for a moment to reflect on the significance of the opportunity at hand.
Let’s number out a few things:
- There is a free framework out there called Gutenberg that makes for an excellent user interface.
- The framework of Gutenberg is made up of pieces that can be assembled to anything, not just another written content editor.
- We’ve saved hundreds of hours utilizing these pieces and creating an interface that’s proven to be solid.
- As Gutenberg grows, so will we. We can simply pull in updates as they happen.
- We’re motivated to contribute back to Gutenberg (and already have in a small way), which helps everyone to win.
- Our users don’t have to learn a completely new interface. If they’re comfortable with the Block Editor, they’ll pick up our Visual Form Builder very quickly.
What does this mean for your plugin?
I encourage everyone out there to stop and realize that there’s more to Gutenberg than just a post editor or even a Full Site Editing page builder. There are dozens of battle-tested packages available for free that can be used to build amazing things.
Use it, give back to it, and everybody wins — including your users.
Think of the Block Editor as a pyramid. Imagine each stone as a package. Put it all together and you get the post editor we imagine.
But what if you wanted something else at the top? Well, you can take off a couple of layers of stones and build what you want on top of it. You can reconfigure the whole thing in a completely different way. Think bigger than just whether you can imagine the next coolest set of blocks that people can use — you can design an entirely new way to build anything.
Not only does this open up new ideas for existing plugins, but it also can open up ideas for completely new plugins that take a fraction of the time to build. That’s pretty amazing!
Join GiveWP on our journey
To my knowledge, no one is doing quite what we’re doing with Gutenberg. This is bigger than just GiveWP though. We invite everyone on the journey. It’s this kind of experimentation that yields newer and more interesting ideas and possibilities. Perhaps you’ll find that GiveWP is great for your project! Or perhaps you’ll be inspired to build something of your own in a similar way that no one has even thought of.
The Internet has come a long way. It’s possible to build things we could barely have imagined thirty years ago in a fraction of the time. With Open Source we can do it in a win-win way where we innovate and grow together. I encourage you to check out what we’re doing and think about what you can do, too.
