Prototype Reader themes #4644

westonruter · 2020-05-02T06:45:00Z

Summary

This PR introduces the ability to select from among AMP-compatible themes to be used when in Reader mode, in addition to a “Classic” theme which behaves as the current Reader mode. If not using Classic, then selecting a theme allows for all templates on a site to be used as AMP, including singular, homepage, archives, etc.

Being able to select a Reader theme is dependent on a site not customizing the AMP endpoint (query var). So if a site changes the query var from amp to something else like lite, then a warning is displayed instead of the theme list.
The listed themes exclude the active theme.
When the active theme is switched to be the same as the theme that is selected for the Reader theme, then the template mode is automatically switched from Reader to Transitional.
Enable developer tools in Reader mode, along with a “Dev Tools” toggle to the admin settings screen. Note that this is at an intermediary stage, as eventually the Dev Tools toggle should be user-specific.

Customizer

At the moment, the Customizer for the selected Reader theme can be accessed by clicking “Customize” in the admin bar when viewing an AMP page on the frontend. (There will need to be a Customize button added to the AMP admin settings screen.)
The AMP panel in the Customizer which is normally shown in Reader mode is omitted entirely when a Reader theme has been selected, since the Customizer is loaded with that Reader theme loaded in its entirety. The AMP toggle appearing next to the device switcher is not shown when a Reader theme is selected; this is only applicable to classic Reader mode. When a Reader theme is selected, the Customizer loaded up-front with either the active theme or the reader theme applied.
Theme-specific customizations (e.g. color scheme, custom header, background) are only applied to the selected theme, leaving the active theme's settings intact.
Nav menus can be fully managed in AMP. Nav menu locations are specific to the Reader theme or active theme, but the menus assigned to those locations are shared between the AMP and non-AMP versions of the sites.
Widgets are disabled in Reader themes; this includes hiding the Widgets panel in the Customizer. Since WordPress lacks the concept of “sidebar locations” as it has with “nav menu locations”, being able to manage widgets in Reader mode would be very complicated. Since widgets are not deemed necessary for Reader mode (especially given the mobile viewport), they are disabled.
The Themes panel is removed when opening AMP Customizer for a Reader theme. Selecting a different Reader theme must be done currently from the AMP settings screen.
When the Customizer is opened for a Reader theme, then the previewed device will default to mobile.

Addresses issue #4560

Screenshots

When a Reader theme is selected, you can choose from among the installed themes which are AMP-compatible. Currently this includes the core themes:

When the Classic theme is selected, templates are not available to be selected and a notice is explained why.

Opening the Customizer from an AMP page will hide the themes panel, widgets panel (since widgets are disabled), default to the mobile device, and include a note indicating the AMP version of the site is being customized:

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).

This notice will be irrelevant when DevTools are integrated into Reader mode, since the validation results will apply to all modes.

This reverts commit 92f3fa4.

westonruter · 2020-05-11T06:40:37Z

5. And the customizer settings I had made in Reader mode (i.e. for the TwentyTwenty theme) were gone
If I manually switch the main site back to the original theme, I m able to select TwentyTwenty again for Reader mode (as expected), and the customizer settings made before the switch are there.

Yes, this is expected. The theme customizations are stored with the theme itself. WordPress doesn't share theme customizations across themes, not even between parent and child themes.

westonruter · 2020-05-11T22:25:16Z

Add some indication of the Customizer controls for settings that are shared between the AMP and non-AMP sites (i.e. options) and then for settings which are theme-specific, provide a way to import those specific settings from the active theme.

