Improve Site Editor sticky notice banner

[autumnfjeld]

Let's try some simple UI / styling improvements for this banner that shows for Global Styles and Live Preview. I assume it is used in other cases as well?

Related

• Live Preview: Add the upgrade notice for Premium and Woo themes #83630
• https://github.com/Automattic/dotcom-forge/issues/4627

cc: @Automattic/lego

[autumnfjeld]

@lucasmendes-design Perhaps this is a good easy task for Matt West next month? What do you think?

[lucasmendes-design]

+1. I think this notice needs some love as well. A modern look. Right now, it seems something different from the current UI. We also use this notice in the site preview.

I assume it is used in other cases as well?

I think so. It's good to understand these cases to design something that can scale :)

[matt-west]

Here's a proposal that updates the banner to use the info styles and pushes the actions inline to the right:

I also think we should combine this with the upgrade banner that’s shown when a free/personal user previews a Premium theme or applies premium styles. Here are some variations that address that:

Let me know your thoughts!

Design: RcxiuWYjZGkFRdlWL7L02m-fi-1900_10862
Feedback: pekYwv-3uK-p2

[fushar]

I played around with dotcom-only changes (read: custom CSS overrides), to see what we can achieve without changing anything in Gutenberg. Here is a demo:

Some notes:

1. It's impossible to have the theme name in bold, because the corresponding banner library only accepts a single string as the text. There is no way to target just the theme name so that we can apply some CSS to it.
2. The "Activate" button will be replaced by "Upgrade now" button, so we don't need another same button in the banner.

What do you all think? I believe this is clean enough as a second iteration.

@Automattic/lego @matt-west @lucasmendes-design

[fushar]

@matt-west Is there an emoji that I can use for the "eye icon"? It needs to be a simple unicode character (e.g. not a React component) for this to work. Currently I'm using "👁".

[taipeicoder]

It's impossible to have the theme name in bold, because the corresponding banner library only accepts a single string as the text. There is no way to target just the theme name so that we can apply some CSS to it.

Agreed! This isn't something that can be easily overridden with CSS nor string manipulation. I propose we ignore this for now.

The "Activate" button will be replaced by "Upgrade now" button, so we don't need another same button in the banner.

+1.

What do you all think? I believe this is clean enough as a second iteration.

It looks much better than the current one 🙂

Is there an emoji that I can use for the "eye icon"? It needs to be a simple unicode character (e.g. not a React component) for this to work. Currently I'm using "👁".

My two cents: Using emoji is weird and AFAIK not really on brand with our UI. Unless it's straightforward to add icons to the banner (which doesn't seem like it), I propose we skip this as well.

[fushar]

My two cents: Using emoji is weird and AFAIK not really on brand with our UI. Unless it's straightforward to add icons to the banner (which doesn't seem like it), I propose we skip this as well.

Haha yes 😄 I just wanted to try to match with the design as close as possible. +1 on skipping this for now.

[matt-west]

Thanks @fushar!

Is there an emoji that I can use for the "eye icon"? It needs to be a simple unicode character (e.g. not a React component) for this to work. Currently I'm using "👁".

Agree that we should skip this if it's not possible to add an icon.

The "Activate" button will be replaced by "Upgrade now" button, so we don't need another same button in the banner.

Good catch! Agree that it's not needed in the banner.

[arthur791004]

I saw Notice component supports rawHTML, so maybe we can customize the notices as we want

[fushar]

@arthur791004: I had noticed that as well, but it will render children:

https://github.com/WordPress/gutenberg/blob/a4a7feb31306fa2a1a6e85d4568da432968fe6b9/packages/components/src/notice/index.tsx#L105-L107

whereas the createXxxNotice() action that we use, does not support passing children 🥲 :

https://github.com/WordPress/gutenberg/blob/a4a7feb31306fa2a1a6e85d4568da432968fe6b9/packages/notices/src/store/actions.js#L91-L103

[fushar]

I'm closing this issue as this is shipped. The issue with stacked banners is tracked here:

• Live Preview: Show only one banner when previewing a theme with custom styles #85538