GiveWP quietly released its new plugin, Donation Form Block for Stripe, in the WordPress directory last week. It is a standalone block that allows users to accept donations almost instantly. No complicated setup. Just install, activate, connect to Stripe, and play.
I named the GiveWP plugin my favorite of 2019. The team behind the donation plugin has consistently produced top-tier plugins and extensions, and I have long been of fan of the company’s work. It did not take me long to install and activate its latest plugin.
Donation Form Block for Stripe is essentially a lite version of GiveWP. The primary product is far more powerful and has an entire ecosystem of extensions built around it. In general, it is geared more toward charities, non-profits, and other fundraising efforts where users might need more flexibility, reporting, and integration with third-party systems. It can be overkill for someone who merely needs a simple donation form.
The one-off donation form block is better-suited for those “buy me a coffee” scenarios than well-organized fundraisers. I am glad to see GiveWP tackling this side of the donation arena.
Inserting the block is as easy as adding any other. However, before using it, users should connect their Stripe account, and the plugin provides a handy button for doing so in the block sidebar:
The Stripe connection persists, so it only needs to be configured once. From that point, everything is relatively straightforward. Plug in a few details and publish.
In a couple of minutes, I had created and published a fictional fundraiser for cleaning a local basketball court.
As much as I love the idea of this block, I was not entirely happy with the user experience. However, keeping in mind that this is version 1.0.x, it has a ton of potential.
GiveWP’s donation form managed to break nearly every one of my block-related cardinal sins while still managing to be an exceptional product.
Users must add an image, custom text, and donation field text via the block options sidebar. This means there is no Rich Text input, so users cannot even add simple bold and italic styles. It also feels unintuitive working from the sidebar instead of modifying the fields directly from the content canvas.
A more ideal approach would have used the “inner blocks” feature to put Heading, Paragraph, and Image/Cover blocks — locked in place — into the main donation form. It could have done the same with the buttons and other form elements via custom blocks.
Ultimately, most of the problems are related to control over the design. One of the worst things block plugins can do is overrule everything the theme styles on the front end.
Do not get me wrong; blocks should ensure quality control over their own output. Their functionality should be unencumbered, and their layout should work well regardless of the theme.
However, this donation block takes its duties a step too far, using JavaScript to inject CSS into the page and doubling up on the specificity with !important. Even if a theme wanted to integrate with the block, it is next to impossible to style the donation form elements. Is there really any reason that the inputs are required to have 2px, solid, rounded borders?
And, why are my theme and user-registered colors not even available for the single color option provided?
That is what frustrates me the most — not just with this block. WordPress has built this standardized system that allows communication between the platform, plugins, themes, and end-users. It lets developers build output that should always be customizable. By no means does it cover every aspect of design. However, the foundational components are in place. Colors and font sizes have been around for over three years. Extended typography and border controls are available now.
There is no way to make a wide or full-width form. The block does not support alignments, and even when wrapping a Group block, the plugin limits it to a maximum width of 650 pixels.
Some of these problems are similar to the issues I was writing about nearly two years ago with the release of GiveWP 2.7. I would have liked to have seen them addressed on an entirely new plugin release from the outset.
Despite my complaints, the plugin does the one thing it must do correctly, at least as good as anyone and better than most. It makes accepting donations as simple as inserting a block into a page, customizing a handful of fields, and hitting the publish button. If the dev team never added another enhancement, that would be all most of its users need.
Hey, thanks for the write up Justin! You hit the nail on the head as to why we built this block. I also enjoyed reading your suggestions. Using inner blocks to edit the content right in the block sounds obvious now that you said it. I’m going to experiment with that and also adding more rich text editing features.
We do plan on adding a lot more flexibility in the near future. As you mentioned, this is only version 1.0.x and we haven’t perfected anything yet.
The VERY opinionated styles is my doing and was done on purpose. One thing I’ve learned from GiveWP is that themes can wreak havoc on various elements, especially forms, headings, and spacings. When I see this happen in the wild, it pains me to see it. Most users are helpless to fix it also, unless they have some CSS skills.
That’s why this go-around I decided to experiment with CSS in JS using Aphrodite. This achieved the super consistent look across the dozens of themes I tested with. However, I understood going into it that some developers may not be too happy to see that. Let’s be honest, I also cringe when I see
! importantused in CSS.There’s likely a nice middle ground wherein the style specificity can be modified per block so that the theme has more control. I’m going to think about this more and see what I can come up with.
We’re excited for this block and have a nice roadmap of features to work on. Some of those features thanks to you and this post. Cheers!