Skip to content

Conversation

@dinhtungdu
Copy link
Member

Submission Review Guidelines

Changes proposed in this Pull Request

This PR limits loading legacy single product scripts only for legacy blocks.

Script Loading Duplication:
The enqueue logic is intentionally duplicated across ClassicTemplate.php and ProductImageGallery.php rather than abstracted into a shared utility to maintain independence between legacy blocks, allowing each to be deprecated separately without creating cross-dependencies.

Legacy Script Bundle:
We keep the entire single-product.js file rather than splitting it into modules (gallery, zoom, tabs, reviews) to maintain backward compatibility without introducing breaking changes. The file size also makes splitting not worth the effort.

How to test the changes in this Pull Request

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

  1. Test the Classic Template block: use the following code for the Single Product template. Verify gallery, zoom, slider, review, tabs work on the frontend. See single-product.js and its dependencies loaded.
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
<main class="wp-block-group"><!-- wp:woocommerce/legacy-template {"template":"single-product"} /--></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

  1. Update the Classic Template in the first step to blocks, which include the Product Image Gallery block. Verify the gallery works on the frontend. See single-product.js and its dependencies loaded.
  2. Continue from the step 2, remove all inner blocks of the Product Details to load its legacy version. Verify tabs work on the frontend. See single-product.js and its dependencies loaded.
  3. Remove the Product Image Gallery block. See only single-product.js loaded on the frontend without gallery dependencies.
  4. Remove the Product Details and add it again (to use the new version with Accordion). Add Product Gallery (Beta) block to the Single Product template. Verify single-product.js and its gallery dependencies aren't loaded on the frontend.
  5. The Product Review Form block will shop dropdown for rating selector than the star rating, this is fixed in Add Interactive Star Rating Selector to Product Review Form #60213.

Changelog entry

  • Automatically create a changelog entry from the details below.
Changelog Entry Details

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

Limit loading legacy single product scripts only for legacy blocks

@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team August 6, 2025 09:07
@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Aug 6, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Aug 6, 2025

Testing Guidelines

Hi @kmanijak ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

  • 🖼️ Screenshots or screen recordings.
  • 📝 List of functionality tested / steps followed.
  • 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
  • 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 6, 2025

📝 Walkthrough

Walkthrough

Restricts loading of legacy single-product scripts to legacy/classic blocks by adding block-level enqueue methods and a site-level dequeue on wp_enqueue_scripts; removes prior template-loader conditional for block themes and standardizes several array literal syntaxes to long-form array().

Changes

Cohort / File(s) Change Summary
Changelog
plugins/woocommerce/changelog/60223-fix-remove-legacy-scripts-loading
Adds changelog entry describing limiting legacy single-product scripts to legacy blocks.
Template loader / frontend scripts
plugins/woocommerce/includes/class-wc-template-loader.php, plugins/woocommerce/includes/class-wc-frontend-scripts.php
Removed conditional call that added gallery support for block (FSE) themes during init; small whitespace change before enqueuing wc-single-product in frontend scripts (no logic change).
Block templates controller
plugins/woocommerce/src/Blocks/BlockTemplatesController.php
Adds registration of dequeue_legacy_scripts() on wp_enqueue_scripts; new method dequeues wc-single-product on single product pages.
ClassicTemplate block
plugins/woocommerce/src/Blocks/BlockTypes/ClassicTemplate.php
Standardized array syntax to array(); added enqueue_assets() to hook legacy enqueueing on wp_enqueue_scripts; added enqueue_legacy_assets() to enqueue legacy scripts/styles, footer photoswipe template, and enable related feature filters; changed render_order_received output to printf.
ProductDetails block
plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php
Added enqueue_legacy_assets() and hooked it into wp_enqueue_scripts when rendering legacy block to enqueue wc-single-product.
ProductImageGallery block
plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
Converted short arrays to array(); added enqueue_assets() that hooks enqueue_legacy_assets() on wp_enqueue_scripts; added enqueue_legacy_assets() to enqueue legacy gallery assets, footer photoswipe template, and enable feature filters; removed direct call to WC_Frontend_Scripts::load_scripts() from render().

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant WP_Render
    participant Block (Classic/ProductDetails/ProductImageGallery)
    participant WP_Enqueue_Hooks
    participant BlockTemplatesController

    Browser->>WP_Render: Request single product page
    WP_Render->>Block: render() / render_legacy_block()
    Block->>WP_Enqueue_Hooks: add_action('wp_enqueue_scripts', enqueue_legacy_assets, 20)
    WP_Enqueue_Hooks->>Block: enqueue_legacy_assets() (on wp_enqueue_scripts)
    Block->>WP_Enqueue_Hooks: wp_enqueue_script/style('wc-single-product', ...)
    WP_Enqueue_Hooks->>BlockTemplatesController: dequeue_legacy_scripts() (also on wp_enqueue_scripts)
    BlockTemplatesController->>WP_Enqueue_Hooks: wp_dequeue_script('wc-single-product') (if conditions met)
    WP_Render->>Browser: Respond with final page
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Possibly related PRs


