Template Placeholder Design for the Order Received Template (#9602)

* Load frontend styles in editor iframe

* Update placeholder to include skeleton and updated icons

* Update classic template configs

* 1px border for .wp-block-woocommerce-classic-template__placeholder-copy

* Show copy on focus

* Sample data

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

assets/js/blocks/classic-template/archive-product.ts

@@ -147,18 +147,26 @@ const onClickCallbackWithTermDescription = ( {
 	}
 };
 
-export const blockifiedProductCatalogConfig = {
+const productCatalogBlockifyConfig = {
+	getButtonLabel,
+	onClickCallback,
 	getBlockifiedTemplate,
+};
+
+const productTaxonomyBlockifyConfig = {
+	getButtonLabel,
+	onClickCallback: onClickCallbackWithTermDescription,
+	getBlockifiedTemplate: getBlockifiedTemplateWithTermDescription,
+};
+
+export const blockifiedProductCatalogConfig = {
 	isConversionPossible,
 	getDescription,
-	getButtonLabel,
-	onClickCallback,
+	blockifyConfig: productCatalogBlockifyConfig,
 };
 
 export const blockifiedProductTaxonomyConfig = {
-	getBlockifiedTemplate: getBlockifiedTemplateWithTermDescription,
-	onClickCallback: onClickCallbackWithTermDescription,
 	isConversionPossible,
 	getDescription,
-	getButtonLabel,
+	blockifyConfig: productTaxonomyBlockifyConfig,
 };

assets/js/blocks/classic-template/editor.scss

@@ -3,55 +3,86 @@
 	margin-right: auto;
 }
 
+.wp-block-woocommerce-classic-template__placeholder-warning {
+	border-left: 5px solid #2181d2;
+	padding-left: em(40px);
+}
+.wp-block-woocommerce-classic-template__placeholder .components-placeholder__fieldset {
+	display: grid;
+	grid-template-columns: 1fr;
+}
+.wp-block-woocommerce-classic-template__placeholder-wireframe,
+.wp-block-woocommerce-classic-template__placeholder-copy {
+	grid-row-start: 1;
+	grid-column-start: 1;
+	transition: 0.3s all ease;
+}
 .wp-block-woocommerce-classic-template__placeholder-copy {
+	border: 1px solid $gray-900;
+	background-color: #fff;
+	padding: $gap-large $gap-larger;
+	border-radius: 3px;
 	display: flex;
 	flex-direction: column;
 	max-width: 900px;
 	width: 400px;
 	margin: auto;
-}
+	opacity: 0;
+	z-index: 10;
 
-.wp-block-woocommerce-classic-template__placeholder-warning {
-	border-left: 5px solid #2181d2;
-	padding-left: em(40px);
-}
+	.wp-block-woocommerce-classic-template__placeholder-copy__icon-container {
+		margin: 0 0 $gap;
 
-.wp-block-woocommerce-classic-template__placeholder-wireframe {
-	height: 250px;
-	background: #e5e5e5;
-	display: flex;
-	flex-wrap: wrap;
-	gap: $gap-large;
-	margin: auto;
+		span {
+			@include font-size(larger);
+			display: block;
+		}
+		.woo-icon {
+			color: #{$studio-woocommerce-purple};
+			@include font-size(large);
 
-	@media only screen and (min-width: 768px) {
-		height: auto;
-		background: transparent;
+			svg {
+				vertical-align: middle;
+			}
+		}
+	}
+	p {
+		margin: 0 0 $gap;
+	}
+	.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
+		justify-content: center;
+		margin: $gap 0;
 	}
 }
+.wp-block-woocommerce-classic-template__placeholder-wireframe {
+	pointer-events: none;
 
-.wp-block-woocommerce-classic-template__placeholder .wp-block-woocommerce-classic-template__placeholder-image {
-	display: none;
-	width: 400px;
-	height: auto;
-
-	@media only screen and (min-width: 768px) {
-		display: block;
+	// Image based placeholders should fill horizontal width.
+	> img {
+		width: 100%;
 	}
 }
 
-.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
-	justify-content: center;
-	align-items: center;
-	margin: 0 auto;
+.wp-block-woocommerce-legacy-template {
+	.components-placeholder {
+		box-shadow: none;
+		padding: 0;
+	}
 }
+.wp-block-woocommerce-legacy-template.is-selected {
+	.wp-block-woocommerce-classic-template__placeholder-wireframe {
+		filter: blur(3px);
+		opacity: 0.5;
 
-.wp-block-woocommerce-classic-template__placeholder-copy__icon-container {
-	display: flex;
-	align-items: center;
-	gap: $gap-small;
-
-	span {
-		@include font-size(larger);
+		* {
+			color: $gray-200 !important;
+			border-color: $gray-200 !important;
+		}
+	}
+	.wp-block-woocommerce-classic-template__placeholder-copy {
+		opacity: 1;
+	}
+	.components-placeholder {
+		box-shadow: inherit;
 	}
 }