Standard Mode Messes Up Customizer Preview

GiNgesIo commented 4 years ago

Bug Description

I am using AMP in Standard Mode and it completely messes up the customizer preview of my website. Several things are not like I have set them up in the customizer and are different than my website looks on the frontend:

Link colors are in a color that I was using on my website previously
Background color is the Twenty Twenty default
Text font is still Times New Roman and not changed

Checking the CSS of my website shows the old link color and the Times New Roman font that I see in the customizer stroked through and the Twenty Twenty background color grayed out.

Expected Behaviour

I would expect the customizer preview show my website as I see it on the frontend. I would also expect that the changes I make in the customizer are replacing the original CSS and not overwrite them. But I am not sure if it is supposed to be that way.

Steps to reproduce

Assuming you are running AMP in standard mode:

Go to Appearance > Customizer and change the style of the Twenty Twenty theme
Look at preview and see that the changes you made are not previewed
Click Publish and see that the changes are shown on your frontend

Screenshots

Frontend

Customizer Preview

Color CSS

Font CSS

Additional context

WordPress version: 5.4
Plugin version: 1.5.2
AMP plugin template mode: Standard
PHP version: 7.4
OS: MacOS 10.15.4
Browser: Safari 13.1 and Chrome 80.0.3987.149
Device: MacBook Pro

