woocommerce/plugins/woocommerce-blocks/assets/js/blocks/product-results-count/edit.tsx

29 lines
520 B
TypeScript
Raw Normal View History

[Blockifying Product Archive Templates] Add Results Count block (https://github.com/woocommerce/woocommerce-blocks/pull/8078) * Init setup to add a new block Results Count * Render template part as a content of ResultsCount block * Switch to template part rendering * Rename the block to ProductResultsCount * Fix typo in BlockTypesController * Change the ProductResultsCount class name * Remove Product Results Count block from Product Query template * Improve the way Product Results Count is rendered in the editor * Add prefix to places that missed renaming from ResultsCount to ProductResultsCount * Remove unnecessary frontend.tsx file for ProductResultsCount * Make sure global styles are applied and respected by Product Results Count block * Make sure the Product Results Count is available inly in Product Catalog template * Add basic tests to Product Results Count * Remove empty line in style file * Fix TS issue in Product Results Count * Fix typo * Override the enqueue_assets method to prevent unnecessary enqueue and 404 error on the frontend * Add necessary property to block's metadata * Address code review feedback * Update description Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Remove disabled component * Improve test description * Merge edit and block files * Remove align support * Remove background support * Simplify edit component * Improve readability with sprintf and add custom class * Simplify test case * Add styles and order placeholders Co-authored-by: Tung Du <dinhtungdu@gmail.com> * Fix markup to match with the frontend Co-authored-by: Tung Du <dinhtungdu@gmail.com> Co-authored-by: Alba Rincón <albarin@users.noreply.github.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Alba Rincón <alba.rincon@automattic.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com>
2023-01-17 15:19:42 +00:00
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
export interface Attributes {
className?: string;
}
const Edit = () => {
const blockProps = useBlockProps( {
className: 'woocommerce wc-block-product-results-count',
} );
return (
<div { ...blockProps }>
<p className="woocommerce-result-count">
{ __(
'Showing 1-X of X results',
'woo-gutenberg-products-block'
) }
</p>
</div>
);
};
export default Edit;