diff --git a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css index f7b02e57072..06e2d7f0b44 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css @@ -1 +1 @@ -.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:right;text-align:center;margin-left:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-left:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-left:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-left:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-left:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-left:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:right;width:50%;margin-left:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-right:auto;margin-left:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{left:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-left:0}.wc-product-display-settings .settings-heading{display:flex;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-right:1em}.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:flex;align-items:center;flex-direction:row}.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-left:8px;border-radius:0}.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 40px 8px 45px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 15px 10px 0;background:#fff}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:-1px 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0 10px 0 15px;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-right:auto}.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-left:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;left:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:flex;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:right;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-left:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-right:25px;padding-left:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file +.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:right;text-align:center;margin-left:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-left:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-left:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-left:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-left:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-left:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:right;width:50%;margin-left:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-right:auto;margin-left:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{left:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-left:0}.wc-product-display-settings .settings-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-right:1em}.wc-product-display-settings .product-attribute-select,.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-attribute-select #product-attribute-search,.wc-product-display-settings .product-attribute-select #product-category-search,.wc-product-display-settings .product-category-select #product-attribute-search,.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-attribute-select .product-attributes-list,.wc-product-display-settings .product-attribute-select .product-categories-list,.wc-product-display-settings .product-category-select .product-attributes-list,.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-attribute-select .product-attributes-list ul,.wc-product-display-settings .product-attribute-select .product-categories-list ul,.wc-product-display-settings .product-category-select .product-attributes-list ul,.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li,.wc-product-display-settings .product-attribute-select .product-categories-list ul li,.wc-product-display-settings .product-category-select .product-attributes-list ul li,.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li label,.wc-product-display-settings .product-attribute-select .product-categories-list ul li label,.wc-product-display-settings .product-category-select .product-attributes-list ul li label,.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li input[type=checkbox],.wc-product-display-settings .product-attribute-select .product-categories-list ul li input[type=checkbox],.wc-product-display-settings .product-category-select .product-attributes-list ul li input[type=checkbox],.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-left:8px;border-radius:0}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li ul,.wc-product-display-settings .product-attribute-select .product-categories-list ul li ul,.wc-product-display-settings .product-category-select .product-attributes-list ul li ul,.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 40px 8px 45px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li ul li,.wc-product-display-settings .product-attribute-select .product-categories-list ul li ul li,.wc-product-display-settings .product-category-select .product-attributes-list ul li ul li,.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul,.wc-product-display-settings .product-attribute-select .product-categories-list>ul,.wc-product-display-settings .product-category-select .product-attributes-list>ul,.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li,.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li>label,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li>label,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li>label,.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 15px 10px 0;background:#fff}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li.product-category-accordion-open,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li.product-category-accordion-open,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li.product-category-accordion-open,.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:-1px 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li.product-category-accordion-open:not(:first-child),.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child),.wc-product-display-settings .product-category-select .product-attributes-list>ul>li.product-category-accordion-open:not(:first-child),.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li.product-category-accordion-open ul,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li.product-category-accordion-open ul,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li.product-category-accordion-open ul,.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-category-accordion-toggle,.wc-product-display-settings .product-attribute-select .product-categories-list .product-category-accordion-toggle,.wc-product-display-settings .product-category-select .product-attributes-list .product-category-accordion-toggle,.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0 10px 0 15px;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute-count,.wc-product-display-settings .product-attribute-select .product-attributes-list .product-category-count,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute-count,.wc-product-display-settings .product-attribute-select .product-categories-list .product-category-count,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute-count,.wc-product-display-settings .product-category-select .product-attributes-list .product-category-count,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute-count,.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-right:auto}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute{border:1px solid #e9e9e9}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute .product-attribute-name,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute .product-attribute-name,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute .product-attribute-name,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute .product-attribute-name{padding:.5em;background:#fff;border-bottom:1px solid #e9e9e9}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute .product-attribute-name .product-attribute-count,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute .product-attribute-name .product-attribute-count,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute .product-attribute-name .product-attribute-count,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute .product-attribute-name .product-attribute-count{float:left}.wc-product-display-settings .product-attribute-select input[type=radio],.wc-product-display-settings .product-category-select input[type=radio]{border-radius:10px}.wc-product-display-settings .product-attribute-select:after,.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:-webkit-linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%);background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-left:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;left:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:right;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-left:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-right:25px;padding-left:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css index 183df109183..ada3ad2f343 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css @@ -1 +1 @@ -.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:left;text-align:center;margin-right:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-right:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-right:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-right:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-right:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-right:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:left;width:50%;margin-right:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-left:auto;margin-right:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{right:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-right:0}.wc-product-display-settings .settings-heading{display:flex;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-left:1em}.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:flex;align-items:center;flex-direction:row}.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-right:8px;border-radius:0}.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 45px 8px 40px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 0 10px 15px;background:#fff}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:-1px 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0 15px 0 10px;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-left:auto}.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-right:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;right:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:flex;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:left;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-right:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-left:25px;padding-right:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file +.wc-products-block-preview.grid{overflow:hidden}.wc-products-block-preview.grid .product-preview{float:left;text-align:center;margin-right:3.8%}.wc-products-block-preview.grid.cols-1 .product-preview{float:none;margin-right:0}.wc-products-block-preview.grid.cols-2 .product-preview{width:48%}.wc-products-block-preview.grid.cols-2 .product-preview:nth-of-type(2n){margin-right:0}.wc-products-block-preview.grid.cols-3 .product-preview{width:30.75%}.wc-products-block-preview.grid.cols-3 .product-preview:nth-of-type(3n){margin-right:0}.wc-products-block-preview.grid.cols-4 .product-preview{width:22.05%}.wc-products-block-preview.grid.cols-4 .product-preview:nth-of-type(4n){margin-right:0}.wc-products-block-preview.grid.cols-5 .product-preview{width:16.9%}.wc-products-block-preview.grid.cols-5 .product-preview:nth-of-type(5n){margin-right:0}.wc-products-block-preview.list .product-preview{overflow:hidden}.wc-products-block-preview.list img{float:left;width:50%;margin-right:2em;margin-bottom:2em}.wc-products-block-preview .product-add-to-cart{background:gray;border-radius:10px;color:#fff;cursor:pointer;padding:.5em 1em;line-height:3em}.wc-product-display-settings{background-color:#f8f9f9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:1em;min-height:200px;position:relative}.wc-product-display-settings>h4{text-align:center}.wc-product-display-settings .wc-products-display-option{background-color:#fff;padding:1.5em;box-sizing:border-box;border:1px solid gray;width:80%;margin-left:auto;margin-right:auto}.wc-product-display-settings .wc-products-display-option h4{margin:0;font-size:1.25em}.wc-product-display-settings .wc-products-display-option p{margin:0}.wc-product-display-settings .wc-products-display-option.value-attribute,.wc-product-display-settings .wc-products-display-option.value-best_rated,.wc-product-display-settings .wc-products-display-option.value-best_sellers,.wc-product-display-settings .wc-products-display-option.value-featured,.wc-product-display-settings .wc-products-display-option.value-on_sale{display:none}.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-attribute,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_rated,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-best_sellers,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-featured,.wc-product-display-settings.expanded-group-filter .wc-products-display-option.value-on_sale{display:block}.wc-product-display-settings .display-settings-container.existing{right:0;position:absolute;width:80%;z-index:999}.wc-product-display-settings .display-settings-container.existing .wc-products-display-option{margin-right:0}.wc-product-display-settings .settings-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.wc-product-display-settings .display-select{margin:0 -1em 20px;padding-bottom:20px;border-bottom:1px solid #e6eaee;text-align:center}.wc-product-display-settings .display-select select{margin-left:1em}.wc-product-display-settings .product-attribute-select,.wc-product-display-settings .product-category-select{margin:0 auto;position:relative;overflow:hidden}.wc-product-display-settings .product-attribute-select #product-attribute-search,.wc-product-display-settings .product-attribute-select #product-category-search,.wc-product-display-settings .product-category-select #product-attribute-search,.wc-product-display-settings .product-category-select #product-category-search{width:100%;margin:0 0 10px;padding:10px 15px;border-radius:0;border-color:#e6eaee}.wc-product-display-settings .product-attribute-select .product-attributes-list,.wc-product-display-settings .product-attribute-select .product-categories-list,.wc-product-display-settings .product-category-select .product-attributes-list,.wc-product-display-settings .product-category-select .product-categories-list{height:200px;overflow-y:scroll}.wc-product-display-settings .product-attribute-select .product-attributes-list ul,.wc-product-display-settings .product-attribute-select .product-categories-list ul,.wc-product-display-settings .product-category-select .product-attributes-list ul,.wc-product-display-settings .product-category-select .product-categories-list ul{list-style-type:none}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li,.wc-product-display-settings .product-attribute-select .product-categories-list ul li,.wc-product-display-settings .product-category-select .product-attributes-list ul li,.wc-product-display-settings .product-category-select .product-categories-list ul li{margin:0}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li label,.wc-product-display-settings .product-attribute-select .product-categories-list ul li label,.wc-product-display-settings .product-category-select .product-attributes-list ul li label,.wc-product-display-settings .product-category-select .product-categories-list ul li label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li input[type=checkbox],.wc-product-display-settings .product-attribute-select .product-categories-list ul li input[type=checkbox],.wc-product-display-settings .product-category-select .product-attributes-list ul li input[type=checkbox],.wc-product-display-settings .product-category-select .product-categories-list ul li input[type=checkbox]{margin-top:0;margin-right:8px;border-radius:0}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li ul,.wc-product-display-settings .product-attribute-select .product-categories-list ul li ul,.wc-product-display-settings .product-category-select .product-attributes-list ul li ul,.wc-product-display-settings .product-category-select .product-categories-list ul li ul{display:none;padding:8px 45px 8px 40px;border-top:1px solid #e6eaee}.wc-product-display-settings .product-attribute-select .product-attributes-list ul li ul li,.wc-product-display-settings .product-attribute-select .product-categories-list ul li ul li,.wc-product-display-settings .product-category-select .product-attributes-list ul li ul li,.wc-product-display-settings .product-category-select .product-categories-list ul li ul li{margin:5px 0}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul,.wc-product-display-settings .product-attribute-select .product-categories-list>ul,.wc-product-display-settings .product-category-select .product-attributes-list>ul,.wc-product-display-settings .product-category-select .product-categories-list>ul{margin-top:1px;padding:0 0 15px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li,.wc-product-display-settings .product-category-select .product-categories-list>ul>li{background:#fdfdfd;border:1px solid #e6eaee;margin-top:-1px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li>label,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li>label,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li>label,.wc-product-display-settings .product-category-select .product-categories-list>ul>li>label{padding:10px 0 10px 15px;background:#fff}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li.product-category-accordion-open,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li.product-category-accordion-open,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li.product-category-accordion-open,.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open{margin:-1px 0 5px;border-bottom-width:1px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li.product-category-accordion-open:not(:first-child),.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child),.wc-product-display-settings .product-category-select .product-attributes-list>ul>li.product-category-accordion-open:not(:first-child),.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open:not(:first-child){margin-top:5px}.wc-product-display-settings .product-attribute-select .product-attributes-list>ul>li.product-category-accordion-open ul,.wc-product-display-settings .product-attribute-select .product-categories-list>ul>li.product-category-accordion-open ul,.wc-product-display-settings .product-category-select .product-attributes-list>ul>li.product-category-accordion-open ul,.wc-product-display-settings .product-category-select .product-categories-list>ul>li.product-category-accordion-open ul{display:block}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-category-accordion-toggle,.wc-product-display-settings .product-attribute-select .product-categories-list .product-category-accordion-toggle,.wc-product-display-settings .product-category-select .product-attributes-list .product-category-accordion-toggle,.wc-product-display-settings .product-category-select .product-categories-list .product-category-accordion-toggle{cursor:pointer;color:#666;margin:0;padding:0 15px 0 10px;border:none;border-radius:0;background:0 0;outline:0;text-decoration:none}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute-count,.wc-product-display-settings .product-attribute-select .product-attributes-list .product-category-count,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute-count,.wc-product-display-settings .product-attribute-select .product-categories-list .product-category-count,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute-count,.wc-product-display-settings .product-category-select .product-attributes-list .product-category-count,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute-count,.wc-product-display-settings .product-category-select .product-categories-list .product-category-count{padding:0 10px;border:1px solid #e9e9e9;border-radius:15px;color:#aaa;font-size:.8em;margin-left:auto}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute{border:1px solid #e9e9e9}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute .product-attribute-name,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute .product-attribute-name,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute .product-attribute-name,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute .product-attribute-name{padding:.5em;background:#fff;border-bottom:1px solid #e9e9e9}.wc-product-display-settings .product-attribute-select .product-attributes-list .product-attribute .product-attribute-name .product-attribute-count,.wc-product-display-settings .product-attribute-select .product-categories-list .product-attribute .product-attribute-name .product-attribute-count,.wc-product-display-settings .product-category-select .product-attributes-list .product-attribute .product-attribute-name .product-attribute-count,.wc-product-display-settings .product-category-select .product-categories-list .product-attribute .product-attribute-name .product-attribute-count{float:right}.wc-product-display-settings .product-attribute-select input[type=radio],.wc-product-display-settings .product-category-select input[type=radio]{border-radius:10px}.wc-product-display-settings .product-attribute-select:after,.wc-product-display-settings .product-category-select:after{content:'';position:absolute;bottom:0;width:100%;height:1.5em;background:-webkit-linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%);background:linear-gradient(rgba(255,255,255,.1) 0,#f8f9f9 100%)}.wc-product-display-settings .product-specific-select{margin:0 auto;position:relative}.wc-product-display-settings .product-specific-select input[type=text]{width:100%;padding-right:3em}.wc-product-display-settings .product-specific-select .cancel{position:absolute;top:.5em;right:1em;cursor:pointer}.wc-product-display-settings .product-specific-select button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;background-color:#fff;border:1px solid #e6eaee;text-align:left;padding:.5em}.wc-product-display-settings .product-specific-select button img{padding-top:.5em}.wc-product-display-settings .product-specific-select button a{line-height:3em;margin-right:.5em}.wc-product-display-settings .product-specific-select button .product-name{line-height:3em;width:300px;white-space:nowrap;overflow:hidden}.wc-product-display-settings .product-specific-select ul{list-style-type:none}.wc-product-display-settings .product-specific-select li{margin:0}.wc-product-display-settings .product-specific-select .product-search-results{position:absolute;width:100%;z-index:999}.wc-product-display-settings .product-specific-select .selected-products{margin-top:1em;margin-bottom:1em}.wc-product-display-settings .block-footer{margin:0 -1em;padding-top:1em;border-top:1px solid #e6eaee;text-align:center}.wc-product-display-settings .block-footer .button{padding-left:25px;padding-right:25px}.wc-product-display-settings .display-select+.block-footer{padding-top:0;border:0}@media only screen and (min-width:700px){.wc-product-display-settings .product-specific-select{width:400px}.wc-product-display-settings .product-category-select{width:400px}.wc-product-display-settings .product-category-select .product-categories-list{width:440px}.wc-product-display-settings .product-category-select .product-categories-list>ul{width:400px}} \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss index a4a7887641a..97e4efd1571 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss @@ -166,12 +166,14 @@ } } - .product-category-select { + .product-category-select, + .product-attribute-select { margin: 0 auto; position: relative; overflow: hidden; - #product-category-search { + #product-category-search, + #product-attribute-search { width: 100%; margin: 0 0 10px; padding: 10px 15px; @@ -179,7 +181,8 @@ border-color: #E6EAEE; } - .product-categories-list { + .product-categories-list, + .product-attributes-list { height: 200px; overflow-y: scroll; @@ -255,7 +258,8 @@ text-decoration: none; } - .product-category-count { + .product-category-count, + .product-attribute-count { padding: 0 10px; border: 1px solid #e9e9e9; border-radius: 15px; @@ -263,6 +267,24 @@ font-size: .8em; margin-left: auto; } + + .product-attribute { + border: 1px solid #e9e9e9; + + .product-attribute-name { + padding: .5em; + background: #FFFFFF; + border-bottom: 1px solid #e9e9e9; + + .product-attribute-count { + float: right; + } + } + } + } + + input[type="radio"] { + border-radius: 10px; } &:after { diff --git a/plugins/woocommerce-blocks/assets/js/products-block.js b/plugins/woocommerce-blocks/assets/js/products-block.js index 14437d4c496..174471125af 100644 --- a/plugins/woocommerce-blocks/assets/js/products-block.js +++ b/plugins/woocommerce-blocks/assets/js/products-block.js @@ -327,7 +327,7 @@ var ProductsBlockSettingsEditor = function (_React$Component3) { } else if ('category' === this.state.display) { extra_settings = wp.element.createElement(_categorySelect.ProductsCategorySelect, this.props); } else if ('attribute' === this.state.display) { - extra_settings = wp.element.createElement(_attributeSelect.ProductsAttributeSelect, null); + extra_settings = wp.element.createElement(_attributeSelect.ProductsAttributeSelect, this.props); } var menu = this.state.menu_visible ? wp.element.createElement(ProductsBlockSettingsEditorDisplayOptions, { existing: this.state.display ? true : false, update_display_callback: this.updateDisplay }) : null; @@ -1493,6 +1493,12 @@ var _wp$components = wp.components, withAPIData = _wp$components.withAPIData, Dropdown = _wp$components.Dropdown; +/** + * Attribute data cache. Needed because it takes a lot of API calls to generate attribute info. + */ + +var PRODUCT_ATTRIBUTE_DATA = {}; + /** * When the display mode is 'Attribute' search for and select product attributes to pull products from. */ @@ -1500,19 +1506,123 @@ var _wp$components = wp.components, var ProductsAttributeSelect = exports.ProductsAttributeSelect = function (_React$Component) { _inherits(ProductsAttributeSelect, _React$Component); - function ProductsAttributeSelect() { + /** + * Constructor. + */ + function ProductsAttributeSelect(props) { _classCallCheck(this, ProductsAttributeSelect); - return _possibleConstructorReturn(this, (ProductsAttributeSelect.__proto__ || Object.getPrototypeOf(ProductsAttributeSelect)).apply(this, arguments)); + var _this = _possibleConstructorReturn(this, (ProductsAttributeSelect.__proto__ || Object.getPrototypeOf(ProductsAttributeSelect)).call(this, props)); + + _this.state = { + selectedAttribute: '', + selectedTerms: [], + filterQuery: '' + }; + + _this.setSelectedAttribute = _this.setSelectedAttribute.bind(_this); + _this.addTerm = _this.addTerm.bind(_this); + _this.removeTerm = _this.removeTerm.bind(_this); + return _this; } + /** + * Set the selected attribute. + * + * @param slug string Attribute slug. + */ + + _createClass(ProductsAttributeSelect, [{ - key: "render", + key: 'setSelectedAttribute', + value: function setSelectedAttribute(slug) { + this.setState({ + selectedAttribute: slug, + selectedTerms: [] + }); + } + + /** + * Add a term to the selected attribute's terms. + * + * @param slug string Term slug. + */ + + }, { + key: 'addTerm', + value: function addTerm(slug) { + var terms = this.state.selectedTerms; + terms.push(slug); + this.setState({ + selectedTerms: terms + }); + } + + /** + * Remove a term from the selected attribute's terms. + * + * @param slug string Term slug. + */ + + }, { + key: 'removeTerm', + value: function removeTerm(slug) { + var newTerms = []; + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = this.state.selectedTerms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var termSlug = _step.value; + + if (termSlug !== slug) { + newTerms.push(termSlug); + } + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + this.setState({ + selectedTerms: newTerms + }); + } + + /** + * Render the whole section. + */ + + }, { + key: 'render', value: function render() { + + // @todo Remove this once data is moving around properly. + console.log("STATE UPDATED"); + console.log(this.state); + return wp.element.createElement( - "div", - { className: "product-attribute-select" }, - "TODO: Attribute select screen" + 'div', + { className: 'product-attribute-select' }, + wp.element.createElement(ProductAttributeFilter, null), + wp.element.createElement(ProductAttributeList, { + selectedAttribute: this.state.selectedAttribute, + selectedTerms: this.state.selectedTerms, + setSelectedAttribute: this.setSelectedAttribute.bind(this), + addTerm: this.addTerm.bind(this), + removeTerm: this.removeTerm.bind(this) + }) ); } }]); @@ -1520,5 +1630,284 @@ var ProductsAttributeSelect = exports.ProductsAttributeSelect = function (_React return ProductsAttributeSelect; }(React.Component); +/** + * Search area for filtering through the attributes list. + */ + + +var ProductAttributeFilter = function ProductAttributeFilter() { + return wp.element.createElement( + 'div', + null, + wp.element.createElement('input', { id: 'product-attribute-search', type: 'search', placeholder: __('Search for attributes') }) + ); +}; + +/** + * List of attributes. + */ +var ProductAttributeList = withAPIData(function (props) { + return { + attributes: '/wc/v2/products/attributes' + }; +})(function (_ref) { + var attributes = _ref.attributes, + selectedAttribute = _ref.selectedAttribute, + selectedTerms = _ref.selectedTerms, + setSelectedAttribute = _ref.setSelectedAttribute, + addTerm = _ref.addTerm, + removeTerm = _ref.removeTerm; + + if (!attributes.data) { + return __('Loading'); + } + + if (0 === attributes.data.length) { + return __('No attributes found'); + } + + var attributeElements = []; + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + for (var _iterator2 = attributes.data[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var attribute = _step2.value; + + if (PRODUCT_ATTRIBUTE_DATA.hasOwnProperty(attribute.slug)) { + attributeElements.push(wp.element.createElement(ProductAttributeElement, { + selectedAttribute: selectedAttribute, + selectedTerms: selectedTerms, + attribute: attribute, + setSelectedAttribute: setSelectedAttribute, + addTerm: addTerm, + removeTerm: removeTerm + })); + } else { + attributeElements.push(wp.element.createElement(UncachedProductAttributeElement, { + selectedAttribute: selectedAttribute, + selectedTerms: selectedTerms, + attribute: attribute, + setSelectedAttribute: setSelectedAttribute, + addTerm: addTerm, + removeTerm: removeTerm + })); + } + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + + return wp.element.createElement( + 'div', + { className: 'product-attributes-list' }, + attributeElements + ); +}); + +/** + * Caches then renders a product attribute term element. + */ +var UncachedProductAttributeElement = withAPIData(function (props) { + return { + terms: '/wc/v2/products/attributes/' + props.attribute.id + '/terms' + }; +})(function (_ref2) { + var terms = _ref2.terms, + selectedAttribute = _ref2.selectedAttribute, + selectedTerms = _ref2.selectedTerms, + attribute = _ref2.attribute, + setSelectedAttribute = _ref2.setSelectedAttribute, + addTerm = _ref2.addTerm, + removeTerm = _ref2.removeTerm; + + if (!terms.data) { + return __('Loading'); + } + + if (0 === terms.data.length) { + return __('No attribute options found'); + } + + // Populate cache. + PRODUCT_ATTRIBUTE_DATA[attribute.slug] = { terms: [] }; + + var totalCount = 0; + var _iteratorNormalCompletion3 = true; + var _didIteratorError3 = false; + var _iteratorError3 = undefined; + + try { + for (var _iterator3 = terms.data[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { + var term = _step3.value; + + totalCount += term.count; + PRODUCT_ATTRIBUTE_DATA[attribute.slug].terms.push(term); + } + } catch (err) { + _didIteratorError3 = true; + _iteratorError3 = err; + } finally { + try { + if (!_iteratorNormalCompletion3 && _iterator3.return) { + _iterator3.return(); + } + } finally { + if (_didIteratorError3) { + throw _iteratorError3; + } + } + } + + PRODUCT_ATTRIBUTE_DATA[attribute.slug].count = totalCount; + + return wp.element.createElement(ProductAttributeElement, { + selectedAttribute: selectedAttribute, + selectedTerms: selectedTerms, + attribute: attribute, + setSelectedAttribute: setSelectedAttribute, + addTerm: addTerm, + removeTerm: removeTerm + }); +}); + +/** + * A product attribute term element. + */ + +var ProductAttributeElement = function (_React$Component2) { + _inherits(ProductAttributeElement, _React$Component2); + + /** + * Constructor. + */ + function ProductAttributeElement(props) { + _classCallCheck(this, ProductAttributeElement); + + var _this2 = _possibleConstructorReturn(this, (ProductAttributeElement.__proto__ || Object.getPrototypeOf(ProductAttributeElement)).call(this, props)); + + _this2.handleAttributeChange = _this2.handleAttributeChange.bind(_this2); + _this2.handleTermChange = _this2.handleTermChange.bind(_this2); + return _this2; + } + + /** + * Propagate and reset values when the selected attribute is changed. + * + * @param evt Event object + */ + + + _createClass(ProductAttributeElement, [{ + key: 'handleAttributeChange', + value: function handleAttributeChange(evt) { + var slug = evt.target.value; + + if (this.props.selectedAttribute === slug) { + return; + } + + this.props.setSelectedAttribute(slug); + } + + /** + * Add or remove selected terms. + * + * @param evt Event object + */ + + }, { + key: 'handleTermChange', + value: function handleTermChange(evt) { + if (evt.target.checked) { + this.props.addTerm(evt.target.value); + } else { + this.props.removeTerm(evt.target.value); + } + } + + /** + * Render the details for one attribute. + */ + + }, { + key: 'render', + value: function render() { + var _this3 = this; + + var attribute = PRODUCT_ATTRIBUTE_DATA[this.props.attribute.slug]; + var isSelected = this.props.selectedAttribute === this.props.attribute.slug; + + var attributeTerms = null; + if (isSelected) { + attributeTerms = wp.element.createElement( + 'ul', + { className: 'product-attribute-terms' }, + attribute.terms.map(function (term) { + return wp.element.createElement( + 'li', + { className: 'product-attribute-term' }, + wp.element.createElement( + 'label', + null, + wp.element.createElement('input', { type: 'checkbox', + value: term.slug, + onChange: _this3.handleTermChange, + checked: _this3.props.selectedTerms.includes(term.slug) + }), + term.name, + wp.element.createElement( + 'span', + { className: 'product-attribute-count' }, + term.count + ) + ) + ); + }) + ); + } + + return wp.element.createElement( + 'div', + { className: 'product-attribute' }, + wp.element.createElement( + 'div', + { className: 'product-attribute-name' }, + wp.element.createElement( + 'label', + null, + wp.element.createElement('input', { type: 'radio', + value: this.props.attribute.slug, + onClick: this.handleAttributeChange, + checked: isSelected + }), + this.props.attribute.name, + wp.element.createElement( + 'span', + { className: 'product-attribute-count' }, + attribute.count + ) + ) + ), + attributeTerms + ); + } + }]); + + return ProductAttributeElement; +}(React.Component); + /***/ }) /******/ ]); \ No newline at end of file diff --git a/plugins/woocommerce-blocks/assets/js/products-block.jsx b/plugins/woocommerce-blocks/assets/js/products-block.jsx index cd1de91d6bf..460a15500c3 100644 --- a/plugins/woocommerce-blocks/assets/js/products-block.jsx +++ b/plugins/woocommerce-blocks/assets/js/products-block.jsx @@ -173,7 +173,7 @@ class ProductsBlockSettingsEditor extends React.Component { } else if ( 'category' === this.state.display ) { extra_settings = ; } else if ( 'attribute' === this.state.display ) { - extra_settings = + extra_settings = } const menu = this.state.menu_visible ? : null; diff --git a/plugins/woocommerce-blocks/assets/js/views/attribute-select.jsx b/plugins/woocommerce-blocks/assets/js/views/attribute-select.jsx index 6e2f84307b8..43b6c4c0bb1 100644 --- a/plugins/woocommerce-blocks/assets/js/views/attribute-select.jsx +++ b/plugins/woocommerce-blocks/assets/js/views/attribute-select.jsx @@ -1,17 +1,282 @@ const { __ } = wp.i18n; const { Toolbar, withAPIData, Dropdown } = wp.components; +/** + * Attribute data cache. Needed because it takes a lot of API calls to generate attribute info. + */ +const PRODUCT_ATTRIBUTE_DATA = {}; + /** * When the display mode is 'Attribute' search for and select product attributes to pull products from. */ export class ProductsAttributeSelect extends React.Component { + /** + * Constructor. + */ + constructor( props ) { + super( props ); + + this.state = { + selectedAttribute: '', + selectedTerms: [], + filterQuery: '', + } + + this.setSelectedAttribute = this.setSelectedAttribute.bind( this ); + this.addTerm = this.addTerm.bind( this ); + this.removeTerm = this.removeTerm.bind( this ); + } + + /** + * Set the selected attribute. + * + * @param slug string Attribute slug. + */ + setSelectedAttribute( slug ) { + this.setState( { + selectedAttribute: slug, + selectedTerms: [], + } ); + } + + /** + * Add a term to the selected attribute's terms. + * + * @param slug string Term slug. + */ + addTerm( slug ) { + let terms = this.state.selectedTerms; + terms.push( slug ); + this.setState( { + selectedTerms: terms, + } ); + } + + /** + * Remove a term from the selected attribute's terms. + * + * @param slug string Term slug. + */ + removeTerm( slug ) { + let newTerms = []; + for ( let termSlug of this.state.selectedTerms ) { + if ( termSlug !== slug ) { + newTerms.push( termSlug ); + } + } + + this.setState( { + selectedTerms: newTerms, + } ); + } + + /** + * Render the whole section. + */ render() { + + // @todo Remove this once data is moving around properly. + console.log( "STATE UPDATED" ); + console.log( this.state ); + return (
- TODO: Attribute select screen + +
); } } +/** + * Search area for filtering through the attributes list. + */ +const ProductAttributeFilter = () => { + return ( +
+ +
+ ); +} + +/** + * List of attributes. + */ +const ProductAttributeList = withAPIData( ( props ) => { + return { + attributes: '/wc/v2/products/attributes' + }; + } )( ( { attributes, selectedAttribute, selectedTerms, setSelectedAttribute, addTerm, removeTerm } ) => { + if ( ! attributes.data ) { + return __( 'Loading' ); + } + + if ( 0 === attributes.data.length ) { + return __( 'No attributes found' ); + } + + let attributeElements = []; + for ( let attribute of attributes.data ) { + if ( PRODUCT_ATTRIBUTE_DATA.hasOwnProperty( attribute.slug ) ) { + attributeElements.push( ); + } else { + attributeElements.push( ); + } + } + + return ( +
+ { attributeElements } +
+ ); + } +); + +/** + * Caches then renders a product attribute term element. + */ +const UncachedProductAttributeElement = withAPIData( ( props ) => { + return { + terms: '/wc/v2/products/attributes/' + props.attribute.id + '/terms' + }; + } )( ( { terms, selectedAttribute, selectedTerms, attribute, setSelectedAttribute, addTerm, removeTerm } ) => { + if ( ! terms.data ) { + return __( 'Loading' ); + } + + if ( 0 === terms.data.length ) { + return __( 'No attribute options found' ); + } + + // Populate cache. + PRODUCT_ATTRIBUTE_DATA[ attribute.slug ] = { terms: [] }; + + let totalCount = 0; + for ( let term of terms.data ) { + totalCount += term.count; + PRODUCT_ATTRIBUTE_DATA[ attribute.slug ].terms.push( term ); + } + + PRODUCT_ATTRIBUTE_DATA[ attribute.slug ].count = totalCount; + + return + } +); + +/** + * A product attribute term element. + */ +class ProductAttributeElement extends React.Component { + + /** + * Constructor. + */ + constructor( props ) { + super( props ); + + this.handleAttributeChange = this.handleAttributeChange.bind( this ); + this.handleTermChange = this.handleTermChange.bind( this ); + } + + /** + * Propagate and reset values when the selected attribute is changed. + * + * @param evt Event object + */ + handleAttributeChange( evt ) { + const slug = evt.target.value; + + if ( this.props.selectedAttribute === slug ) { + return; + } + + this.props.setSelectedAttribute( slug ); + } + + /** + * Add or remove selected terms. + * + * @param evt Event object + */ + handleTermChange( evt ) { + if ( evt.target.checked ) { + this.props.addTerm( evt.target.value ); + } else { + this.props.removeTerm( evt.target.value ); + } + } + + /** + * Render the details for one attribute. + */ + render() { + const attribute = PRODUCT_ATTRIBUTE_DATA[ this.props.attribute.slug ]; + const isSelected = this.props.selectedAttribute === this.props.attribute.slug; + + let attributeTerms = null; + if ( isSelected ) { + attributeTerms = ( +
    + { attribute.terms.map( ( term ) => ( +
  • + +
    • + ) ) } +
+ ); + } + + return ( +
+
+ +
+ { attributeTerms } +
+ ); + } +}