Skip to content

Commit 3a0b2c3

Browse files
westonruterwestonruter
committed
Merge branch 'develop' of github.com:ampproject/amp-wp into fix/validating-amp-unavailable-urls
* 'develop' of github.com:ampproject/amp-wp: (24 commits) Update DetermineHeroImagesTest to use amp-img instead of img Prevent DetermineHeroImages transformer from targeting any img element Avoid identifying noscript fallback img as hero image candidates Bump eslint-plugin-jest from 24.3.2 to 24.3.4 Bump postcss from 8.2.8 to 8.2.9 Bump svgo from 2.2.2 to 2.3.0 Bump @babel/core from 7.13.10 to 7.13.14 Bump eslint from 7.22.0 to 7.23.0 Bump classnames from 2.2.6 to 2.3.1 Add covers phpdoc tags Fix tests and optimize attribute removal Restore object-fit:contain for a reduced-specificity selector Omit problematic styling attributes from noscript fallback elements Fix inheritance of replaced-content properties on noscript fallbacks Fix double arrow alignment Remove obsolete core sanitizer CSS code from 2019, 2017, and 2014 Inherit replaced-content properties for replaced content shadow elements and noscript fallbacks Remove obsolete object-fit:contain for unknown-sized image since redundant with object-fit=contain attr Bump postcss-import from 14.0.0 to 14.0.1 Restrict object-fit to images which have the .amp-wp-unknown-size class ...
2 parents 1660cbd + e21a628 commit 3a0b2c3

17 files changed

+2110
-35124
lines changed

‎.github/workflows/build-test-measure.yml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ jobs:
3333
- name: Checkout
3434
uses: actions/checkout@v2
3535

36+
- name: Read .nvmrc
37+
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
38+
id: nvm
39+
40+
- name: Setup Node
41+
uses: actions/setup-node@v2
42+
with:
43+
node-version: ${{ steps.nvm.outputs.NVMRC }}
44+
3645
- name: Get npm cache directory
3746
id: npm-cache
3847
run: echo "::set-output name=dir::$(npm config get cache)"
@@ -62,6 +71,15 @@ jobs:
6271
- name: Checkout
6372
uses: actions/checkout@v2
6473

74+
- name: Read .nvmrc
75+
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
76+
id: nvm
77+
78+
- name: Setup Node
79+
uses: actions/setup-node@v2
80+
with:
81+
node-version: ${{ steps.nvm.outputs.NVMRC }}
82+
6583
- name: Get npm cache directory
6684
id: npm-cache
6785
run: echo "::set-output name=dir::$(npm config get cache)"
@@ -186,6 +204,15 @@ jobs:
186204
- name: Checkout
187205
uses: actions/checkout@v2
188206

207+
- name: Read .nvmrc
208+
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
209+
id: nvm
210+
211+
- name: Setup Node
212+
uses: actions/setup-node@v2
213+
with:
214+
node-version: ${{ steps.nvm.outputs.NVMRC }}
215+
189216
- name: Get npm cache directory
190217
id: npm-cache
191218
run: echo "::set-output name=dir::$(npm config get cache)"
@@ -229,6 +256,15 @@ jobs:
229256
with:
230257
php-version: '7.4'
231258

259+
- name: Read .nvmrc
260+
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
261+
id: nvm
262+
263+
- name: Setup Node
264+
uses: actions/setup-node@v2
265+
with:
266+
node-version: ${{ steps.nvm.outputs.NVMRC }}
267+
232268
- name: Get Composer Cache Directory
233269
id: composer-cache
234270
run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -363,6 +399,15 @@ jobs:
363399
sleep 1
364400
done
365401
402+
- name: Read .nvmrc
403+
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
404+
id: nvm
405+
406+
- name: Setup Node
407+
uses: actions/setup-node@v2
408+
with:
409+
node-version: ${{ steps.nvm.outputs.NVMRC }}
410+
366411
- name: Get Composer Cache Directory
367412
id: composer-cache
368413
run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -468,6 +513,15 @@ jobs:
468513
with:
469514
php-version: '7.4'
470515

