Skip to content

Commit

Permalink
Use img tags when Bento is enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter committed Jul 31, 2021
1 parent 07d07bc commit 53aac04
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 12 deletions.
3 changes: 3 additions & 0 deletions includes/amp-helper-functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1422,6 +1422,8 @@ function amp_get_content_sanitizers( $post = null ) {
AMP_Theme_Support::TRANSITIONAL_MODE_SLUG === AMP_Options_Manager::get_option( Option::THEME_SUPPORT )
);

$bento_enabled = amp_is_bento_enabled();

$sanitizers = [
'AMP_Embed_Sanitizer' => [
'amp_to_amp_linking_enabled' => $amp_to_amp_linking_enabled,
Expand All @@ -1436,6 +1438,7 @@ function amp_get_content_sanitizers( $post = null ) {
'AMP_Srcset_Sanitizer' => [],
'AMP_Img_Sanitizer' => [
'align_wide_support' => current_theme_supports( 'align-wide' ),
'use_native' => $bento_enabled,
],
'AMP_Form_Sanitizer' => [],
'AMP_Comments_Sanitizer' => [
Expand Down
3 changes: 3 additions & 0 deletions includes/embeds/class-amp-gallery-embed-handler.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,9 @@ protected function get_parent_container_for_image( DOMElement $image_element ) {
* but that doesn't have the same effect as applying it to the <img>.
*/
public function print_styles() {
if ( amp_is_bento_enabled() ) {
return;
}
?>
<style>
.wp-block-gallery.is-cropped .blocks-gallery-item amp-img > img {
Expand Down
23 changes: 20 additions & 3 deletions includes/sanitizers/class-amp-core-theme-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -565,6 +565,10 @@ static function ( $content ) {
* @link https://github.com/WordPress/wordpress-develop/blob/ddc8f803c6e99118998191fd2ea24124feb53659/src/wp-content/themes/twentyseventeen/functions.php#L545:L554
*/
public static function add_twentyseventeen_attachment_image_attributes() {
if ( amp_is_bento_enabled() ) {
return;
}

/*
* The max-height of the `.custom-logo-link img` is defined as being 80px, unless
* there is header media in which case it is 200px. Issues related to vertically-squashed
Expand Down Expand Up @@ -802,6 +806,10 @@ protected static function get_twentyseventeen_navigation_outer_height() {
* Add required styles for featured image header and image blocks in Twenty Twenty.
*/
public static function add_twentytwenty_masthead_styles() {
if ( amp_is_bento_enabled() ) {
return;
}

add_action(
'wp_enqueue_scripts',
static function() {
Expand Down Expand Up @@ -862,6 +870,7 @@ function ( $attr_name ) {
$desktop_width = $desktop_height * ( $width / $height );
$mobile_width = $mobile_height * ( $width / $height );

// @todo Needed in AMP?
$html .= sprintf(
'<style data-src="%s">.site-logo amp-img { width: %frem; } @media (min-width: 700px) { .site-logo amp-img { width: %frem; } }</style>',
esc_attr( $method ),
Expand All @@ -887,6 +896,10 @@ function ( $attr_name ) {
* @link https://github.com/ampproject/amp-wp/issues/4419
*/
public static function add_img_display_block_fix() {
if ( amp_is_bento_enabled() ) {
return;
}

$method = __METHOD__;
// Note that wp_add_inline_style() is not used because this stylesheet needs to be added _before_ style.css so
// that any subsequent style rules for images will continue to override.
Expand Down Expand Up @@ -966,6 +979,10 @@ static function() {
* @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/style.css#L2100
*/
public static function add_twentyseventeen_image_styles() {
if ( amp_is_bento_enabled() ) {
return;
}

add_action(
'wp_enqueue_scripts',
static function() {
Expand Down Expand Up @@ -1344,7 +1361,7 @@ static function() {
padding-top: 0; /* Override responsive hack which is handled by AMP layout. */
overflow: visible;
}
.featured-content .post-thumbnail amp-img {
.featured-content .post-thumbnail .wp-post-image {
position: static;
left: auto;
top: auto;
Expand Down Expand Up @@ -1420,7 +1437,7 @@ static function() {
font-size: 32px;
line-height: 46px;
}
.featured-content .post-thumbnail amp-img {
.featured-content .post-thumbnail .wp-post-image {
object-fit: cover;
object-position: top;
}
Expand All @@ -1430,7 +1447,7 @@ static function() {
float: none;
margin: 0;
}
.featured-content .post-thumbnail amp-img {
.featured-content .post-thumbnail .wp-post-image {
height: 55.49132947vw;
}
.slider-control-paging li {
Expand Down
2 changes: 1 addition & 1 deletion includes/sanitizers/class-amp-gallery-block-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ public function sanitize() {
$gallery_node->setAttribute( 'data-amp-carousel', 'true' );
}

$img_elements = $node->getElementsByTagName( 'amp-img' );
$img_elements = $this->dom->xpath->query( './/amp-img | .//img[ not( parent::noscript ) ]', $node );

$this->process_gallery_embed( $is_amp_carousel, $is_amp_lightbox, $node, $img_elements );
}
Expand Down
45 changes: 37 additions & 8 deletions includes/sanitizers/class-amp-img-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ class AMP_Img_Sanitizer extends AMP_Base_Sanitizer {
*/
protected $DEFAULT_ARGS = [
'add_noscript_fallback' => true,
'use_native' => false,
];

/**
Expand Down Expand Up @@ -101,7 +102,7 @@ public function sanitize() {
return;
}

if ( $this->args['add_noscript_fallback'] ) {
if ( $this->args['add_noscript_fallback'] && ! $this->args['use_native'] ) {
$this->initialize_noscript_allowed_attributes( self::$tag );
}

Expand Down Expand Up @@ -144,7 +145,9 @@ public function sanitize() {
if ( 'wp-smiley' === $node->getAttribute( Attribute::CLASS_ ) ) {
$node->setAttribute( Attribute::WIDTH, '72' );
$node->setAttribute( Attribute::HEIGHT, '72' );
$node->setAttribute( Attribute::NOLOADING, '' );
if ( ! $this->args['use_native'] ) {
$node->setAttribute( Attribute::NOLOADING, '' );
}
}

if ( $node->hasAttribute( 'data-amp-layout' ) ) {
Expand Down Expand Up @@ -210,11 +213,15 @@ private function filter_attributes( $attributes ) {
break;

case 'data-amp-layout':
$out['layout'] = $value;
if ( ! $this->args['use_native'] ) {
$out['layout'] = $value;
}
break;

case 'data-amp-noloading':
$out['noloading'] = $value;
if ( ! $this->args['use_native'] ) {
$out['noloading'] = $value;
}
break;

// Skip directly copying new web platform attributes from img to amp-img which are largely handled by AMP already.
Expand Down Expand Up @@ -326,16 +333,38 @@ private function adjust_and_replace_nodes_in_array_map( $node_lists ) {
*/
private function adjust_and_replace_node( $node ) {

$amp_data = $this->get_data_amp_attributes( $node );
$amp_data = $this->args['use_native'] ? [] : $this->get_data_amp_attributes( $node );
$old_attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $node );
$old_attributes = $this->filter_data_amp_attributes( $old_attributes, $amp_data );
$old_attributes = $this->maybe_add_lightbox_attributes( $old_attributes, $node );
if ( ! $this->args['use_native'] ) {
$old_attributes = $this->filter_data_amp_attributes( $old_attributes, $amp_data );
$old_attributes = $this->maybe_add_lightbox_attributes( $old_attributes, $node );
}

$new_attributes = $this->filter_attributes( $old_attributes );
$layout = isset( $amp_data[ Attribute::LAYOUT ] ) ? $amp_data[ Attribute::LAYOUT ] : false;
$new_attributes = $this->filter_attachment_layout_attributes( $node, $new_attributes, $layout );
if ( ! $this->args['use_native'] ) {
$new_attributes = $this->filter_attachment_layout_attributes( $node, $new_attributes, $layout );
}

$this->add_or_append_attribute( $new_attributes, Attribute::CLASS_, 'amp-wp-enforced-sizes' );

// If using native <img> elements.
if ( $this->args['use_native'] ) {
unset(
$new_attributes['layout'],
$new_attributes['noloading']
);
$new_attributes[ DevMode::DEV_MODE_ATTRIBUTE ] = ''; // @todo Remove once https://github.com/ampproject/amphtml/issues/30442 lands.
$new_attributes[ Attribute::DECODING ] = 'async';
if ( ! isset( $new_attributes[ Attribute::LOADING ] ) ) {
$new_attributes[ Attribute::LOADING ] = 'lazy';
}
foreach ( $new_attributes as $attribute_name => $attribute_value ) {
$node->setAttribute( $attribute_name, $attribute_value );
}
return;
}

if ( empty( $new_attributes[ Attribute::LAYOUT ] ) && ! empty( $new_attributes[ Attribute::HEIGHT ] ) && ! empty( $new_attributes[ Attribute::WIDTH ] ) ) {
// Use responsive images when a theme supports wide and full-bleed images.
if (
Expand Down

0 comments on commit 53aac04

Please sign in to comment.