Automattic / Automattic/jetpack

Donations block: A new block style idea

Open
#17,151 0 comments 0 reactions 0 assignees View on GitHub
[Block] Donations Enhancement Payments: before Woo
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:

![image](https://user-images.githubusercontent.com/4550351/93038452-5f1de000-f688-11ea-807e-5449d6cb2834.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.