8889841cblock.json 0000644 00000003103 15053766414 0006541 0 ustar 00 {
"name": "woocommerce/product-best-sellers",
"title": "Best Selling Products",
"category": "woocommerce",
"keywords": [ "WooCommerce" ],
"description": "Display a grid of your all-time best selling products.",
"supports": {
"align": [ "wide", "full" ],
"html": false
},
"attributes": {
"columns": {
"type": "number",
"default": 3
},
"rows": {
"type": "number",
"default": 3
},
"alignButtons": {
"type": "boolean",
"default": false
},
"contentVisibility": {
"type": "object",
"default": {
"image": true,
"title": true,
"price": true,
"rating": true,
"button": true
},
"properties": {
"image": {
"type": "boolean",
"default": true
},
"title": {
"type": "boolean",
"default": true
},
"price": {
"type": "boolean",
"default": true
},
"rating": {
"type": "boolean",
"default": true
},
"button": {
"type": "boolean",
"default": true
}
}
},
"categories": {
"type": "array",
"default": []
},
"catOperator": {
"type": "string",
"default": "any"
},
"isPreview": {
"type": "boolean",
"default": false
},
"stockStatus": {
"type": "array"
},
"editMode": {
"type": "boolean",
"default": true
},
"orderby": {
"type": "string",
"enum": [
"date",
"popularity",
"price_asc",
"price_desc",
"rating",
"title",
"menu_order"
],
"default": "popularity"
}
},
"textdomain": "woocommerce",
"apiVersion": 2,
"$schema": "https://schemas.wp.org/trunk/block.json"
}
edit.tsx 0000644 00000000630 15053766414 0006243 0 ustar 00 /**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { ProductBestSellersBlock } from './block';
import { Props } from './types';
export const Edit = ( props: unknown & Props ): JSX.Element => {
const blockProps = useBlockProps();
return (
);
};
types.ts 0000644 00000001272 15053766414 0006275 0 ustar 00 interface Attributes {
columns: number;
rows: number;
alignButtons: boolean;
contentVisibility: {
image: boolean;
title: boolean;
price: boolean;
rating: boolean;
button: boolean;
};
categories: Array< number >;
catOperator: string;
isPreview: boolean;
stockStatus: Array< string >;
editMode: boolean;
orderby:
| 'date'
| 'popularity'
| 'price_asc'
| 'price_desc'
| 'rating'
| 'title'
| 'menu_order';
}
export interface Props {
/**
* The attributes for this block
*/
attributes: Attributes;
/**
* The register block name.
*/
name: string;
/**
* A callback to update attributes
*/
setAttributes: ( attributes: Partial< Attributes > ) => void;
}
inspector-controls.tsx 0000644 00000004052 15053766414 0011167 0 ustar 00 /**
* External dependencies
*/
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
import { getSetting } from '@woocommerce/settings';
import GridContentControl from '@woocommerce/editor-components/grid-content-control';
import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
/**
* Internal dependencies
*/
import { Props } from './types';
export const ProductBestSellersInspectorControls = (
props: Props
): JSX.Element => {
const { attributes, setAttributes } = props;
const {
categories,
catOperator,
columns,
contentVisibility,
rows,
alignButtons,
} = attributes;
return (
setAttributes( { contentVisibility: value } )
}
/>
{
const ids = value.map( ( { id } ) => id );
setAttributes( { categories: ids } );
} }
operator={ catOperator }
onOperatorChange={ ( value = 'any' ) =>
setAttributes( { catOperator: value } )
}
/>
);
};
index.tsx 0000644 00000001777 15053766414 0006442 0 ustar 00 /**
* External dependencies
*/
import { Icon, trendingUp } from '@wordpress/icons';
import { createBlock, registerBlockType } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import metadata from './block.json';
import { Edit } from './edit';
import sharedAttributes, {
sharedAttributeBlockTypes,
} from '../../utils/shared-attributes';
registerBlockType( metadata, {
icon: {
src: (
),
},
attributes: {
...sharedAttributes,
...metadata.attributes,
},
transforms: {
from: [
{
type: 'block',
blocks: sharedAttributeBlockTypes.filter(
( value ) => value !== 'woocommerce/product-best-sellers'
),
transform: ( attributes ) =>
createBlock(
'woocommerce/product-best-sellers',
attributes
),
},
],
},
/**
* Renders and manages the block.
*
* @param {Object} props Props to pass to block.
*/
edit: Edit,
save: () => {
return null;
},
} );
block.tsx 0000644 00000001365 15053766414 0006416 0 ustar 00 /**
* External dependencies
*/
import { Disabled } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Internal dependencies
*/
import { Props } from './types';
import { ProductBestSellersInspectorControls } from './inspector-controls';
export const ProductBestSellersBlock = ( props: Props ): JSX.Element => {
const { attributes, name } = props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
);
};