Commit Graph

21 Commits

Author SHA1 Message Date
Alexandre Lara 7ec1b7f3a1
Product Gallery block: Add logic to trap keyboard focus within the Product Gallery Pop-Up (#44439)
* Add logic to trap keyboard focus inside the Product Gallery Pop-Up

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Remove unnecessary condition

* Fix issue with keyboard focus trap not working within the Pop-Up

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-09 13:43:51 -03:00
Alexandre Lara f7b92e8b6b
Product Gallery block: Focus should return to trigger element when closing pop-up (#44414)
* Return focus to trigger element when closing pop-up

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix php cs error

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-07 17:18:41 -03:00
Alexandre Lara 0654fa1997
Product Gallery block: Announce Pop-Up Opening with Voiceovers (#44332)
* Add aria attributes to product gallery pop-up

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix Interactivity API store import

* Announce Dialog opening with VoiceOver

* fix php cs lint error

* Remove unnecessary data-wc-watch directive from Product Gallery block

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-06 14:28:33 -03:00
Alexandre Lara b4928ed46a
Product Gallery block: Enable keyboard navigation for thumbnails (#44236)
* Add ability to select thumbnails using keyboard

* Add ability to open the Product Gallery pop up using the keyboard

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix outline border not showing on Thumbnails on some browsers

* Prevent firefox browser from focusing on UL tag of the Large Image block

* Enable usage of 'Space' and 'NumpadEnter' keys to navigate between the thumbnails

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-06 08:55:03 -03:00
Alexandre Lara 4b5c6982e4
[Experimental] Product Gallery block: Prevent page from scrolling when pop-up is open (#43378)
* Prevent body from scrolling when pop-up is open

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add namespace to the modal-open css class

* Fix class name for the Product Gallery block

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-01-12 15:10:33 -03:00
Daniel Dudzic 3be8264c5d
[Experimental] Product Gallery Pager: Improve accessibility (#43348)
* Product Gallery Pager: Improve accessibility

* Product Gallery Pager: Fix number pager styling
2024-01-09 10:48:49 +01:00
Roy Ho d15bfd2398
Product Gallery: reset main image when variations are cleared (#42830)
* Product Gallery: reset main image when variations are cleared

* Add changelog for woo core

* Update event name to be more descriptive
2023-12-15 13:22:10 -08:00
David Arenas 9e9f0341e2 Interactivity API: implement the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11071)
* Sync Interactivity API code with Gutenberg

* New store() API

* Store raw actions

* Update wc-interactivity-store implementation

* Replace `wc_store` with `wc_initial_state`

* Parse and populate initial state

* Allow store parts in `store()`

* Accept namespaces in directive paths

* Add $$namespace to directives' object values

* Make namespace parsing more robust

* Use DeepPartial type for store parts

* Do not pass `rawStore` to `afterLoad` callbacks

* Simplify `store()` a bit

* Implement `privateStore()`

* Sync context directive with Gutenberg

* Refactor scope and extract getters per scope

* Add namespace to getters and actions

* Remove current privateStore implementation

* Remove `afterLoad` option from `store`

* Use same proxy handlers for ns, getters and actions

* Set scope inside `evaluate`

* Refactor proxy handlers

* Improve types a bit

* Catch errors in async actions

* Implement stacks for scopes and namespaces

* Implement `getElement`

* Change directives object structure

* Remove unnecessary import

* Implement private stores

* Return value from sync actions

* Minor optimizations and improved comments

* Don't use async inside `data-wp-watch`

* Use a single Provider in context directive

* Remove DeepPartial type

* Do not check if element exists

* Add the `current` prop of state inside the scope

* Move getters outside scope

* Fix wc-key assignment

* Fix missing `navigate` in directives

* Fix namespace not being picked in the same element

* Deep merge raw stores instead of proxied ones

* Fix namespace assignment

* Allow forward slashes in namespaces

* Migration of Product Collection and Product Button blocks to the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11558)

* Refactor Product Button with new store() API

* Use `wc_initial_state` in Product Button

* Fix namespace

* Remove unnecessary state

* Test namespaces in directive paths

* Add test context with namespace

* Simplify woo-test context

* Move addToCart and animations to a file

* Do not pass `rawStore` to `afterLoad` callbacks

* Move callbacks and actions back to the main file

Because the animation was broken.

* Remove selectors in favor of state

* Use default ns in `getContext` for state and actions

* Remove `afterLoad` callback

* Remove unnecessary ns

* Fix getContext in add-to-cart

* Replace namespace and delete unnecessary store

* Pass context types only once

* Use an alternative for requestIdleCallback

* Add previous react code for notices

* Add namespace to Product Collection block

* Replace getTextButton with getButtonText

* Add block name to the ProductCollection namespace

* fix style HTML code

* Remove circular deps error on the Interactivity API

* Product Gallery block: Migrate to new Interactivity API store (https://github.com/woocommerce/woocommerce-blocks/pull/11721)

* Migrate Product Gallery block to new Interactivity API store

* Fix some references

* Add missing data-wc-interactive

* Fix an additional namespace

* Remove unnecessary click handler

* Dialog working

* Refactor action names

* Reindex PHP array

There was some missing indexes, which turned the array into an object in JS.

* Remove unused event handlers

* Move next/previous logic to external function

* Move StorePart util to the types folder

* Rename namespace to `woocommerce/product-gallery`

* Undo product collection namespace renaming

* Remove unnecessary namespace

* Don't hide the large image on page load

* Minor refactorings

* Fix eslint error

* Fix php cs errors with spacing and double arrows alignment

* Disable no-use-before-define rule for eslint

* Disable @typescript-eslint/ban-types rule for eslint

* Fix parsed context error in e2e tests

* Fix context parser for Thumbnail image

* Move store to the top of the frontend file

* Add interactivity api utils to the @woocommerce/utils alias

* Replace deprecated event attribute

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: roykho <roykho77@gmail.com>

---------

Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: roykho <roykho77@gmail.com>

* Fix error when closing product gallery dialog with keyboard escape key

* use wc_initial_state instead of wc_store

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: roykho <roykho77@gmail.com>
2023-11-21 11:46:15 +01:00
Roy Ho 8f3f630522 Product gallery/dialog/enhancement (https://github.com/woocommerce/woocommerce-blocks/pull/11755)
* Hide pager in dialog

* Product Gallery: reset main image when dialog closes

* Product Gallery block: Add product title to dialog

* Align double arrow

* Use H2 to be more semantic

* Use product title block in template part

* Default pager to off

* Remove pager only in dialog

* Remove unused param

* Default pager to off instead of removing
2023-11-15 13:05:51 -08:00
Roy Ho ec8207e06c Product Gallery: Fix limited images displayed in the dialog (https://github.com/woocommerce/woocommerce-blocks/pull/11716)
* Product Gallery: Fix limited images displayed in the dialog

* Fix linting errors
2023-11-09 14:10:31 -08:00
Alexandre Lara 1f1c252617 Product Gallery block: Disable zoom when hovering the Next/Previous buttons (https://github.com/woocommerce/woocommerce-blocks/pull/11538)
* Disable zoom when hovering next/previous buttons

* Improve logic to disable zoom when not hovering over the large image
2023-11-07 12:34:41 -03:00
Alexandre Lara 6c69744d26 Product Gallery block: Add support for variation image updates (https://github.com/woocommerce/woocommerce-blocks/pull/11459)
* Add `data-wc-init` directive to Interactivity API

* Add support for variation image updates on the Product Gallery block

* Watch correct form based on the product id

* Fix php cs error

* Fix php cs error

* Prevent adding wc-init to non-variable products
2023-10-27 14:12:32 -03:00
Roy Ho 77f371e8d3 Product Gallery: Add keyboard access (https://github.com/woocommerce/woocommerce-blocks/pull/11373)
* Product Gallery: Add keyboard access

* Add optional chaining to guard against undefines and update delay logic

* Use enums for key codes
2023-10-23 07:53:58 -07:00
Luigi Teschio face8d2b57 Product Gallery: Add animation when large image changes (https://github.com/woocommerce/woocommerce-blocks/pull/11113)
* 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>
2023-10-20 09:42:39 +02:00
Alexandre Lara b4f07b7c5f Product Gallery > Next/Previous Buttons block: Add support to Interactivity API (https://github.com/woocommerce/woocommerce-blocks/pull/10938)
* Add interactivity API to the Pager block

* Replace Large Image when clicking on page

* Fix php cs errors

* Fix php cs errors

* Fix php cs errors

* fix php cs errors

* Add support to Interactivity API

* Fix phpcs errors

* Fix phpcs errors

* Remove unnecessary code and fix block classes

* Rename interactivity actions

* Remove unnecessary type conversion

* Fix error when clicking on page in Pager block

* Fix php cs errors

* Fix ProductGalleryUtils import

* fix php cs error

* Fix styles for next/previous buttons

* Fix styles for the next/previous buttons

* Fix php cs errors

* Fix next/previous icons when buttons are outside image

* Fix php cs errors

* Fix php cs errors

* Fix buttons not visible in Editor

* Delete src/SpeciticTemplateController.php

Delete unnecessary file that is causing php cs error
2023-10-05 18:55:52 +02:00
Luigi Teschio 29fe7cdce0 Product Gallery: Polish Gallery in full view mode (https://github.com/woocommerce/woocommerce-blocks/pull/10947)
* 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

* change product

* Product Gallert Block: Add zoom on hover

* set to true by default

* remove block is already registered error

* remove unecessary await

* Improve zoom logic

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Product Gallery Full view mode: Add the logic to render the dedicated template

* use template-part instead template

* add E2E tests

* update selectors

* add feature flag product gallery template part

* fix E2E tests

* remove not necessary file

* polish the dialog

* fix: dialog show always the selected product

* fix: not open the dialog when the user click on icon

* rename handleClick to handleCloseButtonClick

* improve style

* fix overlay css

* fix registration

* improve logic

* improve default template

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
2023-10-02 14:36:48 +02:00
Alexandre Lara f8fcc41c5a Product Gallery > Pager block: Add support to interactivity API (https://github.com/woocommerce/woocommerce-blocks/pull/10736)
* Add interactivity API to the Pager block

* Replace Large Image when clicking on page

* Fix php cs errors

* Fix php cs errors

* Fix php cs errors

* fix php cs errors

* Remove unnecessary code and fix block classes

* Fix error when clicking on page in Pager block

* Fix php cs errors

* Fix styles for the block

* Fix styles and php cs errors
2023-09-21 16:35:25 -03:00
Luigi Teschio 11062e8600 Product Gallery Block: Add Product Gallery template to allow users to edit full mode view (https://github.com/woocommerce/woocommerce-blocks/pull/10823)
* 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

* change product

* Product Gallert Block: Add zoom on hover

* set to true by default

* remove block is already registered error

* remove unecessary await

* Improve zoom logic

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Product Gallery Full view mode: Add the logic to render the dedicated template

* use template-part instead template

* add E2E tests

* update selectors

* add feature flag product gallery template part

* fix E2E tests

* remove not necessary file

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
2023-09-15 08:54:49 +00:00
Daniel Dudzic 9db927de30 Product Gallery Thumbnails: Interactivity API directives (https://github.com/woocommerce/woocommerce-blocks/pull/10776)
* 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>
2023-09-12 09:36:44 +02:00
Alexandre Lara e9ff849e08 Add woocommerce namespace to Product Gallery block (https://github.com/woocommerce/woocommerce-blocks/pull/10769) 2023-08-31 12:13:40 -03:00
Alexandre Lara c718a056b8 Product Gallery block: Add support to Interactivity API (https://github.com/woocommerce/woocommerce-blocks/pull/10716)
* Add support to Interactivity API

* Fix php cs errors

* Rename numberOfThumbnailImages to numberOfThumbnails

* Use frontend.tsx with InteractivityAPI

* Replace viewScript in block.json
2023-08-25 15:42:31 -03:00