Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use responsive layout for blocks with alignwide class #4693

Merged
merged 5 commits into from
May 22, 2020
Merged

Use responsive layout for blocks with alignwide class #4693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a1f815
Use responsive layout for blocks with alignwide class
deepaklalwani97 May 13, 2020
9319d68
Added short description comment
deepaklalwani97 May 13, 2020
bdfa938
Format code and update comment description
deepaklalwani97 May 13, 2020
31d720d
Use preg_split to split the class attribute
deepaklalwani97 May 14, 2020
5d97c5f
Use align-wide theme support check to use responsive layout
deepaklalwani97 May 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions includes/amp-helper-functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1276,8 +1276,9 @@ function amp_get_content_sanitizers( $post = null ) {
'AMP_Audio_Sanitizer' => [],
'AMP_Playbuzz_Sanitizer' => [],
'AMP_Iframe_Sanitizer' => [
'add_placeholder' => true,
'current_origin' => $current_origin,
'add_placeholder' => true,
'current_origin' => $current_origin,
'align_wide_support' => current_theme_supports( 'align-wide' ),
],
'AMP_Gallery_Block_Sanitizer' => [ // Note: Gallery block sanitizer must come after image sanitizers since itś logic is using the already sanitized images.
'carousel_required' => ! is_array( $theme_support_args ), // For back-compat.
Expand Down
16 changes: 12 additions & 4 deletions includes/sanitizers/class-amp-iframe-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
*/

use AmpProject\DevMode;
use AmpProject\Attribute;
use AmpProject\Layout;

/**
* Class AMP_Iframe_Sanitizer
Expand Down Expand Up @@ -124,8 +126,7 @@ public function sanitize() {
}

$this->did_convert_elements = true;
if ( empty( $normalized_attributes['layout'] ) && ! empty( $normalized_attributes['width'] ) && ! empty( $normalized_attributes['height'] ) ) {
$normalized_attributes['layout'] = 'intrinsic';
if ( empty( $normalized_attributes[ Attribute::LAYOUT ] ) && ! empty( $normalized_attributes[ Attribute::HEIGHT ] ) && ! empty( $normalized_attributes[ Attribute::WIDTH ] ) ) {

// Set layout to responsive if the iframe is aligned to full width.
$figure_node = null;
Expand All @@ -135,8 +136,15 @@ public function sanitize() {
if ( $node->parentNode->parentNode instanceof DOMElement && 'figure' === $node->parentNode->parentNode->tagName ) {
$figure_node = $node->parentNode->parentNode;
}
if ( $figure_node && $figure_node->hasAttribute( 'class' ) && in_array( 'alignfull', explode( ' ', $figure_node->getAttribute( 'class' ) ), true ) ) {
$normalized_attributes['layout'] = 'responsive';

if (
! empty( $this->args['align_wide_support'] )
&& $figure_node
&& preg_match( '/(^|\s)(alignwide|alignfull)(\s|$)/', $figure_node->getAttribute( Attribute::CLASS_ ) )
) {
$normalized_attributes[ Attribute::LAYOUT ] = Layout::RESPONSIVE;
} else {
$normalized_attributes[ Attribute::LAYOUT ] = Layout::INTRINSIC;
}

$this->add_or_append_attribute( $normalized_attributes, 'class', 'amp-wp-enforced-sizes' );
Expand Down
20 changes: 20 additions & 0 deletions tests/php/test-amp-iframe-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,26 @@ public function get_data() {
[
'add_noscript_fallback' => true,
'add_placeholder' => true,
'align_wide_support' => true,
],
],

'iframe_with_wide_width_alignment' => [
'<figure class="alignwide"><iframe width="750" height="422" src="https://videopress.com/embed/yFCmLMGL?hd=0" frameborder="0" allowfullscreen="" data-origwidth="750" data-origheight="422"></iframe></figure>',
'
<figure class="alignwide">
<amp-iframe width="750" height="422" src="https://videopress.com/embed/yFCmLMGL?hd=0" frameborder="0" allowfullscreen="" data-origwidth="750" data-origheight="422" sandbox="allow-scripts allow-same-origin" layout="responsive" class="amp-wp-enforced-sizes">
<span placeholder="" class="amp-wp-iframe-placeholder"></span>
<noscript>
<iframe width="750" height="422" src="https://videopress.com/embed/yFCmLMGL?hd=0" frameborder="0"></iframe>
</noscript>
</amp-iframe>
</figure>
',
[
'add_noscript_fallback' => true,
'add_placeholder' => true,
'align_wide_support' => true,
],
],

Expand Down