516+
- name: Read .nvmrc
517+
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
518+
id: nvm
519+
520+
- name: Setup Node
521+
uses: actions/setup-node@v2
522+
with:
523+
node-version: ${{ steps.nvm.outputs.NVMRC }}
524+
471525
- name: Get Composer Cache Directory
472526
id: composer-cache
473527
run: |

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
lts/*
1+
15

‎assets/css/src/amp-default.css‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
21
/*
3-
* Prevent cases of amp-img converted from img to appear with stretching by using object-fit to scale.
2+
* Prevent cases of amp-img converted from img to appear with stretching by using object-fit to scale. Only do this for
3+
* amp-img/amp-anim elements that we converted from <img> via AMP_Img_Sanitizer. This is key for images that get 100%
4+
* width such as in the post content so that the contents do not get stretched or cropped.
45
* See <https://github.com/ampproject/amphtml/issues/21371#issuecomment-475443219>.
5-
* Also use object-fit:contain in worst case scenario when we can't figure out dimensions for an image.
6-
* Additionally, in side of \AMP_Img_Sanitizer::determine_dimensions() it could $amp_img->setAttribute( 'object-fit', 'contain' )
7-
* so that the following rules wouldn't be needed.
86
*/
9-
amp-img.amp-wp-enforced-sizes[layout="intrinsic"] > img,
10-
amp-anim.amp-wp-enforced-sizes[layout="intrinsic"] > img {
7+
.amp-wp-enforced-sizes {
118
object-fit: contain;
129
}
1310

@@ -89,3 +86,20 @@ amp-carousel .amp-wp-gallery-caption {
8986
button[overflow] {
9087
bottom: 0;
9188
}
89+
90+
/*
91+
* Ensure relevant properties for "replaced elements" which are set on sanitizer-converted custom elements will be
92+
* inherited to the actual replaced element which is the shadow element and also to the noscript fallback element.
93+
*/
94+
amp-anim img,
95+
amp-anim noscript,
96+
amp-iframe iframe,
97+
amp-iframe noscript,
98+
amp-img img,
99+
amp-img noscript,
100+
amp-video video,
101+
amp-video noscript {
102+
image-rendering: inherit;
103+
object-fit: inherit;
104+
object-position: inherit;
105+
}

‎includes/embeds/class-amp-core-block-handler.php‎

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ class AMP_Core_Block_Handler extends AMP_Base_Embed_Handler {
5050
'core/categories' => 'ampify_categories_block',
5151
'core/archives' => 'ampify_archives_block',
5252
'core/video' => 'ampify_video_block',
53-
'core/cover' => 'ampify_cover_block',
5453
];
5554

5655
/**
@@ -212,75 +211,6 @@ public function ampify_video_block( $block_content, $block ) {
212211
return $block_content;
213212
}
214213

215-
/**
216-
* Ampify cover block.
217-
*
218-
* This ensures that the background img/video in a cover block has object-fit=cover and the appropriate object-position
219-
* attribute so that they will be carried over to to the amp-img/amp-video and propagated to the img/video in the
220-
* light shadow DOM.
221-
*
222-
* @see \AMP_Video_Sanitizer::filter_video_dimensions()
223-
*
224-
* @param string $block_content The block content about to be appended.
225-
* @param array $block The full block, including name and attributes.
226-
* @return string Filtered block content.
227-
*/
228-
public function ampify_cover_block( $block_content, $block ) {
229-
$is_video_background = (
230-
isset( $block['attrs']['backgroundType'] )
231-
&&
232-
'video' === $block['attrs']['backgroundType']
233-
);
234-
$is_image_element = ! (
235-
! empty( $block['attrs']['hasParallax'] )
236-
||
237-
! empty( $block['attrs']['isRepeated'] )
238-
);
239-
240-
// Object fit/position is not relevant when background image has fixed positioning or is repeated.
241-
// In other words, it is not relevant when a <video> or a <img> is not going to be used.
242-
// See <https://github.com/WordPress/gutenberg/blob/54c9066d4/packages/block-library/src/cover/save.js#L54-L72>.
243-
if ( ! ( $is_video_background || $is_image_element ) ) {
244-
return $block_content;
245-
}
246-
247-
$pattern = sprintf(
248-
'#<%s(?= )[^>]*? class="(?:[^"]*? )?wp-block-cover__%s-background(?: [^"]*?)?"#',
249-
$is_video_background ? 'video' : 'img',
250-
$is_video_background ? 'video' : 'image'
251-
);
252-
return preg_replace_callback(
253-
$pattern,
254-
static function ( $matches ) use ( $block ) {
255-
$replacement = $matches[0];
256-
257-
// The background image/video for the cover block by definition needs object-fit="cover" on the resulting amp-ing/amp-video.
258-
$replacement .= ' object-fit="cover"';
259-
260-
// Add the fill layout to skip needlessly obtaining the dimensions.
261-
$replacement .= ' layout="fill"';
262-
263-
// Add object-position from the block's attributes to add to the img/video to be copied onto the amp-img/amp-video.
264-
// The AMP runtime copies object-position attribute onto the underlying img/video for a given amp-img/amp-video.
265-
// This is needed since the object-position property directly on an amp-img/amp-video will have no effect since
266-
// since it is merely a wrapper for the underlying img/video element which actually supports the CSS property.
267-
if ( isset( $block['attrs']['focalPoint']['x'], $block['attrs']['focalPoint']['y'] ) ) {
268-
// See logic in Gutenberg for writing focal point to object-position attr:
269-
// <https://github.com/WordPress/gutenberg/blob/54c9066/packages/block-library/src/cover/save.js#L71>.
270-
$replacement .= sprintf(
271-
' object-position="%d%% %d%%"',
272-
round( (float) $block['attrs']['focalPoint']['x'] * 100 ),
273-
round( (float) $block['attrs']['focalPoint']['y'] * 100 )
274-
);
275-
}
276-
277-
return $replacement;
278-
},
279-
$block_content,
280-
1
281-
);
282-
}
283-
284214
/**
285215
* Sanitize widgets that are not added via Gutenberg.
286216
*

‎includes/sanitizers/class-amp-core-theme-sanitizer.php‎

Lines changed: 6 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -158,18 +158,17 @@ protected static function get_theme_features_config( $theme_slug ) {
158158
// Twenty Nineteen.
159159
case 'twentynineteen':
160160
return [
161-
'dequeue_scripts' => [
161+
'dequeue_scripts' => [
162162
'twentynineteen-skip-link-focus-fix', // This is part of AMP. See <https://github.com/ampproject/amphtml/issues/18671>.
163163
'twentynineteen-priority-menu',
164164
'twentynineteen-touch-navigation', // @todo There could be an AMP implementation of this, similar to what is implemented on ampproject.org.
165165
],
166-
'remove_actions' => [
166+
'remove_actions' => [
167167
'wp_print_footer_scripts' => [
168168
'twentynineteen_skip_link_focus_fix', // See <https://github.com/WordPress/twentynineteen/pull/47>.
169169
],
170170
],
171-
'add_twentynineteen_masthead_styles' => [],
172-
'adjust_twentynineteen_images' => [],
171+
'adjust_twentynineteen_images' => [],
173172
'enable_determine_hero_images_transformer' => [],
174173
];
175174

@@ -938,121 +937,20 @@ static function() use ( $method ) {
938937
}
939938

940939
/**
941-
* Add required styles for featured image header in Twenty Nineteen.
942-
*
943-
* The following is necessary because the styles in the theme apply to the featured img,
944-
* and the CSS parser will then convert the selectors to amp-img. Nevertheless, object-fit
945-
* does not apply on amp-img and it needs to apply on an actual img.
946-
*
947-
* @link https://github.com/WordPress/wordpress-develop/blob/5.0/src/wp-content/themes/twentynineteen/style.css#L2276-L2299
948-
* @since 1.0
949-
*/
950-
public static function add_twentynineteen_masthead_styles() {
951-
add_action(
952-
'wp_enqueue_scripts',
953-
static function() {
954-
ob_start();
955-
?>
956-
<style>
957-
.site-header.featured-image .site-featured-image .post-thumbnail amp-img > img {
958-
height: auto;
959-
left: 50%;
960-
max-width: 1000%;
961-
min-height: 100%;
962-
min-width: 100vw;
963-
position: absolute;
964-
top: 50%;
965-
transform: translateX(-50%) translateY(-50%);
966-
width: auto;
967-
z-index: 1;
968-
/* When image filters are active, make it grayscale to colorize it blue. */
969-
}
970-
971-
@supports (object-fit: cover) {
972-
.site-header.featured-image .site-featured-image .post-thumbnail amp-img > img {
973-
height: 100%;
974-
left: 0;
975-
object-fit: cover;
976-
top: 0;
977-
transform: none;
978-
width: 100%;
979-
}
980-
}
981-
</style>
982-
<?php
983-
$styles = str_replace( [ '<style>', '</style>' ], '', ob_get_clean() );
984-
wp_add_inline_style( get_template() . '-style', $styles );
985-
},
986-
11
987-
);
988-
}
989-
990-
/**
991-
* Add required styles for video and image headers.
940+
* Add required styles for Twenty Seventeen header.
992941
*
993-
* This is currently used exclusively for Twenty Seventeen.
942+
* This is required since JS is not applying the required styles at runtime.
994943
*
995944
* @since 1.0
996-
* @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/style.css#L1687
997-
* @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/style.css#L1743
998945
*/
999946
public static function add_twentyseventeen_masthead_styles() {
1000-
/*
1001-
* The following is necessary because the styles in the theme apply to img and video,
1002-
* and the CSS parser will then convert the selectors to amp-img and amp-video respectively.
1003-
* Nevertheless, object-fit does not apply on amp-img and it needs to apply on an actual img.
1004-
*/
1005947
add_action(
1006948
'wp_enqueue_scripts',
1007949
static function() {
1008950
$is_front_page_layout = ( is_front_page() && 'posts' !== get_option( 'show_on_front' ) ) || ( is_home() && is_front_page() );
1009951
ob_start();
1010952
?>
1011953
<style>
1012-
.has-header-image .custom-header-media amp-img > img,
1013-
.has-header-video .custom-header-media amp-video > video{
1014-
position: fixed;
1015-
height: auto;
1016-
left: 50%;
1017-
max-width: 1000%;
1018-
min-height: 100%;
1019-
min-width: 100%;
1020-
min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
1021-
width: auto;
1022-
top: 50%;
1023-
padding-bottom: 1px; /* Prevent header from extending beyond the footer */
1024-
-ms-transform: translateX(-50%) translateY(-50%);
1025-
-moz-transform: translateX(-50%) translateY(-50%);
1026-
-webkit-transform: translateX(-50%) translateY(-50%);
1027-
transform: translateX(-50%) translateY(-50%);
1028-
}
1029-
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media amp-img > img {
1030-
bottom: 0;
1031-
position: absolute;
1032-
top: auto;
1033-
-ms-transform: translateX(-50%) translateY(0);
1034-
-moz-transform: translateX(-50%) translateY(0);
1035-
-webkit-transform: translateX(-50%) translateY(0);
1036-
transform: translateX(-50%) translateY(0);
1037-
}
1038-
/* For browsers that support object-fit */
1039-
@supports ( object-fit: cover ) {
1040-
.has-header-image .custom-header-media amp-img > img,
1041-
.has-header-video .custom-header-media amp-video > video,
1042-
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media amp-img > img {
1043-
height: 100%;
1044-
left: 0;
1045-
-o-object-fit: cover;
1046-
object-fit: cover;
1047-
top: 0;
1048-
-ms-transform: none;
1049-
-moz-transform: none;
1050-
-webkit-transform: none;
1051-
transform: none;
1052-
width: 100%;
1053-
}
1054-
}
1055-
1056954
.navigation-top.site-navigation-fixed {
1057955
display: none;
1058956
}
@@ -1555,7 +1453,7 @@ static function() {
15551453
font-size: 32px;
15561454
line-height: 46px;
15571455
}
1558-
.featured-content .post-thumbnail amp-img > img {
1456+
.featured-content .post-thumbnail amp-img {
15591457
object-fit: cover;
15601458
object-position: top;
15611459
}

0 commit comments

Comments
 (0)