Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-blocks/assets/js/blocks/product-template/block.json

50 lines
1.1 KiB
JSON
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
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "woocommerce/product-template",
"title": "Product Template",
"category": "woocommerce",
"description": "Contains the block elements used to render a product.",
"keywords": [ "WooCommerce" ],
[Product Collection] Add unique ID attribute (#43314) * Add unique ID attribute to Product Collection block In this update, we introduced a unique identifier for each instance of the Product Collection block. This change involves several key modifications: 1. **Block JSON Update**: Added a new `id` attribute in `block.json` to store the unique identifier for each block instance. 2. **Product Collection Content Update**: In `product-collection-content.tsx`, we utilized the `uuid` library to generate a unique ID. This is done in a `useEffect` hook, ensuring that each block instance receives a distinct ID upon initialization. 3. **Type Definitions**: The `ProductCollectionAttributes` interface in `types.ts` was updated to include the new `id` attribute, aligning with our enhanced data structure. 4. **Package Dependencies**: To support this feature, `@types/uuid` and `uuid` were added to `package.json`, ensuring we have the necessary tools for ID generation. This enhancement is pivotal for uniquely identifying each Product Collection block, paving the way for more robust and individualized block handling in the future. * Rename uniqueId to id * Add lock file * Add 'id' context to product collection and template * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Merge trunk with 42861-introduce-a-unique-identifier-for-each-product-collection-block * Regenerate the lockfile * Remove autogenerated change in plugins/woocommerce/package.json * Regenerate lock file * Rerun CI actions * Delete pnpm-lock.yaml file & regenerate it using pnpm install command --------- Co-authored-by: github-actions <github-actions@github.com>
2024-01-18 10:00:57 +00:00
"textdomain": "woocommerce",
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
"usesContext": [
"queryId",
"query",
"queryContext",
"displayLayout",
Include the selected collection in the product collection block context (#43247) * Include collection attribute in the block context * add 'collection' to useContext for Product Template * Changelog --------- Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
2024-02-08 08:55:05 +00:00
"templateSlug",
Getting the Product Collection location/context (#43997) * Early implementation of getting the Product Collection location/context * Solve the problem of async fetch in the hook * Improve typing * Import core data store instead of hardcoding store name * Recognise Product Category and Product Tag * Remove attr property from archive location data * Unify states naming * Add TODO entry * Display the info about the location of Product Collection * Improve the typing * Recognise if Product Collection is nested in Single Product block * Improve cases descriptions and add some defaults to potentially undefined values * Change the taxonomies sourceData * Recognise Mini Cart as Cart context * Recognise attribute as archive contect but no taxonomy * Refactor the function into single useEffect and clean it up * Fix typo * Remove unnecessary import * Stop rendering the output in Editor (it was for demo purposes) * Pass location data to Product Template query in Editor * Replace templateSlugs literal strings with object reference * Rename parseResponse function to more specific name getIdFromResponse * Add dpeendency array to useEffect * Refactor templates detection * Use full taxonomy names instead of shortcuts * Write down scenarios to test * Working scenario * Change the verification way for more robust * Add more robust methods to include Single Product block * Add test Product Collection in Single Product block in a Single Product Template * Imprvoe the order of veryfing the requests * Fix linter issues. Although that makes code less readable * Improve the useGetLocation typing so it's more generic * Rework the E2E tests regarding location of Product Collection and limit their number * Bring back necessary eslint-disable * Remove unused imports * Uncomment line required for other tests * Add changelog * Rename constant from BLOCK_NAME to BLOCK_SLUG as it's a slug * Add a BLOCK_NAME constant and replace the literal block name usages in E2E tests * Fix post merge issues * Fix test after merge * Adjust the tests to kick off waiting for request before action that triggers them
2024-02-12 19:59:40 +00:00
"postId",
Product Collection: Make attributes available in rest_product_query hook (#44150) * Make attributes available in rest_product_query hook This commit introduces the 'includeInQueryContext' attribute to the 'woocommerce/product-collection' block and updates the 'woocommerce/product-template' block to consume this new attribute. Key Changes: 1. `woocommerce/product-collection` Block: - A new attribute 'includeInQueryContext' is added in `block.json`. This attribute is designed to hold a list of attribute names relevant for the query context. - The 'includeInQueryContext' attribute is included in the `providesContext` field to ensure its availability to child blocks. - In `constants.ts`, default values for 'includeInQueryContext' are defined, specifying 'collection' and 'id' as initial attributes. - The `types.ts` file is updated with a comment explaining the purpose of 'includeInQueryContext'. 2. `woocommerce/product-template` Block: - Modified `block.json` to utilize the 'includeInQueryContext' context provided by the parent `woocommerce/product-collection` block. - The `edit.tsx` file is updated to handle the new context. It uses a newly added utility function `useProductCollectionBlockAttributes` from `utils.tsx` to access parent block attributes. - The `utils.tsx` file is introduced, containing the `useProductCollectionBlockAttributes` hook. This hook is responsible for finding the parent 'woocommerce/product-collection' block and returning its attributes. - Within `edit.tsx`, logic is added to create a query context object based on the attributes specified in 'includeInQueryContext', enhancing the block's ability to dynamically adapt to changes. * Remove commented code * Rename query context attribute and optimize parent block detection This commit introduces two significant changes aimed at improving code readability and efficiency. 1. **Renaming of Query Context Attribute:** - The attribute `includeInQueryContext` has been renamed to `queryContextIncludes` across various files, including block JSON configurations and TypeScript definitions. This change makes the attribute's purpose more intuitive, indicating it specifies which attributes to include in the query context. 2. **Optimized Parent Block Detection:** - Replaced the use of `getBlockParents` with `getBlockParentsByBlockName` in utility functions to find the closest Product Collection block. This optimization allows for a more direct and efficient way to identify the relevant parent block by specifying the block name, reducing unnecessary iterations and improving code performance. * Streamline query context construction in product template Key Changes: - **Introduction of `useProductCollectionQueryContext` Hook:** This new hook takes the `clientId` and `queryContextIncludes` as inputs and returns a query context object. It encapsulates the logic for fetching parent product collection block attributes and constructing the query context accordingly. This abstraction simplifies the edit component's logic, focusing on the essentials and improving code readability. - **Optimization of Parent Block Detection:** The hook uses `getBlockParentsByBlockName` to accurately and efficiently find the closest parent `Product Collection` block, minimizing the overhead previously associated with traversing the block hierarchy. * Always include `collection` and `id` in query context * Minor refactor * Enhance query context handling for more maintainable code - Introduced `DEFAULT_QUERY_CONTEXT_ATTRIBUTES` in `edit.tsx` to maintain a clear list of default query context attributes. - Modified `ProductTemplateEdit` to automatically include these default attributes in `queryContextIncludes`, ensuring they are always part of the query context without manual initialization. - Simplified `useProductCollectionQueryContext` in `utils.tsx` by removing static initialization of 'collection' and 'id', relying instead on the dynamic addition of necessary attributes from `queryContextIncludes`. This refactor enhances the maintainability and clarity of the code, ensuring a solid foundation for future enhancements and features. * Add E2E tests for Product Collection query context - Added a new test suite 'Query Context in Editor' to validate the correctness of query context parameters when the Product Collection block is used. This suite ensures that: - For the 'Product Catalog', only the ID is sent in the query context, confirming that collection-specific parameters are excluded when not relevant. - For collections such as 'On Sale', the collection name is correctly passed in the query context, validating that the block dynamically adjusts query parameters based on its settings. - Introduced a new utility method `setupAndFetchQueryContextURL` in `product-collection.page.ts`. This method automates the setup of a post with the Product Collection block and fetches the URL with query context parameters, facilitating the validation of query context handling. * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Fix edge case when `queryContextIncludes` is not defined - Initializing `queryContextIncludes` with a default empty array directly in the destructuring assignment of the component's props. This approach ensures that `queryContextIncludes` is always an array, simplifying downstream logic. - Creating a new constant `queryContextIncludesWithDefaults` to hold the combination of `queryContextIncludes` and `DEFAULT_QUERY_CONTEXT_ATTRIBUTES`. This step avoids directly mutating the `queryContextIncludes` prop, aligning with best practices for functional purity and making the code easier to understand and debug. - Updating the `useProductCollectionQueryContext` hook call to use `queryContextIncludesWithDefaults`. This ensures that the default query context attributes are consistently included without altering the original prop. These adjustments not only enhance the code's maintainability but also ensure more predictable behavior by avoiding side effects related to parameter mutation. --------- Co-authored-by: github-actions <github-actions@github.com>
2024-02-12 08:45:24 +00:00
"queryContextIncludes",
Product Collection: Implement Preview Mode (#46369) * POC: Preview Mode using HOC * Add explanation as comments POC: Implement preview mode for Product Collection block in editor - Added extensive commentary to clarify the mechanism and usage of the `handlePreviewState` function - Implemented an internal state within `ProductCollectionContent` to manage preview status and messages, serving as a foundational example of how preview mode can enrich block functionality. - Showcased the application of `handlePreviewState` by incorporating it as a prop in `BlockEdit`, illustrating the potential for extending the block's capabilities for dynamic and interactive previews. This POC demonstrates a flexible approach to managing preview states within the editor, paving the way for further development and integration based on feedback and use-case analysis. * Refactor preview state handling and collection registration This commit introduces a centralized approach for registering product collection variations and managing their preview states. It abstracts the registration logic into a dedicated function and enhances the flexibility of preview state handling across different collection types. * Rename file * Minor improvements * Don't pass previewState to handlePreviewState I don't see any good use of it in handlePreviewState. Also, We will be going to call handlePreviewState only once therefore, it will always have the same value as the initial value of the previewState. If in future, we decide to run it multiple times then we can pass the previewState as an argument to handlePreviewState. * Add comment * Use JS closure to inject handlePreviewState This commit introduces a refined approach for injecting the `handlePreviewState` function into product collection blocks, utilizing JavaScript closures to streamline the process. This method replaces the previous global registry mechanism, offering a more direct and efficient way to manage preview states. Advantages of This Approach: - Utilizing JavaScript closures for injecting `handlePreviewState` simplifies the overall architecture by directly modifying block edit components without relying on an external registry. This method enhances code clarity and reduces the cognitive load for developers. - The conditional application of `withHandlePreviewState` ensures that the preview state handling logic is only added to blocks that require it, optimizing performance and maintainability. * Refactor preview state management into custom hook This commit enhances the organization and readability of the product collection content component by abstracting the preview state management into a custom hook named `usePreviewState`. This change streamlines the component's structure and aligns with React best practices for managing state and side effects. Key Changes: - Introduced `usePreviewState`, a custom hook responsible for initializing and managing the preview state (`isPreview` and `previewMessage`) of the product collection block. This hook encapsulates the state logic and its side effects, including the conditional invocation of `handlePreviewState`. - Modified `ProductCollectionContent` to utilize `usePreviewState` for handling its preview state. This adjustment makes the component cleaner and focuses it more on presentation and behavior rather than state management details. * Replace useEffect with useLayoutEffect * Add cleanup function in handlePreviewState function Based on [this discussion](https://github.com/woocommerce/woocommerce/pull/45703#discussion_r1535323883), I added a cleanup function support for handlePreviewState. `handlePreviewState` can return a function which will be called on cleanup in `useLayoutEffect` hook. * Fetching random products in Preview mode * Allow collection to set initial preview state * Pass location & all attributes to handlePreviewState function * Handling collection specific query for preview mode - Consolidated `handlePreviewState` and `initialPreviewState` into a single `preview` prop in `register-product-collection.tsx` and `product-collection-content.tsx` to streamline prop passing and improve the component interface. - Updated the `queryContextIncludes` in `constants.ts` to include 'previewState' - Enhanced the `ProductCollection` PHP class to handle preview-specific queries more effectively, introducing a new method `get_preview_query_args` that adjusts query parameters based on the collection being previewed, thereby improving the relevance and accuracy of products displayed in preview mode. * Always set initialPreviewState on load * Refine preview state handling - Renamed `HandlePreviewStateArgs` to `SetPreviewStateArgs` in `featured.tsx` to better reflect its purpose, which is now more focused on setting rather than handling states. The implementation details within `featured.tsx` have also been refined to include async operations and cleanup functions, demonstrating a more sophisticated approach to managing state. Overall, these updates make the preview state logic more understandable and maintainable. * Rename "initialState" to "initialPreviewState" * Fix: Correct merging of newPreviewState into previewState attribute This commit addresses an issue in the product-collection-content.tsx where the newPreviewState was not properly merged into the existing previewState attribute. Previously, the spread operator was incorrectly applied, leading to potential loss of existing state attributes. By changing the order of operations and correctly spreading the existing attributes before merging the newPreviewState, we ensure that all state attributes are preserved and updated correctly. * Initial refactor POC code to productionize it * Move `useSetPreviewState` to Utils * Implement preview mode for Generic archive templates Implemented a new useLayoutEffect in `utils.tsx` to dynamically set a preview message in the editor for product collection blocks located in generic archive templates (like Products by Category, Products by Tag, or Products by Attribute). * Remove preview mode from Featured and On sale collection * Remove preview query modfication for On Sale collection * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix: hide/show preview label based on value of "inherit" If user change the toggle "Sync with current query", then it should reflect for the preview label as well. - If the toggle is on, then the preview label should be shown. - If the toggle is off, then the preview label should be hidden. * Minor improvements * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Refactor: Simplify SetPreviewState type definition in types.ts This commit refines the SetPreviewState type definition by eliminating the previously used intermediate interface, SetPreviewStateArgs. The change streamlines the type definition directly within the SetPreviewState type, enhancing readability and reducing redundancy. * Update import syntax for ElementType in register-product-collection.tsx This commit updates the import statement for `ElementType` from `@wordpress/element` to use the more modern and concise `import type` syntax. This change does not affect functionality but aligns with TypeScript best practices for importing types, ensuring that type imports are distinguished from regular imports. This helps in clarity and in optimizing the build process by explicitly indicating that `ElementType` is used solely for type checking and not included in the JavaScript runtime. * Refactor: Update TypeScript usage in Product Collection This commit introduces several TypeScript refinements across product-collection components: 1. **DEFAULT_ATTRIBUTES** in `constants.ts` now uses `Pick` to explicitly define its shape, ensuring only relevant attributes are included and typed accurately. 2. **ProductCollectionAdvancedInspectorControls** and **ToolbarControls** in the `edit` subdirectory now use `Omit` to exclude the 'preview' property from props, clarifying the intended prop usage and improving type safety. These changes collectively tighten the type definitions and improve the codebase's adherence to best practices in TypeScript. * Refactor: Update dependencies of useSetPreviewState hook in utils.tsx This change enhances the stability and predictability of the hook's behavior, ensuring it updates its internal state accurately when its dependencies change, thus aligning with best practices in React development. * Refactor preview button CSS and conditional rendering 1. **CSS Refactoring:** Moved the positioning styles of the `.wc-block-product-collection__preview-button` from inline styles in the JSX to the `editor.scss` file. This separation of concerns improves maintainability and readability, aligning the styling responsibilities solely within the CSS file. 2. **Conditional Rendering Logic:** Updated the rendering condition for the preview button. Now, it not only checks if `isPreview` is true but also if the block is currently selected (`props.isSelected`). This prevents the preview button from appearing when the block is not actively selected, reducing visual clutter and enhancing the user experience in the editor. * Enhance: Update preview button visibility logic in ProductCollectionContent This commit enhances the visibility logic of the preview button in the `ProductCollectionContent` component: 1. **Added `isSelectedOrInnerBlockSelected`:** Introduced a new `useSelect` hook to determine if the current block or any of its inner blocks are selected. This ensures that the preview button is visible when either the product collection block or any of its inner blocks are selected. 2. **Updated Conditional Rendering:** Adjusted the conditional rendering of the preview button to use the new `isSelectedOrInnerBlockSelected` value, providing a more intuitive user experience by ensuring the preview button remains visible when any relevant block is selected. * use __private prefix with attribute name * Add E2E tests for Preview Mode 1. **Template-Specific Tests:** Each template (tag, category, attribute) undergoes a test to ensure the preview button behaves as expected when replacing products with product collections in these contexts. 2. **Visibility Checks:** The tests verify that the preview button is visible when the block or its inner blocks are selected and hidden when the block is not selected. This helps confirm the correct implementation of the preview button visibility logic across different use cases. 3. **Interaction with Inner Blocks:** Additional checks are included to ensure the preview button's visibility toggles appropriately when interacting with inner blocks, reinforcing the dynamic nature of block selection and its effect on UI elements within the editor. * Add setPreviewState to dependencies * Add data-test-id to Preview button and update e2e locator Modifications: - Added `data-test-id="product-collection-preview-button"` to the Preview button in `product-collection-content.tsx`. - Updated the corresponding e2e test locator in `product-collection.block_theme.side_effects.spec.ts` to use the new `data-test-id` instead of the class name. By using `data-test-id`, we ensure that the e2e tests are not affected by changes in the styling or restructuring of the DOM that might alter CSS classes but do not affect functionality. * Enhance: Localize preview message in useSetPreviewState hook * Don't show shadow & outline on focus * Make preview button font same as Admin * Fix SCSS lint errors * Add missing await keyword --------- Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 07:48:43 +00:00
"collection",
"__privateProductCollectionPreviewState"
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
],
"supports": {
"inserter": false,
"reusable": false,
"html": false,
"align": [ "wide", "full" ],
"anchor": true,
"color": {
"gradients": true,
"link": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
}
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
}
}
}