* Add Toggle to inspector controls allowing shrinking number of columns
* Add logic to allow columns to shrink in Product Collection
* Rename SCSS variable
* Make sure the value provided to component is a boolean
* Rename onChange callback name to better reflect its purpose
* Add slide animation
* Remove placeholder and pagination (https://github.com/woocommerce/woocommerce-blocks/pull/11145)
* Add titles to patterns and set the aligment to Wide
* Replace product query patterns with product collection ones
* Remove pagination and no results query from product query patterns
* Add aspect ratio to the product image attributes
* Add portrait aspect ratio to product X column and product gallery patterns
* improve animation
* improve naming
* fix regression
* fix css
* improve code style
* remove check on tag image
* align image
* fix crash when zoom is disabled
* fix E2E tests
* improve CSS
---------
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
* Add transforms for checkout block
* Block to shortcode switcher in notice
* cart transforms
* Fix target block for switching
* Remove switcher UI for classic cart/checkout
* Set isPreview when generating block preview in switcher
* Onboarding task
* Action on click
* Focus on block after replacement
* Update notice styling and wording
* Undo functionality
* Look for woocommerce/classic-shortcode when determining if task list item should display
* Enable focus on the cart/checkout block when visiting from the task list
* Classic Cart/Checkout Updated Title
* Add missing translations
* Refactor modal content to avoid sprintf
* Improve pickBlockClientId
* Tracks events for switching to classic shortcode block
* TaskList support for non-block themes
* Updated placeholder to work on non-white page backgrounds
* Find blocks using findBlock utility
* Add TabbableContainer for buttons
* Add align to wrapper
* Update modal content
* Update modal usage
* Removed undo link when converting from classic shortcode
* Check if block was selected
* Revert "Removed undo link when converting from classic shortcode"
This reverts commit 2babbab4c1e69861a0371ff745e85d80ff6bbab1.
* update snackbar text
* Remove block level options in favour of settings
* Remove calculator toggle test
* Update assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Remove unused attributes
---------
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
This commit addresses an issue where layout attributes could become undefined during the block migration process. Alongside this fix, several updates were made to align the migration logic with the new `ProductCollectionDisplayLayout` types:
- Added logic to handle `undefined` layout attributes, defaulting to `DEFAULT_ATTRIBUTES.displayLayout`.
- Removed `ProductGridLayout` and `ProductGridLayoutTypes` from the types file.
- Imported `LayoutOptions` and `ProductCollectionDisplayLayout` from the product-collection module.
- Updated the `mapLayoutType` and `mapLayoutPropertiesFrom...` functions to use the new layout types.
- Updated transformation functions like `transformProductTemplate` and `transformPostSummary` to use the new types.
These changes not only resolve the issue with undefined layout attributes but also align the codebase with the new layout options, enhancing code maintainability.
* Adkust text of sidebar notice
* Adjust text of sidebar notice
* Rename folder to “incompatible-extension-notice”
* Rename main component and interface
* Rename constants
* Add new files for splitting logic
* WIP: Semi-hardcoded solution
* WIP: Add new data store
* Fetch incompatible extensions dynamically
* Fix broken dismiss notice functionality
* Minor refactor
* Remove data store
* Remove console.log
* Remove obsolete data store fragment
* Update package-lock.json and composer.lock
* Change wording from “might be” to “may be”
* Show single incompatible extension within notice instead of as list
* Fix *.md linting error
* Remove data attributes from being saved in html of All products block
* added old save in deprecated
* Addressed review comments
---------
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Roy Ho <roykho77@gmail.com>
* Product Gallery: Fix conflicts between block settings and CSS
* Product Gallery: Final CSS polishes
* Product Gallery: Minor CSS refactor
* Product Gallery: Revert the minor css refactor
* add custom class on the main div
* Product Gallery: Combine inner block styles and optimize them
* Product Gallery Inner Blocks: Remove imports to no longer existing stylesheet files
* Product Gallery: Change all references from wp-block to wc-block
* Product Gallery Inner Blocks: Remove loading of non-existent inner blocks stylesheet files
* Product Gallery: Add additional class to ensure correct width for single product gallery despite of the Next/Previous mode selected
* Product Gallery: Add final polishing
* fix zoom
* Product Gallery Thumbnails: Fix css
* Product Gallery Large Image Next Previous Buttons: Skip failing tests
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Upgrade terser-webpack-plugin to version 4.2.3
* Upgrade webpack-bundle-analyzer to 4.7.0
* Upgrade to Webpack version 5
* Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0
* Upgrade dependency copy-webpack-plugin to version 11.0.0
* Upgrade dependency terser-webpack-plugin to version 5.3.6
* Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin
* Replace module.issuer with the new ModuleGraph API
There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one.
* Upgrade babel and babel plugins to latest version
* Replace jsonpFunction with the new uniqueName property
Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''.
* Replace cacheDirectory inline configuration with options.cacheDirectory
* Upgrade @wordpress/e2e-tests dependency to version 5.6.0
* Remove babel-plugin-transform-react-jsx dependency
Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default
* Remove unnecessary Babel dependencies
Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package.
* Upgrade puppeteer dependency to version 16.2.0
* Remove caret from package.json dependencies
* Fix Storybook build error
This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5.
* Fix package-lock.json after merging with trunk
* Add own webpack-rtl-plugin implementation to the project
Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that.
This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support)
* Change conditional clause to be multiline
* Fix package-lock.json after merge with trunk
* Fix package-lock.json after merge with trunk
* Rename files to fix ESLint errors
This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code.
* Fix package-lock.json file
* Add is-plain-obj module to the transformIgnorePatterns of jest config
* Update package-lock.json
* Fix package-lock.json
* Upgrade @wordpress/i18n dependency to version 4.31.0
* Update package-lock.json
* Update composer lock file
* Fix Webpack config for Webpack 5
* Add the package-lock.json
* Remove unsupported config from webpack
* Fix error with Webpack build
* Add wait for network idle to the tests
* Attempt to fix e2e test
* Restore promise.all
* Upgrade puppeteer to v17.1.3
* Upgrade expect-puppeteer
* Update expect-puppeteer
* Downgrade expect-puppeteer
* Revert "Upgrade puppeteer to v17.1.3"
This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3.
* Upgrade Puppeteer to version 17.1.3
* Fix executionContext.frame is not a function error
* Fix e2e tests
* Remove isExperimentalBuild from Product Gallery inner blocks
* Upgrade Webpack and Webpack-cli to latest version
* Upgrade postcss and mini-css plugins
* Fix error with mini-cart block
* Fix styling error with filter blocks
* Fix issue when running unit tests
* Fix storybook script not loading
* Fix a11y issue in Storybook
* Fix error when multiple isExperimentalBuild was being used
* Prevent error when layout is not present in the attributes object
* Update `chunkIds` to `named` in Webpack
* Add cache groups to the Webpack configs
* Main block types for confirmation
* Initial blocks
* Styling and placeholders
* Make blocks experimental
* Update summary icon
* Add name/description for status block and missing text descriptions in the block.
Closeswoocommerce/woocommerce-blocks#10057
* Order confirmation: Convert Order Details Templates to Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10095)
* Move code from templates into the details block
* Details -> Totals
* Downloads block
* Sample content for downloads block
* Add block icon
* Add conversion template (https://github.com/woocommerce/woocommerce-blocks/pull/10077)
* Update inner block name
* Add default title constant
* Revert "Add default title constant"
This reverts commit 1dd3bbfecc1be83c367b1ab064f5032ea58cb678.
* Add global styles for order confirmation status block (https://github.com/woocommerce/woocommerce-blocks/pull/10164)
* Implement style controls
* Prevent link color spilling over onto wrapper
* Add styles and remove class names
* Remove __experimentalWritingMode
* Add global styles for order confirmation summary block (https://github.com/woocommerce/woocommerce-blocks/pull/10179)
* Styles for summary
* Remove __experimentalWritingMode
* Add table styles for order details (https://github.com/woocommerce/woocommerce-blocks/pull/10185)
* Add table styles for order details
* __experimentalFontWeight
* Add link styles
* Handle preview link styles
* Unauthenticated views for Order Confirmation template (https://github.com/woocommerce/woocommerce-blocks/pull/10414)
* Different views by permission
* check user id matches when logged out
* Add order confirmation wrapper block (https://github.com/woocommerce/woocommerce-blocks/pull/10286)
* Add a heading wrapper block
* Register the BillingWrapper Block server side
* Fix exception 'render_content' error
* Add the Billing Wrapper Block to the template
* Fix wrong block name error
* Fix php error
* Conditionally render Billing Address within the Wrapper
* Fix parent rendering
* Clean up code (remove billing address from the template)
* Update titles, descriptions, and icons of the billing Block and inner block
* Fix broken block by removing the "parent" keyword
* Use a user-friendly title and description for the Billing Wrapper
* Update Billing Wrapper Block's title case
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Fix PHP failing unit test
---------
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Remove "thanks" for authenticated page
* Introduce shipping wrapper based on billing wrapper
Closeswoocommerce/woocommerce-blocks#10053
* Order confirmation block: Verify email address for guest customers (https://github.com/woocommerce/woocommerce-blocks/pull/10567)
* Add verify step for guest orders
* Render content to pass through block content
* Revert package changes
* Customer orders cannot use email to verify
* Add style controls for order shipping and billing address blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10633)
* Order confirmation block styling (https://github.com/woocommerce/woocommerce-blocks/pull/10780)
* Add missing heading to order details
* Summary block spacing
* Update css variables
* table styles
* Inherit border styles for cells
* Alignment and address styles
* Add downloads wrapper
* Style controls
* Fix typo
* Update Download Wrapper's Icon
* Fix TS error
* Disable Download Block's server side rendering in the editor
This fixes the loading after each style change from the style controls
* Clean up Downloads render functions
* Fix client side Downloads Block's table border
* Download + Total wrappers and tables styling
* small screen
* Remove server side render for previews
---------
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Shorten template description
* Update test address data
* Avoid leaking order key in permission form
* Remove todo
* Make email form required.
* Remove edit page link
* Remove empty columns from address wrapper
* Remove IIFE
* typo
* Update description to mention billing
* Adjust link scss
* Fix wrapper markup and spacing controls
* Add link preview in editor
* Add initial E2E setup for the Order Confirmation Block (https://github.com/woocommerce/woocommerce-blocks/pull/10840)
* Fix WC_DateTime check
* Move form outside of block markup
* Add additional information block (https://github.com/woocommerce/woocommerce-blocks/pull/10842)
* Add block which contains hooks
* Use skeleton for placeholder instead of illustration
* Remove duplicate methods
* Remove duplicate align tag
* Update meta styles
* Tests for order confirmation conditional blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10972)
* Add tests for conditional blocks
* Move setup into test
* Add E2E to the the Order Confirmation Block (https://github.com/woocommerce/woocommerce-blocks/pull/10863)
* Add editor util functions
* Update editor template E2E test
* Add the "exact" property for consistency
* Skip test
Can't get the element in the page. More investigation needed! Skipping
for now.
* Fix "transformIntoBlocks" logic
* Add tests for logged in user
* Fix "beforeAll" config
* Confirm downloads section is visible when logged in
* Create "verifyOrderConfirmationDetails" util function
* Add logged in test case
* Add Guest user test case
* Fix editor e2e testing
* Apply a proper teardown
* Fix failing tests after logout
* Ensure we are logged in before visiting the editor
* Ensure to have shipping selected
* Wait for changes to be saved on the editor
* Ensure shipping options is selected
* Remove comment
* Ensure we are logged in before going to the admin page
* Mark the Order Confirmation as a side effect test
* OrderConfirmation blocks are not experimental
* resolve merge conflict
* Revert package lock changes
* Fix enqueue_assets
* Fix CSS 404s
* Make template tests more robust
* Fix page URL for default confirmation page
* Try afterEach to log back in
* Skip guest/logout use cases
Login out causes other tests to fail. We will implement these case when
the multiple sign in roles are introduced in the codebase.
* Remove tests requiring login out & add comments
* Remove unused util functions
* Hide confirmation blocks from post editor
---------
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Rename checkout template slug
* Remove redirect and custom title
* Classic shortcode block for checkout
* Empty title
* WIP placeholder
* Change blockified template
* Prefix cart and checkout templates with "Page: "
* Template migration routine
* Apply same treatment to cart template
* Notices
* Update placeholder text
* Classic shortcodes block
* Page content wrapper for templates
* Update default
* Do not save attributes
* Update templates
* Remove cart classic template
* Reverted endpoints for Cart & Checkout templates. This reverts PR 9406
* Migrate page content wrapper.
* Removed useless method arg. Minor tweaks.
* Skip migration if the theme has a template file for this page.
* Removed impossible condition.
* Migrate page content wrapper.
* Remove TemplateNotice in favour of DefaultNotice
* Documentation links in shortcode placeholder
* Hide cart and checkout page selector when using block themes
* Unused var
* Add tests for template changes
* Revert changes to classic-template
* Allow frontend redirect
* Unused file
* Bump version for updater
* Support x template naming as well as page-x
* Need to add item to cart to test checkout
* Fix header test by fixing utility for adding to cart
* Remove permalink tests
* Click body
* Wait for content to finish loading
* Wait for add to cart response when adding to cart without item name
* Wait for save before visiting frontend
* Set content instead of inserting block
* Perform test in site editor rather than page editor
* Prevent notice to set the default cart/checkout page from showing on the site editor.
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
In this update, the layout options for the Product Collection block are transferred from the Toolbar to the Inspector controls. Below is the breakdown of the changes:
1. **Constants Update**
- `LayoutOptions` enumeration has been imported into `constants.ts`, facilitating a more structured approach to managing layout types (grid and stack).
- The default display layout type has been updated from 'flex' to reference `LayoutOptions.GRID`.
- The `getDefaultQuery` function now uses the `getDefaultValueOfInheritQueryFromTemplate` utility to set the default `inherit` value. (This is mainly done to fix a bug)
2. **Display Layout Control Removal**
- The `display-layout-control.tsx` file has been removed, discontinuing the previous method of layout management.
3. **New Layout Options Control**
- A new component `LayoutOptionsControl` has been introduced in the `layout-options-control.tsx` file, utilizing the experimental `ToggleGroupControl` and `ToggleGroupControlOption` components from the WordPress package to provide a more intuitive layout selection experience.
- The `types.ts` file has been updated to define the `LayoutOptions` enum, effectively mapping 'flex' to 'GRID' and 'list' to 'STACK'.
4. **Inspector Controls Update**
- In `inspector-controls/index.tsx`, the obsolete `DisplayLayoutControl` has been replaced with the new `LayoutOptionsControl`, integrating it into the `ProductCollectionInspectorControls` component.
- The `BlockControls` wrapper has been removed, and layout options have been relocated to the Inspector controls, presented as a toggle group within the ToolsPanel.
5. **Inherit Query Control Modification**
- The `inherit-query-control.tsx` file sees a change in the reset value for the `inherit` query attribute to employ a default value which fix one bug.
These changes aim to streamline the user experience by relocating the layout options from the Toolbar to the Inspector controls, offering a centralized location for block settings. Leveraging an enum for layout options fosters code readability and maintainability.
Do note that the update uses experimental components, hence it would be prudent to keep an eye on potential alterations or deprecations in upcoming WordPress releases.
* Enable Product Collection patterns in inserter and kick off the layout control button
* Add Choose Pattern button
* Move Toolbar settings to related directory
* Display Pattern Selection modal with available patterns after clicking the button
* Make Pattern Chooser always visible
Patterns can be changed no matter if the Inherit Query from Template option in enabled or not
* Add pattern replacement mechanism
* Switch from Gutenberg styles to internal ones
* Fix "On sale" badge class for shop
* Add class to sale badge
* Move the thumbnails featching logic to an utils file. Add context directive with thumbnails data to the Product Gallery block. Add on-click directives to the Thumbnails block
* Product Gallery Thumbnails: Remove the legacy thumbnail markup
* Product Gallery Thumbnails: Add Large Image replacing
* update the main image when the thumbnail is clicked
* add E2E tests
* fix typo
* fix warning on the frontend
* address feedback
* update E2E test
* improve comment
* fix indentation
* improve E2E test
* improve flaky test
* improve E2E test
* improve comments
* improve E2E test
* try now
* add comment
* skip test
* reset script
* update todo comment
---------
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Co-authored-by: Luigi <gigitux@gmail.com>
* Fix "On sale" badge class for shop
* Add class to sale badge
* Apply styleProps.styles to elements using them
* Product Gallery: Lock the Sale Badge and the Next/Prev Buttons
* Change default number of columns in Related Products
* Add default attributes to Product Template in Single Product template
* Revert adding attributes
* Fix block alignment with Large Image block
* Prevent error when layout is not present in the attributes object
* Add Large Image and Pager to its own group
* Fix issue when moving around the thumbnails block
* Fix e2e tests for Product Gallery block
* Change ancestor block for the Pager block
* Fix bug where is-plain-obj is not transpiled by Jest, update lock.
* Update packages.
* Mock useSelect for a handful of RichText selectors in test.
* Resolve react to single version to avoid invalid hook errors.
* Patch trim-html locally to avoid a bug in the released npm source.
* Mock out resizeObserver to avoid https://github.com/FezVrasta/react-resize-aware/issues/58
* Don't transpile config package: https://github.com/node-config/node-config/issues/628
Customer Account block icon size is based on the parent `font-size`
in order to make sure they stay harmoniously together.
However, the `box-sizing` could be set by some other actor
and mess with the size of the icon.
* Product Gallery: add support for On Sale Badge Block
* add align support
* Add E2E tests
* set margin via Block Styles
* disable experimental flag
* add next previous block
* restore support file
* fix TS error
* fix layout
* change product
* Add Product Gallery Next Previous block
* update description
* update registration
* improve style
* use context instead of attributes
* add eslint and ts lint exception
* improve CSS
* E2E Next Previous block (https://github.com/woocommerce/woocommerce-blocks/pull/10329)
* Add E2E tests
* fix e2e tests path after rebase
* add screenshots
* improve E2E test
* improve E2E test
* improve E2E test
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* fix webpack conf
* Next Previous Button block - Add layout support (https://github.com/woocommerce/woocommerce-blocks/pull/10668)
* Add layout support
* Product Gallery Next Previous: Fix block crashing in the editor when vertical alignment has not been customized yet
* Product Gallery Next Previous: Position fixes for the Next/Previous button both in the editor and frontend
* add E2E test
* fix import
---------
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Next Previous Buttons: hide buttons when the product has only one image (https://github.com/woocommerce/woocommerce-blocks/pull/10743)
* Next Previous Buttons: hide buttons when the product has only one image
* update URL
* fix import
* set default value
* fix E2E test
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Add support to Interactivity API
* Fix php cs errors
* Rename numberOfThumbnailImages to numberOfThumbnails
* Use frontend.tsx with InteractivityAPI
* Replace viewScript in block.json
* Enable Product Collection as a core feature
* Fix: disable product query title and summary variations from inserter in favour of Product Collection ones (https://github.com/woocommerce/woocommerce-blocks/pull/10548)
* Limit the scope of Product Query's Product Title and Product Summary
* Add missing piece after refactoring
* Enable manual migration of Products to Product Collection (https://github.com/woocommerce/woocommerce-blocks/pull/10655)
* Refactor block variation registration in product-collection (https://github.com/woocommerce/woocommerce-blocks/pull/10701)
This commit refactors the product-collection block's variation registration.
Changes:
- The `product-summary` and `product-title` variations have been encapsulated within their own respective functions: `registerProductSummaryVariation` and `registerProductTitleVariation`.
- Imported and invoked these new functions in the main `index.tsx` of the product-collection block, ensuring the variations are registered.
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add block foundation
* Add block styles
* Add Dots Pager
* Move icons to the block folder
* Add block settings
* Add Pager to Product Gallery template
* Add setting to change Pager display mode
* Change the block description
* Fix the block icon color when selected
* Fix php cs errors
* Fix php cs errors
* Fix css lint errors
* Fix eslint error
* Move enum to its own file
* Remove unnused call to request context
* Add block template
* Fix php cs errors
* fix php cs errors
* improve docs
* Remove duplicate HTML element and added classnames for single product block (https://github.com/woocommerce/woocommerce-blocks/pull/10374)
* Show only products with rating (https://github.com/woocommerce/woocommerce-blocks/pull/10434)
* Add Product Gallery Thumbnails block (https://github.com/woocommerce/woocommerce-blocks/pull/10442)
* WIP Product Gallery: Add the Thumbnails block
* Product Gallery Thumbnails: Add block settings
* Add template for the Product Gallery block
* Add template for the Product Gallery block. Add the rest of the files.
* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.
* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
* Product Gallery Thumbnails: Move the static template ouside of the component
* Make sure the context is set before accesing the array values
* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc
* Product Gallery Thumbnails: Fix TS error
* Product Gallery Thumbnails: Remove unused stylesheet
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.
* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically
* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down
* Product Gallery Thumbnails: Fix the eslint dependency error
* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file
* Product Gallery Thumbnails: Update the utils file
* Product Gallery Thumbnails: Update the utils file. Fix comment indentation
* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set
* Product Gallery: Rename clientId to productGalleryClientId
* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies
* Product Gallery Thumbnails: Combine all useEffect code together
* Product Gallery Thumbnails: Add a ThumbnailsPosition enum
* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Add missing dependency
* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Revert back to ts-ignore
* Revert "Product Gallery: Add crop, zoom and full-screen settings"
This reverts commit 840654197619e2611029b81990493387ae0b543d.
* Remove propTypes (https://github.com/woocommerce/woocommerce-blocks/pull/10432)
* Fix badge wrong spacing on the newest arrivals pattern (https://github.com/woocommerce/woocommerce-blocks/pull/10446)
* Product Gallery: Add Crop, Zoom and Full-screen settings (https://github.com/woocommerce/woocommerce-blocks/pull/10445)
* WIP Product Gallery: Add the Thumbnails block
* Product Gallery Thumbnails: Add block settings
* Add template for the Product Gallery block
* Add template for the Product Gallery block. Add the rest of the files.
* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.
* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
* Product Gallery Thumbnails: Move the static template ouside of the component
* Make sure the context is set before accesing the array values
* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc
* Product Gallery Thumbnails: Fix TS error
* Product Gallery Thumbnails: Remove unused stylesheet
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.
* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically
* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down
* Product Gallery Thumbnails: Fix the eslint dependency error
* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file
* Product Gallery Thumbnails: Update the utils file
* Product Gallery Thumbnails: Update the utils file. Fix comment indentation
* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set
* Product Gallery: Rename clientId to productGalleryClientId
* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies
* Product Gallery Thumbnails: Combine all useEffect code together
* Product Gallery Thumbnails: Add a ThumbnailsPosition enum
* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Add missing dependency
* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Revert back to ts-ignore
* Revert "Product Gallery: Add crop, zoom and full-screen settings"
This reverts commit 840654197619e2611029b81990493387ae0b543d.
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery: Remove the redundant React Fragment
* Remove nested filled and empty cart blocks in cart template (https://github.com/woocommerce/woocommerce-blocks/pull/10447)
* improve migration to blockified templates (https://github.com/woocommerce/woocommerce-blocks/pull/10415)
* fix compatibility with WP 6.2 (https://github.com/woocommerce/woocommerce-blocks/pull/10449)
* Add Product Gallery Pager to template
* Add Pager settings to Product Gallery block
* Remove save function and rename icon
* Use nullish coalescing operator for the block context
---------
Co-authored-by: Roy Ho <roykho77@gmail.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* WIP of Upgrade Notice state
* Extend the state options with seeing option
* Move the logic to the dedicated folder
* Subscribe only if not reverted
* Refactor the way UpgradeNotice is rendered
* Simplify the logic of keeping the Upgrade Notice state in local storage
* Improve types organisation
* Lift the functions interacting with local storage to the Inspector Controls of Product Colelction
* Simplify logic of showing Upgrade Notice
* Disable auto migration
* Refactoring
* Use useLocalStorageState hook
* Fix incorrect merge
* Final improvements
* Allow to display Upgrade Notice after revert and manual upgrade
* Fix incorrect merge
* Improve the unsubscribe process
* Trigger auto-update from Product Collection only
* Remove weird console.log
* Abstract manual update from Product Query
* Fix the taxQuery migration from Product Collection to Products
* Product Collection - logic to hide upgrade notice (https://github.com/woocommerce/woocommerce-blocks/pull/10494)
* Add timestamp to each upgrade notice status change
* Revert back only Product Collections converted from Products block
* Make the time threshold configurable
* Add logic that hides the Upgrade Notice after some amount of displays
* Fix the taxQuery migration from Product Collection to Products
* Change the way to count Product Collection entries
* Fix the problem of multiple display counter increments with Product Collection
* Update Upgrade Notice visibility conditions
* Add contiions to unmark Product Collection as converted from Products
* Change variable name
* Change variable t to time name for better readibility. Improve types
* Replace useState with useRef
* Remove unecessary props passed to UpgradeNotice
* Fix express button display in the Cart block
When multiple buttons are displayed they don't appear stacked. This PR fixes a regression;
* Fix editor experience
* Fix incorrect icon color when Product Gallery is selected
* Fix incorrect icon color when block is selected
* Remove unnecessary style
* Fix icon alignment
* Fix alignment for the icon
* Fix icon alignment
* Add local state to address-form
* Update test with valid postcode and required fields
* Push changes refactoring
* Avoid loops due to retrying same data
* Callbacks to prevent rerenders
* Move validation functions
* Filter incoming values to only those included as fields to prevent errors
* Keep track of country changes to prevent excessive updates of addressFormFields.
* Use helpers in test
* Fill company
* Revert local state in address form
* Update address form to remove validation handling for postcode (country clears the field).
* Revert "Update test with valid postcode and required fields"
This reverts commit 718a6006df24f6e957297ad4d1ef9d6f690793bd.
* Clear postcode when country changes if invalid
* Revalidate fields when country changes
* Comment for pick
* Revert unneccessary test change
* Revery moving of functions to reduce diff size
* Increase push timeout in tests
* Revert test changes
* WIP Product Gallery: Add the Thumbnails block
* Product Gallery Thumbnails: Add block settings
* Add template for the Product Gallery block
* Add template for the Product Gallery block. Add the rest of the files.
* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.
* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
* Product Gallery Thumbnails: Move the static template ouside of the component
* Make sure the context is set before accesing the array values
* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc
* Product Gallery Thumbnails: Fix TS error
* Product Gallery Thumbnails: Remove unused stylesheet
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.
* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically
* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down
* Product Gallery Thumbnails: Fix the eslint dependency error
* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file
* Product Gallery Thumbnails: Update the utils file
* Product Gallery Thumbnails: Update the utils file. Fix comment indentation
* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set
* Product Gallery: Rename clientId to productGalleryClientId
* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies
* Product Gallery Thumbnails: Combine all useEffect code together
* Product Gallery Thumbnails: Add a ThumbnailsPosition enum
* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Add missing dependency
* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Revert back to ts-ignore
* Revert "Product Gallery: Add crop, zoom and full-screen settings"
This reverts commit 840654197619e2611029b81990493387ae0b543d.
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery: Remove the redundant React Fragment
* WIP Product Gallery: Add the Thumbnails block
* Product Gallery Thumbnails: Add block settings
* Add template for the Product Gallery block
* Add template for the Product Gallery block. Add the rest of the files.
* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.
* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
* Product Gallery Thumbnails: Move the static template ouside of the component
* Make sure the context is set before accesing the array values
* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc
* Product Gallery Thumbnails: Fix TS error
* Product Gallery Thumbnails: Remove unused stylesheet
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.
* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically
* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down
* Product Gallery Thumbnails: Fix the eslint dependency error
* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file
* Product Gallery Thumbnails: Update the utils file
* Product Gallery Thumbnails: Update the utils file. Fix comment indentation
* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set
* Product Gallery: Rename clientId to productGalleryClientId
* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies
* Product Gallery Thumbnails: Combine all useEffect code together
* Product Gallery Thumbnails: Add a ThumbnailsPosition enum
* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Add missing dependency
* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Revert back to ts-ignore
* Revert "Product Gallery: Add crop, zoom and full-screen settings"
This reverts commit 840654197619e2611029b81990493387ae0b543d.
* WIP Product Gallery: Add the Thumbnails block
* Product Gallery Thumbnails: Add block settings
* Add template for the Product Gallery block
* Add template for the Product Gallery block. Add the rest of the files.
* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.
* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
* Product Gallery Thumbnails: Move the static template ouside of the component
* Make sure the context is set before accesing the array values
* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc
* Product Gallery Thumbnails: Fix TS error
* Product Gallery Thumbnails: Remove unused stylesheet
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.
* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically
* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down
* Product Gallery Thumbnails: Fix the eslint dependency error
* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file
* Product Gallery Thumbnails: Update the utils file
* Product Gallery Thumbnails: Update the utils file. Fix comment indentation
* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set
* Product Gallery: Rename clientId to productGalleryClientId
* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies
* Product Gallery Thumbnails: Combine all useEffect code together
* Product Gallery Thumbnails: Add a ThumbnailsPosition enum
* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Fix TS errors
* Product Gallery Thumbnails: Add missing dependency
* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block
* Product Gallery: Add crop, zoom and full-screen settings
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error
* Product Gallery Thumbnails: Revert back to ts-ignore
* Change icon, title and description of the Express Checkout Block
* Fix icon style
* Update icon and add styles
* change icon for express payments in cart
* Add option to manually update Products block to Product Collection
* Disable manual upgrade of Products yet
* Manual update flag doesn't have to be dependant on auto update
* Removed commented out console info logs
* Disable option to upgrade Products block
* Change the way to bold text in Upgrade Notices so it's translatable
* Change the way UpgradeNotice is rendered conditionally
This commit adds a new `__experimentalExpandOnFocus` attribute to the component within the `HandPickedProductsControl`. The value is set to `true`, enabling automatic expansion of the list when the user focuses on the product selection field.
This change aims to improve the user experience by making it easier for the user to see all available options when they focus on the selection list.
* Create Mini-Cart template part area
* Update Mini-Cart template part name to exclude it
* Update src/BlockTemplatesController.php
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Update src/BlockTemplatesController.php
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Keep both variations of the template part name when excluding them
* Revert "Keep both variations of the template part name when excluding them"
This reverts commit c3f293511536d1ebbac0f50caaf74cded28d0025.
---------
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Remove queries that fetch all products for manipulating the results returned by the Store API for certain use-cases.
* Remove the code that's supposed to read product ids for filter context and logic around that in useCollectionData
* Fix incorrect merge
---------
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Key updates:
1. Additional CSS class to Inherit Query Control: A CSS class named `wc-block-product-collection__inherit-query-control` has been added to the ToggleControl component. This provides a precise target for E2E tests and potential custom styles.
2. E2E tests for 'Inherit query from template' control: Numerous scenarios have been covered to ensure the control's correct behavior. These scenarios include verifying visibility under different circumstances and checking its functionality in a Product Catalog template.
3. E2E test code enhancements: The E2E test code now exports the `SELECTORS` object to assist in locating different elements during the tests. This includes the new 'Inherit query from template' control. The `setShowOnlyProductsOnSale()` function has been refactored to improve readability and provide more granular control over its operations.
4. Test scenario for 'Show only products on sale': The existing E2E test for this functionality has been extended to check that it retains its state when the 'Inherit query from template' control is toggled.
These changes increase the robustness of our E2E tests, providing better coverage for the 'Inherit query from template' control in the Product Collection block.
* Foundation of the Products block replacement with Product Collection
* Provide logic to replace Products with Product Collection
* Make sure the blocks can be replaced
* Add types and refactor replacement a bit
* Fix the query attributes transform
* Add upgrade Notice to the Product Collection block
* Force upgrade notice to be displayed at the top of the Inspector Controls
* Externalise migration code so it can be reused in both ways
* Add util to get block IDs byt its name
* Add a way to revert the Product Collection blocks to Products
* Move the subscription to another place where it's triggered only once
* Add default values
* Remove attributes from Products block if they're not used to avoid incorrect query
* WIP logic of unseen/seen/reverted notice
* Change the state reading
* Revert changes regarding notice displaying logic
* Change the logc of firing replacement and bail early if there's no core/query blocks
* Add todos
* Implement inner blocks migration
* Implement the revert transformation of inner blocks
* Refactor types
* Add layout transformation from Products to Product Collection
* Add layout migration from Product Collection to Products
* Disable migration by default
* Simplify some parts of code
* Remove additional keyword from Product Collection to move it to another PR
* Adjust the logic to introduce the first step: conversion from Products to Product Collection
* Disable automatic migration
* Refactor Columns Control inspector controls in Product Collection
* Refactor Order By inspector controls in Product Collection
* Reorder imports in Product Collection Inspector Controls
* Refactor On Sale inspector controls in Product Collection
* Refactor Stock Status inspector controls in Product Collection
* Refactor Keyword inspector controls in Product Collection
* Unify interface of query controlling Inspector Controls
* Unify interfaces of Inspector Controls that modify Query in Product Collection
* Unify other Query modifying Controls
* Simplify types
* Add Display Layout controls to Product Collection
* Adjust the layout type name
* Add explicit display layout types
* Change the function name to setDisplayLayout so it's more explicit
* Pass only the necessary props to nested inspector controls
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Product Gallery: Add an new block base code
* Product Gallery: Add experimental flag
* Product Gallery: Add Large Image block code
* Product Gallery Large Image: Remove unsed types
* Product Gallery: Move the block from registerBlockType to registerBlockSingleProductTemplate
* Product Gallery: Update icon
* Product Gallery: Add missing icon import
* Product Gallery Large Image: Add experimental mode check
* Product Gallery Large Image: Deregister unnecessary block settings
* Product Gallery Large Image: Add experimental flag to the Product Gallery Large Image and remove the icon override
* Product Gallery Large Image: Add zoom and correct styling
* Product Gallery Large Image: Remove commented out unnecessary code
* Product Gallery Large Image: Re-add the removed action after capturing the large image html
* Product Gallery Large Image: Update Large Image icon and description. Move metadata to the block.json file.
* Product Gallery: Add an new block base code
* Product Gallery: Add experimental flag
* Product Gallery: Move the block from registerBlockType to registerBlockSingleProductTemplate
* Product Gallery: Update icon
* Fix Product Image Gallery block overflow when multiple images are used
* Increase css specificity for the Product Image Gallery images
* Fix whitespace
* Fix style issue when using smaller images in the product image gallery
* WIP: dirty attempt to dry run Cart & Checkout templates
* Added Cart and Checkout to the template hierarchies
* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates
* Updated cart & Checkout templates
* Order Received FSE template (https://github.com/woocommerce/woocommerce-blocks/pull/8937)
* Order Received template bootstrap
* typo
* WIP: new block
* add logic here
* Order received classic template
* reverted constants.ts
* Added the post title (buggy)
* Corrected page title
* Updated constants.ts
* Fixed template typo
* removed placeholder for order received block
* add order-received template description
* updated placeholder description
* Formatting fixes
* Template description.
* replaced hardcoded string with OrderReceivedTemplate::SLUG
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Code formatting (https://github.com/woocommerce/woocommerce-blocks/pull/8350)
* Code formatting
* page_template_hierarchy priority to 1 (https://github.com/woocommerce/woocommerce-blocks/pull/9323)
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Migrate Cart and Checkout Pages to the Template Editor when using a FSE theme (https://github.com/woocommerce/woocommerce-blocks/pull/9339)
* Introduce woocommerce_blocks_template_content hook
* Migrate cart and checkout page content to the template editor
* Add redirection from edit page to edit template
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Removed header and footer from checkout template. (https://github.com/woocommerce/woocommerce-blocks/pull/9378)
* Removed header and footer from checkout template.
* Removed header and footer from checkout template migration
* Permalink solution for the checkout endpoint/template (https://github.com/woocommerce/woocommerce-blocks/pull/9406)
* Checkout endpoint work
* Move setting field to util
* Include link to edit the template
* Remove todo
* Refactor checkout templates to share logic (https://github.com/woocommerce/woocommerce-blocks/pull/9411)
* Sync endpoints with pages (https://github.com/woocommerce/woocommerce-blocks/pull/9426)
* Switch to page syncing
* Update settings descriptions
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Migrate pages to templates once (https://github.com/woocommerce/woocommerce-blocks/pull/9488)
* Migrate content on init, once
* Skip migration if page does not exist
* Put back HTML for header and footer parts
* Fix page redirect due to wrong ID
* fix loading template part
* Removed unnecessary var
* update cart and checkout html templates
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Include a notice to redirect user to template editor (https://github.com/woocommerce/woocommerce-blocks/pull/9508)
* Template Placeholder Design for the Order Received Template (https://github.com/woocommerce/woocommerce-blocks/pull/9602)
* Load frontend styles in editor iframe
* Update placeholder to include skeleton and updated icons
* Update classic template configs
* 1px border for .wp-block-woocommerce-classic-template__placeholder-copy
* Show copy on focus
* Sample data
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Add simplified header on checkout template (https://github.com/woocommerce/woocommerce-blocks/pull/9607)
* Added simplified header on checkout template
* Moved simplified header to template part
* updated constants.ts
* added template part to checkout.html
* Add missing translation
* frontpage_template_hierarchy no longer needed
* Allow plugin based template parts (https://github.com/woocommerce/woocommerce-blocks/pull/9667)
* Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates
* Synced templates on blockified folder
* Add blockified order-received.html
* removed WooCommerce prefix
* Refactor/rebrand order received template to order confirmation (https://github.com/woocommerce/woocommerce-blocks/pull/9734)
* rebrand order received to order confirmation
* updated descriptions for templates
* updated descriptions for order confirmation placeholder
* Resolve merge conflict
* Resolve merge conflicts
* Resolve more merge conflicts after rebase
* Fix formatting
* Use patterns for localisation (https://github.com/woocommerce/woocommerce-blocks/pull/9883)
* e2e tests for cart and checkout templates (https://github.com/woocommerce/woocommerce-blocks/pull/9939)
* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates
* Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates
* Resolve merge conflicts
* Add e2e for permalink settings
* Test that templates exist
* Add test to check that templates can be edited
* Add tests to confirm templates can be edited
* Ensure cart has contents before running tests on frontend views
* Commend out problem test
* Make sure search has multiple results
* Remove useThrottle - bad rebase
* Revert changes to docs after rebase
* Revert function call for noReviewsPlaceholder
* Bad rebase
* Reverts
* Remove revertTemplate
* Spacing
* Wait for networkidle after navigation
* Always wait for network
* Use button roles in site editor
* More specific button locator
* Update option comparison
* Fix template content
* Disable failing tests
* Disable failing classic template tests
* Use enterEditMode
* More enterEditMode usage
* enterEditMode
* Use test.skip
* More robust selectors
* Alt iframe selector
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Skip flakey test
---------
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Change type of payment requirements to string[]
* Add CanMakePaymentArgumentCart type and update CanMakePaymentArgument
* Add getCanMakePaymentArg function to get the arg, allows reusability
* Check saved methods gateway's to see if they can make payment
* Make canMakePaymentArg a dependency of the useMemo
* Remove await from sync function call
* Update variable names to better reflect what they store
* Add tests to ensure saved payment methods don't show if canPay is false
* Rename save-payment-method-options to tsx
* Update saved payment method options to TS
* Fix TS error in saved-payment-method-options test
* Default show product counts to false for filter by attributes block
* Default show product counts to false for filter by stock block
* Default show product counts to false for filter by rating block
* Refactor deprecation
* Refactor deprecation
* Refactor deprecation
* Allow customer account block to center align
* Convert to using Flexbox
* Use mixins to DRY
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add E2E tests for Product Collection Block
This commit does the following changes:
1. Adjusts the .gitignore file to ignore the test-results and artifacts directories under all subdirectories named 'e2e-pw'.
2. Adds new E2E tests for the Product Collection block, specifically testing:
- If the block renders correctly, including validating the number of product images, titles, prices, and 'Add to Cart' buttons.
- If the sidebar settings correctly control the number of displayed columns.
3. Implements the 'ProductCollectionPage' class, providing methods to perform actions such as creating a new post, inserting a block, publishing a post, and locating various elements on the page.
4. Adjusts the directory structure for the E2E tests to improve organization and readability.
* Minor improvements
* Update E2E tests for Product Collection block sidebar settings
This commit updates the E2E tests for the sidebar settings of the Product Collection block. The changes include:
1. Refactoring the test assertions to use property accessors instead of method calls for the `ProductCollectionPage` class. This improves readability and consistency.
2. Updating the `ProductCollectionPage` class to initialize locators for editor and frontend elements separately. This allows easier differentiation between editor and frontend locators.
The test file `sidebar-settings.block_theme.spec.ts` has been deleted, as its functionality is now covered by the updated tests in `product-collection.block_theme.spec.ts`.
* Don't update package.json files
* Don't update gitignore file
* Add E2E test for order by control
This commit updates the E2E tests for the sidebar settings and order by control of the Product Collection block. The changes include:
1. Refactoring the test assertions and descriptions for improved readability and clarity.
2. Adding a new test case to verify the correct sorting of products by title in descending order.
3. Updating the `ProductCollectionPage` class to include a new method `setOrderBy()` to set the order by value in the order by control.
4. Adding a new method `waitForProductsToLoad()` in the `ProductCollectionPage` class to wait for the products to load in the block.
These changes ensure that the sidebar settings and order by control are functioning correctly in the Product Collection block.
* Minor improvements
* Add tests for "on sale" filter
* Add tests for Hand picked products filter
This commit updates the E2E tests for the handpicked products filter in the Product Collection block. The changes include:
1. Adding a new test case to verify that products can be filtered based on the selection in the handpicked products option.
2. Adding a new method `addFilter()` to the `ProductCollectionPage` class to select a filter option from the dropdown.
3. Adding a new method `setHandpickedProducts()` to the `ProductCollectionPage` class to set the handpicked products in the block settings.
These changes ensure that the handpicked products filter is functioning correctly in the Product Collection block.
* Verify that on sale filter works on frontend
Adding assertions to verify the count and presence of on-sale products in the frontend after publishing.
* Add tests for Keyword filter
This commit updates the E2E tests for the keyword filter in the Product Collection block. The changes include:
1. Adding assertions to verify that the products are correctly filtered based on the keyword entered.
2. Adding assertions to verify the filtered products in the frontend after publishing.
These changes ensure that the keyword filter in the Product Collection block is functioning correctly.
* Use fixture to setup product collection page
This commit refactors the E2E tests for the Product Collection block to improve test structure and readability. The changes include:
1. Refactoring the test structure using the `test.extend` function to define shared setup and teardown logic.
2. Moving the creation of the `ProductCollectionPage` instance to the shared setup logic.
3. Using the `pageObject` fixture in each test to access the `ProductCollectionPage` instance.
4. Removing duplicate code for creating the `ProductCollectionPage` instance.
These changes enhance the maintainability and readability of the E2E tests for the Product Collection block.
* Add CartEventsContext with onProceedToCheckout event
* Wrap Cart in CartEventsProvider
* Dispatch onProceedToCheckout event when button is pressed
* Update type of children on CartEventsProvider
* Add test for ProceedToCheckout block
* Add tests for CartEventProvider
* Remove superfluous div
* Fix incorrect nesting after rebase
* Wrap mini cart in CartEventsProvider
* Dispatch onProceedToCheckout event when clicking button in mini cart
* Add tests for mini cart onProceedToCheckout emitter
* Make observer fail so navigation isn't attempted
* Prevent console error on navigation
* Try preventing navigation in unit tests
* Try preventing navigation in unit tests
* Try preventing navigation in unit tests
* Try preventing navigation in unit tests
* Try preventing navigation in unit tests
* Try preventing navigation in unit tests
* Try preventing navigation in unit tests
* Mini Cart Block: show the total price, including tax, according to the option
* Fix tests in PR 9878 (https://github.com/woocommerce/woocommerce-blocks/pull/9880)
* add unit test
---------
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
* Mini Cart: Update color settings to include Price, Icon and Product Count.
* Fix color settings in the editor.
* Mini Cart: Add color settings for the Price, Icon and Product Count.
* Mini Cart: Remove unnecessary color settings.
* Remove unnecessary code comments.
* Update color settings labels.
* Add price color to the tax label.
* Add missing docs comment
* Fix TS errors
* Fix TS error
* Adjust type declaration
* Add TS error comments
* Change @ts-to-do to @ts-expect-error
---------
Co-authored-by: tjcafferkey <tjcafferkey@gmail.com>
This commit introduces the 'Display Settings' toolbar for the 'Product Collection' block in the Gutenberg editor.
- A new component 'DisplaySettingsToolbar' is added in 'display-settings-toolbar.tsx'. It includes controls for changing the number of items per page, the offset, and the maximum number of pages to show in the block. The toolbar only shows up when the 'inherit' query attribute is set to false.
- The 'DisplaySettingsToolbar' component is then integrated into the main 'edit.tsx' file through 'ToolbarControls'.
- Styles have also been added to 'editor.scss' to ensure the popover content of the display settings toolbar has an appropriate minimum width.
* Mini Cart: Add an icon setting with 3 alternative icon options. Closeswoocommerce/woocommerce-blocks#8556.
* Mini Cart: Fix Mini-cart icons in the toggle setting.
* Minor type fixes.
* Clean up type definitions.
* Move alt icon logic to a separate function.
* Fix cart icons sizes
* Add a negative margin to the mini cart icon
* Add support for hand-picked products in Product Collection block
This commit introduces the ability to manually select specific products in the Product Collection block.
Changes include:
- Added `woocommerceHandPickedProducts` to the `ProductCollectionQuery` and `DEFAULT_FILTERS` in `constants.ts`.
- Created a new control file `hand-picked-products-control.tsx` which introduces a token field where the user can search for and select specific products.
- Included `HandPickedProductsControl` in the Product Collection block's inspector controls in `index.tsx`.
- Updated `ProductCollectionQuery` in `types.ts` to accommodate handpicked products.
- Updated the PHP `ProductCollection` class to handle the hand-picked products query parameters.
These changes allow users to hand-pick products to be displayed in the Product Collection block. This allows for greater customization of the products shown in the block.
* Enhance handling of hand-picked products
- A Set data structure is now used to store 'newHandPickedProducts' instead of an Array, which will help prevent duplicate entries.
- Additionally, the suggestions for products to be hand-picked now excludes already selected products, enhancing the user experience by avoiding redundancy in the suggestions list.
- Lastly, the function name 'displayTransform' has been changed to 'transformTokenIntoProductName' to more accurately reflect its purpose, which is to transform a token into a product name.
* Update import & export of HandPickedProductsControl
* Add author filter to ProductCollection block
This commit adds an author filter to the ProductCollection block in WooCommerce Blocks.
- A new file, `author-control.tsx`, has been created inside the `inspector-controls` directory of the `product-collection` block. This file contains the React component for the author filter, which fetches the list of authors from the WordPress database using `useEntityRecords`. The filter provides an interface for selecting authors whose products should be displayed in the ProductCollection block.
- The author filter is added to the main component of the `inspector-controls` in `index.tsx`.
- In `ProductCollection.php`, the 'author' parameter is now included in the product query. This allows products from a specific author to be displayed in the ProductCollection block, depending on the user's selection in the Gutenberg editor.
This addition enhances the functionality of the ProductCollection block by allowing site administrators to create more customized and targeted displays of products.
* Update error handling
* Refactor 'Author' interfaces and fix offset calculation
This commit refactors the 'Author' interfaces in the 'author-control.tsx' file. The interface 'AuthorsMapping' has been removed and its properties have been merged into 'AuthorsInfo' for simplicity and maintainability.
In the PHP file 'ProductCollection.php', the offset calculation logic has been improved to handle pagination correctly. Now, the offset is calculated as '(per_page * (page - 1)) + offset', which correctly accounts for both the page number and the offset when determining the starting point for the product query.
* Convert summary/utils to TS
* Add @wordpress/wordcount type defs
* Move trimWords, trimCharacters, remoteTags & appendMoreText to own file
* Add tests for trimWords and related functions
* Trim payment method description if it is longer than 30 words
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add Inherit global query control to the Product Collection
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* Fix the condition to show query controls (they shoul appear if query is NOT inherited)
* Make Product Collection inheirt global query in product archive templates by default
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Revert "Make Product Collection inheirt global query in product archive templates by default"
This reverts commit d257e8bdb014742c40ef069110f6a2a35148fb7a.
* Updated 'inherit' behavior in the Product Collection block
This commit updates the 'inherit' behavior in the Product Collection block and its associated controls.
Changes include:
- Removed the 'inherit' attribute from the block's JSON definition
- Defined an array of 'archive product templates' which includes the WooCommerce product archive, taxonomy, attribute, and search results templates.
- Set the initial 'inherit' value based on the current template ID when the Product Collection block is first added to the page.
- Restored the query object value when toggling 'inherit' off.
- Conditionally rendered the InheritQueryControl based on the current editor being the site editor.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Add taxonomies control to Product collection block
The primary changes include:
1. `taxQuery` field in the `ProductCollectionAttributes` was changed from a string to an object in `assets/js/blocks/product-collection/types.ts` and `assets/js/blocks/product-collection/constants.ts`, accommodating the ability to query products by taxonomy terms.
2. `assets/js/blocks/product-collection/inspector-controls/utils.tsx` was moved to `assets/js/blocks/product-collection/utils.tsx` to make it available for broader use.
3. New component `TaxonomyControls` was created in `assets/js/blocks/product-collection/inspector-controls/taxonomy-controls.tsx`, which is included in `assets/js/blocks/product-collection/inspector-controls/index.tsx`. This new control allows users to filter products in the block by their taxonomy terms.
4. Updated the block's inspector controls in `assets/js/blocks/product-collection/inspector-controls/index.tsx` to use the new `TaxonomyControls` component.
Please note that the TaxonomyControls component uses experimental features of WordPress's FormTokenField. As a result, a comment has been added to disable eslint warnings regarding the use of experimental APIs.
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Address PR review comments
This commit involves a significant refactoring of the default product query inside the 'product-collection/constants.ts' file. A new constant `DEFAULT_QUERY` has been defined and used to replace the previously hard-coded default query settings. This refactoring aids in code readability and future modifications.
Changes also include adjustments in 'product-collection/inspector-controls' to enhance UI/UX. A new SCSS file 'editor.scss' has been created for custom styles related to the editor.
Additions include:
- Adding a class name `product-collection-inspector-toolspanel__filters` to ToolsPanel for additional styling.
- The experimental property `__experimentalShowHowTo` is set to false for `FormTokenField` and `StockStatusControl`, to hide some additional information.
In 'product-collection/inspector-controls/taxonomy-controls.tsx', the classname `product-collection-inspector__taxonomy-control` is added for improved CSS targeting.
* Add wc-block-editor prefix to className
* Make improvements to 'inherit' functionality in Product collection block.
Key changes are:
1. 'inherit' in 'ProductCollectionAttributes' within 'constants.ts' has been changed from 'false' to 'null'. This accommodates for situations when Product collection block is first added to the page.
2. Various improvements in 'index.tsx' file which include more robust null checking for the 'query' object, simplifying the way 'woocommerceAttributes' is obtained, and passing 'setQueryAttributeBind' and 'inherit' to the 'InheritQueryControl' component.
3. In 'inherit-query-control.tsx', 'InheritQueryControl' component has been refactored to use '__experimentalToolsPanelItem' from '@wordpress/components' instead of 'ToggleControl'. This adds more flexibility to the control.
4. Changes in 'ProductCollectionAttributes' and 'ProductCollectionQuery' types in 'types.ts'. The
* Improve product collection query inheritance and fix URL typo
This commit addresses two primary areas:
1. Fixed a typo in the URL used as a reference in the use-previous.ts file. The URL was incorrectly case-sensitive, which has been corrected.
2. The product-collection block in the JavaScript files has been refactored for better handling of query inheritance:
- Changed the 'inherit' value from false to null in the DEFAULT_QUERY constant to handle initial state more accurately.
- In product-collection/inspector-controls, implemented conditional rendering for Filters and Query Controls based on 'displayQueryControls'. Also, improved the 'InheritQueryControl' by using the 'usePrevious' hook to maintain the state before enabling the inheritance.
- In inherit-query-control, enhanced the control to toggle the query inheritance. It now considers the 'inherit' state from the query object and keeps track of the query object state before enabling inheritance. If the inheritance is toggled off, it reverts the query to the previous state before inheritance was enabled.
* Minor improvemnets
* Add wc-block-editor- prefix with classNames
* Handle duplicate taxonomy names in Taxonomy controls
the taxonomy controls have been enhanced in the following ways:
1. Modified the BASE_QUERY object to include 'slug' in the '_fields' property. This will ensure that the 'slug' of the taxonomy term is fetched along with its 'id' and 'name'.
2. Added a 'slug' property to the Term type to store the 'slug' of each term.
3. Updated the useEffect hook inside the TaxonomyItem function to generate suggestions based on search results. The suggestions now include the 'slug' of a term if the term's name is not unique. This change will help users distinguish between terms with the same name but different slugs.
* Remove isset() in if condition as it's unnecessary
* Refactor TaxonomyItem component for better readability
Following changes were made:
1. The useSelect hooks which were being used to fetch existing terms and search results have been moved into their own custom hooks named 'useExistingTerms' and 'useSearchResults' respectively. This simplifies the TaxonomyItem function's body and makes the hooks' purposes clearer.
2. The comments and props destructuring for the TaxonomyItem function have been moved up to make it easier to understand the function's purpose and the props it receives.
3. This refactor does not introduce any changes in functionality. It only changes how the code is organized and presented, which will make future development easier.
* Handling for duplicate term names & other improvements
This commit enhances the `TaxonomyControls` component within `product-collection` block by adding memoization and improving term uniqueness handling.
Changes:
1. Imported `useMemo` from `@wordpress/element` for memoizing certain results.
2. `getTermIdByTermValue` function has been modified to use a `termIdToNameMap` (term ids as keys and term names as values). This provides a more efficient and direct mapping for term search.
3. Introduced `useTermIdToNameMap` function, which returns a `Map` where term ids are keys and term names are values. It handles duplicate term names by appending the term slug to the name, ensuring unique term names.
4. Updated the `useExistingTerms` and `useSearchResults` to include `taxonomy` in their dependency arrays for `useSelect` hook. This will force re-computation when `taxonomy` changes.
5. Changed `TaxonomyItem` from a function declaration to a const arrow function, consistent with the rest of the codebase.
6. Updated `onTermsChange` function in `TaxonomyItem` to accommodate the changes in `getTermIdByTermValue` and the introduction of `termIdToNameMap`.
7. Replaced `Set` with a standard array for storing new term IDs in `onTermsChange`. The `Set` was unnecessary as term IDs are unique by default.
8. Updated `TaxonomyItem`'s effects and rendering to work with `termIdToNameMap`, ensuring the displayed term names are unique.
This update will result in more efficient term search and handling, and it will solve issues related to duplicate term names.
* Restructure taxonomy controls in product collection block
This commit restructures the taxonomy controls in the product collection block for improved clarity and maintainability.
- The file `taxonomy-controls.tsx` has been deleted, and its functionality has been divided into two new files: `index.tsx` and `taxonomy-item.tsx`.
- The `index.tsx` file contains the main TaxonomyControls component, which is responsible for displaying taxonomy-related options in the block's inspector controls. It includes a custom hook `useTaxonomies` that fetches and returns taxonomies associated with product post type.
- The `taxonomy-item.tsx` file, on the other hand, contains a TaxonomyItem component that handles the rendering of individual taxonomy items. It also contains some utility functions for mapping term names and ids and fetching terms based on the search query.
This refactor aims to improve code readability and separation of concerns, thus making future changes and maintenance easier.
* Fix case insensitive search support for FormTokenField
This change enhances the search functionality of the FormTokenField by introducing support for case insensitive search. This has been achieved by adding a lower-case version of the term name to the 'termNameToIdMap'.
This is an important enhancement as it will make the search process more user-friendly and resilient to different casing inputs. Users will now be able to find the desired taxonomy term regardless of their input's case.
* Refactor getTermIdByTermValue function and update newSuggestions mapping
This commit does a couple of important things:
1. Reorders the definition of constants in `TaxonomyItemProps` for clarity.
2. Refactors the `getTermIdByTermValue` function. Instead of checking for an exact term name match in a convoluted manner, it now directly tries to fetch the `id` from the `searchTerm` if it is an object. If the `searchTerm` is not an object, the function tries to match it against the `termNameToIdMap` in both normal and lowercase forms. This simplification makes the function more readable and concise.
3. Updates the `newSuggestions` mapping in the `TaxonomyItem` component. It now has a fallback to `searchResult.name` if a term's name is not found in `termIdToNameMap`. This change ensures that even if the term's name is not in the map for some reason, we can still display a suggestion using the original name of the term.
* Optimize term fetching and initial search state in TaxonomyItem
This commit introduces a couple of improvements to the TaxonomyItem component.
1. The initial state of the 'search' state variable has been updated to 'undefined'. This change helps prevent unnecessary initial fetching of terms when the search input is empty.
2. Term fetching logic has been optimized to only enable term fetching when necessary:
a) Fetching based on the search query is only enabled when 'search' is not 'undefined'.
b) Fetching existing terms is only enabled when there are term IDs.
3. The block of code responsible for fetching existing terms and setting the current value has been moved upwards. This reordering of code does not change the functionality, but it groups together similar pieces of code, enhancing readability and maintainability.
These optimizations make the component more efficient by reducing unnecessary requests and computations, and they improve the code organization.
* Address PR comments and other improvements
This commit makes several changes:
1. The useEffect that sets the default attributes was moved and modified. This now includes a `query` attribute that utilizes the imported function `getDefaultValueOfInheritQueryFromTemplate`.
2. An early return was added in `edit.tsx` to prevent rendering until default attributes are set.
3. In `columns-control.tsx`, the early return was removed and a label was added to the `RangeControl` component.
4. In `inherit-query-control.tsx`, logic related to `inherit` value initial setting was refactored using a `useMemo` hook with `getDefaultValueOfInheritQueryFromTemplate` function. This logic was moved to a separate utility function in `utils`.
5. The `query` attribute is no longer optional in `types.ts`.
6. A new utility function `getDefaultValueOfInheritQueryFromTemplate` was created in `utils.tsx` to encapsulate the logic of deciding the default value of `inherit` query attribute based on the current template.
These changes aim to improve code clarity and maintainability.
* Add with types import statement
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Add taxonomies control to Product collection block
The primary changes include:
1. `taxQuery` field in the `ProductCollectionAttributes` was changed from a string to an object in `assets/js/blocks/product-collection/types.ts` and `assets/js/blocks/product-collection/constants.ts`, accommodating the ability to query products by taxonomy terms.
2. `assets/js/blocks/product-collection/inspector-controls/utils.tsx` was moved to `assets/js/blocks/product-collection/utils.tsx` to make it available for broader use.
3. New component `TaxonomyControls` was created in `assets/js/blocks/product-collection/inspector-controls/taxonomy-controls.tsx`, which is included in `assets/js/blocks/product-collection/inspector-controls/index.tsx`. This new control allows users to filter products in the block by their taxonomy terms.
4. Updated the block's inspector controls in `assets/js/blocks/product-collection/inspector-controls/index.tsx` to use the new `TaxonomyControls` component.
Please note that the TaxonomyControls component uses experimental features of WordPress's FormTokenField. As a result, a comment has been added to disable eslint warnings regarding the use of experimental APIs.
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Address PR review comments
This commit involves a significant refactoring of the default product query inside the 'product-collection/constants.ts' file. A new constant `DEFAULT_QUERY` has been defined and used to replace the previously hard-coded default query settings. This refactoring aids in code readability and future modifications.
Changes also include adjustments in 'product-collection/inspector-controls' to enhance UI/UX. A new SCSS file 'editor.scss' has been created for custom styles related to the editor.
Additions include:
- Adding a class name `product-collection-inspector-toolspanel__filters` to ToolsPanel for additional styling.
- The experimental property `__experimentalShowHowTo` is set to false for `FormTokenField` and `StockStatusControl`, to hide some additional information.
In 'product-collection/inspector-controls/taxonomy-controls.tsx', the classname `product-collection-inspector__taxonomy-control` is added for improved CSS targeting.
* Add wc-block-editor prefix to className
* Add wc-block-editor- prefix with classNames
* Handle duplicate taxonomy names in Taxonomy controls
the taxonomy controls have been enhanced in the following ways:
1. Modified the BASE_QUERY object to include 'slug' in the '_fields' property. This will ensure that the 'slug' of the taxonomy term is fetched along with its 'id' and 'name'.
2. Added a 'slug' property to the Term type to store the 'slug' of each term.
3. Updated the useEffect hook inside the TaxonomyItem function to generate suggestions based on search results. The suggestions now include the 'slug' of a term if the term's name is not unique. This change will help users distinguish between terms with the same name but different slugs.
* Remove isset() in if condition as it's unnecessary
* Refactor TaxonomyItem component for better readability
Following changes were made:
1. The useSelect hooks which were being used to fetch existing terms and search results have been moved into their own custom hooks named 'useExistingTerms' and 'useSearchResults' respectively. This simplifies the TaxonomyItem function's body and makes the hooks' purposes clearer.
2. The comments and props destructuring for the TaxonomyItem function have been moved up to make it easier to understand the function's purpose and the props it receives.
3. This refactor does not introduce any changes in functionality. It only changes how the code is organized and presented, which will make future development easier.
* Handling for duplicate term names & other improvements
This commit enhances the `TaxonomyControls` component within `product-collection` block by adding memoization and improving term uniqueness handling.
Changes:
1. Imported `useMemo` from `@wordpress/element` for memoizing certain results.
2. `getTermIdByTermValue` function has been modified to use a `termIdToNameMap` (term ids as keys and term names as values). This provides a more efficient and direct mapping for term search.
3. Introduced `useTermIdToNameMap` function, which returns a `Map` where term ids are keys and term names are values. It handles duplicate term names by appending the term slug to the name, ensuring unique term names.
4. Updated the `useExistingTerms` and `useSearchResults` to include `taxonomy` in their dependency arrays for `useSelect` hook. This will force re-computation when `taxonomy` changes.
5. Changed `TaxonomyItem` from a function declaration to a const arrow function, consistent with the rest of the codebase.
6. Updated `onTermsChange` function in `TaxonomyItem` to accommodate the changes in `getTermIdByTermValue` and the introduction of `termIdToNameMap`.
7. Replaced `Set` with a standard array for storing new term IDs in `onTermsChange`. The `Set` was unnecessary as term IDs are unique by default.
8. Updated `TaxonomyItem`'s effects and rendering to work with `termIdToNameMap`, ensuring the displayed term names are unique.
This update will result in more efficient term search and handling, and it will solve issues related to duplicate term names.
* Restructure taxonomy controls in product collection block
This commit restructures the taxonomy controls in the product collection block for improved clarity and maintainability.
- The file `taxonomy-controls.tsx` has been deleted, and its functionality has been divided into two new files: `index.tsx` and `taxonomy-item.tsx`.
- The `index.tsx` file contains the main TaxonomyControls component, which is responsible for displaying taxonomy-related options in the block's inspector controls. It includes a custom hook `useTaxonomies` that fetches and returns taxonomies associated with product post type.
- The `taxonomy-item.tsx` file, on the other hand, contains a TaxonomyItem component that handles the rendering of individual taxonomy items. It also contains some utility functions for mapping term names and ids and fetching terms based on the search query.
This refactor aims to improve code readability and separation of concerns, thus making future changes and maintenance easier.
* Fix case insensitive search support for FormTokenField
This change enhances the search functionality of the FormTokenField by introducing support for case insensitive search. This has been achieved by adding a lower-case version of the term name to the 'termNameToIdMap'.
This is an important enhancement as it will make the search process more user-friendly and resilient to different casing inputs. Users will now be able to find the desired taxonomy term regardless of their input's case.
* Refactor getTermIdByTermValue function and update newSuggestions mapping
This commit does a couple of important things:
1. Reorders the definition of constants in `TaxonomyItemProps` for clarity.
2. Refactors the `getTermIdByTermValue` function. Instead of checking for an exact term name match in a convoluted manner, it now directly tries to fetch the `id` from the `searchTerm` if it is an object. If the `searchTerm` is not an object, the function tries to match it against the `termNameToIdMap` in both normal and lowercase forms. This simplification makes the function more readable and concise.
3. Updates the `newSuggestions` mapping in the `TaxonomyItem` component. It now has a fallback to `searchResult.name` if a term's name is not found in `termIdToNameMap`. This change ensures that even if the term's name is not in the map for some reason, we can still display a suggestion using the original name of the term.
* Optimize term fetching and initial search state in TaxonomyItem
This commit introduces a couple of improvements to the TaxonomyItem component.
1. The initial state of the 'search' state variable has been updated to 'undefined'. This change helps prevent unnecessary initial fetching of terms when the search input is empty.
2. Term fetching logic has been optimized to only enable term fetching when necessary:
a) Fetching based on the search query is only enabled when 'search' is not 'undefined'.
b) Fetching existing terms is only enabled when there are term IDs.
3. The block of code responsible for fetching existing terms and setting the current value has been moved upwards. This reordering of code does not change the functionality, but it groups together similar pieces of code, enhancing readability and maintainability.
These optimizations make the component more efficient by reducing unnecessary requests and computations, and they improve the code organization.
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add show child categories only toggle to Product Categories block
* Check if current page is a template editor before adding the toggle
* Show current category if show_children is enabled and its the last category in the hierarchy
* Update comment
* Fix typo
* Remove forward slash
* Add is-widget-editor utility and enable feature for block usage in widget editor
* Don't render anything if the child only option is enabled and there are no children
* Add Single Product template support to Product Rating block
* Add the Product Rating block to the Single Product Template by default
* Fix Product Rating block position on Single Product HTML template
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Add wc-block-editor prefix to className
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* remove unused import of getDefaultStockStatuses
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Fix: Default values of attributes not saving as serialized block comment
This was happening because of this issue: https://github.com/WordPress/gutenberg/issues/7342
Therefore, I had to use `useEffect` to set the default values of the attributes.
Here is the list of changes I made:
1. Removed default values from `block.json` for `query`, `tagName`, and `displayLayout`.
2. Moved the default values to `constants.ts` and created a new object `DEFAULT_ATTRIBUTES` to store them.
3. Relocated `constants.ts` from `inspector-controls` to the parent directory.
4. Refactored `edit.tsx` to use `DEFAULT_ATTRIBUTES` from `constants.ts` to set default attributes using `useEffect`.
5. Removed the attributes assignment from `registerBlockType` in `index.tsx`.
6. Updated `columns-control.tsx`, `index.tsx`, `order-by-control.tsx`, and `stock-status-control.tsx` to import from the relocated `constants.ts`.
7. Updated `ProductCollectionAttributes` and `ProductCollectionQuery` in `types.ts` to include `tagName` and `isProductCollectionBlock` respectively.
8. Modified `ProductCollection.php` to match the updated `orderBy` key in the query parameter.
This refactor enhances the readability of the code and reduces duplication by keeping all constants and default values in one place.
* Replace usage of 'statii' with 'statuses' in stock status handling
This commit replaces all instances of 'statii' with the correct term 'statuses' in the context of handling stock status. This change affects three files:
1. `assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx` - The term is corrected in a comment block.
2. `assets/js/blocks/product-collection/types.ts` - Updated the name of a variable in the `ProductCollectionQuery` interface.
3. `src/BlockTypes/ProductCollection.php` - Here, the term is replaced in several locations including variable names, comments and the method `get_stock_status_query`.
This commit helps improve code readability and consistency across the repository.
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Fix total shipping info when no shipping are available
* Fix a logical error for displaying shipping info
* Fix failing unit tests
* Run unit test for the Cart instead of the Checkout
The calculator is only available for the Cart Block, so it doesn't make
sense to run this test for the Checkout Block
* Fix no shipping methods and incomplete address conflict
When there are no shipping methods (except for local pickup), we would
like to inform the shopper that there are no shipping options available
even though the address is complete
The solution we found is to check the address on the Cart Block only
* Refactor code
* Check whether rate is collectible without using hardcoded id
* Correctly negate hasCollectibleRate result
* Add notice when shipping is selected but no methods are available yet (https://github.com/woocommerce/woocommerce-blocks/pull/9171)
* Create useShippingTotalWarning hook
* Show notices above checkout sidebar
* Call hook to show notice in Checkout block
* Remove unused imports
* Update hook name to useShowShippingTotalWarning
* Move hook to its own file
* Import shipping data internally (without alias)
* Remove unused imports
* Move import to correct place
* Return early to avoid if else
* Refactor useShowShippingTotalWarning
* Get shipping rates directly from the cart instead of the hook
* Show shipping cost when price information is available
* Check if the passed rates are considered selected
* Prevent errors when no rates are available
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
* Make Mini-Cart block work well with caching plugins
* Add tests
* Add back aria-label to Mini-Cart menu
* Fetch Mini-Cart data before page finishes loading
* Store and retrieve Mini-Cart values from localStorage for better performance
* Update styles as early as possible
* Reorder code
* Remove overrideTotals param from updateTotals() function
* Update tests
* Initialize local storage inside a function and add act to filter tests
* Replace void with undefined types in several funtions
* Fix 0 quantity badge appearing on page load
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Feature: Add 'Order By' Control to Product Collection Inspector
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.
These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
* fix: handle undefined index for isProductCollectionBlock
This commit addresses a potential issue where the 'isProductCollectionBlock' index might not be defined in certain situations within the 'build_query' method of the ProductCollection class.
Previously, we directly accessed 'isProductCollectionBlock' from the 'query' context of the block. Now, we use the null coalescing operator (??) to ensure that we assign a default value of false if 'isProductCollectionBlock' is not set.
This change provides a safer way to handle the scenario when the 'isProductCollectionBlock' is not defined in the block context and helps prevent undefined index warnings.
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Remove unused styles
* Replace usage of Modal component with custom Drawer
* Update MiniCart.php class structure
* Update tests
* Prevent focus styles to appear unnecessarily when opening the Mini Cart drawer
* Work-around issue with disabled buttons causing lose of focus inside the Mini-Cart drawer
* Revert "Work-around issue with disabled buttons causing lose of focus inside the Mini-Cart drawer"
This reverts commit 4360f77384ad1f1d90a3ba8a0385ad79da2449f2.
* QuantitySelector: focus text input field after decrease or increase button become disabled
* Move focus to the input field also when the body has focus, that fixes the issue in Chrome
* Add explanatory comment
* 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
* Replace all style hooks with useStyleProps hook
* Remove border/color/spacing hooks
* Style Props Hook
* Make use of `change-case` package
* Tidy up block wrappers
* Attribute filter does not use frontend.ts nor styles within block
* Remove frontend from filter blocks and unused styleprops usage
* Tidy up variable names so its clearer attributes are not required specifically from blocks
* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/blocks/attribute-filter/block-wrapper.tsx
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/blocks/active-filters/block-wrapper.tsx
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/rating-filter/block-wrapper.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/stock-filter/block-wrapper.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/price-filter/block-wrapper.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Simplify styleprop
* Styleprops simplify
* Fix withFeaturedItem styles
* Like the original hook, flatten props and combine with parsed styles
---------
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Only show the Mini Cart count badge when there are items in the cart
* Update badge to new design
* Add tests
* Make sure colors don't break existing themes
* Update Mini Cart e2e test
* Update Mini-Cart block editor sidebar
* Rename Mini Cart block to Mini-Cart
* Update Mini-Cart block editor sidebar (II)
* Update two instances of mini-cart to uppercase
* Adapt the Add to Cart Button block to be registered via block.json
* Remove the legacy supports.ts file
* Ditch all registration methods from the ProductButton class as it is now registered via metadata (a block.json file)
* Update get_block_type_uses_context and register_block_type_assets
Implements the ProductSelector advanced filter within the “Products (Beta)” block.
The filter allows the merchant to narrow down the exact products to which all
subsequent filters will be applied, mirroring the functionality of the existing
“Hand-picked Products” plus all the other functionalities available
from the “Products (Beta)” block.
* Preserve email when rendering shipping address form for the first time
* Ensure billing email does not reset when changing form values
* Add test to ensure email does not get overwritten
* Using nested selector to style Product elements in Products Block
This commit simplifies the INNER_BLOCKS_TEMPLATE array in the product-query constants.ts file by removing the style properties from the individual elements. Instead, the default styles are now managed in the style.scss file, providing a more consistent and centralized approach to styling.
In the style.scss file, a new section for default styling has been added to handle product elements inside the Products Block, adhering to the Gutenberg styling hierarchy. This ensures the lowest precedence in the hierarchy, allowing for easier overrides when needed.
* Decrease specificity of styles for product elements in Products Block
The commit changes the default styles for product elements inside the 'Products Block'. It changes the way the margin-bottom and margin-top properties are set by using the :where() selector instead of using the .products-block-post-template class selector. This is done to decrease the specificity of the CSS selector, ensuring that the styles have the lowest precedence in the hierarchy. It also removes the display: inline-block property from the a selector, and moves the styles to the .editor-styles-wrapper class selector.
* Decrease specificity of CSS selectors
In these changes, the product elements inside the Products Block have been restyled. The specificity of the CSS selector has been decreased using the :where() selector, to ensure that these styles have the lowest precedence in the hierarchy.
In constants.ts, a new class name, products-block-post-template, has been added to the inner block template for the post. This class is used to add default styles for inner blocks.
In style.scss, the CSS selector for the inner blocks has been updated to include the new class name. The :where() selector has also been used to ensure that these styles have the lowest precedence in the hierarchy.
* Update default margins and remove redundant entries
This commit updates the default margin values for the Product Title in the Products block, moving them from the style.scss file to the constants.ts file. It also removes unnecessary empty arrays in the INNER_BLOCKS_TEMPLATE and background-color property from the style.scss file.
* Add align support to single product block
* Fix block alignment that was not being set on the frontend
* Remove classname prop from the Single Product Edit component
* Add new `Header Centered Search` pattern
* Add margin support to the customer account block
* Add margin to the customer account to separate it from the search bar
* Update margin
* Add with, fix margins
* Remove unnecessary separator
* Updates after review
* Remove ref
* Remove separator
* Bring back separator and use product search
* Remove html block and fix search border
* Mini Cart Contents block: set minimum width
* Mini Cart Contents block: allow changing the width only in the feature plugin
* Allow resetting the Mini Cart Contents width to the default
* Update assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
---------
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
* Add class property to track local pickup enabled
* Force shipping enabled only when local pickup is also enabled
Otherwise, skip filtering and leave it to the current value
* Disabled and add text to WC Core hide shipping option
* Skip forcing shipping to be enabled in all cases
* Remove WC Core setting changes for hidden shipping rates option
* Add warning to local pickup UI about hidden rates setting in core
* Add local_pickup_enabled util function
* Revert "Skip forcing shipping to be enabled in all cases"
This reverts commit 0bf1886e73d791f7828ac86988f681cdce808b12.
* Check if local pickup is enabled before force enabling shipping
* Show correct shipping placeholder if rates hidden until address entered
* Remove tests for removed functionality
* Remove shippingCostRequiresAddress prop
* Update tests for shipping settings
* Remove irrelevant tests and fix existing ones
* Fix typo in comment
* Disable local pickup after each test
* Get shipping data from useCustomerData hook
* Change div in help prop to span
This prevents a DOM Nesting error, div cannot appear as a descendant of p
* Prevent hide shipping notice showing if the setting was originally off
* Use body background color as the Cart block sticky footer background color
* Reduce the opacity of box-shadow.
* Fix the Proceed to Checkout button cut off.
* Create the counter block and the header pattern
* Change the pattern to an inner block
* Allow customizing item counter block
* Rename block
* Allow removing the items counter block
* Add padding controls
* Preload new blocks
* Add title block back from the inserter
* Move h2 tag to the parent title
* Align items at the bottom
* Unify styles
* Add title class in the editor
* Prevent removing title blocks
* Disallow unlocking and inserter
* Disallowing moving blocks
* Introduce the new get_attribute_and_meta_counts method.
* Ensure that if no term_slug or term_id is found for counting, the default list with all terms (with count equal zero) is returned instead.
* update conditional for the slug, the empty state for requests without filter attributes and the condition query for 'and'
* Introduce the get_terms_list method.
* Remove the legacy get_attribute_counts method and update its calls to rely on the new get_attribute_and_meta_counts method instead.
* Update the query to ensure that if a parent product has multiple identical attributes, they are counted once.
* Update to start relying on the get_product_by_metas method for counting product metas
* Add a new where_clause to only include product metas and attributes in the macro query if they are not empty.
* Add wpdb->prepare to the macro query and the get_terms_list method.
* Replace the raw atomic query for fetching the filtered terms with the new get_product_by_filtered_terms method.
* Update the request params for the get_attribute_and_meta_counts method.
* Update the request params for the product metas (min and max price).
* Update the query and returned value on get_terms_list.
* Update the validation for returning the default counts when no values are filtered.
* Update the query on get_terms_list to use ->prefix
* Update the variable for the query to rely on the filtered one. Update the min_price and max_price format on get_product_by_metas.
* Ensure the get_product_by_filtered_terms method is triggered for each one of the filtered terms and update the macro query to include those term ids on the WHERE clause.
* Make adjustments for the 'and' condition to work as expected.
* Ensure the queryState.attributes is properly added as a param to the API request to correctly fetch the attribute count data.
* Ensure the get_product_by_metas method is only triggered when at least one of the metas in the request is not empty.
* Join type update: for the 'and' (all) filter condition, items with the count zero are not displayed.
* wpdb prepare the where clauses
* Update the get_product_by_filtered_terms query wpdb prepare params
* update the get_product_by_metas method's where clause preparation.
* Update the where clause preparation for get_attribute_and_meta_counts so we don't rely on interpolated variables anymore.
* Adjust the get_attribute_and_meta_counts method for usage alongside the rating filter.
* Adjust the query for fetching the attribute counts for filtered ratings.
* Add support for the filter by stock.
* Ensure the product attribute counts are correct if the parent product receives a rating.
* Ensure product_or_parent_id is used only when the filter by rating is used, not affecting price or stock filters.
* Add the missing else condition.
* Enable caching.
* Address CR
* Update query for average rating.
* remove file accidentally commited.
* When multiple ratings are selected, make sure the where clause is updated accordingly for each one of them.
* Start updating the stock_status logic to account for when multiple options are selected by the user.
* Ensure the counts are properly updated when more than one stock status is selected.
* Ditch the is_array condition for the average_rating counts as is always an array.
* Deprecate the second param attributes for the get_attribute_counts method.
* Add the filtered_attribute to the transient_key
* Bypass cache if WP_DEBUG is enabled.
* Update formatting for macro query.
* Fix mixed tabs spaces on query
* Update spacing/formatting for SQL queries.
* Minor: update indentation for the main SQL query
---------
Co-authored-by: roykho <roykho77@gmail.com>
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Enable Single Product block preview
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Fix error occurring when trying to access ancestor of an undefined block settings
* Fix Product Image appearing with different size on the Frontend
* Fix PHP Code Standards errors
* Remove JS Doc from shared-product-control.tsx
* Fix single-product-frontend.js 404 error
* Fix error 'Block names must be string' when adding Single Product block
* Add todo comment to state the temporary solution used in the Single Product block
* Set imageSizing attribute on Product Query and Single Product blocks
* Rename values for image size options in the product image block
The previous allowed values were 'cropped' and 'full-size'. The new values are 'thumbnail' and 'single' which are similar to the values used in WooCoomerce.
WooCommerce uses 'woocommerce_thumbnail', 'woocommerce_gallery_thumbnail' and 'woocommerce_single' for images sizes. The 'woocommerce_single' size is used for the Single Product page and the 'woocommerce_thumbnail' size is used for the product grid.
* Fix Related Products image to show as a thumbnail instead of the full size
* Fix PHP CS error
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Fix error occurring when trying to access ancestor of an undefined block settings
* Remove JS Doc from shared-product-control.tsx
* Fix single-product-frontend.js 404 error
* Fix error 'Block names must be string' when adding Single Product block
* Add todo comment to state the temporary solution used in the Single Product block
* Move the wp_reset_postdata outside the block name check condition
* Add comments about why we need to unregister the block on Single Product template
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add default align attribute value for Cart block
* Add default align attribute value for Checkout block
* Update cart tests
* Check for not disabled insert button
* Remove express payment placeholders when there are no express payment methods
* Only use one instance of CartCheckoutFeedbackPrompt
* Show NoPaymentMethods notice in the inspector instead of the block
* Move privacy notices to inspector
* Unused hook
* Update tests to use mocks
* Add color, typography, and spacing support to Product SKU block
This commit introduces a new file `supports.ts` for the Product SKU block in the WooCommerce Blocks plugin, which adds color, typography, and spacing support. The following configuration has been added:
1. In `assets/js/atomic/blocks/product-elements/sku/supports.ts`, a new `supports` object is created, which extends the shared configuration and adds support for the following properties:
- `text` and `background` color
- `fontSize`, `lineHeight`, `__experimentalFontWeight`, `__experimentalFontFamily`, `__experimentalFontStyle`, `__experimentalTextTransform`, `__experimentalTextDecoration`, and `__experimentalLetterSpacing` for typography
- `margin` and `padding` for spacing
* Add color, typography, and spacing support for Product SKU block in All Products block
This commit extends the support for color, typography, and spacing to the Product SKU block when used within the All Products block. The following changes have been made:
1. In `assets/js/atomic/blocks/product-elements/sku/block.tsx`, the `useColorProps`, `useSpacingProps`, and `useTypographyProps` hooks are imported and used to add the appropriate className and style properties to the rendered SKU element.
2. In `assets/js/atomic/blocks/product-elements/sku/edit.tsx`, the `style` property is separated from `useBlockProps()` and used directly on the `div` element for the SKU block.
* Add server-side rendering class for Product SKU Gutenberg block
This commit adds the ".wp-block-woocommerce-product-sku" class to the Product SKU Gutenberg block for server-side rendering purposes. The inclusion of this class ensures consistent styling between the editor and the front-end view of the block, providing a seamless experience for users.
The class name is generated based on the Gutenberg block prefix "wp-block", the namespace "woocommerce", and the block name "product-sku", creating a unique and identifiable class for the block. This class enables developers to target the block specifically in both the editor and front-end styles, maintaining the integrity of the block's appearance and functionality across different environments.
By adding this class to the server-side rendered version of the block, we ensure a unified and coherent styling experience throughout the block's usage.
* Fix minor issues
* Gate only experimental features behind isFeaturePluginBuild flag
This commit refactors the Product SKU block supports to enable color, typography, and spacing features for all builds, while keeping experimental features specific to the feature plugin build. It also adds necessary lint and TypeScript error handling for the experimental spacing API.
* Add overflow-wrap to Product SKU block and update comment
This commit adds the overflow-wrap property to the Product SKU block styles to handle long SKU values gracefully.
It also updates the comment for the experimental spacing API to better reflect the usage check.
* Refactor Product SKU block classname and style handling
This commit refactors the Product SKU block classname and style handling. It combines classnames for better readability and removes the hardcoded textTransform style in favor of default styles.
This also fix the issue where textTransform style was not working as expected.
* Notice banner component
* Snackbar support
* Switch to new components
* Finish snackbar implementation
* Summary notice
* Styling issues
* Fix text wrap in shipping calculator
* Storybook entries
* Docs and tests for NoticeBanner
* Framer motion to avoid components dependency
* Snackbar list stories
* Docs for snackbar list
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Types/docblocks
* Docs
* Update notice type
* Use NoticeBannerProps for type of noticeProps
* Raw html to fix notice encoding
* getClassNameFromStatus is unused
* Update position text
* Clarify notice text
* Fix hover style in whisper TT3 theme
* remove div styles
* Add new templates for legacy buyer notices in WooCommerce core (https://github.com/woocommerce/woocommerce-blocks/pull/8732)
* Add templates for legacy core notices
* Update src/Domain/Services/Notices.php
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Remove debugging code
* DRY get_notices_template
* Simplify error template
* Fix padding
* Only include new notices if using block cart/checkout
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Fix view box tag
* Hover and focus styles
* Styling when notices added via ajax
* Remove margin change
* Implement react-transition-group instead of framer (https://github.com/woocommerce/woocommerce-blocks/pull/8920)
* Add screenshots to docs
---------
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Move blocks outside of Products block when convering Propduct Archive to the blockified version
* Move blocks outside of Products block when convering Product Search Result to the blockified version
* Move blocks outside of Products block in blockified templates
* Make sure Term description is still removed from Product Catalog template
* Remove isExperimentalBuild checks.
By removing the `isExperimentalBuild` conditional checks in the Classic
Template block, we can ensure the features added in woocommerce/woocommerce-blocks#8324 will land in
WooCommerce Core and are not limited to the feature plugin.
See p1680000654295729-slack-C02UBB1EPEF for additional context.
* Revert isExperimentalBuild removal on registration
The conditional `isExperimentalBuild` conditional check that was
wrapping some conditional registration of the classic template
block seems to be unrelated to the template conversion/migration.
This is something we can revisit and test separately but should not be
included in this changeset.
* Add filter to change allowed blocks in Cart and Checkout blocks
* Add documentation for allowedBlockTypes
* Add test to check the filters work for the Checkout block
* Rename filter to additionalCartCheckoutInnerBlockTypes
* Update docs to reflect new name
* Add tests for additionalCartCheckoutInnerBlockTypes in Cart block
* Update Checkout test to reflect new filter name
* Update docs TOC to add example link
This adds the $schema property to all block.json files. This is required for the block.json files to be valid according to the JSON schema. I noticed that this property was not set for some of the block.json files.
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* First try to render Product Arhcive template as blocks
* First iteration of the whole blockified product archive template
* Add tests for Single Product Details block
* Extract a blockified Product Archive Template to the templates
* Add templates to tsconfig.json so the files are resolved as part of the core code
* Add a encouragement note to use blockified version IF migration is available
* Add a Row block wrapping Product Results Count and Catalog Sorting blocks
* Move blockified product-archive from templates/ to assets/ directory
* Remove unnecessary margin from Product Results Count block
When used in a Row block in a blockified Archive Product template, Product Results Count had additional unnecessary margin which caused misalignment with the Catalog Sorting block
* Fix TypeScript error
* Update the description of the Classic Template Editor placeholder
* Remove unnecessary entry in tsconfig.json to include templates directory
It was added couple of commits earlier, since the template was kept there, but it was decided to move it to assets directory, so entry is no longer necessary
* Move the to
* Differentiate the Classic Template placeholder description depending on the availability to convert to Products block
* Add the initial basis for the Add to Cart button
* Add E2E test that the Classic Template can be replaced with the blockified version
* Abandon writing E2E tests for now, as there's a problem to run them locally
* Trigger the single product add to cart action for each product type.
* Syntax improvement
* Set margin for Catalog Sorting to 0, so it aligns properly when used in blockified Archive Product template
* Make the blockification config, so it covers the Product Archive as well as Single Product templates
* Move the product-archive specific functions from classic-template/index.tsx to the product-archive.ts
* wip: create block structure and add initial styles
* Add alignment option to the Store Notices block and make the blockified template blocks aligned wide
That is required, so the Classic Template layout is preserved
* Create single-product.ts file which is a placeholder for the blockified Single Product template
* Add block details to the SingleProductDetails.php file
* Make Blockified Product Archive template inherit the align attibute
* Simplify the interface of blockified templates
Expose function instead of two functions for allowing and disallowing conversion
* Add a BlockifiedTemplate type
* Rename and simplify the function checking if conversion of classic template to block version is possible
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Align the variable naming to use instead of
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* Pass the Classic Template attributes to the blockified template instead of getting it from data store
* Include Breadcrumbs block in the Blockified Product Archive Template
* Consume alignment attributes of Catalog Sorting in the PHP render function
* Consume alignment attributes of Breadcrumbs in the PHP render function
* Show conversion button with label and description
* Add conversion placeholder (until we have all the blocks implemented)
* Remove align support from Catalog Sorting and add to Store Notices block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* Extend the get_classes_and_styles_by_attributes method with align and text_align attributes
* address CSS feedback
* Add Archive Title block to the Blockified Classic Template
* Minor getRowBlock function refactor
* add support for the custom classname
* remove save function
* Add property to the classic templates and base the config on it instead of placeholder
* Add separate blockified template for a Product Search Results
* Pass attribute from classic template to No Results block in Product Search Results
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* Extract the common functions between blockified archive-template and product-search-results to utils
* Enable 'Inherit query from template' in Products block by default when converting the Classic Template to blockified one
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* Improve the naming of BlockifiedTemplateConfig type
* Differentiate Product Catalog and Products By * templates. The latter include Term Description block
* improve logic and increase coverage of unit test
* Change unclear ProductsBy to ProductTaxonomy in regards to classic template conversion
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Revert the margin fix which was added already on trunk
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Add default Single Product HTML template
* Fix style issues when adding blocks inside group/stack/columns blocks
* Add Related Products to the default single product template HTML file
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* remove classname
* add blocks
* improve code
* Remove !important statement from Product Image Gallery block css
* Change width of Product Image Gallery block to initial instead of unset
* Wrap up default single product html template (https://github.com/woocommerce/woocommerce-blocks/pull/8632)
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589
* remove classname
* fix crash
* update template
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Fix images width in the Single Product page
* Remove the !important attribute from the Product Image Gallery block
* fix sku block
* improve layout
* improve layout
* improve layout
* improve layout
* improve layout
* update label
* Single Product Template: add store notice block
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
* Render inner buttons on the frontend
* Add deprecation to the buttons
* Fix lint and inline save
* Remove commented out code and fix condition
* Change migrate condition
* Add styles outline and fill styles to cart and checkout buttons
* Add fill and outline styles to the start shopping button
* Refactor variants
* Remove imports
* Add classname default value
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add Fill & Outline styles to Product button
This commit adds the Fill & Outline styles to the Product button block.
You can see new Styles section in Inspector Controls where you will be able to change between Fill & Outline styles.
* Add width setting to product button
The button block now has a width selector, which allows the user to
set the button to 25%, 50%, 75%, or 100% of the parent container.
By default, a button's width is determined by the size of its content.
You can find this setting in the button block's sidebar.
* Enable all typography controls
Now following typography controls are also available:
- Font Family
- Appearance
- Line height
- Letter spacing
- Decoration
- Letter case
* Fix width settings not working
* Fix align doesn't work with Width settings
* Fix width setting not working in Single product block
* Fix - Default button is shorter on the frontend
In Editor default and outlined button has the same height. Outlined button in the frontend as well. But default button on the frontend is shorter (smaller padding)
More info: https://github.com/woocommerce/woocommerce-blocks/pull/8781#issuecomment-1477527049
* Fix - background color not matching when GB is enabled
* Fix - 100% width button exceeds the container
Fix following issues:
- "Select Options" or "View products" for variable and grouped products don't respect the container max width
- Also, for small width (25%) they are wider
More info: https://github.com/woocommerce/woocommerce-blocks/pull/8781#issuecomment-1477527049
* Fix: Width setting not working in All Products block
This commit fixes the width setting not working in the All Products block.
* Keep other classes along with Width setting classes
`block.attributes.className` should be kept along with the width setting classes.
```
className: classnames( block.attributes.className, {
[ `has-custom-width wp-block-button__width-${ block.attributes?.width }` ]:
block.attributes?.width,
} )
```
* Translate styles label in block configuration
* Fix _n usage to use plural and singular correctly
* Replace switch condition with if else
- Replace switch condition with if else for better readability.
* Add packageCount in LocalPickupSelect component
- packageCount prop was missing from LocalPickupSelect component. Add packageCount in LocalPickupSelect component.
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Niels Lange <info@nielslange.de>
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* First try to render Product Arhcive template as blocks
* First iteration of the whole blockified product archive template
* Add tests for Single Product Details block
* Extract a blockified Product Archive Template to the templates
* Add templates to tsconfig.json so the files are resolved as part of the core code
* Add a encouragement note to use blockified version IF migration is available
* Add a Row block wrapping Product Results Count and Catalog Sorting blocks
* Move blockified product-archive from templates/ to assets/ directory
* Remove unnecessary margin from Product Results Count block
When used in a Row block in a blockified Archive Product template, Product Results Count had additional unnecessary margin which caused misalignment with the Catalog Sorting block
* Fix TypeScript error
* Update the description of the Classic Template Editor placeholder
* Remove unnecessary entry in tsconfig.json to include templates directory
It was added couple of commits earlier, since the template was kept there, but it was decided to move it to assets directory, so entry is no longer necessary
* Move the to
* Differentiate the Classic Template placeholder description depending on the availability to convert to Products block
* Add the initial basis for the Add to Cart button
* Add E2E test that the Classic Template can be replaced with the blockified version
* Abandon writing E2E tests for now, as there's a problem to run them locally
* Trigger the single product add to cart action for each product type.
* Syntax improvement
* Set margin for Catalog Sorting to 0, so it aligns properly when used in blockified Archive Product template
* Make the blockification config, so it covers the Product Archive as well as Single Product templates
* Move the product-archive specific functions from classic-template/index.tsx to the product-archive.ts
* wip: create block structure and add initial styles
* Add alignment option to the Store Notices block and make the blockified template blocks aligned wide
That is required, so the Classic Template layout is preserved
* Create single-product.ts file which is a placeholder for the blockified Single Product template
* Add block details to the SingleProductDetails.php file
* Make Blockified Product Archive template inherit the align attibute
* Simplify the interface of blockified templates
Expose function instead of two functions for allowing and disallowing conversion
* Add a BlockifiedTemplate type
* Rename and simplify the function checking if conversion of classic template to block version is possible
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Align the variable naming to use instead of
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* Pass the Classic Template attributes to the blockified template instead of getting it from data store
* Include Breadcrumbs block in the Blockified Product Archive Template
* Consume alignment attributes of Catalog Sorting in the PHP render function
* Consume alignment attributes of Breadcrumbs in the PHP render function
* Show conversion button with label and description
* Add conversion placeholder (until we have all the blocks implemented)
* Remove align support from Catalog Sorting and add to Store Notices block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* Extend the get_classes_and_styles_by_attributes method with align and text_align attributes
* address CSS feedback
* Add Archive Title block to the Blockified Classic Template
* Minor getRowBlock function refactor
* add support for the custom classname
* remove save function
* Add property to the classic templates and base the config on it instead of placeholder
* Add separate blockified template for a Product Search Results
* Pass attribute from classic template to No Results block in Product Search Results
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* Extract the common functions between blockified archive-template and product-search-results to utils
* Enable 'Inherit query from template' in Products block by default when converting the Classic Template to blockified one
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* Improve the naming of BlockifiedTemplateConfig type
* Differentiate Product Catalog and Products By * templates. The latter include Term Description block
* improve logic and increase coverage of unit test
* Change unclear ProductsBy to ProductTaxonomy in regards to classic template conversion
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Revert the margin fix which was added already on trunk
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Add default Single Product HTML template
* Fix style issues when adding blocks inside group/stack/columns blocks
* Add Related Products to the default single product template HTML file
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* remove classname
* add blocks
* improve code
* Remove !important statement from Product Image Gallery block css
* Change width of Product Image Gallery block to initial instead of unset
* Wrap up default single product html template (https://github.com/woocommerce/woocommerce-blocks/pull/8632)
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589
* remove classname
* fix crash
* update template
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Fix images width in the Single Product page
* Remove the !important attribute from the Product Image Gallery block
* fix sku block
* improve layout
* improve layout
* improve layout
* improve layout
* improve layout
* update label
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Alex Florisca
Roy Ho
Karol Manijak
Thomas Roberts
Seghir Nadir
Luigi Teschio
Mike Jolley
Tung Du
Niels Lange
Manish Menaria
Alexandre Lara
Hritik Chaudhary
Saad Tarhi
Daniel Dudzic
Sam Seay
Lucio Giannotta
Raluca Stan
Alba Rincón
Darren Ethier
Albert Juhé Lluveras
Patricia Hillebrandt
Paulo Arromba
Siddharth Thevaril
DAnn2012
Brian
Tom Cafferkey
Karol Manijak
Hritik Chaudhary
Danilo Parra Jr
Tarun Vijwani
Kirtan Gajjar
Dharmesh Patel
Daniel W. Robert