Button Outline Not Working on Illustratr Theme

[cat-og]

Quick summary

• Setting a button style to Outline does not work as expected with the Illustratr theme.

• With the main button block, the preview on the page does not reflect the Outline change

• However, the button is correct on the live site, seen in the second screenshot below

• When adding a Paid Content block, the Subscription button specifically will not update the background color for the outline; instead it shows the theme default dark gray. Since the text is also set by default to dark gray, the button is illegible.

Steps to reproduce

Simple Sites:

1. Update theme to Illustratr
2. Add standard button block to page, and set format to Outline; the preview on the draft will not be affected, but it will load on the live site
3. Add a Paid Content block, and set the button format to Outline. The preview on the draft will not be affected, and it will not load on the live site.

Atomic Sites

1. Update theme to Illustratr
2. Add a Paid Content block, and set the button format to Outline. The preview on the draft will update, but the blocks appear without an outline on the live site.

What you expected to happen

When I set the button format to outline, I except to see the change reflected on the draft page and the live site.

What actually happened

On simple sites, the standard button block preview does not change, and the button with the Subscribe option will not change at all, in preview or on the live site.

On Atomic sites, the preview updated correctly for all blocks, but the Paid Content buttons were still not working on the live site.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

No response

[cat-og]

8474532-zd-a8c

[mrfoxtalbot]

I can replicate this. Transferring to /themes and adding labels.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8474532-zen

[sbathompson-he]

8474532-zd-a8c

Closing this ticket as they have a CSS workaround. Once this is fixed, email the customer to let them know. Thanks!

[peterschimke]

Looks like there was a workaround for this. Is it worth fixing? @alaczek?

[alaczek]

I wasn't able to replicate this for the core Block button - the styles for both fill and outline worked for me both in the editor and live preview.

Editor, simple site:

Live preview, simple site:

It also worked on Atomic.

I did see the issue within the Paid Content block - when the button inside is set to outline the CSS that adds transparent background is not applied - hence the issue. I was able to replicate the issue with the Assembler theme, which makes me think it has to do with the block, not the theme.

[alaczek]

Opened an issue for the Premium Content here: https://github.com/Automattic/jetpack/issues/40292