From 799fba6bdca4ac1e6ea0bd7912211c196ca4b2a8 Mon Sep 17 00:00:00 2001 From: Tonya Mork Date: Tue, 24 Jul 2018 12:21:27 -0500 Subject: [PATCH 1/3] Set an inline `width: auto` for
that has `width: fit-content`. A `
` element with `.wp-block-image` and not `.is-resized` has its width set to a default of `fit-content`. That CSS rule value causes wider images to overflow out of the parent container. For this element, this commit adds an inline style of `width: auto`. Closes #1086. --- .../sanitizers/class-amp-img-sanitizer.php | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php index ba050adc49f..9950fa66862 100644 --- a/includes/sanitizers/class-amp-img-sanitizer.php +++ b/includes/sanitizers/class-amp-img-sanitizer.php @@ -257,6 +257,7 @@ private function adjust_and_replace_node( $node ) { $new_node = AMP_DOM_Utils::create_node( $this->dom, $new_tag, $new_attributes ); $new_node = $this->handle_centering( $new_node ); $node->parentNode->replaceChild( $new_node, $node ); + $this->add_auto_width_to_figure( $new_node ); } /** @@ -339,4 +340,36 @@ public function handle_centering( $node ) { return $figure; } + + /** + * Add an inline style to set the `
` element's width to `auto` instead of `fit-content`. + * + * @since 1.0 + * @see https://github.com/Automattic/amp-wp/issues/1086 + * + * @param DOMNode $node The DOMNode to adjust and replace. + */ + protected function add_auto_width_to_figure( $node ) { + $figure = $node->parentNode; + if ( ! $figure instanceof DOMElement || 'figure' !== $figure->tagName ) { + return; + } + + $class = $figure->getAttribute( 'class' ); + // Target only the
with a 'wp-block-image' class attribute. + if ( false === strpos( $class, 'wp-block-image' ) ) { + return; + } + + // Target only
without a 'is-resized' class attribute. + if ( false !== strpos( $class, 'is-resized' ) ) { + return; + } + + if ( $figure->hasAttribute( 'style' ) ) { + $figure->setAttribute( 'style', 'width: auto;' . $figure->getAttribute( 'style' ) ); + } else { + $figure->setAttribute( 'style', 'width: auto' ); + } + } } From 9d29f52bd69643f940e0c60c5abf053ed34829c4 Mon Sep 17 00:00:00 2001 From: Tonya Mork Date: Tue, 24 Jul 2018 12:51:00 -0500 Subject: [PATCH 2/3] Test wider image conditions. --- tests/test-amp-img-sanitizer.php | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/tests/test-amp-img-sanitizer.php b/tests/test-amp-img-sanitizer.php index f8ec8e1b42e..5bbd876d758 100644 --- a/tests/test-amp-img-sanitizer.php +++ b/tests/test-amp-img-sanitizer.php @@ -183,6 +183,31 @@ public function get_data() { '
', '
', ), + + 'wide_image' => array( + '
Image Alignment 580x300
', + '
', + ), + + 'wide_image_center_aligned' => array( + '
Image Alignment 580x300
', + '
', + ), + + 'wide_image_left_aligned' => array( + '
Image Alignment 580x300
', + '
', + ), + + 'wide_image_right_aligned' => array( + '
Image Alignment 580x300
', + '
', + ), + + 'wide_image_is_resized' => array( + '
Image Alignment 580x300
', + '
', + ), ); } From 95e33e865727116eb4c2cae2b1902c7c514e20a2 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 24 Jul 2018 18:01:08 -0700 Subject: [PATCH 3/3] Explicitly indicate nodes as DOMElement instances; de-dupe CSS --- includes/sanitizers/class-amp-img-sanitizer.php | 13 +++++++------ tests/test-amp-img-sanitizer.php | 12 ++++++------ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php index 9950fa66862..9252b7139f8 100644 --- a/includes/sanitizers/class-amp-img-sanitizer.php +++ b/includes/sanitizers/class-amp-img-sanitizer.php @@ -229,7 +229,7 @@ private function adjust_and_replace_nodes_in_array_map( $node_lists ) { /** * Make final modifications to DOMNode * - * @param DOMNode $node The DOMNode to adjust and replace. + * @param DOMElement $node The DOMNode to adjust and replace. */ private function adjust_and_replace_node( $node ) { @@ -269,7 +269,7 @@ private function adjust_and_replace_node( $node ) { */ private function maybe_add_lightbox_attributes( $attributes, $node ) { $parent_node = $node->parentNode; - if ( 'figure' !== $parent_node->tagName ) { + if ( ! ( $parent_node instanceof DOMElement ) || 'figure' !== $parent_node->tagName ) { return $attributes; } @@ -347,11 +347,11 @@ public function handle_centering( $node ) { * @since 1.0 * @see https://github.com/Automattic/amp-wp/issues/1086 * - * @param DOMNode $node The DOMNode to adjust and replace. + * @param DOMElement $node The DOMNode to adjust and replace. */ protected function add_auto_width_to_figure( $node ) { $figure = $node->parentNode; - if ( ! $figure instanceof DOMElement || 'figure' !== $figure->tagName ) { + if ( ! ( $figure instanceof DOMElement ) || 'figure' !== $figure->tagName ) { return; } @@ -366,10 +366,11 @@ protected function add_auto_width_to_figure( $node ) { return; } + $new_style = 'width: auto;'; if ( $figure->hasAttribute( 'style' ) ) { - $figure->setAttribute( 'style', 'width: auto;' . $figure->getAttribute( 'style' ) ); + $figure->setAttribute( 'style', $new_style . $figure->getAttribute( 'style' ) ); } else { - $figure->setAttribute( 'style', 'width: auto' ); + $figure->setAttribute( 'style', $new_style ); } } } diff --git a/tests/test-amp-img-sanitizer.php b/tests/test-amp-img-sanitizer.php index 5bbd876d758..8896565eb9d 100644 --- a/tests/test-amp-img-sanitizer.php +++ b/tests/test-amp-img-sanitizer.php @@ -186,22 +186,22 @@ public function get_data() { 'wide_image' => array( '
Image Alignment 580x300
', - '
', + '
', ), 'wide_image_center_aligned' => array( '
Image Alignment 580x300
', - '
', + '
', ), - 'wide_image_left_aligned' => array( - '
Image Alignment 580x300
', - '
', + 'wide_image_left_aligned_custom_style' => array( + '
Image Alignment 580x300
', + '
', ), 'wide_image_right_aligned' => array( '
Image Alignment 580x300
', - '
', + '
', ), 'wide_image_is_resized' => array(