Add a way to mark "stale" replacement variables in the Google preview

[afercia]

Is your feature request related to a problem? Please describe.

Some replacement variables can't be updated "on the fly" while users change related values.

There are just too many fields or other form controls to listen to that affect some replacement variables. An example of this is the WooCommerce price variable. See https://github.com/Yoast/wpseo-woocommerce/pull/556

This value depends on:

• the regular price
• the sale price, if any
• the "from" and "to" sale price dates, if any
• whether the "to" sale price date is expired
• any tax applied to the product, whether the price includes or excludes taxes
• for variable products: whether any variation price has been changed

Listening to changes for all these values would likely be a "can of worms".

Similarly, other replacement variables may have the same problem.

Describe the solution you'd like

This was quickly discussed internally. @jdevalk suggested to mark in some way the stale variables in the snippet editor, maybe using a tooltip. Whether it's a tooltip or something else, we should find a way to inform users that variable is not updated and users need to save the product to reflect the change in the Google preview

Why do you think this feature is something we should consider for the Yoast SEO plugins?

To give users correct feedback about the Google preview state.

Additional context

This would need changes in both Yoast SEO and the SnippetPreview / SnippetEditor JavaScript components.

It could be done similarly to how the "highlighted words" work. I played a bit with this already and have some Proof Of Concept code.

More advanced changes for products in the Google preview:
https://github.com/Yoast/featurerequests/issues/480