site-kit-wp: Ad blocker warning message is inconsistent in different locations

It says " Ad blocker detected, you need to disable it in order to set up AdSense."

However, the AdSense setup has already been done and I can see that AdSense is working properly.

Maybe the message should say “Ad blocker detected, you need to disable it in order for AdSense to work properly.”

Steps to reproduce

1. Setup AdSense on Site Kit without any Ad Blockers
2. Enable an adblocker. In this instance, I used https://adblockplus.org/
3. Open the AdSense details page.
4. You can see the above error. Also seen on the AdSense module on the dashboard.

Screenshots

---

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

Acceptance criteria

• The ad blocker warning should be consistent in all locations under the same conditions. Currently the locations are as follows:
  • Setup CTA (from SK success notification on main dashboard)
  • Setup module (on Connect More Services tab of settings)
  • AdSense settings view (when setup is incomplete)
  • AdSense setup
  • Dashboard summary widget
  • Dashboard top earning pages widget (only shown when Analytics is also activated and linked with the connected AdSense account)
  • The module page will be covered separately in #4178
• A new getAdBlockerWarningMessage selector should be added to the AdSense datastore to be used in both places
• The logic in the AdBlockerWarning component for determining which message to use should be simplified to come from the new getAdBlockerWarningMessage selector rather than using its own logic based on site and account setup completion.

Implementation Brief

Inside assets/js/modules/adsense/datastore/adblocker.js

• Add a new selector, getAdBlockerWarningMessage with the following logic:
  • if there is no ad blocker, return null
  • if the AdSense module is connected and there is an ad blocker, return ‘Ad blocker detected, you need to disable it to get the AdSense latest data.’
  • if the AdSense module is not connected and there is an ad blocker, return ‘Ad blocker detected, you need to disable it in order to set up AdSense.’
  • Make sure to use i18n for the messages, i.e. __( 'Ad blocker detected, you need to disable it in order to set up AdSense.','google-site-kit' )
  • You can use the AdSense module’s isAdBlockerActive to determine if the Ad Blocker is active.
  • You can use the select( CORE_MODULES ).isModuleConnected to determine if the AdSense module is connected.
  • Add test coverage to assets/js/modules/adsense/datastore/adblocker.test.js for this new selector.

Inside assets/js/modules/adsense/index.js:

• Refactor the checkRequirements logic to use the new selector instead of isAdBlockerActive
• If the selector returns null / falsey, return (as it does currently).
• Otherwise throw (as it does currently), but pass the message returned by the selector.

Inside assets/js/modules/adsense/components/common/AdBlockerWarning.js:

• Refactor the logic by removing the current use of isAccountSetupComplete and isSiteSetupComplete and replacing them with a call to the new selector.
• If the selector returns null / falsey, return null from the component.
• Otherwise, render the message returned by the selector.

Test Coverage

• See above: coverage will be needed for the new selector.

Visual Regression Changes

• Images relating to the ad blocker messages may need updating.

QA Brief

• Check for the correct adblock warning message when adsense module is connected and not connected and adblock is active.
• The warning messages should match the one in the AC.
• Newly added and update unit tests should also pass.

Changelog entry

• Fix wording of ad blocker warning to always reflect the current state of the AdSense module.