Add sanitizer to fixup issues with core themes #1074

westonruter · 2018-04-14T00:09:47Z

Initial Themes to Check

Twenty Seventeen
Twenty Sixteen
Twenty Fifteen

Previous core themes would be good to test as well, but they could be looked at in a separate PR.

👉 Commits pushed up to this PR (in the core-themes branch) will be automatically deployed to https://core-themes-ampconfdemo.pantheonsite.io/

AMP can be disabled on this environment for a given URL to see what it looks like normally by adding a ?amp_disabled query param, for example: https://core-themes-ampconfdemo.pantheonsite.io/?amp_disabled

Fixes #1060
Fixes #1036
Fixes #1078

…xups

westonruter · 2018-04-17T16:01:05Z

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

+		'twentyseventeen' => array(
+			'force_svg_support'              => array(),
+			'force_fixed_background_support' => array(),
+			// @todo Header video probably needs special support in the plugin generally.


westonruter · 2018-04-24T17:41:12Z

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

+			'force_svg_support'              => array(),
+			'force_fixed_background_support' => array(),
+			// @todo Header video probably needs special support in the plugin generally.
+			// @todo Header image is not styled properly. Needs layout=responsive and other things?


See #1094 (comment)

westonruter · 2018-05-02T15:02:10Z

This PR adds amp theme support to _s, which could have some useful pieces, especially in regards to the nav menus: Automattic/_s#1286

postphotos · 2018-05-17T15:20:37Z

Related #1094.

postphotos · 2018-05-17T15:22:41Z

We still would like testing (configure AMP in Customizer) and document what's clearly a problem.

@todo

This is still WIP, free for someone to work on. @todo: as Weston mentioned, this needs to support Vimeo.

@todo

Also, simplify the conditionals at the top of conditionally_output_header_video(). @todo: test the case where the header video is an <amp-video>, not an <amp-youtube>.

DavidCramer · 2018-05-30T15:00:32Z

@kienstra The image and video is almost working. It's a little blocked by #1175 as it requires those styles to correctly make the images and video looks the same. Still a little more to do and still need to update the unit tests to reflect all the changes.

westonruter · 2018-05-31T19:05:18Z

includes/class-amp-theme-support.php

+		$atts['layout'] = 'fill';
+		unset( $atts['width'] );
+
+		$place_holder = AMP_HTML_Utils::build_tag( 'img', $atts );


img or amp-img? I think this should be creating an amp-img here.

Oops, sorry, it was, I removed it for testing something, but forgot to revert 601c005

westonruter · 2018-06-01T06:15:41Z

@DavidCramer in regards to the header image then, it's going to need to be part of the sanitizer here to add a rule with selector such as amp-img img { object-fit:contain } to ensure that the header is displayed properly.

DavidCramer · 2018-06-01T08:36:29Z

@westonruter yes, I expected as much. however, not all headers for all core themes work that way, so I have made it part of the twentyseventeen core sanitiser here dc9e628#diff-5d05e505f93786061c2078486784c46dR97

DavidCramer · 2018-06-01T09:01:08Z

@westonruter Feel free to review the header video and image for this, I think it works well now.

…ore-themes

Implement support for mobile nav menus.

… actions * Dequeue core themes' scripts for navigation, skip-link-focus-fix, keyboard-image-navigation. * Remove actions that output unneeded scripts. * Dequeue comments-reply unconditionally.

Also move the get_theme_config method to be closer to logically-related $theme_features class var

…her validation error is accepted

…ore-themes

westonruter · 2018-06-04T20:40:37Z

I believe we've done all that can be done here. I'm really happy with the result. Let's get this to testing.

kienstra · 2018-06-04T21:30:47Z

Thanks, Reviewing Now

Hi @westonruter,
Thanks, this looks great on the multidev sites. I'm reviewing this now.

kienstra

Approved

Hi @westonruter,
This looks really good. There are some comments below about approach, but I think it's ready to merge if you're happy with them.

kienstra · 2018-06-04T21:33:20Z

includes/class-amp-theme-support.php

+		};
+
+		if ( ! has_header_video() ) {
+			return self::output_header_image( $atts );


Nice use of these helper functions to simplify conditionally_output_header()

kienstra · 2018-06-04T21:36:35Z

includes/class-amp-theme-support.php

+	 *
+	 * This is JS-driven in Core themes like Twenty Sixteen and Twenty Seventeen.
+	 * So in order for the header video to display,
+	 * this replaces the markup of the header image.


This isn't a blocker, but maybe this 3-line DocBlock description could be removed. It looks to be the same as in conditionally_output_header().

kienstra · 2018-06-04T21:37:12Z

includes/class-amp-theme-support.php

+	 *
+	 * This is JS-driven in Core themes like Twenty Sixteen and Twenty Seventeen.
+	 * So in order for the header video to display,
+	 * this replaces the markup of the header image.


Similar to the suggestion above, maybe these 3 lines could be removed.

kienstra · 2018-06-04T21:38:17Z

includes/class-amp-theme-support.php

+	 * @return string $html Filtered markup.
+	 */
+	public static function output_header_image( $atts ) {
+


This isn't a blocker, but this might be cleaner as:

public static function output_header_image( $atts ) { return AMP_HTML_Utils::build_tag( 'amp-img', $atts ); }

Yeah, I'm going to just remove the method entirely. There's no need for it.

kienstra · 2018-06-04T21:40:13Z

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

+				'twentyseventeen-global', // There are somethings not yet implemented in AMP. See todos below.
+				'jquery-scrollto', // Implemented via add_smooth_scrolling().
+				'twentyseventeen-navigation', // Handled by add_nav_menu_styles, add_nav_menu_toggle, add_nav_sub_menu_buttons.
+				'twentyseventeen-skip-link-focus-fix', // Only needed by IE11 and when admin bar is present.


It's great how these comments describe the scripts.

kienstra · 2018-06-04T21:44:06Z

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

@@ -0,0 +1,943 @@
+<?php


It'd be great to eventually go back and add tests for this class, and other new methods.

kienstra · 2018-06-04T21:55:34Z

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

+	 */
+	protected static $theme_features = array(
+		// Twenty Seventeen.
+		'twentyseventeen' => array(


This is a great idea to pass an array of arguments to each of the methods, depending on the theme.

kienstra · 2018-06-04T21:59:04Z

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

+	 * @link https://github.com/WordPress/wordpress-develop/blob/f4580c122b7d0d2d66d22f806c6fe6e11023c6f0/src/wp-content/themes/twentyseventeen/assets/js/global.js#L105-L108
+	 */
+	public static function set_twentyseventeen_quotes_icon() {
+		add_filter( 'the_content', function ( $content ) {


This isn't relevant now, but maybe a method would be better than an anonymous function here, to enable unit testing.

kienstra · 2018-06-04T22:01:56Z

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

+		 * and the CSS parser will then convert the selectors to amp-img and amp-video respectively.
+		 * Nevertheless, object-fit does not apply on amp-img and it needs to apply on an actual img.
+		 */
+		add_action( 'wp_enqueue_scripts', function() use ( $args ) {


Similar to the comment above, how about passing a method, instead of an anonymous function? This might help with unit testing, but this isn't a blocker now.

kienstra · 2018-06-04T22:03:41Z

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

+			</style>
+			<?php
+			$styles = str_replace( array( '<style>', '</style>' ), '', ob_get_clean() );
+			wp_add_inline_style( get_template() . '-style', $styles );


It's nice how this passes the contents of the buffer to wp_add_inline_style()

westonruter · 2020-05-19T17:45:47Z

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

+						/* Attempt to emulate https://github.com/WordPress/wordpress-develop/blob/5e9a39baa7d4368f7d3c36dcbcd53db6317677c9/src/wp-content/themes/twentyfifteen/js/functions.js#L108-L149 */
+						#sidebar {
+							position: sticky;
+							top: -9vh;
+							max-height: 109vh;
+							overflow-y: auto;
+						}


Per @schlessera in #4744, this can be improved to better emulate the non-AMP version.

Add initial AMP_Core_Theme_Sanitizer with partial Twenty Seventeen fi…

8643b8b

…xups

westonruter added this to the v1.0 milestone Apr 14, 2018

westonruter commented Apr 17, 2018

View reviewed changes

westonruter mentioned this pull request Apr 21, 2018

Transform CSS selectors according to sanitizer HTML element to AMP component conversions #1094

Closed

westonruter commented Apr 24, 2018

View reviewed changes

kienstra mentioned this pull request May 4, 2018

Understand the level of effort for enabling AMP support on native themes #1036

Closed

postphotos added the Sprint 6 label May 17, 2018

kienstra and others added 8 commits May 23, 2018 09:08

Begin AMP header video implementation.

4692577

This is still WIP, free for someone to work on. @todo: as Weston mentioned, this needs to support Vimeo.

Merge branch 'develop' into header-video

51eb633

Begin PHPUnit test of AMP header video implementation.

fc0bea1

Also, simplify the conditionals at the top of conditionally_output_header_video(). @todo: test the case where the header video is an <amp-video>, not an <amp-youtube>.

create image and video image tags in separate methods

7f738c1

add doc params

cbacd9d

Merge branch 'header-video' into 'core-themes'

f186cd9

fix unit tests for video header

31cb154

correct expected count in unit test

a36a281

DavidCramer added 2 commits May 31, 2018 12:03

Merge branch 'develop' into core-themes

f5ca657

remove video script enqueue

601c005

westonruter commented May 31, 2018

View reviewed changes

merge develop

80e2355

Add required styles for amp components in the header image and video

dc9e628

remove unused amp-youtube as styles work correctly

54e025a

westonruter added 2 commits June 2, 2018 15:58

Merge branch 'develop' of https://github.com/Automattic/amp-wp into c…

65aec1e

…ore-themes

Rename header_banner_styles to add_header_media_styles

a91f0e2

westonruter and others added 14 commits June 3, 2018 00:02

Add mechanism to allow sanitizers to add hooks during output buffering

d41e498

Implement support for mobile nav menus.

Add nav menu support to Twenty Sixteen

d3b8eae

Ensure nav menus are keyboard-accessible via :focus-within

d2247ff

Add core theme sanitizer features for dequeueing scripts and removing…

3bb3dd8

… actions * Dequeue core themes' scripts for navigation, skip-link-focus-fix, keyboard-image-navigation. * Remove actions that output unneeded scripts. * Dequeue comments-reply unconditionally.

Emulate adjustHeaderHeight() in Twenty Seventeen via CSS

ac98dfc

Add support for smooth scrolling to content in Twenty Seventeen

93c87eb

Add accept_validation_errors feature to pre-accept issues in core themes

7b9acc6

Support setQuotesIcon()

df2e561

check post format for quote, rename methods

bca1ead

Simplify implementation of Twenty Seventeen's setQuotesIcon()

e1fc251

Also move the get_theme_config method to be closer to logically-related $theme_features class var

Implement is_array_subset to have more fine-grained control over whet…

d55cf6a

…her validation error is accepted

Accept core theme validation errors in admin as well as frontend

425c80a

Implement sticky header for Twenty Seventeen

70d1440

Merge branch 'develop' of https://github.com/Automattic/amp-wp into c…

2cdb1c8

…ore-themes

westonruter requested a review from kienstra June 4, 2018 20:39

westonruter changed the title ~~[WIP] Add sanitizer to fixup issues with core themes~~ Add sanitizer to fixup issues with core themes Jun 4, 2018

Prevent showing cloned sticky nav menu on mobile

1fdb325

kienstra self-assigned this Jun 4, 2018

kienstra approved these changes Jun 4, 2018

View reviewed changes

Remove unnecessary output_header_image method

2fc015d

westonruter merged commit 76e1657 into develop Jun 4, 2018

westonruter deleted the core-themes branch June 4, 2018 23:40

This was referenced Jun 5, 2018

Add theme support mode selection in AMP general settings page #1196

Closed

Fix header image filtering and YouTube header video detection #1208

Merged

westonruter mentioned this pull request Jul 24, 2018

Images on attachment page appear stretched #1237

Closed

westonruter mentioned this pull request Nov 16, 2018

Fix object-fit:cover style of Twenty Nineteen featured image #1619

Merged

westonruter commented May 19, 2020

View reviewed changes

westonruter mentioned this pull request May 19, 2020

Twentyfifteen: Sidebar has unexpected scrollbar #4744

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sanitizer to fixup issues with core themes #1074

Add sanitizer to fixup issues with core themes #1074

westonruter commented Apr 14, 2018 •

edited

Loading

westonruter Apr 17, 2018

westonruter Apr 24, 2018

westonruter commented May 2, 2018 •

edited

Loading

postphotos commented May 17, 2018

postphotos commented May 17, 2018

DavidCramer commented May 30, 2018

westonruter May 31, 2018

DavidCramer May 31, 2018

westonruter commented Jun 1, 2018

DavidCramer commented Jun 1, 2018

DavidCramer commented Jun 1, 2018

westonruter commented Jun 4, 2018

kienstra commented Jun 4, 2018

kienstra left a comment •

edited

Loading

kienstra Jun 4, 2018

kienstra Jun 4, 2018

kienstra Jun 4, 2018

kienstra Jun 4, 2018

westonruter Jun 4, 2018

kienstra Jun 4, 2018 •

edited

Loading

kienstra Jun 4, 2018

kienstra Jun 4, 2018

kienstra Jun 4, 2018

kienstra Jun 4, 2018 •

edited

Loading

kienstra Jun 4, 2018

westonruter May 19, 2020

Add sanitizer to fixup issues with core themes #1074

Add sanitizer to fixup issues with core themes #1074

Conversation

westonruter commented Apr 14, 2018 • edited Loading

Initial Themes to Check

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented May 2, 2018 • edited Loading

postphotos commented May 17, 2018

postphotos commented May 17, 2018

DavidCramer commented May 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Jun 1, 2018

DavidCramer commented Jun 1, 2018

DavidCramer commented Jun 1, 2018

westonruter commented Jun 4, 2018

kienstra commented Jun 4, 2018

kienstra left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra Jun 4, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra Jun 4, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Apr 14, 2018 •

edited

Loading

westonruter commented May 2, 2018 •

edited

Loading

kienstra left a comment •

edited

Loading

kienstra Jun 4, 2018 •

edited

Loading

kienstra Jun 4, 2018 •

edited

Loading