Add button into Site Health to reenable CSS transient caching

[schlessera]

Add CSS monitoring time series to Site Health debugging info

Summary

This PR adds a button to the Site Health AMP panel to reenable CSS transient caching when it was disabled.

Button:

Button when the AJAX request failed:

Button when the AJAX request succeeded:

Fixes #4523

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

[schlessera]

The colors still need to be adapted to fit the WordPress color palette.

However, there's currently a problem with the AMP_Options_Manager: Within the AJAX request, the update_option() call just fails and returns false.

@westonruter Are there any requirements to using the AMP_Options_Manager ? Do you have an idea of why this would fail within an AJAX request?

[pierlon]

Do you have an idea of why this would fail within an AJAX request?

Perhaps the WP nonce is not being sent along with the request?

[schlessera]

The code does execute the call to the AMP_Options_Manager, I could verify that.

[schlessera]

Figured it out. The AMP_Options_Manager has an unexpected validation behavior. If an unknown option is passed through, it doesn't allow it to make a change, but also doesn't unset it either, so the option just remains as it was.

[schlessera]

Tests failed for unrelated timeout in E2E tests:
https://travis-ci.org/github/ampproject/amp-wp/jobs/671649112#L861-L871

 ● Featured Image Notice › should not display a notice, nor suggest cropping, when the image is the expected size
    TimeoutError: Text found "Crop Image"
      waiting for function failed: timeout 500ms exceeded
  ● Featured Image Notice › should display a notice when the image is too small, but not suggest cropping
    TimeoutError: Text found "Crop Image"
      waiting for function failed: timeout 500ms exceeded

[pierlon]

Tests failed for unrelated timeout in E2E tests

@schlessera these tests are failing because of an error being thrown (see #4522 (comment)).

[pierlon]

I think this button could be highlighted a little better, given how deep it's hidden in Site Health. I don't see how the user would know about it unless they've been told where it is.

[schlessera]

I don't see how the user would know about it unless they've been told where it is.

I assumed for now that this is mainly for the support team to be able to point them to some place to reset the cache instead of handing them a snippet filter or a custom filter to do so.

I don't think this should be a standard user operation.

But I'm happy to change this if my assumption is incorrect.

@westonruter @amedina Thoughts?

[schlessera]

As there's no code in place for replacing the nonce once it's been used, the button only works once per page load. However, there's no valid reason to push it multiple times, so I disabled it after the first use, and any further tries will need a reload.

[westonruter]

I fleshed out the guidance a bit more, and added link to learn more about object caching:

When enabled:

[westonruter]

Confirmed error condition is shown properly:

[kienstra]

Looks good

Hi @amedina,
This worked as expected in my local.

After forcing the option to be true:

AMP_Options_Manager::update_option( 'amp_css_transient_monitor_disable_caching', true );

...the test appeared in Site Health: