[LYS] Reapply styles from 46619 (#46813)

* copy styles over from 46619

* Fix header padding

* login/out

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

* typo

---------

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

plugins/woocommerce-blocks/assets/js/blocks/coming-soon/edit.tsx

@@ -29,13 +29,83 @@ export default function Edit( { attributes, setAttributes } ) {
 				<InnerBlocks />
 			</div>
 			<style>
-				{ `body, .editor-styles-wrapper.block-editor-writing-flow {
+				{ `@font-face {
+                    font-family: 'Inter';
+                    src: url( <?php echo esc_url( WC()->plugin_url() . '/assets/fonts/Inter-VariableFont_slnt,wght.woff2' ); ?>) format('woff2');
+                    font-weight: 300 900;
+                    font-style: normal;
+                }
+
+                @font-face {
+                    font-family: 'Cardo';
+                    src: url( <?php echo esc_url( WC()->plugin_url() . '/assets/fonts/cardo_normal_400.woff2' ); ?>) format('woff2');
+                    font-weight: 400;
+                    font-style: normal;
+                }
+                /* Reset */
+                h1, p, a {
+                    margin: 0;
+                    padding: 0;
+                    border: 0;
+                    vertical-align: baseline;
+                }
+                ol, ul {
+                    list-style: none;
+                }
+                a {
+                    text-decoration: none;
+                }
+                body,
+                body.custom-background {
+                    margin: 0;
                     background-color: ${ color };
+                    font-family: 'Inter', sans-serif;
+                    --wp--preset--color--contrast: #111111;
+                    --wp--style--global--wide-size: 1280px;
+                }
+                body .is-layout-constrained > .alignwide {
+                    margin: 0 auto;
+                }
+                .wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
+                    justify-content: space-between;
+                }
+                .is-layout-flex {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    margin: 0;
+                }
+                .wp-block-woocommerce-coming-soon > .wp-block-group {
+                    padding: 20px min(6.5rem, 8vw);
+                }
+                .wp-block-site-title p {
+                    line-height: normal;
+                }
+                .wp-block-site-title a {
+                    font-weight: 600;
+                    font-size: 20px;
+                    font-style: normal;
+                    line-height: normal;
+                    letter-spacing: -0.4px;
+                    color: var(--wp--preset--color--contrast);
+                    text-decoration: none;
+                }
+                .wp-block-social-links {
+                    gap: 0.5em 18px;
+                }
+                .woocommerce-coming-soon-social-login {
+                    gap: 48px;
                 }
                 .wp-block-loginout {
                     background-color: #000000;
-                    padding: 7px 17px;
                     border-radius: 6px;
+                    display: flex;
+                    height: 40px;
+                    width: 74px;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 10px;
+                    box-sizing: border-box;
                 }
                 .wp-block-loginout a {
                     color: #ffffff;
@@ -44,15 +114,43 @@ export default function Edit( { attributes, setAttributes } ) {
                     font-size: 14px;
                     font-weight: 500;
                 }
+                .wp-block-spacer {
+                    margin: 0;
+                }
+                .woocommerce-coming-soon-banner-container {
+                    padding-inline: min(6.5rem, 8vw);
+                    margin: 0;
+                }
                 .woocommerce-coming-soon-powered-by-woo {
                     position: fixed;
                     bottom: 0;
                     left: 0;
                     width: 100%;
+                    --wp--preset--spacing--30: 0;
+                    --wp--preset--spacing--10: 35px;
+                }
+                .woocommerce-coming-soon-powered-by-woo p {
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 160%; /* 19.2px */
+                    letter-spacing: -0.12px;
+                    color: #3C434A;
+                    font-size: 12px;
+                    font-family: Inter;
+                }
+                .woocommerce-coming-soon-powered-by-woo a {
+                    font-family: Inter;
                 }
                 body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
                     max-width: 820px;
                 }
+                .coming-soon-is-vertically-aligned-center:not(.block-editor-block-list__block) {
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    margin-block-start: 0;
+                    width: 100%;
+                }
                 .woocommerce-coming-soon-header, .coming-soon-cover .wp-block-cover__background {
                     background-color: ${ color } !important;
                 }
@@ -60,6 +158,12 @@ export default function Edit( { attributes, setAttributes } ) {
                     font-size: 48px;
                     font-weight: 400;
                     line-height: 58px;
+                    font-family: 'Cardo', serif;
+                    letter-spacing: normal;
+                    text-align: center;
+                    font-style: normal;
+                    max-width: 820px;
+                    color: var(--wp--preset--color--contrast);
                 }` }
 			</style>
 		</>

plugins/woocommerce-blocks/assets/js/blocks/coming-soon/index.tsx

@@ -20,13 +20,83 @@ registerBlockType( metadata, {
 			<div { ...useBlockProps.save() }>
 				<InnerBlocks.Content />
 				<style>
-					{ `body {
+					{ `@font-face {
-	                background-color: ${ color };
+                    font-family: 'Inter';
-	            }
+                    src: url( <?php echo esc_url( WC()->plugin_url() . '/assets/fonts/Inter-VariableFont_slnt,wght.woff2' ); ?>) format('woff2');
+                    font-weight: 300 900;
+                    font-style: normal;
+                }
+
+                @font-face {
+                    font-family: 'Cardo';
+                    src: url( <?php echo esc_url( WC()->plugin_url() . '/assets/fonts/cardo_normal_400.woff2' ); ?>) format('woff2');
+                    font-weight: 400;
+                    font-style: normal;
+                }
+                /* Reset */
+                h1, p, a {
+                    margin: 0;
+                    padding: 0;
+                    border: 0;
+                    vertical-align: baseline;
+                }
+                ol, ul {
+                    list-style: none;
+                }
+                a {
+                    text-decoration: none;
+                }
+                body,
+                body.custom-background {
+                    margin: 0;
+                    background-color: #bea0f2;
+                    font-family: 'Inter', sans-serif;
+                    --wp--preset--color--contrast: #111111;
+                    --wp--style--global--wide-size: 1280px;
+                }
+                body .is-layout-constrained > .alignwide {
+                    margin: 0 auto;
+                }
+                .wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
+                    justify-content: space-between;
+                }
+                .is-layout-flex {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    margin: 0;
+                }
+                .wp-block-woocommerce-coming-soon > .wp-block-group {
+                    padding: 20px min(6.5rem, 8vw);
+                }
+                .wp-block-site-title p {
+                    line-height: normal;
+                }
+                .wp-block-site-title a {
+                    font-weight: 600;
+                    font-size: 20px;
+                    font-style: normal;
+                    line-height: normal;
+                    letter-spacing: -0.4px;
+                    color: var(--wp--preset--color--contrast);
+                    text-decoration: none;
+                }
+                .wp-block-social-links {
+                    gap: 0.5em 18px;
+                }
+                .woocommerce-coming-soon-social-login {
+                    gap: 48px;
+                }
                 .wp-block-loginout {
                     background-color: #000000;
-                    padding: 7px 17px;
                     border-radius: 6px;
+                    display: flex;
+                    height: 40px;
+                    width: 74px;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 10px;
+                    box-sizing: border-box;
                 }
                 .wp-block-loginout a {
                     color: #ffffff;
@@ -35,11 +105,32 @@ registerBlockType( metadata, {
                     font-size: 14px;
                     font-weight: 500;
                 }
+                .wp-block-spacer {
+                    margin: 0;
+                }
+                .woocommerce-coming-soon-banner-container {
+                    padding-inline: min(6.5rem, 8vw);
+                    margin: 0;
+                }
                 .woocommerce-coming-soon-powered-by-woo {
                     position: fixed;
                     bottom: 0;
                     left: 0;
                     width: 100%;
+                    --wp--preset--spacing--30: 0;
+                    --wp--preset--spacing--10: 35px;
+                }
+                .woocommerce-coming-soon-powered-by-woo p {
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 160%; /* 19.2px */
+                    letter-spacing: -0.12px;
+                    color: #3C434A;
+                    font-size: 12px;
+                    font-family: Inter;
+                }
+                .woocommerce-coming-soon-powered-by-woo a {
+                    font-family: Inter;
                 }
                 body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
                     max-width: 820px;
@@ -58,6 +149,12 @@ registerBlockType( metadata, {
                     font-size: 48px;
                     font-weight: 400;
                     line-height: 58px;
+                    font-family: 'Cardo', serif;
+                    letter-spacing: normal;
+                    text-align: center;
+                    font-style: normal;
+                    max-width: 820px;
+                    color: var(--wp--preset--color--contrast);
                 }` }
 				</style>
 			</div>

plugins/woocommerce/changelog/46813-update-LYS-template-styles-reapply-46619

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: Fixes unreleased feature
+

plugins/woocommerce/patterns/coming-soon-entire-site.php

@@ -40,13 +40,83 @@
 <h1 class="wp-block-heading alignwide has-text-align-center woocommerce-coming-soon-banner">Pardon our dust! We're working on something amazing -- check back soon!</h1>
 <!-- /wp:heading --></div>
 <!-- /wp:group --></div></div>
-<!-- /wp:cover --><style>body {
+<!-- /wp:cover --><style>@font-face {
+	font-family: 'Inter';
+	src: url( &lt;?php echo esc_url( WC()->plugin_url() . '/assets/fonts/Inter-VariableFont_slnt,wght.woff2' ); ?>) format('woff2');
+	font-weight: 300 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Cardo';
+	src: url( &lt;?php echo esc_url( WC()->plugin_url() . '/assets/fonts/cardo_normal_400.woff2' ); ?>) format('woff2');
+	font-weight: 400;
+	font-style: normal;
+}
+/* Reset */
+h1, p, a {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline;
+}
+ol, ul {
+	list-style: none;
+}
+a {
+	text-decoration: none;
+}
+body,
+body.custom-background {
+	margin: 0;
 	background-color: #bea0f2;
+	font-family: 'Inter', sans-serif;
+	--wp--preset--color--contrast: #111111;
+	--wp--style--global--wide-size: 1280px;
+}
+body .is-layout-constrained > .alignwide {
+	margin: 0 auto;
+}
+.wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
+	justify-content: space-between;
+}
+.is-layout-flex {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	margin: 0;
+}
+.wp-block-woocommerce-coming-soon > .wp-block-group {
+	padding: 20px min(6.5rem, 8vw);
+}
+.wp-block-site-title p {
+	line-height: normal;
+}
+.wp-block-site-title a {
+	font-weight: 600;
+	font-size: 20px;
+	font-style: normal;
+	line-height: normal;
+	letter-spacing: -0.4px;
+	color: var(--wp--preset--color--contrast);
+	text-decoration: none;
+}
+.wp-block-social-links {
+	gap: 0.5em 18px;
+}
+.woocommerce-coming-soon-social-login {
+	gap: 48px;
 }
 .wp-block-loginout {
 	background-color: #000000;
-	padding: 7px 17px;
 	border-radius: 6px;
+	display: flex;
+	height: 40px;
+	width: 74px;
+	justify-content: center;
+	align-items: center;
+	gap: 10px;
+	box-sizing: border-box;
 }
 .wp-block-loginout a {
 	color: #ffffff;
@@ -55,11 +125,32 @@
 	font-size: 14px;
 	font-weight: 500;
 }
+.wp-block-spacer {
+	margin: 0;
+}
+.woocommerce-coming-soon-banner-container {
+	padding-inline: min(6.5rem, 8vw);
+	margin: 0;
+}
 .woocommerce-coming-soon-powered-by-woo {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	--wp--preset--spacing--30: 0;
+	--wp--preset--spacing--10: 35px;
+}
+.woocommerce-coming-soon-powered-by-woo p {
+	font-style: normal;
+	font-weight: 400;
+	line-height: 160%; /* 19.2px */
+	letter-spacing: -0.12px;
+	color: #3C434A;
+	font-size: 12px;
+	font-family: Inter;
+}
+.woocommerce-coming-soon-powered-by-woo a {
+	font-family: Inter;
 }
 body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
 	max-width: 820px;
@@ -78,6 +169,12 @@ body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
 	font-size: 48px;
 	font-weight: 400;
 	line-height: 58px;
+	font-family: 'Cardo', serif;
+	letter-spacing: normal;
+	text-align: center;
+	font-style: normal;
+	max-width: 820px;
+	color: var(--wp--preset--color--contrast);
 }</style></div>
 <!-- /wp:woocommerce/coming-soon -->