Automattic / Automattic/jetpack
Donations block: A new block style idea
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 790
Description
I've been exploring block pattern ideas around the donations block, and I had an idea for a more compact style, that could potentially be an alternative block style. Here's what I had in mind:

I've tentatively called this the **compact** style. Aside from the colors, borders, and fonts (which I covered in #17150), the main difference is putting all the text fields for the amounts on a single line and joining them together. Note I put the text
field for custom amount in there too.
The other thing here is marking the selected amount option by setting the background (the default pattern only puts a frame around the selected option). It's a design pattern I saw on many charity websites, and it's a nice variation on the default and would add a variety to the kinds of deigns we can create around donations block.
Contributor guide
Research direction
Review the donations block and the proposed compact-style image, then compare the related colors, borders, and fonts work referenced in #17150. Done means the amount fields, including custom amount, appear on one line and the selected option uses a background treatment matching the proposed design.
Written by the indexing model from the issue text.
Assessment
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100