woocommerce/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx

282 lines
6.9 KiB
TypeScript
Raw Normal View History

Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) * Add Products Collection block scaffolding This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend. * Add Product Template block and integrate with Products Collection block This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include: - Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files. - Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files. - Updates to the webpack-entries.js file to include the new Product Template block. - Addition of the ProductTemplate class in the src/BlockTypes directory. - Inclusion of the ProductTemplate class in the src/BlockTypesController.php file. * Enhance product-template block with context and styling This commit adds various enhancements to the product-template block. It includes: - Introduce `usesContext` and `supports` properties to the block.json file - Update the edit.tsx file to use BlockContextProvider and add query logic - Add an editor.scss file for styling the product-template block in the editor - Extend the products-collection block.json file with new properties - Modify the products-collection edit.tsx file to include instanceId and useEffect These changes improve the product-template block by providing better context handling and styling options. * Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor. * Add product title and summary variations for Products Collection block - Add default spacing between product elements in `style.scss` - Register product title and summary element variations in `products-collection` block - Create utility for registering element variations - Extend core elements with WooCommerce namespace * Set inherit to false by default and other improvements This commit introduces several changes to the ProductsCollection block: 1. Set the "inherit" property to false in block.json, disabling inheritance by default. 2. Remove the default styles for inner blocks in the edit.tsx file. 3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block. 4. Update the ProductTemplate.php file to properly render the block content based on the changes. 5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary. These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior. * Fix pagination issue * Minor code quality improvments * Register product blocks only in experimental builds - Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds. - Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page. * Add experimental flag to PHP file * Update documentation for feature flags - Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file. - Include references to PHP and webpack flags for both blocks. * Change default order and orderBy values in block.json - Update the default 'order' value from 'desc' to 'asc'. - Update the default 'orderBy' value from 'date' to 'title'. * Refactor experimental block registration and remove unused file - Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx. - Remove unused file types.ts in product-template directory. - Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null. * Update variation names in product summary and product title elements Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block. * Rename 'Products Collection' to 'Product Collection' - Renamed all instances of "products-collection" to "product-collection" across multiple files. - Adjusted related types and method calls to match the new naming convention. - Updated documentation and feature flags to reflect the name change. - Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`. * Hide product-template block from inserter - Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`. - Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component. * Fix Eslint error
2023-05-15 08:51:49 +00:00
/* eslint-disable @typescript-eslint/naming-convention */
/**
* External dependencies
*/
import classnames from 'classnames';
import { memo, useMemo, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import {
BlockContextProvider,
__experimentalUseBlockPreview as useBlockPreview,
useBlockProps,
useInnerBlocksProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { Spinner } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import type { BlockEditProps } from '@wordpress/blocks';
import { ProductCollectionAttributes } from '@woocommerce/blocks/product-collection/types';
import { getSettingWithCoercion } from '@woocommerce/settings';
import { isNumber } from '@woocommerce/types';
Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) * Add Products Collection block scaffolding This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend. * Add Product Template block and integrate with Products Collection block This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include: - Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files. - Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files. - Updates to the webpack-entries.js file to include the new Product Template block. - Addition of the ProductTemplate class in the src/BlockTypes directory. - Inclusion of the ProductTemplate class in the src/BlockTypesController.php file. * Enhance product-template block with context and styling This commit adds various enhancements to the product-template block. It includes: - Introduce `usesContext` and `supports` properties to the block.json file - Update the edit.tsx file to use BlockContextProvider and add query logic - Add an editor.scss file for styling the product-template block in the editor - Extend the products-collection block.json file with new properties - Modify the products-collection edit.tsx file to include instanceId and useEffect These changes improve the product-template block by providing better context handling and styling options. * Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor. * Add product title and summary variations for Products Collection block - Add default spacing between product elements in `style.scss` - Register product title and summary element variations in `products-collection` block - Create utility for registering element variations - Extend core elements with WooCommerce namespace * Set inherit to false by default and other improvements This commit introduces several changes to the ProductsCollection block: 1. Set the "inherit" property to false in block.json, disabling inheritance by default. 2. Remove the default styles for inner blocks in the edit.tsx file. 3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block. 4. Update the ProductTemplate.php file to properly render the block content based on the changes. 5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary. These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior. * Fix pagination issue * Minor code quality improvments * Register product blocks only in experimental builds - Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds. - Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page. * Add experimental flag to PHP file * Update documentation for feature flags - Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file. - Include references to PHP and webpack flags for both blocks. * Change default order and orderBy values in block.json - Update the default 'order' value from 'desc' to 'asc'. - Update the default 'orderBy' value from 'date' to 'title'. * Refactor experimental block registration and remove unused file - Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx. - Remove unused file types.ts in product-template directory. - Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null. * Update variation names in product summary and product title elements Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block. * Rename 'Products Collection' to 'Product Collection' - Renamed all instances of "products-collection" to "product-collection" across multiple files. - Adjusted related types and method calls to match the new naming convention. - Updated documentation and feature flags to reflect the name change. - Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`. * Hide product-template block from inserter - Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`. - Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component. * Fix Eslint error
2023-05-15 08:51:49 +00:00
const ProductTemplateInnerBlocks = () => {
const innerBlocksProps = useInnerBlocksProps(
{ className: 'wc-block-product' },
{ __unstableDisableLayoutClassNames: true }
);
return <li { ...innerBlocksProps } />;
};
const ProductTemplateBlockPreview = ( {
blocks,
blockContextId,
isHidden,
setActiveBlockContextId,
}: {
blocks: object[];
blockContextId: string;
isHidden: boolean;
setActiveBlockContextId: ( blockContextId: string ) => void;
} ) => {
const blockPreviewProps = useBlockPreview( {
blocks,
props: {
className: 'wc-block-product',
},
} );
const handleOnClick = () => {
setActiveBlockContextId( blockContextId );
};
const style = {
display: isHidden ? 'none' : undefined,
};
return (
<li
{ ...blockPreviewProps }
tabIndex={ 0 }
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
role="button"
onClick={ handleOnClick }
onKeyPress={ handleOnClick }
style={ style }
/>
);
};
const MemoizedProductTemplateBlockPreview = memo( ProductTemplateBlockPreview );
const ProductTemplateEdit = ( {
clientId,
context: {
query: {
perPage,
offset = 0,
order,
orderBy,
author,
search,
exclude,
sticky,
inherit,
taxQuery,
parents,
pages,
...restQueryArgs
},
queryContext = [ { page: 1 } ],
templateSlug,
displayLayout: { type: layoutType, columns } = {
type: 'flex',
columns: 3,
},
},
__unstableLayoutClassNames,
}: BlockEditProps< {
clientId: string;
} > & {
context: ProductCollectionAttributes;
Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) * Add Products Collection block scaffolding This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend. * Add Product Template block and integrate with Products Collection block This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include: - Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files. - Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files. - Updates to the webpack-entries.js file to include the new Product Template block. - Addition of the ProductTemplate class in the src/BlockTypes directory. - Inclusion of the ProductTemplate class in the src/BlockTypesController.php file. * Enhance product-template block with context and styling This commit adds various enhancements to the product-template block. It includes: - Introduce `usesContext` and `supports` properties to the block.json file - Update the edit.tsx file to use BlockContextProvider and add query logic - Add an editor.scss file for styling the product-template block in the editor - Extend the products-collection block.json file with new properties - Modify the products-collection edit.tsx file to include instanceId and useEffect These changes improve the product-template block by providing better context handling and styling options. * Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor. * Add product title and summary variations for Products Collection block - Add default spacing between product elements in `style.scss` - Register product title and summary element variations in `products-collection` block - Create utility for registering element variations - Extend core elements with WooCommerce namespace * Set inherit to false by default and other improvements This commit introduces several changes to the ProductsCollection block: 1. Set the "inherit" property to false in block.json, disabling inheritance by default. 2. Remove the default styles for inner blocks in the edit.tsx file. 3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block. 4. Update the ProductTemplate.php file to properly render the block content based on the changes. 5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary. These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior. * Fix pagination issue * Minor code quality improvments * Register product blocks only in experimental builds - Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds. - Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page. * Add experimental flag to PHP file * Update documentation for feature flags - Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file. - Include references to PHP and webpack flags for both blocks. * Change default order and orderBy values in block.json - Update the default 'order' value from 'desc' to 'asc'. - Update the default 'orderBy' value from 'date' to 'title'. * Refactor experimental block registration and remove unused file - Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx. - Remove unused file types.ts in product-template directory. - Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null. * Update variation names in product summary and product title elements Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block. * Rename 'Products Collection' to 'Product Collection' - Renamed all instances of "products-collection" to "product-collection" across multiple files. - Adjusted related types and method calls to match the new naming convention. - Updated documentation and feature flags to reflect the name change. - Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`. * Hide product-template block from inserter - Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`. - Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component. * Fix Eslint error
2023-05-15 08:51:49 +00:00
__unstableLayoutClassNames: string;
} ) => {
const [ { page } ] = queryContext;
const [ activeBlockContextId, setActiveBlockContextId ] = useState();
const postType = 'product';
const loopShopPerPage = getSettingWithCoercion(
'loopShopPerPage',
12,
isNumber
);
Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) * Add Products Collection block scaffolding This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend. * Add Product Template block and integrate with Products Collection block This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include: - Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files. - Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files. - Updates to the webpack-entries.js file to include the new Product Template block. - Addition of the ProductTemplate class in the src/BlockTypes directory. - Inclusion of the ProductTemplate class in the src/BlockTypesController.php file. * Enhance product-template block with context and styling This commit adds various enhancements to the product-template block. It includes: - Introduce `usesContext` and `supports` properties to the block.json file - Update the edit.tsx file to use BlockContextProvider and add query logic - Add an editor.scss file for styling the product-template block in the editor - Extend the products-collection block.json file with new properties - Modify the products-collection edit.tsx file to include instanceId and useEffect These changes improve the product-template block by providing better context handling and styling options. * Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor. * Add product title and summary variations for Products Collection block - Add default spacing between product elements in `style.scss` - Register product title and summary element variations in `products-collection` block - Create utility for registering element variations - Extend core elements with WooCommerce namespace * Set inherit to false by default and other improvements This commit introduces several changes to the ProductsCollection block: 1. Set the "inherit" property to false in block.json, disabling inheritance by default. 2. Remove the default styles for inner blocks in the edit.tsx file. 3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block. 4. Update the ProductTemplate.php file to properly render the block content based on the changes. 5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary. These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior. * Fix pagination issue * Minor code quality improvments * Register product blocks only in experimental builds - Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds. - Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page. * Add experimental flag to PHP file * Update documentation for feature flags - Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file. - Include references to PHP and webpack flags for both blocks. * Change default order and orderBy values in block.json - Update the default 'order' value from 'desc' to 'asc'. - Update the default 'orderBy' value from 'date' to 'title'. * Refactor experimental block registration and remove unused file - Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx. - Remove unused file types.ts in product-template directory. - Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null. * Update variation names in product summary and product title elements Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block. * Rename 'Products Collection' to 'Product Collection' - Renamed all instances of "products-collection" to "product-collection" across multiple files. - Adjusted related types and method calls to match the new naming convention. - Updated documentation and feature flags to reflect the name change. - Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`. * Hide product-template block from inserter - Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`. - Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component. * Fix Eslint error
2023-05-15 08:51:49 +00:00
const { products, blocks } = useSelect(
( select ) => {
const { getEntityRecords, getTaxonomies } = select( coreStore );
const { getBlocks } = select( blockEditorStore );
const taxonomies = getTaxonomies( {
type: postType,
per_page: -1,
context: 'view',
} );
const templateCategory =
inherit &&
templateSlug?.startsWith( 'category-' ) &&
getEntityRecords( 'taxonomy', 'category', {
context: 'view',
per_page: 1,
_fields: [ 'id' ],
slug: templateSlug.replace( 'category-', '' ),
} );
const query: Record< string, unknown > = {
postType,
Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) * Add Products Collection block scaffolding This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend. * Add Product Template block and integrate with Products Collection block This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include: - Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files. - Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files. - Updates to the webpack-entries.js file to include the new Product Template block. - Addition of the ProductTemplate class in the src/BlockTypes directory. - Inclusion of the ProductTemplate class in the src/BlockTypesController.php file. * Enhance product-template block with context and styling This commit adds various enhancements to the product-template block. It includes: - Introduce `usesContext` and `supports` properties to the block.json file - Update the edit.tsx file to use BlockContextProvider and add query logic - Add an editor.scss file for styling the product-template block in the editor - Extend the products-collection block.json file with new properties - Modify the products-collection edit.tsx file to include instanceId and useEffect These changes improve the product-template block by providing better context handling and styling options. * Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor. * Add product title and summary variations for Products Collection block - Add default spacing between product elements in `style.scss` - Register product title and summary element variations in `products-collection` block - Create utility for registering element variations - Extend core elements with WooCommerce namespace * Set inherit to false by default and other improvements This commit introduces several changes to the ProductsCollection block: 1. Set the "inherit" property to false in block.json, disabling inheritance by default. 2. Remove the default styles for inner blocks in the edit.tsx file. 3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block. 4. Update the ProductTemplate.php file to properly render the block content based on the changes. 5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary. These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior. * Fix pagination issue * Minor code quality improvments * Register product blocks only in experimental builds - Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds. - Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page. * Add experimental flag to PHP file * Update documentation for feature flags - Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file. - Include references to PHP and webpack flags for both blocks. * Change default order and orderBy values in block.json - Update the default 'order' value from 'desc' to 'asc'. - Update the default 'orderBy' value from 'date' to 'title'. * Refactor experimental block registration and remove unused file - Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx. - Remove unused file types.ts in product-template directory. - Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null. * Update variation names in product summary and product title elements Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block. * Rename 'Products Collection' to 'Product Collection' - Renamed all instances of "products-collection" to "product-collection" across multiple files. - Adjusted related types and method calls to match the new naming convention. - Updated documentation and feature flags to reflect the name change. - Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`. * Hide product-template block from inserter - Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`. - Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component. * Fix Eslint error
2023-05-15 08:51:49 +00:00
offset: perPage ? perPage * ( page - 1 ) + offset : 0,
order,
orderby: orderBy,
};
// There is no need to build the taxQuery if we inherit.
if ( taxQuery && ! inherit ) {
// We have to build the tax query for the REST API and use as
// keys the taxonomies `rest_base` with the `term ids` as values.
const builtTaxQuery = Object.entries( taxQuery ).reduce(
( accumulator, [ taxonomySlug, terms ] ) => {
const taxonomy = taxonomies?.find(
( { slug } ) => slug === taxonomySlug
);
if ( taxonomy?.rest_base ) {
accumulator[ taxonomy?.rest_base ] = terms;
}
return accumulator;
},
{}
);
if ( !! Object.keys( builtTaxQuery ).length ) {
Object.assign( query, builtTaxQuery );
}
}
if ( perPage ) {
query.per_page = perPage;
}
if ( author ) {
query.author = author;
}
if ( search ) {
query.search = search;
}
if ( exclude?.length ) {
query.exclude = exclude;
}
if ( parents?.length ) {
query.parent = parents;
}
// If sticky is not set, it will return all products in the results.
// If sticky is set to `only`, it will limit the results to sticky products only.
// If it is anything else, it will exclude sticky products from results. For the record the value stored is `exclude`.
if ( sticky ) {
query.sticky = sticky === 'only';
}
// If `inherit` is truthy, adjust conditionally the query to create a better preview.
if ( inherit ) {
if ( templateCategory ) {
query.categories = templateCategory[ 0 ]?.id;
}
query.per_page = loopShopPerPage;
Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) * Add Products Collection block scaffolding This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend. * Add Product Template block and integrate with Products Collection block This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include: - Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files. - Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files. - Updates to the webpack-entries.js file to include the new Product Template block. - Addition of the ProductTemplate class in the src/BlockTypes directory. - Inclusion of the ProductTemplate class in the src/BlockTypesController.php file. * Enhance product-template block with context and styling This commit adds various enhancements to the product-template block. It includes: - Introduce `usesContext` and `supports` properties to the block.json file - Update the edit.tsx file to use BlockContextProvider and add query logic - Add an editor.scss file for styling the product-template block in the editor - Extend the products-collection block.json file with new properties - Modify the products-collection edit.tsx file to include instanceId and useEffect These changes improve the product-template block by providing better context handling and styling options. * Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor. * Add product title and summary variations for Products Collection block - Add default spacing between product elements in `style.scss` - Register product title and summary element variations in `products-collection` block - Create utility for registering element variations - Extend core elements with WooCommerce namespace * Set inherit to false by default and other improvements This commit introduces several changes to the ProductsCollection block: 1. Set the "inherit" property to false in block.json, disabling inheritance by default. 2. Remove the default styles for inner blocks in the edit.tsx file. 3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block. 4. Update the ProductTemplate.php file to properly render the block content based on the changes. 5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary. These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior. * Fix pagination issue * Minor code quality improvments * Register product blocks only in experimental builds - Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds. - Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page. * Add experimental flag to PHP file * Update documentation for feature flags - Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file. - Include references to PHP and webpack flags for both blocks. * Change default order and orderBy values in block.json - Update the default 'order' value from 'desc' to 'asc'. - Update the default 'orderBy' value from 'date' to 'title'. * Refactor experimental block registration and remove unused file - Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx. - Remove unused file types.ts in product-template directory. - Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null. * Update variation names in product summary and product title elements Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block. * Rename 'Products Collection' to 'Product Collection' - Renamed all instances of "products-collection" to "product-collection" across multiple files. - Adjusted related types and method calls to match the new naming convention. - Updated documentation and feature flags to reflect the name change. - Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`. * Hide product-template block from inserter - Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`. - Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component. * Fix Eslint error
2023-05-15 08:51:49 +00:00
}
return {
products: getEntityRecords( 'postType', postType, {
...query,
...restQueryArgs,
} ),
blocks: getBlocks( clientId ),
};
},
[
perPage,
page,
offset,
order,
orderBy,
clientId,
author,
search,
postType,
exclude,
sticky,
inherit,
templateSlug,
taxQuery,
parents,
restQueryArgs,
]
);
const blockContexts = useMemo(
() =>
products?.map( ( product ) => ( {
postType: product.type,
postId: product.id,
} ) ),
[ products ]
);
const hasLayoutFlex = layoutType === 'flex' && columns > 1;
const blockProps = useBlockProps( {
className: classnames(
__unstableLayoutClassNames,
'wc-block-product-template',
{
'is-flex-container': hasLayoutFlex,
[ `columns-${ columns }` ]: hasLayoutFlex,
}
),
} );
if ( ! products ) {
return (
<p { ...blockProps }>
<Spinner />
</p>
);
}
if ( ! products.length ) {
return (
<p { ...blockProps }>
{ ' ' }
{ __( 'No results found.', 'woo-gutenberg-products-block' ) }
</p>
);
}
// To avoid flicker when switching active block contexts, a preview is rendered
// for each block context, but the preview for the active block context is hidden.
// This ensures that when it is displayed again, the cached rendering of the
// block preview is used, instead of having to re-render the preview from scratch.
return (
<ul { ...blockProps }>
{ blockContexts &&
blockContexts.map( ( blockContext ) => (
<BlockContextProvider
key={ blockContext.postId }
value={ blockContext }
>
{ blockContext.postId ===
( activeBlockContextId ||
blockContexts[ 0 ]?.postId ) ? (
<ProductTemplateInnerBlocks />
) : null }
<MemoizedProductTemplateBlockPreview
blocks={ blocks }
blockContextId={ blockContext.postId }
setActiveBlockContextId={ setActiveBlockContextId }
isHidden={
blockContext.postId ===
( activeBlockContextId ||
blockContexts[ 0 ]?.postId )
}
/>
</BlockContextProvider>
) ) }
</ul>
);
};
export default ProductTemplateEdit;