Premium Content Button Styles

Quick summary

The Premium Content Button styles in a header will be impacted by the style of Buttons blocks in the content area.

Steps to reproduce

Customize a header template part and add a Premium Content Login button, add styling like rounded edges or button colors.
Apply header template part to Pages
Add two pages; one with a regular Buttons block and one with no buttons in the content

What you expected to happen

The Premium Content Login button style should remain consistent between pages, regardless of whether there is a button in the content area or not.

What actually happened

The Premium Content Login button style changed between the two pages. Depending on the theme and styling applied, the change might be hard to see at first. Added a video (no sound) that might help:

https://github.com/Automattic/wp-calypso/assets/38542929/1564708b-2c50-4e57-990d-9d48f908a8ff

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Themes tested:

Iotix
Allez

CSS provided for Iotix:

/* Log in button fix: bold text and thicker padding  */
.wp-block-premium-content-login-button .wp-block-button__link {
    display:inline-block;
    font-weight: 700;
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.227), 1rem);
    padding: var(--wp--preset--spacing--40) 2.25rem;
}

The issue does not happen if the button on the page is a Subscribe button. It appears to be specific to a Premium Content Button combined with a Buttons block.

Automattic / wp-calypso