ampproject / ampproject/amp-wp

Lightbox images ("Expand on click") in WordPress 6.4 is broken on AMP pages

Open
#7,676 1 comment 0 reactions 1 assignee Claimed by @thelovekesh View on GitHub
Bug P0
Dominant language
PHP
Stars
1.8k
Forks
378
Avg merge
1d 15h
Merged PRs (30d)
10

Description

### Bug Description

WordPress 6.4 introduces lightboxing for images ("Expand on click"). There are two new issues here:

1. This is redundant now with our existing "Add lightbox effect" in the AMP Settings panel. We can now deprecate the AMP lightbox setting (and the AMP Settings panel entirely?) following up on https://github.com/ampproject/amp-wp/pull/6833. Block deprecation routines should automatically convert the AMP lightbox block attribute to the new core lightbox block attribute. This would only be applicable to Wordpress 6.4+. Note: There is also a site-wide option to enable lightboxing by default under Styles » Blocks » Images.
2. Core's lightbox functionality is breaking AMP validation. A new sanitizer or embed handler is needed to automatically convert lightboxed image blocks over to use the AMP lightbox functionality. So while the dedicated AMP UI for lightboxing should be removed in WP 6.4+, the underlying AMP lightbox sanitizer/embed code would remain and be reused now for implementing core's lightbox handling. Nevertheless, some changes may be needed to make the AMP implementation more in-line with what core is doing.

Validation data for 4 validation errors

