Automattic / Automattic/jetpack

Eventbrite, Calendly: Button style can't be styled without URL

Open
#15,798 6 comments 0 reactions 0 assignees View on GitHub
[Block] Calendly [Block] Eventbrite [Focus] Blocks [Pri] Low [Size] M Enhancement
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.

![Screenshot 2020-05-15 at 00 32 15](https://user-images.githubusercontent.com/908665/81995915-9ed5ac00-9643-11ea-8475-9a0a2ce8f0ea.png)

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:

Screenshot 2020-05-15 at 01 00 19

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.

Screenshot 2020-05-15 at 01 46 12

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.