Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Template Placeholder Design for the Order Received Template (#9602)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
mikejolley and wavvves committed Jun 28, 2023
1 parent 7539964 commit 06bd829
Show file tree
Hide file tree
Showing 9 changed files with 420 additions and 234 deletions.
20 changes: 14 additions & 6 deletions assets/js/blocks/classic-template/archive-product.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
97 changes: 64 additions & 33 deletions assets/js/blocks/classic-template/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading

0 comments on commit 06bd829

Please sign in to comment.