Subscription

[iamtakashi]

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

<!-- wp:jetpack/layout-grid {"gutterSize":"huge","column1DesktopSpan":6,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":5,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":4,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 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-6 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 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-block-jetpack-layout-gutter__huge"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"align":"right","level":3,"style":{"typography":{"fontSize":133,"lineHeight":".9"},"color":{"text":"#ffffff"}}} -->
<h3 class="has-text-align-right has-text-color" style="color:#ffffff;font-size:133px;line-height:.9"><strong>STAY</strong><br><strong>TUNED</strong></h3>
<!-- /wp:heading --></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:spacer {"height":93} -->
<div style="height:93px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"className":"margin-bottom-none","style":{"typography":{"fontSize":18}}} -->
<p class="margin-bottom-none" style="font-size:18px">Get new content delivered directly to your inbox. </p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Email Address","buttonOnNewLine":true,"submitButtonText":"SUBSCRIBE","customButtonBackgroundColor":"#fdcf29","customTextColor":"#000000","borderWeight":0,"padding":17,"spacing":8,"className":"margin-top-half"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline margin-top-half">[jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="true" submit_button_text="SUBSCRIBE" custom_background_button_color="#fdcf29" custom_text_button_color="#000000" custom_font_size="16" custom_border_radius="0" custom_border_weight="1" custom_padding="17" custom_spacing="8" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions -->

<!-- wp:paragraph {"className":"margin-bottom-none","style":{"typography":{"fontSize":18}}} -->
<p class="margin-bottom-none" style="font-size:18px">Or follow me on:</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"className":"margin-top-half"} -->
<ul class="wp-block-social-links margin-top-half"><!-- wp:social-link {"url":"","service":"wordpress"} /-->

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

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

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

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

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

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

[ianstewart]

The first impression of this one in the Editor was quite rough in Seedlet.

And it started to break apart on the front-end in Seedlet.

Seems to be breaking a bit with Independent Publisher 2 as well.

I may be over-thinking the heading text but something about the message being "follow me in these places" and my recollections of hearing "stay tuned" meaning effectively "wait" on television aren't matching up. It might also be a saying whose time has come and gone. :)

The bright yellow button on black makes the social links feel brighter. And I think they generally look best in their current form on a black background.

[iamtakashi]

Thanks for the review. For themes like Seedlet that have narrower wide width, I've updated it to use Layout Grid so that the pattern isn't constrained to a theme defined width. Also, I placed the button below the input field.

This is how it looks now in the editor with Seedlet.

Front-end with Seedlet. (The input field height should be fixed in here)

Independent Publisher2 CSS has relative vertical margins for headings. That's why the heading is pushed down so much. Obviously, as a pre-Gutenberg theme, it didn't consider a situation where the user changes the heading size :) Unless we can override margins in blocks, we'll continue to see this sort of problem with legacy themes. But, I made sure the heading stays in white in the theme.

--

In terms of the heading "stay tuned", this is what I find on the web, and it seems aligned with what I intended.

a) to continue watching or listening to the same television channel or radio station b) used to say that you should look or listen for more information about a particular subject at a later time

[ianstewart]

Unless we can override margins in blocks, we'll continue to see this sort of problem

This is worth contributing as an example to existing margin discussions.