Add caption support to the Gallery block in <amp-carousel> and fix displaying Gallery block as carousel in WP 5.3 #3285
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -140,8 +140,41 @@ public function sanitize() { | |
| 'layout' => 'responsive', | ||
| ] | ||
| ); | ||
|
|
||
| foreach ( $images as $image ) { | ||
| $div = AMP_DOM_Utils::create_node( | ||
| $this->dom, | ||
| 'div', | ||
| [ 'class' => 'slide' ] | ||
| ); | ||
|
|
||
| // Ensure the image fills the entire <amp-carousel>, so the possible caption looks right. | ||
| if ( 'amp-img' === $image->tagName ) { | ||
| $image->setAttribute( 'layout', 'fill' ); | ||
|
There was a problem hiding this comment.
|
||
| $image->setAttribute( 'object-fit', 'cover' ); | ||
| } elseif ( isset( $image->firstChild->tagName ) && 'amp-img' === $image->firstChild->tagName ) { | ||
| // If the <amp-img> is wrapped in an <a>. | ||
| $image->firstChild->setAttribute( 'layout', 'fill' ); | ||
| $image->firstChild->setAttribute( 'object-fit', 'cover' ); | ||
| } | ||
|
|
||
| $possible_caption_text = $this->possibly_get_caption_text( $image ); | ||
| $div->appendChild( $image ); | ||
| if ( $possible_caption_text ) { | ||
| $caption_wrapper = AMP_DOM_Utils::create_node( | ||
| $this->dom, | ||
| 'div', | ||
| [ 'class' => 'amp-wp-gallery-caption' ] | ||
| ); | ||
| $caption_span = AMP_DOM_Utils::create_node( $this->dom, 'span', [] ); | ||
| $text_node = $this->dom->createTextNode( $possible_caption_text ); | ||
|
|
||
| $caption_span->appendChild( $text_node ); | ||
| $caption_wrapper->appendChild( $caption_span ); | ||
| $div->appendChild( $caption_wrapper ); | ||
| } | ||
|
|
||
| $amp_carousel->appendChild( $div ); | ||
| } | ||
|
|
||
| $node->parentNode->replaceChild( $amp_carousel, $node ); | ||
|
|
@@ -219,4 +252,24 @@ protected function add_lightbox_attributes_to_image_nodes( $element ) { | |
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Gets the caption of an image, if it exists. | ||
| * | ||
| * @param DOMElement $element The element for which to search for a caption. | ||
| * @return string|null The caption for the image, or null. | ||
| */ | ||
| public function possibly_get_caption_text( $element ) { | ||
| $caption_tag = 'figcaption'; | ||
| if ( isset( $element->nextSibling->nodeName ) && $caption_tag === $element->nextSibling->nodeName ) { | ||
| return $element->nextSibling->textContent; | ||
| } | ||
|
|
||
| // If 'Link To' is selected, the image will be wrapped in an <a>, so search for the sibling of the <a>. | ||
| if ( isset( $element->parentNode->nextSibling->nodeName ) && $caption_tag === $element->parentNode->nextSibling->nodeName ) { | ||
| return $element->parentNode->nextSibling->textContent; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
This used to simply append the image to the
<amp-carousel>. But now it creates a<div class="slide">wrapper that includes the image the caption if one exists.Then, it appends that
<div class="slide">to the<amp-carousel>.It looks like that's needed in order to display a caption.