Skip to content

Commit

Permalink
Try wrapping entire coming soon page under cover block to fix layout …
Browse files Browse the repository at this point in the history 
…issue (#46914)

* Refactor to wrap everything under cover block

* Changelog

* Cleanup and fix classic theme

* Wrap center with stack for ease of adding elements nearby

* Update styles

* Fix dynamic background color

* Style clean up
  • Loading branch information
@ilyasfoo
ilyasfoo committed Apr 30, 2024
1 parent fbef56f commit 35c50eb
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 44 deletions.
33 changes: 19 additions & 14 deletions plugins/woocommerce-blocks/assets/js/blocks/coming-soon/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,6 @@ export const generateStyles = ( color = '#bea0f2' ) => {
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;
}
Expand Down Expand Up @@ -88,16 +85,23 @@ export const generateStyles = ( color = '#bea0f2' ) => {
margin: 0;
}
.woocommerce-coming-soon-banner-container {
padding-inline: min(6.5rem, 8vw);
padding-inline: min(5.5rem, 8vw);
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.woocommerce-coming-soon-banner-container > .wp-block-group__inner-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.woocommerce-coming-soon-powered-by-woo {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
--wp--preset--spacing--30: 0;
--wp--preset--spacing--10: 35px;
--wp--preset--spacing--10: 19px;
}
.woocommerce-coming-soon-powered-by-woo p {
font-style: normal;
Expand All @@ -114,16 +118,16 @@ export const generateStyles = ( color = '#bea0f2' ) => {
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;
.coming-soon-is-vertically-aligned-center {
width: 100%;
align-items: stretch;
}
.woocommerce-coming-soon-header, .coming-soon-cover .wp-block-cover__background {
.coming-soon-cover .wp-block-cover__background {
background-color: ${ color } !important;
}
.woocommerce-coming-soon-header {
height: 40px;
}
.woocommerce-coming-soon-banner {
font-size: 48px;
font-weight: 400;
Expand All @@ -134,5 +138,6 @@ export const generateStyles = ( color = '#bea0f2' ) => {
font-style: normal;
max-width: 820px;
color: var(--wp--preset--color--contrast);
margin: 0 auto;
}`;
};
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/fix-lys-attempt-using-cover-block-fix
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: update

Refactor coming soon entire page to wrap under cover block
67 changes: 37 additions & 30 deletions plugins/woocommerce/patterns/coming-soon-entire-site.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
?>

<!-- wp:woocommerce/coming-soon {"color":"#bea0f2","storeOnly":false,"className":"wp-block-woocommerce-background-color"} -->
<div class="wp-block-woocommerce-coming-soon wp-block-woocommerce-background-color"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}},"color":{"background":"#bea0f2"}},"className":"woocommerce-coming-soon-header","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide woocommerce-coming-soon-header has-background" style="background-color:#bea0f2;padding-top:20px;padding-bottom:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
<div class="wp-block-woocommerce-coming-soon wp-block-woocommerce-background-color"><!-- wp:cover {"minHeight":100,"minHeightUnit":"vh","isDark":false,"className":"coming-soon-is-vertically-aligned-center coming-soon-cover","layout":{"type":"default"}} -->
<div class="wp-block-cover is-light coming-soon-is-vertically-aligned-center coming-soon-cover" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style=""></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"woocommerce-coming-soon-banner-container","layout":{"type":"default"}} -->
<div class="wp-block-group woocommerce-coming-soon-banner-container"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"3px","bottom":"20px"}}},"className":"woocommerce-coming-soon-header","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide woocommerce-coming-soon-header has-background" style="padding-top:3px;padding-bottom:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->

Expand All @@ -35,11 +37,22 @@
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:cover {"customOverlayColor":"#bea0f2","isUserOverlayColor":true,"minHeight":527,"minHeightUnit":"px","isDark":false,"className":"coming-soon-is-vertically-aligned-center coming-soon-cover","layout":{"type":"default"}} -->
<div class="wp-block-cover is-light coming-soon-is-vertically-aligned-center coming-soon-cover" style="min-height:527px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#bea0f2"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"woocommerce-coming-soon-banner-container","layout":{"type":"constrained","justifyContent":"center","contentSize":""}} -->
<div class="wp-block-group woocommerce-coming-soon-banner-container"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide","className":"woocommerce-coming-soon-banner"} -->
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide","className":"woocommerce-coming-soon-banner"} -->
<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 -->

<!-- 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 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
<a style="text-decoration: none;" href="https://woocommerce.com" rel="nofollow">WooCommerce</a>
</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --><style>@font-face {
font-family: 'Inter';
Expand Down Expand Up @@ -87,9 +100,6 @@
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;
}
Expand Down Expand Up @@ -130,16 +140,23 @@
margin: 0;
}
.woocommerce-coming-soon-banner-container {
padding-inline: min(6.5rem, 8vw);
padding-inline: min(5.5rem, 8vw);
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.woocommerce-coming-soon-banner-container > .wp-block-group__inner-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.woocommerce-coming-soon-powered-by-woo {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
--wp--preset--spacing--30: 0;
--wp--preset--spacing--10: 35px;
--wp--preset--spacing--10: 19px;
}
.woocommerce-coming-soon-powered-by-woo p {
font-style: normal;
Expand All @@ -156,16 +173,16 @@
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;
.coming-soon-is-vertically-aligned-center {
width: 100%;
align-items: stretch;
}
.woocommerce-coming-soon-header, .coming-soon-cover .wp-block-cover__background {
.coming-soon-cover .wp-block-cover__background {
background-color: #bea0f2 !important;
}
.woocommerce-coming-soon-header {
height: 40px;
}
.woocommerce-coming-soon-banner {
font-size: 48px;
font-weight: 400;
Expand All @@ -176,16 +193,6 @@
font-style: normal;
max-width: 820px;
color: var(--wp--preset--color--contrast);
margin: 0 auto;
}</style></div>
<!-- /wp:woocommerce/coming-soon -->

<!-- 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 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
<a style="text-decoration: none;" href="https://woocommerce.com" rel="nofollow">WooCommerce</a>
</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

0 comments on commit 35c50eb

Please sign in to comment.