Product Categories List: Add the links into the rendered block (https://github.com/woocommerce/woocommerce-blocks/pull/637)
* Add `isPreview` prop to be used when in editor preview * Add product category link to the categories object * Add the link to the `a` if we're not in the preview mode
This commit is contained in:
parent
f7d846b547
commit
6526e398f0
|
@ -23,7 +23,7 @@ function getCategories( { hasEmpty, isDropdown, isHierarchical } ) {
|
||||||
/**
|
/**
|
||||||
* Component displaying the categories as dropdown or list.
|
* Component displaying the categories as dropdown or list.
|
||||||
*/
|
*/
|
||||||
const ProductCategoriesBlock = ( { attributes } ) => {
|
const ProductCategoriesBlock = ( { attributes, isPreview = false } ) => {
|
||||||
const { hasCount, isDropdown } = attributes;
|
const { hasCount, isDropdown } = attributes;
|
||||||
const categories = getCategories( attributes );
|
const categories = getCategories( attributes );
|
||||||
const parentKey = 'parent-' + categories[ 0 ].term_id;
|
const parentKey = 'parent-' + categories[ 0 ].term_id;
|
||||||
|
@ -33,10 +33,10 @@ const ProductCategoriesBlock = ( { attributes } ) => {
|
||||||
{ items.map( ( cat ) => {
|
{ items.map( ( cat ) => {
|
||||||
const count = hasCount ? <span>({ cat.count })</span> : null;
|
const count = hasCount ? <span>({ cat.count })</span> : null;
|
||||||
return [
|
return [
|
||||||
<li key={ cat.term_id }><a>{ cat.name }</a> { count }</li>, // eslint-disable-line
|
<li key={ cat.term_id }>
|
||||||
!! cat.children &&
|
<a href={ isPreview ? null : cat.link }>{ cat.name }</a> { count } { /* eslint-disable-line */ }
|
||||||
!! cat.children.length &&
|
</li>,
|
||||||
renderList( cat.children ),
|
!! cat.children && !! cat.children.length && renderList( cat.children ),
|
||||||
];
|
];
|
||||||
} ) }
|
} ) }
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -65,6 +65,10 @@ ProductCategoriesBlock.propTypes = {
|
||||||
* The attributes for this block
|
* The attributes for this block
|
||||||
*/
|
*/
|
||||||
attributes: PropTypes.object.isRequired,
|
attributes: PropTypes.object.isRequired,
|
||||||
|
/**
|
||||||
|
* Whether this is the block preview or frontend display.
|
||||||
|
*/
|
||||||
|
isPreview: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ProductCategoriesBlock;
|
export default ProductCategoriesBlock;
|
||||||
|
|
|
@ -66,7 +66,7 @@ export default function( { attributes, setAttributes } ) {
|
||||||
/>
|
/>
|
||||||
</PanelBody>
|
</PanelBody>
|
||||||
</InspectorControls>
|
</InspectorControls>
|
||||||
<Block attributes={ attributes } />
|
<Block attributes={ attributes } isPreview />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -197,6 +197,10 @@ class WGPB_Block_Library {
|
||||||
'pad_counts' => true,
|
'pad_counts' => true,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
foreach ( $product_categories as &$category ) {
|
||||||
|
$category->link = get_term_link( $category->term_id, 'product_cat' );
|
||||||
|
}
|
||||||
|
|
||||||
// Global settings used in each block.
|
// Global settings used in each block.
|
||||||
$block_settings = array(
|
$block_settings = array(
|
||||||
'min_columns' => wc_get_theme_support( 'product_blocks::min_columns', 1 ),
|
'min_columns' => wc_get_theme_support( 'product_blocks::min_columns', 1 ),
|
||||||
|
|
Loading…
Reference in New Issue