…n-suppression * 'develop' of github.com:ampproject/amp-wp: Strip multiple BOM characters (#4683) Strip leading BOM and whitespace and trailing HTML comment before parsing validation response JSON (#4679) Update dependency xwp/wp-dev-lib to v1.6.4 Update dependency eslint to v7

…/reader-mode-themes * 'develop' of github.com:ampproject/amp-wp: (59 commits) Strip multiple BOM characters (#4683) Strip leading BOM and whitespace and trailing HTML comment before parsing validation response JSON (#4679) Update dependency xwp/wp-dev-lib to v1.6.4 Update dependency eslint to v7 Remove unused RuntimeException Use explicit string type instead of generic array in return Avoid method map and replace with a switch Defer removal of attributes until after layout application Fix post preview in Reader mode (#4665) Ensure that source map comment is preserved at the end of amp-custom.css Pass DOMAttr instances rather than attribute name and value as separate args Enable SSR by default, remove use of WP_DEBUG as a signal. (#4669) Use padding-top and override regular inline style for heights Update php-parallel-lint dependency to new name Use :first-child to reference sizer in CSS Update dependency @wordpress/babel-preset-default to v4.12.1 (#4494) Fix error type for bad sizes test Provide more precise error for thrown exception Test precise error messages Fix attribute name in error messages ...

…it others list

…e widgets print)

* add/plugin-suppression: Override widget callback to return null instead of empty string (since widgets print) Omit error duplicates from suppressed plugin list Omit suppressed plugins section if no erroring/suppressed plugins; omit others list Re-check a validated URL after changing suppressed plugins Pass suppressed plugins as params Ensure plugin suppression only happens on AMP pages Fix test failing with undefined index Suppress plugin widgets Remove redundancy in checking callback sources Suppress plugin blocks Add suppression of plugin shortcodes Add initial plugin suppression logic for hooks Store plugin slugs instead of files for suppressed list Hide non-suppressant plugins and show validation errors Ensure get_plugins() function is loaded Include plugin versions in the validated environment Keep track of the plugin version which was suppressed Add suppressed plugins option

…ools are enabled

…/reader-mode-themes * 'develop' of github.com:ampproject/amp-wp: (53 commits) Add tests for tweetid binding, Google Fonts v2, and enterkeyhint Update tests to reflect removal of style attribute constraint Adapt docblocks Display PHPStan version in Travis Update dependency eslint-plugin-jest to v23.13.1 Adapt in libraries as well Always download latest version of PHPStan Update dependency autoprefixer to v9.8.0 Update dependency eslint-plugin-jest to v23.13.0 Fix phpdoc for sanitizer_classes and embed_handler_classes Remove array_column() polyfill since plugin requires PHP 5.6+ Update dependency @wordpress/scripts to v9.1.0 Remove redundant subtraction Raise level to 3 Adapt type-hint for AMP_Image_Dimension_Extractor::normalize_url() Use empty string for pruning textContent Adapt typehint for AMP_Content->sanitizer_classes Adapt typehint for AMP_Tag_And_Attribute_Sanitizer->allowed_tags Adapt typehints for methods returning a rule spec check result Adapt typehint for AMP_Style_Sanitizer->current_sources ...

…n-suppression * 'develop' of github.com:ampproject/amp-wp: (71 commits) Eliminate needless variable Typecast `display_errors` config before comparing value Add tests for tweetid binding, Google Fonts v2, and enterkeyhint Update tests to reflect removal of style attribute constraint Suppress display of fatal errors during validate request Adapt docblocks Display PHPStan version in Travis Ensure boolean return value for isAMPEnabled Fix logic for determining which post types should get REST API fields Give explicit null return value for update_amp_enabled_rest_field Update method names, comments, and add versions Update dependency eslint-plugin-jest to v23.13.1 Adapt in libraries as well Always download latest version of PHPStan Update dependency autoprefixer to v9.8.0 Update dependency eslint-plugin-jest to v23.13.0 Get eligible post types from `AMP_Post_Type_Support::get_post_types_for_rest_api()` Register REST field for `page` post type Fix phpdoc for sanitizer_classes and embed_handler_classes Remove array_column() polyfill since plugin requires PHP 5.6+ ...

Co-authored-by: Pierre Gordon <16200219+pierlon@users.noreply.github.com>

See #3474

…ead of setting to null

…n-suppression * 'develop' of github.com:ampproject/amp-wp: (67 commits) Update reasoning behind omitting type=“text/html” attribute Update dependency @wordpress/block-editor to v3.11.0 (#4725) Update dependency eslint to v7.1.0 Implement suggested changes and test case Omit “type” attribute during “<amp-iframe>” normalization Check that var isset before accessing from AMP setup screen - set version and dependencies from asset file Replace use of filter_input Update webpack.config.js Get version from bloginfo instead of global Use align-wide theme support check to use responsive layout Update dependency @wordpress/blocks to v6.16.0 (#4462) Update dependency @wordpress/components to v9.6.0 (#4463) Update dependency @wordpress/data to v4.18.0 (#4496) Update dependency @babel/core to v7.9.6 (#4636) Update dependency @wordpress/babel-preset-default to v4.13.0 (#4724) Remove extraneous arg Remove unused var Remove script overrides on backend; bundle everything Update includes/options/views/class-amp-setup-wizard-submenu-page.php ...

… into prototype/reader-mode-themes * 'add/plugin-suppression' of github.com:ampproject/amp-wp: (92 commits) Remove superflous line-through styling Update reasoning behind omitting type=“text/html” attribute Update dependency @wordpress/block-editor to v3.11.0 (#4725) Update dependency eslint to v7.1.0 Implement suggested changes and test case Omit “type” attribute during “<amp-iframe>” normalization Check that var isset before accessing from AMP setup screen - set version and dependencies from asset file Replace use of filter_input Update webpack.config.js Get version from bloginfo instead of global Use align-wide theme support check to use responsive layout Update dependency @wordpress/blocks to v6.16.0 (#4462) Update dependency @wordpress/components to v9.6.0 (#4463) Update dependency @wordpress/data to v4.18.0 (#4496) Update dependency @babel/core to v7.9.6 (#4636) Update dependency @wordpress/babel-preset-default to v4.13.0 (#4724) Fix PHPStan analysis by unsetting WP_Block_Type script and style instead of setting to null Include options in validated environment and staleness check Fix syntax error after ccbf771 ...

westonruter · 2020-07-04T00:58:49Z

Closing in favor of #4984.

westonruter added 21 commits May 1, 2020 15:23

Remove superfluous notice with validation results in Reader mode

fcd6298

This notice will be irrelevant when DevTools are integrated into Reader mode, since the validation results will apply to all modes.

Discontinue blocking validation when in Reader mode

053da78

Introduce Dev Tools toggle in admin settings

b49150e

Add initial Reader theme selection

b3a6f74

Start script that copies themes

d85feb7

Attempt to bootstrap embedded theme

be28f89

Revert "Start script that copies themes"

7fe3a72

This reverts commit 92f3fa4.

Wire up reader theme

b01d77f

Skip listing theme for Reader mode if same as active theme

79f4843

Switch to transitional when reader theme is same as active theme

fb1a632

Suppress reader theme selection when non-standard endpoint in use

fd25200

Show template options when in Reader mode if Classic theme not selected

0b589bb

Fix availability determination in classic Reader mode

aca6925

Adjust how Customizer is presented in non-Classic Reader mode

d4836b1

Override theme at plugins_loaded so it can be reflected in Customizer

2ef6d46

Omit AMP-specific Customizer panel except in Classic Reader mode

599379a

Open Customizer with AMP enabled

887a304

Ensure amphtml link is shown on new templates in Reader mode

e3ccc14

Fix publishing Customizer changes in AMP

b078d11

Fix incomplete theme switch

8a6c767

Disable widgets for Reader theme

f6da588

googlebot added the cla: yes Signed the Google CLA label May 2, 2020

westonruter requested a review from amedina May 2, 2020 06:46

westonruter added 7 commits May 2, 2020 09:33

Make mobile the default device in AMP Customizer

182d8a7

Remove themes panel from AMP Customizer

63c0fb6

Make it clear when customizing the AMP version of the site

10dc0bd

Fix phpcs issues

ede7751

Add missing classic screenshot

4fb55ba

Improve rendering of preview notice

39535c0

Fix eslint issues

0a41b8c

Re-check a validated URL after changing suppressed plugins

9594301

westonruter and others added 15 commits May 12, 2020 09:18

Omit suppressed plugins section if no erroring/suppressed plugins; om…

d3e772e

…it others list

Omit error duplicates from suppressed plugin list

1918bcd

Override widget callback to return null instead of empty string (sinc…

32dd167

…e widgets print)

Fix adding validation error reporting when viewing frontend and dev t…

c97848e

…ools are enabled

Make closures static

85de42e

Co-authored-by: Pierre Gordon <16200219+pierlon@users.noreply.github.com>

Remove redundant check for whether validation error has WP_Term

ccbf771

Co-authored-by: Pierre Gordon <16200219+pierlon@users.noreply.github.com>

Clarify logic in get_suppressible_plugin_sources

d24b29c

Fix syntax error after ccbf771

4fcebbc

Include options in validated environment and staleness check

4e1c478

See #3474

Fix PHPStan analysis by unsetting WP_Block_Type script and style inst…

2c3f2ca

…ead of setting to null

westonruter mentioned this pull request May 23, 2020

Allow Developer Tools to be turned off to minimize (even hide) validation error info #2673

Closed

westonruter added 4 commits May 27, 2020 08:31

Remove superflous line-through styling

f8fde44

Handle custom theme roots, adding code from Customizer theme switcher

1991f5b

westonruter mentioned this pull request Jun 5, 2020

Wizard step: Asking user if they're technical #4705

Closed

johnwatkins0 mentioned this pull request Jun 29, 2020

Wizard step: "Done" screen #4707

Closed

westonruter mentioned this pull request Jul 4, 2020

Implement ReaderThemeLoader service to load selected Reader theme for AMP pages #4984

Merged

7 tasks

westonruter closed this Jul 4, 2020

westonruter mentioned this pull request Jul 8, 2020

Add checking for whether AMP query var is defined too late for Reader themes #4999

Merged

5 tasks

schlessera deleted the prototype/reader-mode-themes branch November 6, 2020 16:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prototype Reader themes #4644

Prototype Reader themes #4644

westonruter commented May 2, 2020 •

edited by amedina

Loading

westonruter commented May 11, 2020

westonruter commented May 11, 2020

westonruter commented Jul 4, 2020

Prototype Reader themes #4644

Prototype Reader themes #4644

Conversation

westonruter commented May 2, 2020 • edited by amedina Loading

Summary

Customizer

Screenshots

Checklist

westonruter commented May 11, 2020

westonruter commented May 11, 2020

westonruter commented Jul 4, 2020

westonruter commented May 2, 2020 •

edited by amedina

Loading