`

wp-core

version: 5.4 site_language: en_US user_language: en_US timezone: Europe/Berlin permalink: /%postname%/ https_status: true user_registration: 0 default_comment_status: open multisite: false user_count: 4 dotorg_communication: true

wp-paths-sizes

wordpress_path: /usr/www/users/paulre wordpress_size: 521.63 MB (546970882 bytes) uploads_path: /usr/www/users/paulre/wp-content/uploads uploads_size: 401.56 MB (421069648 bytes) themes_path: /usr/www/users/paulre/wp-content/themes themes_size: 1.56 MB (1637720 bytes) plugins_path: /usr/www/users/paulre/wp-content/plugins plugins_size: 119.43 MB (125235599 bytes) database_size: 27.08 MB (28393472 bytes) total_size: 1.05 GB (1123307321 bytes)

wp-dropins (2)

advanced-cache.php: true object-cache.php: true

wp-active-theme

name: Twenty Twenty (twentytwenty) version: 1.2 author: the WordPress team author_website: https://wordpress.org/ parent_theme: none theme_features: automatic-feed-links, custom-background, post-thumbnails, custom-logo, title-tag, html5, align-wide, responsive-embeds, customize-selective-refresh-widgets, editor-color-palette, editor-font-sizes, infinite-scroll, jetpack-content-options, jetpack-social-menu, jetpack-geo-location, menus, amp, widgets, editor-style theme_path: /usr/www/users/paulre/wp-content/themes/twentytwenty

wp-plugins-active (17)

Akismet Anti-Spam: version: 4.1.4, author: Automattic AMP: version: 1.5.2, author: AMP Project Contributors Cloudflare: version: 3.4.1, author: John Wineman, Furkan Yilmaz, Junade Ali (Cloudflare Team) Complianz | GDPR/CCPA Cookie Consent: version: 4.4.1, author: RogierLankhorst, Complianz Glue for Yoast SEO & AMP: version: 0.6, author: Joost de Valk Jetpack by WordPress.com: version: 8.4.1, author: Automattic OMGF: version: 3.3.3, author: Daan van den Bergh Redirection: version: 4.7.1, author: John Godley Rocket Maintenance Mode & Coming Soon Page Builder: version: 3.92, author: WebFactory Ltd Schema & Structured Data for WP & AMP: version: 1.9.31, author: Magazine3 Smush: version: 3.6.1, author: WPMU DEV Twentig: version: 0.9, author: Twentig UpdraftPlus - Backup/Restore: version: 1.16.23, author: UpdraftPlus.Com, DavidAnderson W3 Total Cache: version: 0.13.2, author: BoldGrid Webcraftic Clearfy – WordPress optimization plugin: version: 1.6.4, author: Webcraftic wordpress.webraftic@gmail.com WP-Optimize - Clean, Compress, Cache: version: 3.0.19, author: David Anderson, Ruhani Rabin, Team Updraft Yoast SEO: version: 13.4.1, author: Team Yoast

wp-media

image_editor: WP_Image_Editor_Imagick imagick_module_version: 1687 imagemagick_version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org imagick_limits: imagick::RESOURCETYPE_AREA: 125 GB imagick::RESOURCETYPE_DISK: 1.844674407371E+19 imagick::RESOURCETYPE_FILE: 49152 imagick::RESOURCETYPE_MAP: 125 GB imagick::RESOURCETYPE_MEMORY: 63 GB imagick::RESOURCETYPE_THREAD: 8 gd_version: bundled (2.1.0 compatible) ghostscript_version: 9.26

wp-server

server_architecture: Linux 4.9.0-12-amd64 x86_64 httpd_software: Apache php_version: 7.4.4 64bit php_sapi: cgi-fcgi max_input_variables: 1000 time_limit: 30 memory_limit: 256M max_input_time: -1 upload_max_size: 200M php_post_max_size: 200M curl_version: 7.52.1 OpenSSL/1.0.2u suhosin: false imagick_availability: true htaccess_extra_rules: true

wp-database

extension: mysqli server_version: 5.7.29-1 client_version: mysqlnd 7.4.4

wp-constants

WP_HOME: undefined WP_SITEURL: undefined WP_CONTENT_DIR: /usr/www/users/paulre/wp-content WP_PLUGIN_DIR: /usr/www/users/paulre/wp-content/plugins WP_MAX_MEMORY_LIMIT: 256M WP_DEBUG: false WP_DEBUG_DISPLAY: true WP_DEBUG_LOG: false SCRIPT_DEBUG: false WP_CACHE: true CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_LOCAL_DEV: undefined DB_CHARSET: utf8mb4 DB_COLLATE: undefined

wp-filesystem

wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable

jetpack

site_id: 107477844 ssl_cert: No time_diff: undefined version_option: 8.4.1:1586282952 old_version: 8.4:1586266731 public: Public master_user: #4 Michael (manuelschwartze@icloud.com) current_user: #4 Michael (manuelschwartze@icloud.com) tokens_set: Blog User blog_token: DHW$frmUplGB01c@I4yLqStCoufR^&XB user_token: !UAxfN0bD17*aEjgfE63Cp2z8T3KthSa version: 8.4.1 jp_plugin_dir: /usr/www/users/paulre/wp-content/plugins/jetpack/ plan: free HTTP_HOST: paulreno.de SERVER_PORT: 443 HTTPS: on HTTP_CF_CONNECTING_IP: 46.128.1.224 HTTP_X_FORWARDED_FOR: 46.128.1.224 REMOTE_ADDR: 46.128.1.224 protect_header: {"trusted_header":"REMOTE_ADDR","segments":1,"reverse":false} full_sync: {"started":"Thu, 02 Apr 2020 10:26:47 +0000","finished":"Thu, 02 Apr 2020 10:26:55 +0000","progress":{"options":{"finished":true},"functions":{"finished":true},"constants":{"finished":true},"users":{"total":"1","sent":1,"finished":true,"last_sent":"4"}},"config":{"options":true,"functions":true,"constants":true,"users":[4]}} sync_size: undefined sync_lag: 0 seconds full_sync_size: undefined full_sync_lag: 0 seconds idc_urls: {"home":"https:\/\/paulreno.de","siteurl":"https:\/\/paulreno.de","WP_HOME":"","WP_SITEURL":""} idc_error_option: false idc_optin: true cxn_tests: All Pass.

amp_wp

amp_mode_enabled: standard amp_templates_enabled: post, page, attachment, saswp, saswp_reviews, saswp-collections, is_singular, is_home, is_archive, is_author, is_date, is_search, is_404, is_category, is_tag, is_post_type_archive[saswp-collections] amp_serve_all_templates: true amp_css_transient_caching_disabled: n/a amp_css_transient_caching_threshold: 5000 transients per day amp_css_transient_caching_sampling_range: 14 days amp_css_transient_caching_transient_count: 165 amp_css_transient_caching_time_series: 20200402: 61 20200403: 79 20200404: 141 20200407: 144 `

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

westonruter commented 4 years ago

@TinusLorvalds You can find a build for testing the fix here: https://github.com/ampproject/amp-wp/pull/4553#issuecomment-611613601

GiNgesIo commented 4 years ago

@TinusLorvalds You can find a build for testing the fix here: #4553 (comment)

I just did a PageSpeed Insights test for a post site

https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fpaulreno.de%2Ffender-vintera-50s-vs-american-vintage-52%2F

and I get a relatively bad score. Are there things I can do like reducing the amount of Java Scripts (/v0.js cdn.ampproject.org) etc?

westonruter commented 4 years ago

Note the “Defer offscreen images” audit is not correct in Lighthouse. This is being fixed in https://github.com/GoogleChrome/lighthouse/issues/10471

The biggest opportunity for you seems to be the “Reduce server response times (TTFB)” audit.
You should make use of a full page caching as a best practice for performance in WordPress. We're going to be adding guidance for page caching (#4386) in the plugin, and we have yet to put together a list of recommended plugins. But one option would be WP Super Cache.

ampproject / amp-wp