Use responsive layout for blocks with alignwide class

[deepaklalwani97]

Summary

• Use the responsive layout for amp-iframe if the Gutenberg block has wide alignment.

Fixes #4692

Checklist

• My pull request is addressing an open issue (please create one otherwise).
• My code is tested and passes existing tests.
• My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

[pierlon]

Minor suggestion, but otherwise from that it looks good!

[pierlon]

Minor formatting suggestion:

Suggested change

	$figure_node_classes = explode( ' ', $figure_node->getAttribute( 'class' ) );
	// Changes layout to responsive for videos which have wide or full width (contains alignwide or alignfull class).
	$show_responsive = ( in_array( 'alignfull', $figure_node_classes, true ) || in_array( 'alignwide', $figure_node_classes, true ) );
	if ( true === $show_responsive ) {
	$normalized_attributes['layout'] = 'responsive';
	}
	$figure_node_classes = explode( ' ', $figure_node->getAttribute( 'class' ) );
	// If the alignment was set to 'wide width' or 'full width', set the layout to responsive.
	$show_responsive = (
	in_array( 'alignfull', $figure_node_classes, true ) ||
	in_array( 'alignwide', $figure_node_classes, true )
	);
	if ( true === $show_responsive ) {
	$normalized_attributes['layout'] = 'responsive';
	}

[deepaklalwani97]

Thanks, I have formatted the code as per the suggestion.

[westonruter]

Just a couple other things:

[westonruter]

It will be more robust to split by any whitespace because there could be newlines or other characters than spaces.

Suggested change

	$figure_node_classes = explode( ' ', $figure_node->getAttribute( 'class' ) );
	$figure_node_classes = preg_split( '/\s+/', trim( $figure_node->getAttribute( 'class' ) ) );

[deepaklalwani97]

Thanks for the feedback. I have applied the suggested changes.

[westonruter]

I think this can be simplified a bit:

Suggested change

	$show_responsive = (
	in_array( 'alignfull', $figure_node_classes, true ) ||
	in_array( 'alignwide', $figure_node_classes, true )
	);
	if ( true === $show_responsive ) {
	if ( in_array( 'alignfull', $figure_node_classes, true ) || in_array( 'alignwide', $figure_node_classes, true ) ) {

[deepaklalwani97]

@westonruter I have applied the suggested changes. This PR can be reviewed again let me know if any feedback.

[westonruter]

I just realized that there is similar logic in the Image sanitizer:

amp-wp/includes/sanitizers/class-amp-img-sanitizer.php

Lines 323 to 333 in 31d720d

	// Use responsive images when a theme supports wide and full-bleed images.
	if (
	! empty( $this->args['align_wide_support'] )
	&& $node->parentNode instanceof DOMElement
	&& 'figure' === $node->parentNode->nodeName
	&& preg_match( '/(^|\s)(alignwide|alignfull)(\s|$)/', $node->parentNode->getAttribute( Attribute::CLASS_ ) )
	) {
	$new_attributes[ Attribute::LAYOUT ] = Layout::RESPONSIVE;
	} else {
	$new_attributes[ Attribute::LAYOUT ] = Layout::INTRINSIC;
	}

And see:

amp-wp/includes/amp-helper-functions.php

Lines 1275 to 1277 in a0ef87c

	'AMP_Img_Sanitizer' => [
	'align_wide_support' => current_theme_supports( 'align-wide' ),
	],

I think what is needed is to harmonize the logic being introduced in this PR with the pre-existing logic in the image sanitizer to apply to all other sanitizers as well, where there is the possibility for the sanitized element to be a block that has the alignfull or alignwide block classes.

For example, the logic probably needs to be accounted for in AMP_Embed_Sanitizer and AMP_Video_Sanitizer at least.

[westonruter]

I noticed that gfycat embeds weren't getting sized responsively, but I believe they'll be accounted for in #4650.

[westonruter]

I also squashed the commits together to cherry-pick onto the 1.5 branch: 1ec497a.