[LYS] Coming Soon template layout changes (#46403)

* Update template tweaks

* Blockify the gaps

* Add changefile(s) from automation for the following project(s): woocommerce

* Update banner styles

* vertical center

* 500 weight on login

* Update login/logout button font-weight

* Revert "Update login/logout button font-weight"

This reverts commit b985d2a0f6.

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce/changelog/46403-update-LYS-template-layout

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: Update styles to unreleased feature
+

plugins/woocommerce/src/Admin/Features/LaunchYourStore.php

@@ -148,18 +148,10 @@ class LaunchYourStore {
 		$heading = __( 'Pardon our dust! We\'re working on something amazing -- check back soon!', 'woocommerce' );
 
 		return sprintf(
-			'<!-- wp:group {"layout":{"type":"constrained"}} -->
+			'<!-- wp:group {"className":"woocommerce-coming-soon-banner-container","layout":{"type":"constrained"}} -->
-			<div class="wp-block-group"><!-- wp:spacer -->
+			<div class="wp-block-group woocommerce-coming-soon-banner-container"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide","className":"woocommerce-coming-soon-banner"} -->
-			<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+			<h1 class="wp-block-heading alignwide has-text-align-center woocommerce-coming-soon-banner">%s</h1>
-			<!-- /wp:spacer -->
+			<!-- /wp:heading --></div>
-
-			<!-- wp:heading {"textAlign":"center","level":1,"align":"wide"} -->
-			<h1 class="wp-block-heading alignwide has-text-align-center">%s</h1>
-			<!-- /wp:heading -->
-
-			<!-- wp:spacer -->
-			<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-			<!-- /wp:spacer --></div>
 			<!-- /wp:group -->',
 			$heading
 		);

plugins/woocommerce/templates/templates/blockified/coming-soon-entire-site.html

@@ -8,8 +8,8 @@
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"48px"}},"className":"woocommerce-coming-soon-social-login","layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#111111","style":{"layout":{"selfStretch":"fit","flexSize":null}},"className":"is-style-logos-only"} -->
+<div class="wp-block-group woocommerce-coming-soon-social-login"><!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#111111","style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"blockGap":{"left":"18px"}}},"className":"is-style-logos-only"} -->
 <ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://www.linkedin.com/","service":"linkedin"} /-->
 
 <!-- wp:social-link {"url":"https://www.instagram.com","service":"instagram"} /-->
@@ -25,8 +25,8 @@
 <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 <!-- wp:post-content {"align":"wide"} /-->
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}}},"layout":{"type":"constrained"}} -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}}},"className":"woocommerce-coming-soon-powered-by-woo","layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0"}}}} -->
+<div class="wp-block-group woocommerce-coming-soon-powered-by-woo" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0"}}}} -->
 <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:0"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast-2","fontSize":"small"} -->
 <p class="has-text-align-center has-contrast-2-color has-text-color has-link-color has-small-font-size">
     Powered by
@@ -42,12 +42,34 @@
     }
     .page-template-coming-soon-entire-site .wp-block-loginout {
         background-color: #000000;
-        padding: 7px 8px;
+        padding: 7px 17px;
         border-radius: 6px;
     }
     .page-template-coming-soon-entire-site .wp-block-loginout a {
         color: #ffffff;
         text-decoration: none;
-        line-height: 26px;
+        line-height: 17px;
+        font-size: 14px;
+        font-weight: 500;
+    }
+    .woocommerce-coming-soon-powered-by-woo {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+    body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
+        max-width: 820px;
+    }
+    .woocommerce-coming-soon-banner-container {
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .woocommerce-coming-soon-banner {
+        font-size: 48px;
+        font-weight: 400;
+        line-height: 58px;
     }
 </style>

plugins/woocommerce/templates/templates/coming-soon-entire-site.html

@@ -8,8 +8,8 @@
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"48px"}},"className":"woocommerce-coming-soon-social-login","layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#111111","style":{"layout":{"selfStretch":"fit","flexSize":null}},"className":"is-style-logos-only"} -->
+<div class="wp-block-group woocommerce-coming-soon-social-login"><!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#111111","style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"blockGap":{"left":"18px"}}},"className":"is-style-logos-only"} -->
 <ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://www.linkedin.com/","service":"linkedin"} /-->
 
 <!-- wp:social-link {"url":"https://www.instagram.com","service":"instagram"} /-->
@@ -25,8 +25,8 @@
 <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 <!-- wp:post-content {"align":"wide"} /-->
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}}},"layout":{"type":"constrained"}} -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}}},"className":"woocommerce-coming-soon-powered-by-woo","layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0"}}}} -->
+<div class="wp-block-group woocommerce-coming-soon-powered-by-woo" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0"}}}} -->
 <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:0"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast-2","fontSize":"small"} -->
 <p class="has-text-align-center has-contrast-2-color has-text-color has-link-color has-small-font-size">
     Powered by
@@ -42,13 +42,34 @@
     }
     .page-template-coming-soon-entire-site .wp-block-loginout {
         background-color: #000000;
-        padding: 7px 8px;
+        padding: 7px 17px;
         border-radius: 6px;
     }
     .page-template-coming-soon-entire-site .wp-block-loginout a {
         color: #ffffff;
         text-decoration: none;
-        line-height: 26px;
+        line-height: 17px;
+        font-size: 14px;
+        font-weight: 500;
+    }
+    .woocommerce-coming-soon-powered-by-woo {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+    body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
+        max-width: 820px;
+    }
+    .woocommerce-coming-soon-banner-container {
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .woocommerce-coming-soon-banner {
+        font-size: 48px;
+        font-weight: 400;
+        line-height: 58px;
     }
 </style>
-