Spearhead: Misaligned input and button in Subscriptions Block

[ianstewart]

Editor View

Here's what I saw when using the subscriptions block in the Editor with Spearhead.

Front-End Bug

It's much closer to what I expected than what I saw in the short email input in the front-end. (Chrome, MacOS.)

[jffng]

I think this is a bug with the Subscriptions block itself. Here's what I see on the front-end:

No input element is rendered. Here's the markup:

@scruffian do you know where I can file an issue or if this is being addressed in the next Jetpack release?

[scruffian]

There are some open issues for this already:

Automattic/jetpack#15474
Automattic/jetpack#18085

However I think this is slightly different as its dealing with the case when the input does show. I'm not sure how to replicate that though, maybe @ianstewart can help?

[ianstewart]

Oh! I just grabbed a screenshot from a public test site while incognito, thus logged-out.

While I'm here, here's the same block content I used for my issue.

<!-- wp:group {"align":"full","style":{"color":{"text":"#ffffff","background":"#151516"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#151516;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":12} -->
<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":10,"column1DesktopOffset":1,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1,"className":"column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"style":{"typography":{"fontSize":"44px","lineHeight":"1.1"}}} -->
<h2 style="font-size:44px;line-height:1.1">Stay in touch</h2>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":7,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":3,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":1,"className":"column1-desktop-grid__span-7 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-3 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-7 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-3 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Get every new episode delivered to your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="16" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Follow me on:</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"wordpress.com","service":"wordpress"} /-->

<!-- wp:social-link {"url":"facebook.com","service":"facebook"} /-->

<!-- wp:social-link {"url":"twitter.com","service":"twitter"} /-->

<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":12} -->
<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->