Display a notice for users that are still using CPCSS

[piotrbak]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version
• Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug For users that are still using CPCSS we'll display a message convincing them to switch to RUCSS.

It'll be WordPress notice, as shown below.

Screenshots

Acceptance Criteria

• The notice will be displayed for users that are using Load CSS Asynchronously feature.
• The notice will be displayed for non-expired users only.
• The notice will not dismissible (without x)
• The notice will be displayed only on WP Rocket's dashboard, just above our content (other notices shouldn't interrupt this)
• Clicking on Turn on Remove Unused CSS will enable the feature, reload the page and hide the notice
• Clicking on Stay with old option will hide the message and prevent it from being displayed in the future.
• The wording for the banner:

  We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.

  Button: Turn on Remove Unused CSS Link: Stay with old option

Backlog Grooming (for WP Media dev team use only)

• [ ] Reproduce the problem
• [ ] Identify the root cause
• [ ] Scope a solution
• [ ] Estimate the effort

[Mai-Saad]

Related tests

[jeawhanlee]

Scope a solution ✅

We will create a new method in WP_Rocket\Engine\CriticalPath\CriticalCSSSubscriber switch_to_rucss_notice which will hook to admin_notices https://github.com/wp-media/wp-rocket/blob/6a6d8d36f25cfaccfba3f999bc612ad58bd125f7/inc/Engine/CriticalPath/CriticalCSSSubscriber.php#L78

import WP_Rocket\Engine\License\API\User;

We will do the following checks:

• Bail out if option has been selected.

  $boxes = get_user_meta( get_current_user_id(), 'rocket_boxes', true );
  if ( in_array( __FUNCTION__, (array) $boxes, true ) ) {
  return;
  }

• Bail out if Critical Path CSS is not enabled.

  if ( ! $this->options->get( 'async_css', 0 ) ) {
  return;
  }

• Bail out if user license is expired.

  if ( $this->user->is_license_expired() ) {
      return;
  }

• Bail out if screen is WPR Dashboard $screen = get_current_screen();

  if ( isset( $screen->id ) && 'settings_page_wprocket' !== $screen->id ) {
  return;
  }

  To switch to RUCSS: We will have a button that links as below:

$args = [
    'action' => 'switch_to_rucss',
    'value'=>'true',
];
add_query_arg( $args, wp_nonce_url( admin_url( 'admin-post.php' ), 'rucss_switch' ) );

In WP_Rocket\Engine\Optimization\RUCSS\Admin\Settings create a new method to activate the rucss option. Import options class use WP_Rocket\Admin\Options;

public function switch_to_rucss() {
    $options = get_option( 'wp_rocket_settings', [] );

    if ( isset( $options['minify_concatenate_css'] ) && 1 === (int) $options['minify_concatenate_css'] ) {
      $options['minify_concatenate_css'] = 0;
    }

    $options['async_css'] = 0;
    $options['remove_unused_css'] = 0;
    update_option( 'wp_rocket_settings', $options );
}

Add a new event - admin_post_switch_to_rucss to the subscriber: https://github.com/wp-media/wp-rocket/blob/6a6d8d36f25cfaccfba3f999bc612ad58bd125f7/inc/Engine/Optimization/RUCSS/Admin/Subscriber.php#LL62C1-L62C1 and add a callback: Then we use our new method to enable switch_to_rucss

public function switch_to_rucss() {
    if ( ! isset( $_GET['_wpnonce'] ) || ! wp_verify_nonce( sanitize_key( $_GET['_wpnonce'] ), 'rucss_switch' ) ) {
        wp_nonce_ays( '' );
    }

    if ( ! current_user_can( 'administrator' ) ) {
        wp_safe_redirect( wp_get_referer() );
        exit;
    }

    if ( 'true' === $_GET['value'] ) {
        $this->settings->switch_to_rucss();
        $this->delete_used_css_rows();
    }

    $this->set_notice_transient();

    rocket_dismiss_box( 'switch_to_rucss_notice' );

    wp_safe_redirect( wp_get_referer() );
    exit;
}

Add tests.

Estimate the effort ✅

[M]

[pedddro]

@piotrbak I wonder why CCSS is still offered considering it doesn't offer filters for trying to improve CLS and the fact the RUCSS has been polished enough to be used on page builders. Is it due to compatibility, server resources?