Skip to content

feat: enforce 21 image limit for Facebook catalog sync #3555

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
Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: enforce 21 image limit for Facebook catalog sync #3555

wants to merge 4 commits into from

Conversation

devbodaghe
Copy link
Contributor

Description

This PR implements a 21 image limit for the Facebook catalog multiple images functionality with robust validation to prevent sync issues and align with Facebook's catalog requirements. The implementation includes both client-side and server-side validation with improved user experience.

Key Changes:

  • Client-side validation: Real-time prevention of selecting more than 21 images in the WordPress media library
  • Server-side validation: Automatic truncation with admin notices as backup validation
  • Infinite loop prevention: Added validation flags and throttling to prevent UI freezing
  • User experience improvements: Non-blocking alerts with 2-second throttling to prevent spam
  • Configurable limit: Uses MAX_FACEBOOK_IMAGES constant (21) for easy maintenance

Problem Solved:
Previously, users could select unlimited images when using the "Use multiple images" option for product variations, which could cause Facebook catalog sync issues. The initial implementation also had an infinite loop bug that would freeze the UI with repeated alerts.

Dependencies: None - uses existing WordPress media library APIs and WooCommerce hooks.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Checklist

  • I have commented my code, particularly in hard-to-understand areas.
  • I have confirmed that my changes do not introduce any new PHPCS warnings or errors.
  • I have checked plugin debug logs that my changes do not introduce any new PHP warnings or FATAL errors.
  • I followed general Pull Request best practices. Meta employees to follow this wiki.
  • I have added tests (if necessary) and all the new and existing unit tests pass locally with my changes.
  • I have completed dogfooding and QA testing, or I have conducted thorough due diligence to ensure that it does not break existing functionality.
  • I have updated or requested update to plugin documentations (if necessary). Meta employees to follow this wiki.

Changelog entry

Enforce 21 image limit for Facebook catalog multiple images with improved validation and user experience

Test Plan

Automated Testing

  • JavaScript Tests: 33/33 tests passing, including new tests for:
    • Real-time validation with throttling
    • Infinite loop prevention
    • Alert spam prevention
  • PHP Unit Tests: All tests passing, including server-side validation tests
  • Commands: npm run test:js and vendor/bin/phpunit both pass successfully

Manual Testing Steps

Test Real-time Validation

  1. Navigate to a variable product edit page
  2. Add a variation and set image source to "Use multiple images"
  3. Click "Choose Multiple Images"
  4. Select exactly 21 images → Expected: No errors, selection works normally
  5. Try to select the 22nd image → Expected: Image is automatically deselected, alert appears once

Test Infinite Loop Prevention

  1. Follow steps 1-3 above
  2. Rapidly try to select multiple images beyond 21 → Expected:
    • No UI freezing
    • Alert appears maximum once every 2 seconds
    • Can click OK and continue normally
    • No recursive alert loops

Test Server-side Backup Validation

  1. Use browser dev tools to bypass client validation
  2. Submit form with >21 image IDs → Expected:
    • Admin notice appears
    • Only first 21 images are saved
    • No PHP errors in logs

Test Backward Compatibility

  1. Test with existing products that have multiple images
  2. Test with fewer than 21 images
  3. Test other image source options (product, parent, custom)
  4. Expected: No changes to existing functionality

Test Configuration

  • Environment: Local WordPress development environment with WooCommerce
  • PHP Version: 8.1+
  • Browser Testing: Chrome, Firefox, Safari
  • WordPress: Latest compatible version
  • WooCommerce: Latest compatible version

Screenshots

Screenshot 2025-08-12 at 19 18 11

David Evbodaghe added 3 commits August 12, 2025 19:09
feat: enforce 21 image limit for Facebook catalog sync
02a4924
fix: add real-time validation to prevent selecting more than 21 images
6535298 
- Add selection.on('add') event handler to prevent selection beyond limit
- Show immediate alert when user tries to select 22+ images
- Automatically remove excess selections to maintain 21 image limit
- Add test coverage for real-time validation behavior
fix: prevent infinite loop in image selection validation
9cf50f7 
- Add isValidating flag to prevent recursive event handling
- Add 2-second throttling to prevent alert spam
- Use setTimeout to prevent blocking DOM updates
- Improve user experience with controlled validation timing
- Update test to verify throttling behavior
@meta-cla meta-cla bot added the CLA Signed label Aug 12, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 12, 2025 •
edited
Loading

📦 Latest Plugin Build

Built at: 2025-08-12T18:31:57.787Z
Commit: 7767e42
Size: 1.1M

Download: Click here to download the plugin

To download: Click the link above → Scroll to bottom → Download "facebook-for-woocommerce" artifact

fix: escape output variables to prevent XSS vulnerability
d0ff300 
- Add esc_html() around max_images variable in admin notice
- Fixes WordPress.Security.EscapeOutput.OutputNotEscaped linting error
- Ensures all user-facing output is properly escaped for security
@devbodaghe devbodaghe added the changelog: fix Took care of something that wasn't working. label Aug 12, 2025
@facebook-github-bot
Copy link
Contributor

@devbodaghe has imported this pull request. If you are a Meta employee, you can view this in D80106439.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
changelog: fix Took care of something that wasn't working. CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@devbodaghe @facebook-github-bot