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 |
|---|---|---|
|
|
@@ -73,23 +73,44 @@ class AMP_Gallery_Block_Sanitizer extends AMP_Base_Sanitizer { | |
| * @since 0.2 | ||
| */ | ||
| public function sanitize() { | ||
| $xpath = new DOMXPath( $this->dom ); | ||
| $class_query = 'contains( concat( " ", normalize-space( @class ), " " ), " wp-block-gallery " )'; | ||
| $expr = sprintf( | ||
| '//ul[ %s ]', | ||
| implode( | ||
| ' or ', | ||
| [ | ||
| sprintf( '( parent::figure[ %s ] )', $class_query ), | ||
| $class_query, | ||
| ] | ||
| ) | ||
| ); | ||
| $query = $xpath->query( $expr ); | ||
|
|
||
| $nodes = []; | ||
| foreach ( $query as $node ) { | ||
| $nodes[] = $node; | ||
| } | ||
|
|
||
| foreach ( $nodes as $node ) { | ||
| /** | ||
| * Element | ||
| * | ||
| * @var DOMElement $node | ||
| */ | ||
|
|
||
| // In WordPress 5.3, the Gallery block's <ul> is wrapped in a <figure class="wp-block-gallery">, so look for that node also. | ||
| $gallery_node = isset( $node->parentNode ) && AMP_DOM_Utils::has_class( $node->parentNode, self::$class ) ? $node->parentNode : $node; | ||
| $attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $gallery_node ); | ||
|
|
||
| $is_amp_lightbox = isset( $attributes['data-amp-lightbox'] ) && true === filter_var( $attributes['data-amp-lightbox'], FILTER_VALIDATE_BOOLEAN ); | ||
| $is_amp_carousel = ( | ||
| ! empty( $this->args['carousel_required'] ) | ||
| || | ||
| filter_var( $node->getAttribute( 'data-amp-carousel' ), FILTER_VALIDATE_BOOLEAN ) | ||
| || | ||
| filter_var( $node->parentNode->getAttribute( 'data-amp-carousel' ), FILTER_VALIDATE_BOOLEAN ) | ||
| ); | ||
|
|
||
| // We are only looking for <ul> elements which have amp-carousel / amp-lightbox true. | ||
| if ( ! $is_amp_carousel && ! $is_amp_lightbox ) { | ||
|
|
@@ -140,11 +161,46 @@ public function sanitize() { | |
| 'layout' => 'responsive', | ||
| ] | ||
| ); | ||
|
|
||
| foreach ( $images as $image ) { | ||
| $slide = 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 ); | ||
| $slide->appendChild( $image ); | ||
|
|
||
| // Wrap the caption in a <div> and <span>, and append it to the slide. | ||
| 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 ); | ||
| $slide->appendChild( $caption_wrapper ); | ||
| } | ||
|
|
||
| $amp_carousel->appendChild( $slide ); | ||
| } | ||
|
|
||
| $gallery_node->parentNode->replaceChild( $amp_carousel, $gallery_node ); | ||
| } | ||
| $this->did_convert_elements = true; | ||
| } | ||
|
|
@@ -219,4 +275,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.
Like
$is_amp_carousel,$is_amp_lightboxalso needs to check theparentNodeto see ifdata-amp-lightboxis set (for Gutenberg 6.5+ compatibility). The simplest way of handling this situation for both$is_amp_carouseland$is_amp_lightboxmight be something like this: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.
Hi @claudiulodro, thanks for pointing that out. I ended up doing something similar to that.