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..a1603e26379 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: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 li ul li ul{padding:0 25px 0 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}.wc-product-display-settings input[type=checkbox]:indeterminate:before{content:'';display:inline-block;margin:6px 0 0 0;width:8px;height:2px;background:#1e8cbe}@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..0b55b5ab789 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: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 li ul li ul{padding:0 0 0 25px}.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}.wc-product-display-settings input[type=checkbox]:indeterminate:before{content:'';display:inline-block;margin:6px 0 0 0;width:8px;height:2px;background:#1e8cbe}@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..33534010442 100644 --- a/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss +++ b/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss @@ -208,6 +208,10 @@ li { margin: 5px 0; + + ul { + padding: 0px 0 0 25px; + } } } } @@ -353,6 +357,19 @@ padding-top: 0; border: 0; } + + input[type="checkbox"] { + &:indeterminate { + &:before { + content: ''; + display: inline-block; + margin: 6px 0 0 0px; + width: 8px; + height: 2px; + background: #1e8cbe; + } + } + } } @media only screen and (min-width: 700px) { diff --git a/plugins/woocommerce-blocks/assets/js/products-block.js b/plugins/woocommerce-blocks/assets/js/products-block.js index 14437d4c496..920fde78691 100644 --- a/plugins/woocommerce-blocks/assets/js/products-block.js +++ b/plugins/woocommerce-blocks/assets/js/products-block.js @@ -1221,13 +1221,15 @@ var ProductsCategorySelect = exports.ProductsCategorySelect = function (_React$C _this.state = { selectedCategories: props.selected_display_setting, - openAccordion: null, - filterQuery: '' + openAccordion: [], + filterQuery: '', + firstLoad: true }; _this.checkboxChange = _this.checkboxChange.bind(_this); _this.accordionToggle = _this.accordionToggle.bind(_this); _this.filterResults = _this.filterResults.bind(_this); + _this.setFirstLoad = _this.setFirstLoad.bind(_this); return _this; } @@ -1270,14 +1272,18 @@ var ProductsCategorySelect = exports.ProductsCategorySelect = function (_React$C }, { key: "accordionToggle", value: function accordionToggle(category) { - var value = category; + var openAccordions = this.state.openAccordion; - if (value === this.state.openAccordion) { - value = null; + if (openAccordions.includes(category)) { + openAccordions = openAccordions.filter(function (c) { + return c !== category; + }); + } else { + openAccordions.push(category); } this.setState({ - openAccordion: value + openAccordion: openAccordions }); } @@ -1295,6 +1301,20 @@ var ProductsCategorySelect = exports.ProductsCategorySelect = function (_React$C }); } + /** + * Update firstLoad state. + * + * @param Booolean loaded + */ + + }, { + key: "setFirstLoad", + value: function setFirstLoad(loaded) { + this.setState({ + firstLoad: !!loaded + }); + } + /** * Render the list of categories and the search input. */ @@ -1311,7 +1331,9 @@ var ProductsCategorySelect = exports.ProductsCategorySelect = function (_React$C selectedCategories: this.state.selectedCategories, checkboxChange: this.checkboxChange, accordionToggle: this.accordionToggle, - openAccordion: this.state.openAccordion + openAccordion: this.state.openAccordion, + firstLoad: this.state.firstLoad, + setFirstLoad: this.setFirstLoad }) ); } @@ -1348,7 +1370,9 @@ var ProductCategoryList = withAPIData(function (props) { selectedCategories = _ref2.selectedCategories, checkboxChange = _ref2.checkboxChange, accordionToggle = _ref2.accordionToggle, - openAccordion = _ref2.openAccordion; + openAccordion = _ref2.openAccordion, + firstLoad = _ref2.firstLoad, + setFirstLoad = _ref2.setFirstLoad; if (!categories.data) { return __('Loading'); @@ -1385,13 +1409,55 @@ var ProductCategoryList = withAPIData(function (props) { return !!getCategoryChildren(parent, categories).length; }; + var isIndeterminate = function isIndeterminate(category, categories) { + + // Currect category selected? + if (selectedCategories.includes(category.id)) { + return false; + } + + // Has children? + var children = getCategoryChildren(category, categories).map(function (category) { + return category.id; + }); + + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var child = _step.value; + + if (selectedCategories.includes(child)) { + return true; + } + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + return false; + }; + var AccordionButton = function AccordionButton(_ref3) { var category = _ref3.category, categories = _ref3.categories; var icon = 'arrow-down-alt2'; - if (openAccordion === category.id) { + if (openAccordion.includes(category.id)) { icon = 'arrow-up-alt2'; } @@ -1420,13 +1486,51 @@ var ProductCategoryList = withAPIData(function (props) { return category.parent === parent; }); + if (firstLoad && selectedCategories.length > 0) { + categoriesData.filter(function (category) { + return category.parent === 0; + }).forEach(function (category) { + var children = getCategoryChildren(category, categoriesData); + + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + for (var _iterator2 = children[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var child = _step2.value; + + if (selectedCategories.includes(child.id) && !openAccordion.includes(category.id)) { + accordionToggle(category.id); + break; + } + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + }); + + setFirstLoad(false); + } + return filteredCategories.length > 0 && wp.element.createElement( "ul", null, filteredCategories.map(function (category) { return wp.element.createElement( "li", - { key: category.id, className: openAccordion === category.id ? 'product-category-accordion-open' : '' }, + { key: category.id, className: openAccordion.includes(category.id) ? 'product-category-accordion-open' : '' }, wp.element.createElement( "label", { htmlFor: 'product-category-' + category.id }, @@ -1436,6 +1540,9 @@ var ProductCategoryList = withAPIData(function (props) { checked: selectedCategories.includes(category.id), onChange: function onChange(evt) { return handleCategoriesToCheck(evt, category, categories); + }, + ref: function ref(el) { + return el && (el.indeterminate = isIndeterminate(category, categories)); } }), " ", diff --git a/plugins/woocommerce-blocks/assets/js/views/category-select.jsx b/plugins/woocommerce-blocks/assets/js/views/category-select.jsx index 2ee9291d987..1cb03c2c999 100644 --- a/plugins/woocommerce-blocks/assets/js/views/category-select.jsx +++ b/plugins/woocommerce-blocks/assets/js/views/category-select.jsx @@ -14,13 +14,15 @@ export class ProductsCategorySelect extends React.Component { this.state = { selectedCategories: props.selected_display_setting, - openAccordion: null, + openAccordion: [], filterQuery: '', + firstLoad: true, } this.checkboxChange = this.checkboxChange.bind( this ); this.accordionToggle = this.accordionToggle.bind( this ); this.filterResults = this.filterResults.bind( this ); + this.setFirstLoad = this.setFirstLoad.bind( this ); } /** @@ -51,14 +53,16 @@ export class ProductsCategorySelect extends React.Component { * @param Category ID category */ accordionToggle( category ) { - let value = category; + let openAccordions = this.state.openAccordion; - if ( value === this.state.openAccordion ) { - value = null; + if ( openAccordions.includes( category ) ) { + openAccordions = openAccordions.filter( c => c !== category ); + } else { + openAccordions.push( category ); } this.setState( { - openAccordion: value + openAccordion: openAccordions } ); } @@ -73,6 +77,17 @@ export class ProductsCategorySelect extends React.Component { } ); } + /** + * Update firstLoad state. + * + * @param Booolean loaded + */ + setFirstLoad( loaded ) { + this.setState( { + firstLoad: !! loaded + } ); + } + /** * Render the list of categories and the search input. */ @@ -86,6 +101,8 @@ export class ProductsCategorySelect extends React.Component { checkboxChange={ this.checkboxChange } accordionToggle={ this.accordionToggle } openAccordion={ this.state.openAccordion } + firstLoad={ this.state.firstLoad } + setFirstLoad={ this.setFirstLoad } /> ); @@ -110,7 +127,7 @@ const ProductCategoryList = withAPIData( ( props ) => { return { categories: '/wc/v2/products/categories' }; - } )( ( { categories, filterQuery, selectedCategories, checkboxChange, accordionToggle, openAccordion } ) => { + } )( ( { categories, filterQuery, selectedCategories, checkboxChange, accordionToggle, openAccordion, firstLoad, setFirstLoad } ) => { if ( ! categories.data ) { return __( 'Loading' ); } @@ -144,10 +161,31 @@ const ProductCategoryList = withAPIData( ( props ) => { return !! getCategoryChildren( parent, categories ).length; }; + const isIndeterminate = ( category, categories ) => { + + // Currect category selected? + if ( selectedCategories.includes( category.id ) ) { + return false; + } + + // Has children? + let children = getCategoryChildren( category, categories ).map( category => { + return category.id; + } ); + + for ( let child of children ) { + if ( selectedCategories.includes( child ) ) { + return true; + } + } + + return false; + } + const AccordionButton = ( { category, categories } ) => { let icon = 'arrow-down-alt2'; - if ( openAccordion === category.id ) { + if ( openAccordion.includes( category.id ) ) { icon = 'arrow-up-alt2'; } @@ -169,16 +207,32 @@ const ProductCategoryList = withAPIData( ( props ) => { const CategoryTree = ( { categories, parent } ) => { let filteredCategories = categories.filter( ( category ) => category.parent === parent ); + if ( firstLoad && selectedCategories.length > 0 ) { + categoriesData.filter( ( category ) => category.parent === 0 ).forEach( function( category ) { + let children = getCategoryChildren( category, categoriesData ); + + for ( let child of children ) { + if ( selectedCategories.includes( child.id ) && ! openAccordion.includes( category.id ) ) { + accordionToggle( category.id ); + break; + } + } + } ); + + setFirstLoad( false ); + } + return ( filteredCategories.length > 0 ) && (