Automattic / Automattic/jetpack
Eventbrite, Calendly: Button style can't be styled without URL
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
@creativecoder has kindly replied to me on `pb5gDS-tx-p2`, but I'm opening an issue here to discuss how we could move forward with this.
Currently, these blocks don't let you style the button until you add an embeddable URL. This is a problem when it comes to layout and block patterns. Why?
For example, we want to provide the customer with a block pattern like this that uses the block with its Button & Modal style. The button saying "Buy tickets" is styled with the yellow to blend into the rest of the design.

However, we don't include a demo URL in the pattern, therefore we won't be able to style the button with the yellow in the pattern, and when the customer adds an URL they're going to see a button that is style by the activated theme, and it could end up like this if the default button in the theme is green:

This is not a great experience for the customer.
Also, what they're going to see in the preview is going to be something like this which is not very attractive with the white box either.

How can we provide a better experience? there might be other blocks that share the same challenge.
---
While I was testing this, I wasn't able to add an URL if I choose the Button & Modal style before adding the URL. It only accepted the URL when I choose the Inline style. This seems to be a bug —let me know if it's better to open an issue for it.
cc @ianstewart @alaczek
Contributor guide
Research direction
No files, tests, or entry points are identified. Start by locating the Eventbrite and Calendly blocks and reproduce the Button & Modal flow with and without a URL. Done should allow the button styling to be set before a URL is added and prevent the preview from inheriting an unsuitable theme style.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100