Deprecate and create new coming soon block version (#49786)

* Migrate coming soon block

* Update coming soon patterns

* Enqueue styles

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

* Fix entire site block

---------

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

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

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { generateStyles } from './styles';
+import metadata from './block.json';
+
+const v1 = {
+	attributes: metadata.attributes,
+	supports: metadata.supports,
+	save: ( {
+		attributes,
+	}: {
+		attributes: { color: string; storeOnly: boolean };
+	} ) => {
+		const { color, storeOnly } = attributes;
+		const blockProps = { ...useBlockProps.save() };
+		if ( storeOnly ) {
+			return (
+				<div { ...blockProps }>
+					<InnerBlocks.Content />
+					<style>{ `.woocommerce-breadcrumb {display: none;}` }</style>
+				</div>
+			);
+		}
+
+		return (
+			<div { ...blockProps }>
+				<InnerBlocks.Content />
+				<style>{ generateStyles( color ) }</style>
+			</div>
+		);
+	},
+};
+
+export default [ v1 ];

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

@@ -8,24 +8,28 @@ import {
 	InnerBlocks,
 } from '@wordpress/block-editor';
 import { PanelBody, ColorPicker } from '@wordpress/components';
+import { type BlockEditProps } from '@wordpress/blocks';
+
+export type Attributes = {
+	color: string;
+	storeOnly: boolean;
+};
+
+export type EditProps = BlockEditProps< Attributes >;
 
 /**
  * Internal dependencies
  */
-import { generateStyles } from './styles';
 
-export default function Edit( { attributes, setAttributes } ) {
+export default function Edit( { attributes, setAttributes }: EditProps ) {
 	const { color, storeOnly } = attributes;
 	const blockProps = { ...useBlockProps() };
 
 	if ( storeOnly ) {
 		return (
-			<>
 			<div { ...blockProps }>
 				<InnerBlocks />
 			</div>
-				<style>{ `.woocommerce-breadcrumb {display: none;}` }</style>
-			</>
 		);
 	}
 
@@ -35,6 +39,7 @@ export default function Edit( { attributes, setAttributes } ) {
 				<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
 					<ColorPicker
 						color={ color }
+						// @ts-expect-error type is not defined in the library
 						onChange={ ( newColor: string ) =>
 							setAttributes( { color: newColor } )
 						}
@@ -45,8 +50,8 @@ export default function Edit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<div { ...blockProps }>
 				<InnerBlocks />
+				<style>{ `:root{--woocommerce-coming-soon-color: ${ color } }` }</style>
 			</div>
-			<style>{ generateStyles( color ) }</style>
 		</>
 	);
 }

plugins/woocommerce-blocks/assets/js/blocks/coming-soon/entire-site.scss

@@ -0,0 +1,175 @@
+body:has(.woocommerce-coming-soon-entire-site),
+body:has(.woocommerce-coming-soon-banner) {
+	margin: 0;
+	background-color: var(--woocommerce-coming-soon-color);
+	font-family: Inter, sans-serif;
+	min-width: 320px;
+	--wp--preset--color--contrast: #111;
+	--wp--style--global--wide-size: 1280px;
+
+	/* Reset */
+	h1,
+	p,
+	a {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		vertical-align: baseline;
+	}
+
+	ol,
+	ul {
+		list-style: none;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	.is-layout-constrained > .alignwide {
+		margin: 0 auto;
+	}
+
+	.woocommerce-coming-soon-banner.alignwide {
+		max-width: 820px;
+	}
+
+
+	.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-site-title {
+		p {
+			line-height: normal;
+		}
+
+		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: #000;
+		border-radius: 6px;
+		display: flex;
+		height: 40px;
+		width: 74px;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		box-sizing: border-box;
+
+		a {
+			color: #fff;
+			text-decoration: none;
+			line-height: 17px;
+			font-size: 14px;
+			font-weight: 500;
+		}
+	}
+
+	.wp-block-spacer {
+		margin: 0;
+	}
+
+	.woocommerce-coming-soon-banner-container {
+		padding-inline: min(5.5rem, 8vw);
+		margin: 0;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		@media (max-width: 660px) {
+			padding-inline: 0;
+		}
+
+		> .wp-block-group__inner-container {
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+	}
+
+	.woocommerce-coming-soon-powered-by-woo {
+		width: 100%;
+		--wp--preset--spacing--30: 0;
+		--wp--preset--spacing--10: 19px;
+
+		p {
+			font-style: normal;
+			font-weight: 400;
+			line-height: 19.2px;
+			letter-spacing: -0.12px;
+			color: #3c434a;
+			font-size: 12px;
+			font-family: Inter, sans-serif;
+		}
+
+		a {
+			font-family: Inter, sans-serif;
+		}
+	}
+
+	.coming-soon-is-vertically-aligned-center {
+		width: 100%;
+		align-items: stretch;
+	}
+
+	.coming-soon-cover {
+		.wp-block-cover__background {
+			background-color: var(--woocommerce-coming-soon-color) !important;
+		}
+	}
+
+	.woocommerce-coming-soon-header {
+		height: 40px;
+	}
+
+	h1.wp-block-heading.woocommerce-coming-soon-banner {
+		font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 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);
+		margin: 0 auto;
+		text-wrap: balance;
+	}
+}
+
+.block-editor-block-preview__content-iframe {
+	body:has(.woocommerce-coming-soon-entire-site),
+	body:has(.woocommerce-coming-soon-banner) {
+		/* Set ratio to 1:1 so height is always equal to width for the preview. */
+		aspect-ratio: 1 / 1;
+	}
+}

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

@@ -10,10 +10,14 @@ import { registerBlockType } from '@wordpress/blocks';
 import Edit from './edit';
 import Save from './save';
 import metadata from './block.json';
+import deprecated from './deprecated';
+import './store-only.scss';
+import './entire-site.scss';
 
 registerBlockType( metadata, {
 	title: __( 'Coming Soon', 'woocommerce' ),
 	edit: Edit,
 	save: Save,
 	apiVersion: 2,
+	deprecated,
 } );

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

@@ -3,28 +3,10 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
-/**
+export default function Save() {
- * Internal dependencies
- */
-import { generateStyles } from './styles';
-
-export default function Save( { attributes } ) {
-	const { color, storeOnly } = attributes;
-	const blockProps = { ...useBlockProps.save() };
-
-	if ( storeOnly ) {
 	return (
-			<div { ...blockProps }>
+		<div { ...useBlockProps.save() }>
 			<InnerBlocks.Content />
-				<style>{ `.woocommerce-breadcrumb {display: none;}` }</style>
-			</div>
-		);
-	}
-
-	return (
-		<div { ...blockProps }>
-			<InnerBlocks.Content />
-			<style>{ generateStyles( color ) }</style>
 		</div>
 	);
 }

plugins/woocommerce-blocks/assets/js/blocks/coming-soon/store-only.scss

@@ -0,0 +1,5 @@
+body:has(.woocommerce-coming-soon-store-only) {
+	.woocommerce-breadcrumb {
+		display: none;
+	}
+}

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

@@ -1,3 +1,4 @@
+// Deprecated styles since 9.2. Please use *.scss file instead.
 export const generateStyles = ( color = '#bea0f2' ) => {
 	return `
     /* Reset */
@@ -25,10 +26,6 @@ export const generateStyles = ( color = '#bea0f2' ) => {
     body .is-layout-constrained > .alignwide {
         margin: 0 auto;
     }
-	.block-editor-block-preview__content-iframe body {
-		/* Set ratio to 1:1 so height is always equal to width for the preview. */
-		aspect-ratio: 1 / 1;
-	}
     .wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
         justify-content: space-between;
     }
@@ -126,7 +123,7 @@ export const generateStyles = ( color = '#bea0f2' ) => {
     .woocommerce-coming-soon-header {
         height: 40px;
     }
-    h1.wp-block-heading.woocommerce-coming-soon-banner {
+    .woocommerce-coming-soon-banner {
         font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 48px);
         font-weight: 400;
         line-height: 58px;

plugins/woocommerce/changelog/49786-update-migrate-coming-soon-block

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Deprecate and create new coming soon block version

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

@@ -19,8 +19,8 @@ if ( 'twentytwentyfour' === $current_theme ) {
 }
 ?>
 
-<!-- wp:woocommerce/coming-soon {"color":"#bea0f2","storeOnly":false,"className":"wp-block-woocommerce-background-color"} -->
+<!-- wp:woocommerce/coming-soon {"color":"#bea0f2","storeOnly":false,"className":"woocommerce-coming-soon-entire-site wp-block-woocommerce-background-color"} -->
-<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="woocommerce-coming-soon-entire-site 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"}} -->
@@ -60,144 +60,5 @@ if ( 'twentytwentyfour' === $current_theme ) {
 <!-- /wp:group --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group --></div></div>
-<!-- /wp:cover --><style>
+<!-- /wp:cover --></div>
-/* 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;
-	min-width: 320px;
-	--wp--preset--color--contrast: #111111;
-	--wp--style--global--wide-size: 1280px;
-}
-body .is-layout-constrained > .alignwide {
-	margin: 0 auto;
-}
-.block-editor-block-preview__content-iframe body {
-	/* Set ratio to 1:1 so height is always equal to width for the preview. */
-	aspect-ratio: 1 / 1;
-}
-.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-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;
-	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;
-	text-decoration: none;
-	line-height: 17px;
-	font-size: 14px;
-	font-weight: 500;
-}
-.wp-block-spacer {
-	margin: 0;
-}
-.woocommerce-coming-soon-banner-container {
-	padding-inline: min(5.5rem, 8vw);
-	margin: 0;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-@media (max-width: 660px) {
-	.woocommerce-coming-soon-banner-container {
-		padding-inline: 0;
-	}
-}
-.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 {
-	width: 100%;
-	--wp--preset--spacing--30: 0;
-	--wp--preset--spacing--10: 19px;
-}
-.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 {
-	width: 100%;
-	align-items: stretch;
-}
-.coming-soon-cover .wp-block-cover__background {
-	background-color: #bea0f2 !important;
-}
-.woocommerce-coming-soon-header {
-	height: 40px;
-}
-h1.wp-block-heading.woocommerce-coming-soon-banner {
-	font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 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);
-	margin: 0 auto;
-	text-wrap: balance;
-}</style></div>
 <!-- /wp:woocommerce/coming-soon -->

plugins/woocommerce/patterns/coming-soon-store-only.php

@@ -20,8 +20,8 @@ if ( 'twentytwentyfour' === $current_theme ) {
 
 ?>
 
-<!-- wp:woocommerce/coming-soon {"storeOnly":true} -->
+<!-- wp:woocommerce/coming-soon {"storeOnly":true, "className":"woocommerce-coming-soon-store-only"} -->
-<div class="wp-block-woocommerce-coming-soon">
+<div class="wp-block-woocommerce-coming-soon woocommerce-coming-soon-store-only">
 
 <?php
 if ( wc_current_theme_is_fse_theme() ) {
@@ -56,6 +56,5 @@ if ( wc_current_theme_is_fse_theme() ) {
 	echo '<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->';
 }
 ?>
-
+</div>
-<style>.woocommerce-breadcrumb {display: none;}</style></div>
 <!-- /wp:woocommerce/coming-soon -->

plugins/woocommerce/src/Blocks/BlockTypes/ComingSoon.php

@@ -21,12 +21,24 @@ class ComingSoon extends AbstractBlock {
 	}
 
 	/**
-	 * Get the frontend style handle for this block type.
+	 * Enqueue frontend assets for this block, just in time for rendering.
 	 *
-	 * @return null
+	 * @internal This prevents the block script being enqueued on all pages. It is only enqueued as needed. Note that
+	 * we intentionally do not pass 'script' to register_block_type.
+	 *
+	 * @param array    $attributes  Any attributes that currently are available from the block.
+	 * @param string   $content    The block content.
+	 * @param WP_Block $block    The block object.
 	 */
-	protected function get_block_type_style() {
+	protected function enqueue_assets( array $attributes, $content, $block ) {
-		return null;
+		parent::enqueue_assets( $attributes, $content, $block );
+
+		if ( isset( $attributes['color'] ) ) {
+			wp_add_inline_style(
+				'wc-blocks-style',
+				':root{--woocommerce-coming-soon-color: ' . esc_html( $attributes['color'] ) . '}'
+			);
+		}
 	}
 
 	/**