-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Experiment: Put directives on <figure> element and insert lightbox as its child #51089
Experiment: Put directives on <figure> element and insert lightbox as its child #51089
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've tested it, and it seems to work fine. Thanks for the pull request 🙂
It seems that there is a test not passing though.
I tested a few scenarios, and it resolved the listed issues. |
@gziolo Who else should we ping to move this fix forward? |
b28c011
to
b01fb40
Compare
I realized the directives were being unnecessarily duplicated in the |
This tests well for me as a fix for the Gallery layout issue. |
The <figure> directives were rendering not only in the body content, but also the lightbox. This ensures the directives do not appear in the lightbox.
c81c27c
to
8b67eb3
Compare
… its child (WordPress#51089) * Put directives on <figure> element and insert lightbox as its child * Fix PHP spacing * Ensure <figure> directives are only rendered in body content The <figure> directives were rendering not only in the body content, but also the lightbox. This ensures the directives do not appear in the lightbox. * Improve syntax * Change directives suffix and `data-wp-island` --------- Co-authored-by: Mario Santos <santosguillamot@gmail.com>
What?
This revises the HTML structure for the experimental image lightbox by ensuring there is no wrapping
<div>
.Why?
Addresses #51068 and related issues as detailed in the following comment, namely that containing a wrapping
<div>
causes existing styles and functionality to break.How?
Adds directives to the
<figure>
element using the tag processor, and does a regex for the<figure>
closing tag, adding the lightbox HTML as its child.Testing Instructions
data-wp-context
anddata-wp-island
attributes have been added to the<figure>
element.Testing Instructions for Keyboard
N/A