Skip to content
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

Improve image block lightbox escaping #51061

Merged
merged 2 commits into from
May 29, 2023
Merged

Conversation

juanfra
Copy link
Member

@juanfra juanfra commented May 29, 2023

What?

Improve the image block lightbox escaping.

Why?

The functionality can be broken by using some special characters in the image alt.

Example:

Screen.Recording.2023-05-29.at.17.34.19.mov

How?

Escaping all attributes.

Testing Instructions

  1. in the admin, enable Gutenberg > Experiments > Core Blocks
  2. Add an image to a post, use <html> in the alt text.
  3. Test enabling and disabling the lightbox using the image's Advanced panel
  4. View the post
  5. Click on the image
  6. Confirm that the lightbox is opened.

@juanfra juanfra requested a review from ajitbohra as a code owner May 29, 2023 15:44
@juanfra juanfra self-assigned this May 29, 2023
@juanfra juanfra added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block [Feature] Interactivity API API to add frontend interactivity to blocks. labels May 29, 2023
@juanfra juanfra requested a review from artemiomorales May 29, 2023 15:45
@juanfra juanfra changed the title Fix/image block lightbox escaping Improve image block lightbox escaping May 29, 2023
@github-actions
Copy link

Flaky tests detected in 5f49779.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5113426255
📝 Reported issues:

Copy link
Contributor

@alexstine alexstine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juanfra You are escaping the code inside the variable when you probably need to escape where the variable is returned in HTML. I recommend changing that. For example:

$some_var = __( 'Testing', 'some-text-domain' );
echo '<p>' . esc_html( $some_var ) . '</p>';

@juanfra
Copy link
Member Author

juanfra commented May 29, 2023

@alexstine, thanks for the review! Yes, I'm sanitizing at that point (as late as possible) because of the heredoc

@alexstine
Copy link
Contributor

@juanfra Why was the choice made here to use heredoc? Seems like for no more than what this outputs, a simple $output append would work just as well. Then we could have proper variable escapes in the content.

$output = '';
$output .= '<p>' . esc_html( $escaped_here ) . '</p>';
echo $output;

I am fine with approving this but kind of curious as to why this pattern was used.

Thanks

Copy link
Contributor

@alexstine alexstine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢 👍

@juanfra
Copy link
Member Author

juanfra commented May 29, 2023

@alexstine I am not entirely sure, I went through the PR where the original functionality was merged and I couldn't find any reference or discussion to the usage of heredoc for the return.

@juanfra juanfra merged commit 1ac78cc into trunk May 29, 2023
@juanfra juanfra deleted the fix/image-block-lightbox-escaping branch May 29, 2023 17:41
@github-actions github-actions bot added this to the Gutenberg 16.0 milestone May 29, 2023
@artemiomorales
Copy link
Contributor

@juanfra @alexstine Thanks for looking at this! I used the heredoc because it seemed to me that was the best way to clearly express the HTML structure and allow others to understand it at a glance, especially with all of the interactivity API directives.

@alexstine
Copy link
Contributor

I just never could recall us using heredoc in Core but I guess it likely is. Pretty large codebase so it is very possible this is just the first time I've seen it.

sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
* Improve the image block lightbox escaping.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Feature] Interactivity API API to add frontend interactivity to blocks. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants