Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Product Categories List: add a placeholder on save (https://github.com/woocommerce/woocommerce-blocks/pull/650) 

* Product Categories List: add a placeholder on save

This is saved to the database so that we have a placeholder view while waiting for the categories component to render.

* Use `classList.remove` for better readability

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>
This commit is contained in:
Kelly Dwan 2019-06-26 09:27:57 -04:00 committed by GitHub
parent 58cd36a35c
commit 559bbc6858
3 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-blocks/assets/js/blocks/product-categories/frontend.js
View File

@ -22,6 +22,7 @@ if ( containers.length ) {
isDropdown: data.isDropdown === 'true', isDropdown: data.isDropdown === 'true',
isHierarchical: data.isHierarchical === 'true', isHierarchical: data.isHierarchical === 'true',
}; };
el.classList.remove( 'is-loading' );
render( <Block attributes={ attributes } />, el ); render( <Block attributes={ attributes } />, el );
} ); } );

24
plugins/woocommerce-blocks/assets/js/blocks/product-categories/index.js
View File

@ -81,19 +81,31 @@ registerBlockType( 'woocommerce/product-categories', {
*/ */
save( { attributes } ) { save( { attributes } ) {
const { hasCount, hasEmpty, isDropdown, isHierarchical } = attributes; const { hasCount, hasEmpty, isDropdown, isHierarchical } = attributes;
const props = {}; const data = {};
if ( hasCount ) { if ( hasCount ) {
props[ 'data-has-count' ] = true; data[ 'data-has-count' ] = true;
} }
if ( hasEmpty ) { if ( hasEmpty ) {
props[ 'data-has-empty' ] = true; data[ 'data-has-empty' ] = true;
} }
if ( isDropdown ) { if ( isDropdown ) {
props[ 'data-is-dropdown' ] = true; data[ 'data-is-dropdown' ] = true;
} }
if ( isHierarchical ) { if ( isHierarchical ) {
props[ 'data-is-hierarchical' ] = true; data[ 'data-is-hierarchical' ] = true;
} }
return <div { ...props }>LOADING</div>; return (
<div className="is-loading" { ...data }>
{ isDropdown ? (
<span aria-hidden className="wc-block-product-categories__placeholder" />
) : (
<ul aria-hidden>
<li><span className="wc-block-product-categories__placeholder" /></li>
<li><span className="wc-block-product-categories__placeholder" /></li>
<li><span className="wc-block-product-categories__placeholder" /></li>
</ul>
) }
</div>
);
}, },
} ); } );

9
plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss
View File

@ -9,3 +9,12 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
.wp-block-woocommerce-product-categories.is-loading .wc-block-product-categories__placeholder {
display: inline-block;
height: 1em;
width: 50%;
min-width: 200px;
background: currentColor;
opacity: 0.2;
}