```json
[
{
"code": "ATTR_REQUIRED_BUT_MISSING",
"attributes": [
"src"
],
"spec_name": "amp-img",
"node_name": "img",
"parent_name": "figure",
"type": "html_element_error",
"node_attributes": {
"decoding": "async",
"data-wp-bind--src": "selectors.core.image.enlargedImgSrc",
"data-wp-style--object-fit": "selectors.core.image.lightboxObjectFit",
"src": "",
"alt": "",
"class": "wp-image-77"
},
"node_type": "ELEMENT",
"sources": [
{
"hook": "the_content",
"filter": true,
"post_id": 76,
"post_type": "post",
"sources": [
{
"type": "core",
"name": "wp-includes",
"file": "class-wp-embed.php",
"line": 62,
"function": "WP_Embed::run_shortcode"
},
{
"type": "core",
"name": "wp-includes",
"file": "class-wp-embed.php",
"line": 442,
"function": "WP_Embed::autoembed"
},
{
"type": "core",
"name": "wp-includes",
"file": "blocks.php",
"line": 1517,
"function": "do_blocks"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 37,
"function": "wptexturize"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 446,
"function": "wpautop"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 824,
"function": "shortcode_unautop"
},
{
"type": "core",
"name": "wp-includes",
"file": "post-template.php",
"line": 1712,
"function": "prepend_attachment"
},
{
"type": "core",
"name": "wp-includes",
"file": "https-migration.php",
"line": 51,
"function": "wp_replace_insecure_home_url"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 5697,
"function": "capital_P_dangit"
},
{
"type": "core",
"name": "wp-includes",
"file": "shortcodes.php",
"line": 243,
"function": "do_shortcode"
},
{
"type": "core",
"name": "wp-includes",
"file": "media.php",
"line": 1821,
"function": "wp_filter_content_tags"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 3501,
"function": "convert_smilies"
},
{
"type": "plugin",
"name": "amp",
"file": "includes/validation/class-amp-validation-manager.php",
"line": 1581,
"function": "AMP_Validation_Manager::decorate_filter_source"
}
]
},
{
"block_name": "core/image",
"post_id": 76,
"block_content_index": 0,
"block_attrs": {
"lightbox": {
"enabled": true
},
"id": 77,
"sizeSlug": "large",
"linkDestination": "none"
},
"type": "core",
"name": "wp-includes",
"file": "blocks/image.php",
"line": 18,
"function": "render_block_core_image"
}
],
"removed": true,
"reviewed": false
},
{
"code": "ATTR_REQUIRED_BUT_MISSING",
"attributes": [
"src"
],
"spec_name": "amp-img",
"node_name": "img",
"parent_name": "figure",
"type": "html_element_error",
"node_attributes": {
"decoding": "async",
"data-wp-bind--src": "context.core.image.imageCurrentSrc",
"data-wp-style--object-fit": "selectors.core.image.lightboxObjectFit",
"src": "",
"alt": "",
"class": "wp-image-77"
},
"node_type": "ELEMENT",
"sources": [
{
"hook": "the_content",
"filter": true,
"post_id": 76,
"post_type": "post",
"sources": [
{
"type": "core",
"name": "wp-includes",
"file": "class-wp-embed.php",
"line": 62,
"function": "WP_Embed::run_shortcode"
},
{
"type": "core",
"name": "wp-includes",
"file": "class-wp-embed.php",
"line": 442,
"function": "WP_Embed::autoembed"
},
{
"type": "core",
"name": "wp-includes",
"file": "blocks.php",
"line": 1517,
"function": "do_blocks"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 37,
"function": "wptexturize"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 446,
"function": "wpautop"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 824,
"function": "shortcode_unautop"
},
{
"type": "core",
"name": "wp-includes",
"file": "post-template.php",
"line": 1712,
"function": "prepend_attachment"
},
{
"type": "core",
"name": "wp-includes",
"file": "https-migration.php",
"line": 51,
"function": "wp_replace_insecure_home_url"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 5697,
"function": "capital_P_dangit"
},
{
"type": "core",
"name": "wp-includes",
"file": "shortcodes.php",
"line": 243,
"function": "do_shortcode"
},
{
"type": "core",
"name": "wp-includes",
"file": "media.php",
"line": 1821,
"function": "wp_filter_content_tags"
},
{
"type": "core",
"name": "wp-includes",
"file": "formatting.php",
"line": 3501,
"function": "convert_smilies"
},
{
"type": "plugin",
"name": "amp",
"file": "includes/validation/class-amp-validation-manager.php",
"line": 1581,
"function": "AMP_Validation_Manager::decorate_filter_source"
}
]
},
{
"block_name": "core/image",
"post_id": 76,
"block_content_index": 0,
"block_attrs": {
"lightbox": {
"enabled": true
},
"id": 77,
"sizeSlug": "large",
"linkDestination": "none"
},
"type": "core",
"name": "wp-includes",
"file": "blocks/image.php",
"line": 18,
"function": "render_block_core_image"
}
],
"removed": true,
"reviewed": false
},
{
"node_name": "script",
"parent_name": "body",
"code": "DISALLOWED_TAG",
"type": "js_error",
"node_attributes": {
"src": "http://localhost:10003/wp-includes/js/dist/interactivity.min.js?ver=__normalized__",
"id": "wp-interactivity-js",
"defer": "defer",
"data-wp-strategy": "defer"
},
"node_type": "ELEMENT",
"sources": [
{
"type": "core",
"name": "wp-includes",
"file": "blocks/image.php",
"line": 358,
"function": "register_block_core_image",
"hook": "init",
"priority": 10,
"dependency_type": "script",
"handle": "wp-block-image-view",
"dependency_handle": "wp-interactivity"
},
{
"type": "core",
"name": "wp-includes",
"file": "blocks.php",
"line": 1517,
"function": "do_blocks",
"hook": "the_content",
"priority": 9,
"dependency_type": "script",
"handle": "wp-block-image-view",
"dependency_handle": "wp-interactivity"
},
{
"type": "core",
"name": "wp-includes",
"file": "script-loader.php",
"line": 659,
"function": "wp_default_packages",
"hook": "wp_default_scripts",
"priority": 10,
"dependency_type": "script",
"handle": "wp-interactivity"
},
{
"type": "core",
"name": "wp-includes",
"file": "blocks/file.php",
"line": 92,
"function": "register_block_core_file",
"hook": "init",
"priority": 10,
"dependency_type": "script",
"handle": "wp-interactivity"
},
{
"type": "core",
"name": "wp-includes",
"file": "script-loader.php",
"line": 2239,
"function": "wp_print_footer_scripts",
"hook": "wp_footer",
"priority": 20
},
{
"type": "core",
"name": "wp-includes",
"file": "script-loader.php",
"line": 2229,
"function": "_wp_footer_scripts",
"hook": "wp_print_footer_scripts",
"priority": 10
}
],
"removed": true,
"reviewed": false
},
{
"node_name": "script",
"parent_name": "body",
"code": "DISALLOWED_TAG",
"type": "js_error",
"node_attributes": {
"src": "http://localhost:10003/wp-includes/blocks/image/view.min.js?ver=__normalized__",
"id": "wp-block-image-view-js",
"defer": "defer",
"data-wp-strategy": "defer"
},
"node_type": "ELEMENT",
"sources": [
{
"type": "core",
"name": "wp-includes",
"file": "blocks/image.php",
"line": 358,
"function": "register_block_core_image",
"hook": "init",
"priority": 10,
"dependency_type": "script",
"handle": "wp-block-image-view"
},
{
"type": "core",
"name": "wp-includes",
"file": "blocks.php",
"line": 1517,
"function": "do_blocks",
"hook": "the_content",
"priority": 9,
"dependency_type": "script",
"handle": "wp-block-image-view"
},
{
"type": "core",
"name": "wp-includes",
"file": "script-loader.php",
"line": 2239,
"function": "wp_print_footer_scripts",
"hook": "wp_footer",
"priority": 20
},
{
"type": "core",
"name": "wp-includes",
"file": "script-loader.php",
"line": 2229,
"function": "_wp_footer_scripts",
"hook": "wp_print_footer_scripts",
"priority": 10
}
],
"removed": true,
"reviewed": false
}
]
```


### Expected Behaviour

Core image lightboxes should work on AMP pages without validation errors. There should not be redundant UI elements for lightboxing.

### Screenshots

![image](https://github.com/ampproject/amp-wp/assets/134745/35522278-de13-46a3-942e-2fcd7f9680a1)

![image](https://github.com/ampproject/amp-wp/assets/134745/d5b19804-278e-4677-b545-b68cd4d28a40)

### PHP Version

8.1

### Plugin Version

2.5.0

### AMP plugin template mode

Standard, Transitional, Reader

### WordPress Version

6.4

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.