Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Product Gallery block: Prevent page from scrolling when pop-up is open #43378

Merged
merged 4 commits into from Jan 12, 2024
Merged

Product Gallery block: Prevent page from scrolling when pop-up is open #43378

merged 4 commits into from Jan 12, 2024

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Jan 8, 2024 •
edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

  • Added a new class to the body element that is only applied when the pop-up is open.
  • Remove the class from the body element when the pop-up is closed.

Closes #43343 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Three," "Twenty-twenty Four," etc.
  2. On the left-hand side menu, click on Appearance > Editor > Templates
  3. Find and select the 'Single Product' template from the list.
  4. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
  5. Inside the Page editor, click on the '+' button to add a new block.
  6. In the block library that pops up, search for the 'Product Gallery' block. Click on it to add the block to the template.
  7. Click on Save;
  8. Visit a product page of a Variable Product;
  9. Click on the Large Image;
  10. When the pop-up appears scroll down the mouse and make sure you see the scroll bar does not appear to the right side.

Changelog entry

  • Automatically create a changelog entry from the details below.

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement - Improvement to existing functionality

Message

Comment

Prevent page scrolling when the Product Gallery Pop-Up is open.

@thealexandrelara thealexandrelara added type: bug The issue is a confirmed bug. team: Kirigami & Origami block: product gallery Issues related to the Product Gallery block. labels Jan 8, 2024
@thealexandrelara thealexandrelara self-assigned this Jan 8, 2024
@woocommercebot woocommercebot requested review from a team and samueljseay and removed request for a team January 8, 2024 19:41
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2024 •
edited

Hi @danieldudzic, @samueljseay, @roykho,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2024 •
edited

Test Results Summary

Commit SHA: 94bca53

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 40s
E2E Tests258003026114m 16s
To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

roykho
roykho reviewed Jan 8, 2024
View reviewed changes
plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx Outdated
@@ -40,6 +40,7 @@ const closeDialog = ( context: ProductGalleryContext ) => {
context.isDialogOpen = false;
// Reset the main image.
context.selectedImage = context.firstMainImageId;
document.body.classList.remove( 'modal-open' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it would be better to namespace this classname so that there is no chance of a conflict if some other extensions are doing the same. Perhaps wc-block-product-gallery-modal-open? WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree it might be nice to namespace

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great suggestion! Included in 56537ac

@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jan 9, 2024
roykho
roykho reviewed Jan 9, 2024
View reviewed changes
plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx Outdated
@@ -60,6 +61,7 @@ const productGallery = {
openDialog: () => {
const context = getContext();
context.isDialogOpen = true;
document.body.classList.add( 'modal-open' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed one.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! I just fixed it in 94bca53

roykho
roykho approved these changes Jan 10, 2024
View reviewed changes
Copy link
Member

@roykho roykho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes. I no longer see the scroll bar on popover good job!

@thealexandrelara thealexandrelara merged commit 4b5c698 into trunk Jan 12, 2024
28 checks passed
@thealexandrelara thealexandrelara deleted the fix/43343-prevent-page-scrolling-when-pop-up-is-open branch January 12, 2024 18:10
@github-actions github-actions bot added this to the 8.6.0 milestone Jan 12, 2024
@github-actions github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Jan 12, 2024
@alopezari alopezari added status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Jan 15, 2024
samueljseay pushed a commit that referenced this pull request Jan 16, 2024
@thealexandrelara @samueljseay
[Experimental] Product Gallery block: Prevent page from scrolling whe…
70e6e53 
…n 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>
@thealexandrelara thealexandrelara changed the title [Experimental] Product Gallery block: Prevent page from scrolling when pop-up is open Product Gallery block: Prevent page from scrolling when pop-up is open Jan 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@roykho roykho roykho approved these changes

@samueljseay samueljseay Awaiting requested review from samueljseay samueljseay was automatically assigned from woocommerce/woo-fse

@danieldudzic danieldudzic Awaiting requested review from danieldudzic

Assignees

@thealexandrelara thealexandrelara

Labels
block: product gallery Issues related to the Product Gallery block. plugin: woocommerce Issues related to the WooCommerce Core plugin. status: analysis complete Indicates if a PR has been analysed by Solaris team: Kirigami & Origami type: bug The issue is a confirmed bug.
Projects
None yet
Milestone
8.6.0
Development

Successfully merging this pull request may close these issues.

Product Gallery block: Prevent page scrolling when pop-up is open
4 participants
@thealexandrelara @samueljseay @roykho @alopezari