📜 Recent review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8da4817 and bc43527.

📒 Files selected for processing (1)
  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/remove-legacy-scripts-loading

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 6, 2025

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

I followed the steps and can confirm the dependencies are loaded as expected, especially:

  • Product Image Gallery dependencies (e.g. flexslider or photoswipe) are loaded only with Classic block or with Product Image Gallery,
  • single-product.js is loaded with Classic block or when classic Product Image Gallery or Product Details are in use.

Great job! 💪


Side question, I see you're changing [] into array() - is that done automatically by your linter or you do it manually? If so, why? Is there any benefit of array() over []?

@dinhtungdu
Copy link
Member Author

Side question, I see you're changing [] into array() - is that done automatically by your linter or you do it manually? If so, why? Is there any benefit of array() over []?

Yeah, it's auto-formatted by my editor. I need to see why it didn't follow our ruleset. I deleted that change manually probably three times for this PR 😅 , let me remove it.

@dinhtungdu dinhtungdu force-pushed the fix/remove-legacy-scripts-loading branch from 0a5861d to 20d11ad Compare August 7, 2025 10:57
@dinhtungdu dinhtungdu requested a review from kmanijak August 7, 2025 10:57
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (2)
plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php (2)

30-31: Revert array syntax to align with project standards.

The change from [] to array() contradicts the established WooCommerce coding standards. Per the PR objectives, this was unintended auto-formatting.

-		return array( 'query', 'queryId', 'postId' );
+		return [ 'query', 'queryId', 'postId' ];

48-73: LGTM! Comprehensive legacy asset management.

The method properly handles legacy script requirements:

  • Enqueues all necessary scripts (zoom, flexslider, photoswipe)
  • Includes required styles (photoswipe-default-skin)
  • Adds photoswipe template to footer
  • Enables required filters for zoom, photoswipe, and flexslider functionality

The intentional duplication with ClassicTemplate.php is well-documented and aligns with the PR's independence strategy for legacy blocks.

However, consider the array syntax consistency:

-		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_legacy_assets' ], 20 );
+		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_legacy_assets' ), 20 );
📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a5861d and 20d11ad.

📒 Files selected for processing (6)
  • plugins/woocommerce/changelog/60223-fix-remove-legacy-scripts-loading (1 hunks)
  • plugins/woocommerce/includes/class-wc-frontend-scripts.php (1 hunks)
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php (1 hunks)
  • plugins/woocommerce/src/Blocks/BlockTypes/ClassicTemplate.php (3 hunks)
  • plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php (2 hunks)
  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
  • plugins/woocommerce/changelog/60223-fix-remove-legacy-scripts-loading
  • plugins/woocommerce/includes/class-wc-frontend-scripts.php
  • plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php
  • plugins/woocommerce/src/Blocks/BlockTypes/ClassicTemplate.php
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{php,js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/code-quality.mdc)

