Invalid Attribute Error displayed in Editor

[pooja-muchandikar]

Bug Description

For any image available in editor if Lightbox is enabled, Invalid attribute error is shown. This error is specifically visible in WordPress 6.0.

With WordPress 5.8 this error is not displayed and is working as expected.

Expected Behaviour

Error shouldn't be shown, should be able to check image in lightbox.

Screenshots

Editor Error Screenshot of WP 6.0

---

Screenshot of WP 5.8 Editor

PHP Version

8.1

Plugin Version

2.3.0

AMP plugin template mode

Standard

WordPress Version

6.0

Site Health

No response

Gutenberg Version

No response

OS(s) Affected

No response

Browser(s) Affected

No response

Device(s) Affected

No response

Acceptance Criteria

No response

Implementation Brief

No response

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

[westonruter]

Is this when you have enabled native img in the advanced settings? It may be what @milindmore22 also found and reported in chat.

[pooja-muchandikar]

No, even if native img setting is disabled the error is shown.

[westonruter]

@thelovekesh Please investigate further.

[milindmore22]

I think it's the same issue I mentioned in chat, it will show those attribute invalidations if you turn on lightbox and carousel with the native image and on gallery, I didn't encounter any issue while using amp-img

[westonruter]

No, even if native img setting is disabled the error is shown.

@pooja-muchandikar Could you double check this?

[westonruter]

When native img is being used, instead of adding layout=fill we could instead add an inline style that has the same properties (e.g. position:absolute; left:0; right:0; top:0; bottom: 0; width:100%; height:100%).

The same is true for adding the object-fit attribute, we could instead add the inline style, object-fit:cover.

What we can't solve entirely is the lightbox, as this will require amending the AMP validator spec. Currently, the lightboxable-elements attribute list is only present on amp-img, but it needs to be added to the img spec as well. While waiting for this to be valid, we could go ahead and add lightbox to the img and then add data-px-verified-attr="lightbox" to prevent it from being sanitized out.

[pooja-muchandikar]

Could you double check this?

Sure checking, will share update in soon.

[pooja-muchandikar]

Update:

First of all sorry for the inconvenience.

No, even if native img setting is disabled the error is shown.

This was due to my site cache.

---

Secondly yes, the issue happens when native img is enabled. Performed the steps on fresh site and following is my observations.

• Native img is disable: tried creating gallery and enabled lightbox - no error displayed.
• Native img enabled: tried with same gallery and image and enabled lightbox - error was displayed

Screen.Recording.2022-06-17.at.8.58.01.AM.mov

[pavanpatil1]

QA Passed ✅

Cross-checked the issue and the fix added for the issue is working as expected.

nativeimg.mp4