3.18 - Frontend part

[piotrbak]

User Story As a user, I’d like to use locally stored Google Fonts on the front end instead of the online ones

Acceptance Criteria

• The feature will rewrite the Google Fonts paths into the local ones
• The feature will keep the original structure as data-wpr-hosted-gf-parameters argument
• The feature will rewrite V1 and V2 separately, if both of them are inside the source at the same time, we’ll also save and print two separate CSS files
• The feature will add its markup just after the OCI feature preloads
• The feature will print data correctly when used on the multisite

Example

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://domain.ext/wp-content/cache/wp-rocket/fonts/google-fonts/2/f/b/1/d/3474c012728984fc4241fafaf56.css" rel="stylesheet" data-wpr-hosted-gf-parameters="family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">

[Khadreal]

Scope a solution:

In general, we would be creating 4 classes for this, Subscriber, Controller and Context and the ServiceProvider class.

• Add a new namespace - Media\Fonts

  • We would have two new class Subscriber and a Controller class in Media\Fonts\Frontend namespace.

    • In the subscriber class, we would be using the rocket_buffer filter to add the markup to the page.

      
       public static function get_subscribed_events(): array {
          return [
              'rocket_buffer'                   => [ 'rewrite_fonts', 18 ],
          ];
      }
        public function rewrite_fonts( string $html ) {
           $this->frontend_controller->rewrite_fonts( $html );
       }

    • In the Controller class we would have the rewrite_fonts which would rewrite the css to the page and should also check if the features is available

    
     public function rewrite_fonts( string $html ) {
          if ( ! $this->context->is_allowed() ) {
        return $html;
    }
            // Use the url has value to get the css file paths
           ....
     }

  • Create a new Context class in Media\Fonts\Context namespace implementing ContextInterface which would be strictly to know if the feature if available or not

    
       public function is_allowed( array $data = [] ): bool {
    if ( get_option( 'wp_rocket_no_licence' ) ) {
        return false;
    }
    
    return wpm_apply_filters_typed( 'boolean', 'rocket_self_host_fonts', true );
      }

• Lastly, create the serviceProvider class in Media\Fonts\ServiceProvider and include the classes created above