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

Lightbox: Re-use existing Tag Processor instance. #55281

Closed
wants to merge 2 commits into from

Conversation

dmsnell
Copy link
Member

@dmsnell dmsnell commented Oct 11, 2023

Status

  • as of yet I have not tested the changes in here, but I did test the changes in the companion PR in Core, so unless I misapplied the refactor things seems to be working the way they previously were.
  • I know that there could be some interplay here with the missing-image bug fix and changes to ensure that not every image gets the lightbox setting applied to it. I'm happy to keep this updated and handle any conflicts.

Companion work in WordPress/wordpress-develop#5428

Resolves #55123

What?

This patch refactors the use of the HTML API in image lightbox rendering. It replaces creating multiple Tag Processor instances with the use of a single instance that rewinds and jumps around to perform multiple jobs on a single instance.

Also incorporated is a fix for bailing out when no images are in a given image block's output HTML.

Why?

The use of the HTML API in the current Lightbox rendering code is a bit confusing and it's inefficient (pending measurements). Being official code in Core/Gutenberg it sets an example for other developers wanting to learn how to use the HTML API. This refactor exists to ensure that we set a strong example of various uses of the Tag Processor and how to balance performance and usability needs.

How?

Reuses the existing Tag Processor instance and relies on bookmarks and seeking to make successive changes.

Testing Instructions

Review the code changes, test posts with "Expand on click" enabled for an image, for multiple images, for no images. Ensure that the behaviors here and in trunk match.

@dmsnell dmsnell added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block Needs PHP backport Needs PHP backport to Core labels Oct 11, 2023
@dmsnell dmsnell force-pushed the update/lightbox-html-api-use branch 2 times, most recently from ab3c0d5 to fdb0b2f Compare October 11, 2023 19:29
@@ -22,7 +22,7 @@ function render_block_core_image( $attributes, $content, $block ) {

$processor = new WP_HTML_Tag_Processor( $content );

if ( ! $processor->next_tag( 'img' ) || null === $processor->get_attribute( 'src' ) ) {
if ( ! $processor->next_tag( 'IMG' ) || null === $processor->get_attribute( 'src' ) ) {
Copy link
Member Author

Choose a reason for hiding this comment

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

this isn't as important, but I carried it over from my other patch since I've tried to standardize tag names in the HTML API in uppercase, only because that's the form of the tag name that the API hands out

@dmsnell dmsnell force-pushed the update/lightbox-html-api-use branch from fdb0b2f to 51d86dd Compare October 13, 2023 21:23
@github-actions
Copy link

github-actions bot commented Oct 13, 2023

Flaky tests detected in 9d56eb8.
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/6520770211
📝 Reported issues:

@dmsnell dmsnell force-pushed the update/lightbox-html-api-use branch from 51d86dd to 9d56eb8 Compare October 15, 2023 00:18
Copy link
Contributor

@michalczaplinski michalczaplinski left a comment

Choose a reason for hiding this comment

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

In general this looks all right and the majority of the refactors make it easier to read. Re-using the Tag Processor obviously makes sense.

However, I'm pretty concerned that the need to manually reset each property after calling seek() makes it much harder to update this file in the future. If I want to add a $processor->addClass('newClass') call anywhere in this file in the future, I would also have to find the right place to add $processor->removeClass('newClass'). This is not an acceptable burden on future developers 😅

I would be much happier to merge this, it if there were a built in-method in the Tag Processor that we could call to reset the internal state and we could use it in this PR, like I mention below in #55281 (comment)

Comment on lines 228 to 231
// Only process if there's an IMG element after this FIGURE. It should be inside it.
if ( ! $processor->next_tag( 'IMG' ) ) {
return $block_content;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not 100% sure about this assumption. Other elements are also valid children of the <figure>, e.g. there might be a <figcaption>.

Copy link
Member Author

Choose a reason for hiding this comment

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

this will still fall on an IMG, but I'm noting that assumes that the image appears later in the document than the FIGURE, and is also assuming that an image is inside the figure.

in the HTML Processor we'd express this in the following way:

if ( ! $processor->next_tag( array( 'breadcrumbs' => array( 'FIGURE', 'IMG' ) ) ) ) {
	return $block_content;
}

I can update the comment to make this clearer.

Copy link
Member Author

Choose a reason for hiding this comment

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

expanded the comment in 0c0f5bc

Comment on lines +273 to +276
*
* In order to reuse the existing Tag Processor, changes made before
* need to be undone before setting the new changes here.
*/
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting. This is beyond the scope of this PR of course, but are there any plans to add something like a $processor->reset() method or maybe a $processor->seek( '<tag-name>', $reset = true ) to the Tag Processor so that there's no need to reset each property manually?

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't think it will make sense to include a $reset_changes mode to the tag processor because of the complexity and runtime costs that could introduce. I have explored a chunked mode that could be used here instead, but in this particular case I think most solutions will be a bit messy.

your concern is real though, and I share it. it's a bit nasty having to reset. I did run some initial profiling but it's hard to get a good handle on the runtime impact without a more typical representative page, something I didn't have time to do last week.

Companion work in WordPress/wordpress-develop#5428

Resolves #55123

This patch refactors the use of the HTML API in image lightbox rendering.
It replaces creating multiple Tag Processor instances with the use of a
single instance that rewinds and jumps around to perform multiple jobs
on a single instance.

Also incorporated is a fix for bailing out when no images are in a given
image block's output HTML.
@dmsnell dmsnell force-pushed the update/lightbox-html-api-use branch from 9d56eb8 to 7b3ec58 Compare October 16, 2023 22:56
@michalczaplinski
Copy link
Contributor

Closing this now as I think it does not apply anymore and the PR would require a significant rewrite because of the changes in the index.php structure of the Image block.

Feel free to re-open if you plan to work on it in the future! 🙂

@dmsnell dmsnell deleted the update/lightbox-html-api-use branch February 15, 2024 17:34
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 Needs PHP backport Needs PHP backport to Core [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image block: clean-up and improve usage of WP_HTML_Tag_Processor
2 participants