Instruct users to flush page cache when changing template modes

[westonruter]

Feature description

If the WP_CACHE constant is enabled or if a site is detected to have page caching (#4386), when the user switches the Template mode (or the Reader theme) they should be prompted to flush their page cache.

We should also consider firing an action like amp_page_cache_flush_needed when such a setting is changed. This would facilitate third party plugins integrating with the AMP plugin, or for there to be compatibility plugins that bridge the AMP plugin with a page caching plugin.

---

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

[kenrodriguesdesign]

Hi @westonruter

I have taken this issue up for UI and came up with the following design as a prompt to encourage the user to flush all cache. There will not be any CTA present here. It will just be a notification.

I had another idea in mind in which a CTA is present after switching template modes, and I wanted to know advice/feedback on it.

After checking the plugins listed here , I noticed something all of these have in common; A “purge all cache/ flush all cache/ delete all cache” option.

So my question is this:
As shown in the design below,

When the user clicks the “Save and flush cache” CTA, is it possible to trigger the “purge all” cache option, present in the plugin that the user has installed? Is this feasible? If not, then we will go ahead with a simple prompt message.

[westonruter]

It would be nice if we could programmatically flush the cache, but since there is no standardized page caching API (especially when page caching is done remotely via Varnish) the best we can do is provide the prompt to tell the user to seek out the cache purge option with their respective plugin/platform.

In terms of placement of the notification, would it make more sense to add to the "Saved" notification?

template-mode-change-save-notification.mov

Otherwise, if the notice were a banner then it would cause layout shifting, right?

[kenrodriguesdesign]

Hey @westonruter, unfortunate that the CTA isn't possible, so we will continue working on it being just a promo for now.

I will take into consideration the placement of the prompt to be added into notification along with a couple more variations.

[kenrodriguesdesign]

Hey @westonruter, the team has confirmed this design

The "Learn More" link will lead to a section in this page to inform the user why they need to flush their cache.

Do let me know if you have any questions in regards to this.

[westonruter]

Yes, that looks good.

[kenrodriguesdesign]

Added a small tweak to the design, by introducing a dismiss option.

[dhaval-parekh]

Hey @kenrodriguesdesign

I have updated the UI of the notice. However, didn't add dismiss button. since that will automatically remove once use make any other change or refresh the page.

[delawski]

QA not passed

Here's a video of the QA process:

Screen.Recording.2021-11-19.at.12.18.23.PM.mp4

Note that the user is asked to purge caches after switching a template mode even though a caching plugin has just been deactivated. It's because the page caching is currently detected only when visiting the Site Health page. I think the page caching detection should be also done when deactivating plugins (and probably when they get activated, too).

See: #6731

[delawski]

QA Passed

✅ The bug report #6731 has been closed. Since I found no other issues with this feature, this ticket can now safely land in the "QA Passed" lane.