**/*.{php,js,jsx,ts,tsx}: Guard against unexpected inputs
Sanitize and validate any potentially dangerous inputs
Ensure code is backwards compatible
Write code that is readable and intuitive
Ensure code has unit or E2E tests where applicable

Files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
**/*.{php,js,ts,jsx,tsx}

⚙️ CodeRabbit Configuration File

**/*.{php,js,ts,jsx,tsx}: Don't trust that extension developers will follow the best practices, make sure the code:

  • Guards against unexpected inputs.
  • Sanitizes and validates any potentially dangerous inputs.
  • Is backwards compatible.
  • Is readable and intuitive.
  • Has unit or E2E tests where applicable.

Files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
🧠 Learnings (14)
📓 Common learnings
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx:0-0
Timestamp: 2025-06-16T16:12:12.148Z
Learning: For WooCommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequential "popping" effects during component loading. This approach prioritizes user experience over code splitting, with minimal bundle size impact and improved performance (1.7s to 1.1s speed score improvement). The checkout flow benefits from having all components load together rather than incrementally.
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
Learnt from: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.
Learnt from: NeosinneR
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-26T14:25:08.421Z
Learning: In WooCommerce transactional emails, product images have historically had display issues due to lazy loading attributes being applied, which email clients cannot process since they don't execute JavaScript. This issue existed in both old and new email templates, but became more visible with the new email template system. The fix involves preventing lazy loading on attachment images specifically during email generation by adding skip classes and data attributes.
Learnt from: Aljullu
PR: woocommerce/woocommerce#58809
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php:222-225
Timestamp: 2025-06-13T17:11:13.732Z
Learning: In `plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php`, the team intentionally relies on toggling the `disabled` CSS class (via `data-wp-class--disabled`) instead of binding the `disabled` attribute, to mirror the behavior of the classic WooCommerce template.
Learnt from: Aljullu
PR: woocommerce/woocommerce#59370
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss:236-243
Timestamp: 2025-07-03T10:09:20.635Z
Learning: In WooCommerce blocks CSS, prefer using standard CSS properties like `scrollbar-width` over vendor-specific prefixes when the standard property has good browser support. As of late 2024, `scrollbar-width` is widely supported across all major browsers and doesn't require WebKit-specific workarounds.
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss:21-26
Timestamp: 2025-06-13T15:24:45.923Z
Learning: In WooCommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scoped only to the Cart block (`.wc-block-cart__main`); on the Checkout block, product names are not bold because prices are highlighted instead.
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
📚 Learning: in `plugins/woocommerce/src/blocks/blocktypes/productbutton.php`, the team intentionally relies on t...
Learnt from: Aljullu
PR: woocommerce/woocommerce#58809
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php:222-225
Timestamp: 2025-06-13T17:11:13.732Z
Learning: In `plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php`, the team intentionally relies on toggling the `disabled` CSS class (via `data-wp-class--disabled`) instead of binding the `disabled` attribute, to mirror the behavior of the classic WooCommerce template.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: the displaystyleswitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-fil...
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
📚 Learning: in wordpress blocks, when there's a styling mismatch between editor and frontend, check if the php r...
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: woocommerce legacy javascript files in plugins/woocommerce/client/legacy/js/ must use older javascri...
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: in woocommerce transactional emails, product images have historically had display issues due to lazy...
Learnt from: NeosinneR
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-26T14:25:08.421Z
Learning: In WooCommerce transactional emails, product images have historically had display issues due to lazy loading attributes being applied, which email clients cannot process since they don't execute JavaScript. This issue existed in both old and new email templates, but became more visible with the new email template system. The fix involves preventing lazy loading on attachment images specifically during email generation by adding skip classes and data attributes.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: in woocommerce blocks, when porting existing code patterns that have known issues (like parseint tru...
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: woocommerce block templates have a predictable structure where each block has one top-level div with...
Learnt from: samueljseay
PR: woocommerce/woocommerce#59142
File: plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php:594-602
Timestamp: 2025-06-25T06:51:41.381Z
Learning: WooCommerce block templates have a predictable structure where each block has one top-level div with wp-block-woocommerce- class containing arbitrary nested content that should be preserved.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: the core/spacer block in the woocommerce email editor intentionally does not have a dedicated render...
Learnt from: lysyjan
PR: woocommerce/woocommerce#59070
File: packages/php/email-editor/src/Integrations/Core/class-initializer.php:103-141
Timestamp: 2025-06-23T16:55:58.246Z
Learning: The core/spacer block in the WooCommerce email editor intentionally does not have a dedicated renderer class and is handled by the fallback renderer instead of having an explicit render_email_callback assigned in the switch statement.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
📚 Learning: in woocommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scope...
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss:21-26
Timestamp: 2025-06-13T15:24:45.923Z
Learning: In WooCommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scoped only to the Cart block (`.wc-block-cart__main`); on the Checkout block, product names are not bold because prices are highlighted instead.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: for woocommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequ...
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx:0-0
Timestamp: 2025-06-16T16:12:12.148Z
Learning: For WooCommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequential "popping" effects during component loading. This approach prioritizes user experience over code splitting, with minimal bundle size impact and improved performance (1.7s to 1.1s speed score improvement). The checkout flow benefits from having all components load together rather than incrementally.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: for woocommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, t...
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: in woocommerce's wc_delete_product_transients function, the context check includes both $is_admin_pa...
Learnt from: mreishus
PR: woocommerce/woocommerce#58817
File: plugins/woocommerce/includes/wc-product-functions.php:140-140
Timestamp: 2025-06-13T23:52:46.221Z
Learning: In WooCommerce's wc_delete_product_transients function, the context check includes both $is_admin_page (for regular admin screens) and $is_privileged_ajax (for AJAX requests from users with edit_products capability), ensuring that legitimate admin AJAX operations like product imports/exports can still delete transients.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
📚 Learning: on specific woocommerce admin pages like advanced keys, advanced webhooks, and extensions pages, the...
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9108-9115
Timestamp: 2025-08-04T00:21:08.386Z
Learning: On specific WooCommerce admin pages like Advanced Keys, Advanced Webhooks, and Extensions pages, the screen meta links (#screen-meta-links) are intentionally hidden with display:none because the Help tab and Screen Options functionality is not needed or relevant for these particular routes, making complete DOM removal appropriate rather than just visual hiding.

Applied to files:

  • plugins/woocommerce/src/Blocks/BlockTemplatesController.php
🔇 Additional comments (3)
plugins/woocommerce/src/Blocks/BlockTemplatesController.php (2)

33-34: LGTM! Proper integration of legacy script dequeuing.

The action hook is correctly added with priority 20, which aligns with the enqueue priority used in legacy blocks, ensuring proper execution order.


36-40: LGTM! Clean and secure legacy script management.

The implementation correctly:

  • Uses the safe is_product() conditional check
  • Targets the specific wc-single-product script handle
  • Follows the dequeue-then-selective-enqueue pattern for optimization

This approach allows legacy blocks to re-enqueue scripts as needed while preventing unnecessary loading on block themes.

plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php (1)

33-46: LGTM! Proper conditional asset enqueuing.

The implementation correctly:

  • Calls the parent enqueue_assets() method to maintain inheritance
  • Uses is_product() for safe conditional logic
  • Sets priority 20 to execute after the global dequeue in BlockTemplatesController
  • Follows the established pattern for legacy asset management

@dinhtungdu
Copy link
Member Author

@kmanijak Thank you for the review. In the latest commits, I chose to refactor my approach. I believe we should avoid modifying the WC_Frontend_Scripts class because it was designed solely for classic themes. Instead, I decided to control the legacy script dequeuing from the block template controller. This method works better not only for the single-product.js script but also for the global woocommerce.js script. Unlike the single product script, the global WooCommerce script needs to be disabled selectively, as some pages, like the account page, depend on it.

Because of this significant change, could you review it once more?

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

I double checked the scenarios and all works fine still. I also checked the other classic templates (I appreciate the is_product() check!) so they don't load unnecessary dependencies.

I left one minor comment but it's not super crucial so approving again!

Comment on lines 43 to 45
if ( is_product() ) {
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_legacy_assets' ], 20 );
}
Copy link
Contributor

Choose a reason for hiding this comment

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

In this case, I think we can skip the is_product() check 🤔 Check makes sense in Classic Template but if Product Image Gallery is used, then we can safely assume the dependencies are needed. WDYT?

@dinhtungdu
Copy link
Member Author

Blocked by #60213

@dinhtungdu dinhtungdu enabled auto-merge (squash) August 20, 2025 03:51
@dinhtungdu dinhtungdu merged commit 817db32 into trunk Aug 20, 2025
34 checks passed
@dinhtungdu dinhtungdu deleted the fix/remove-legacy-scripts-loading branch August 20, 2025 04:05
@github-actions github-actions bot added this to the 10.2.0 milestone Aug 20, 2025
@ktmn
Copy link

ktmn commented Sep 17, 2025

/**
* Enqueue legacy assets when this block is used as we don't enqueue them for block themes anymore.
*
* Note: This enqueue logic is intentionally duplicated in ProductImageGallery.php
* to keep legacy blocks independent and allow for separate deprecation paths.
*
* @see https://github.com/woocommerce/woocommerce/pull/60223
*/
public function enqueue_legacy_assets() {
// Legacy script dependencies for backward compatibility.
wp_enqueue_script( 'wc-zoom' );
wp_enqueue_script( 'wc-flexslider' );
wp_enqueue_script( 'wc-photoswipe-ui-default' );
wp_enqueue_style( 'photoswipe-default-skin' );
wp_enqueue_script( 'wc-single-product' );
add_action(
'wp_footer',
function () {
wc_get_template( 'single-product/photoswipe.php' );
}
);
add_filter( 'woocommerce_single_product_zoom_enabled', '__return_true' );
add_filter( 'woocommerce_single_product_photoswipe_enabled', '__return_true' );
add_filter( 'woocommerce_single_product_flexslider_enabled', '__return_true' );
}

@dinhtungdu Excuse me, but why wp_enqueue_script( 'zoom' ); and add_filter( 'woocommerce_single_product_zoom_enabled', '__return_true' ); when I have remove_theme_support( 'wc-product-gallery-zoom' );?

Why wp_enqueue_script( 'flexslider' ); when I have remove_theme_support( 'wc-product-gallery-slider' );?

Why enqueue Photoswipe when I have remove_theme_support( 'wc-product-gallery-lightbox' );?

Does opting out of these features work differently now?

@dinhtungdu
Copy link
Member Author

dinhtungdu commented Sep 18, 2025

@ktmn, the support behavior for classic themes remains unchanged. This effort aims to optimize frontend performance for block themes. Previously, we always added gallery support for block themes, regardless of whether they used the classic template block. As a result, the gallery scripts are always loaded for block themes unless the active theme removes the gallery support.

This pull request changes that by moving the script loading to the classic template block and the gallery block. We assume that users utilizing these blocks will also use the classic gallery. We may have overlooked certain use cases, especially if you are removing gallery support while using the classic template block. We will investigate how to support disabling the gallery script when using the Classic Template block. We can't use theme supports here, as we only want to enqueue the gallery and single product scripts when the legacy blocks are in use.

@ktmn
Copy link

ktmn commented Sep 18, 2025

the support behavior for classic themes remains unchanged

I'm using a block theme though, just not with any WC blocks (except for woocommerce/legacy-template in single-product and archive-product block templates, Cart page uses [woocommerce_cart] shortcode and Checkout page uses [woocommerce_checkout] shortcode).

Not sure what that qualifies as, a "classic theme"?

I disabled all the functionality I don't need via the remove_theme_support-s and now they're back with WC 10.2.0. 🤷‍♂️

Copy link
Member Author

dinhtungdu commented Sep 19, 2025

You're using a block theme with the Classic Template (woocommerce/legacy-template) block, so you're affected by this PR. As I mentioned above, we overlooked use cases like yours, where the Classic Template block is used with some theme supports removed. We need to find a way to opt out of legacy script loading for consumers of that block, as removing theme support won't work here anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants