Added a fix for the lightbox

[CrochetFeve0251]

Description

Added a fix for the lightbox by not passing the wp attributes to the picture tag.

Fixes #758

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality).
• Bug fix (non-breaking change which fixes an issue).
• Enhancement (non-breaking change which improves an existing functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as before).
• This change requires a documentation update.

Is the solution different from the one proposed during the grooming?

No.

Checklists

Generic development checklist

• My code follows the style guidelines of this project, with adapted comments and without new warnings.
• I have added unit and integration tests that prove my fix is effective or that my feature works.
• The CI passes locally with my changes (including unit tests, integration tests, linter).
• Any dependent changes have been merged and published in downstream modules.
• If applicable, I have made corresponding changes to the documentation. Provide a link to the documentation.

Test summary

• I triggered all changed lines of code at least once without new errors/warnings/notices.
• I validated all Acceptance Criteria of the related issues. (If applicable, provide proof).
• I validated all test plan the QA Review asked me to.

If not, detail what you could not test.

Please describe any additional tests you performed.

[vmanthos]

@CrochetFeve0251 Thank you for the PR.

The issue has been fixed but there is a console error that's not there with trunk:

Uncaught TypeError: Cannot read properties of null (reading 'focus')

This can be seen here:
https://vasilis.rocketlabsqa.ovh/wordpress-6-4-lightbox-implementation

1. Click on the jellyfish picture.
2. Close the lightbox using the x button or the picture itself.
3. Check the console log.

Can you please check this? 🙏

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for cbb604d1	✅ ∅ (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (cbb604d)	Report Missing	Report Missing	Report Missing
Head commit (d018206)	14242	48	0.34%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#762)	0	0	∅ (not applicable)

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

Footnotes

1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

[Mai-Saad]

@remyperona Thanks for the update.
is it expected to load both next-gen and normal image when click on the image? /cc @piotrbak

[remyperona]

It's not expected, but this WP feature is also not planned to work with picture element I think. I would say it's an acceptable side effect compared to the current issue.

[Mai-Saad]

Items for exploratory

• same issue is working fine with avif
• same issue is working fine with normal optimized image served as picture
• serve webp image is still good on both apache and nginx
• serve webp image as picture is good with WPR (with /without webp option at wpr) and lightbox is still good
• is there any other feature like lightbox to be explored?

[nicomollet]

It looks good but needs proper QA

[Copilot]

Pull request overview

This pull request fixes a lightbox issue by preventing WordPress-specific data-wp attributes from being passed to the <picture> tag element. The fix filters out attributes with keys containing 'data-wp' before building the picture tag HTML, while still preserving these attributes on the inner <img> tag where they may be needed.

Key changes:

• Added filtering logic using array_filter to remove data-wp* attributes from picture tag
• Maintains backward compatibility by only affecting the picture tag, not the img tag

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The current check using strpos($attribute, 'data-wp') === false will filter out any attribute containing 'data-wp' anywhere in the key name, not just those starting with 'data-wp'. For more precise filtering of WordPress-specific attributes, consider using strpos($attribute, 'data-wp-') !== 0 or strncmp($attribute, 'data-wp-', 8) !== 0 to ensure only attributes that start with 'data-wp-' are filtered out. This prevents accidentally filtering attributes that may contain 'data-wp' in other positions.

Suggested change

	return strpos( $attribute, 'data-wp' ) === false;
	return strncmp( $attribute, 'data-wp-', 8 ) !== 0;

[Copilot]

Consider adding an inline comment above the array_filter call to explain why data-wp attributes are being filtered out from the picture tag. This would help future maintainers understand the purpose of this filtering, especially in relation to the lightbox fix mentioned in issue #758.