Gravity Forms CSS loaded on every page

[redpupmedia]

Hello.
Looking for some help tracking down a possible scripts enqueue.
On all of our Pro and X sites, there are 4 Gravity Form stylesheets that are loaded on every page, regardless of if there is a Gravity Form on the page or not.
.../wp-content/plugins/gravityforms/css/formreset.min.css .../wp-content/plugins/gravityforms/css/formsmain.min.css .../wp-content/plugins/gravityforms/css/readyclass.min.css .../wp-content/plugins/gravityforms/css/browsers.min.css

There is one additional (stack dependent) stylesheet from Pro.
.../wp-content/themes/pro/framework/dist/css/site/gravity_forms/integrity-light.css
or
.../wp-content/themes/pro/framework/dist/css/site/gravity_forms/renew.css

I spoke with GF support and them mentioned the possibility that gravity_form_enqueue_scripts() might be firing inadvertently.

Can you comment about this? We’re trying to reduce overhead on page load and, since these 5 stylesheets are not used on pages without a Gravity Form on them, we’d like to not load them.

Thankyou

[ruenel]

Hello Rob,

Thanks for writing in!

The 4 files is coming from the plugin itself. We do not have any control over it.
The last file which is stack dependent is loaded using this code:

// Styles
// =============================================================================

function x_gravity_forms_enqueue_styles( $stack, $ext ) {
  wp_enqueue_style( 'x-gravity-forms', X_TEMPLATE_URL . '/framework/dist/css/site/gravity_forms/' . $stack . $ext . '.css', array( 'gforms_reset_css', 'gforms_formsmain_css', 'gforms_ready_class_css', 'gforms_browsers_css' ), X_ASSET_REV, 'all' );
}

add_action( 'x_enqueue_styles', 'x_gravity_forms_enqueue_styles', 10, 2 );

Maybe you can ask assistance from GF team to learn how we can detect that Gravity Form is on the page so that we can make adjustments in the loading of the stack dependent style which only be loaded when GF is active on the page.

Thank you in advance.

[redpupmedia]

Thanks @RueNel.

Here is what GF Support said:

Your theme developer is using its own filter x_enqueue_styles to enqueue a file for GF, instead of that, use gform_enqueue_scripts filter to enqueue the file https://docs.gravityforms.com/gform_enqueue_scripts/

I see this issue of the 4 GF files loading on every page on the first 6 sites I checked, all using Pro or X. I then checked 3 sites that don’t use Pro/X and the issue is not there.

Switched themes from a Child of Pro to Pro and the issue remained.
Switched theme to Twenty-Ninteen and the issue was not present.

Can you please provide some next steps?

Thank you

[christian]

Hey Rob,

Please add this code in your child theme’s functions.php as a temporary solution.

/* X Gravity Forms Enqueue */
add_action('after_setup_theme', 'gf_enqueue');

function gf_enqueue() {
  remove_action( 'x_enqueue_styles', 'x_gravity_forms_enqueue_styles', 10, 2 );
  add_action( 'gform_enqueue_scripts', 'x_gravity_forms_enqueue_styles', 10, 2 );
}

I just tested that and it removes the CSS if a Gravity Forms form is not present in a page.

I’ll post this in our issue tracker so our development team would be made aware of the proper hook to use.

Please stay tuned for updates and be sure to check our Changelog as we post the changes made to the theme and bug fixes there. If you see the change has been made, please remove the temporary solution.

Hope that helps.

[redpupmedia]

Thank you @christian_y

This code works. Will look forward to the theme update.

Thanks.

[redpupmedia]

Hello.

I spoke too soon.

With this code in place, the x-gravity-forms-css is not loading the correct, stack-specific file. This is what is output:

<link rel="stylesheet" id="x-gravity-forms-css" href="***/wp-content/themes/pro/framework/dist/css/site/gravity_forms/Array1.css" type="text/css" media="all">

The file name is Array1.css but should be integrity-light.css

With the new code removed from functions.php, the correct file is loaded.

Do you see a similar issue on your test site?

Thank you

[ruenel]

Hello Rob,

The action hook of gravity forms do not accept stack value. To resolve this, you might want to update the code and use this one instead:

/* X Gravity Forms Enqueue */
function custom_gravity_forms_enqueue_styles() {
  $stack  = x_get_stack();
  $design = x_get_option( 'x_integrity_design' );

  if ( $stack == 'integrity' && $design == 'light' ) {
    $ext = '-light';
  } elseif ( $stack == 'integrity' && $design == 'dark' ) {
    $ext = '-dark';
  } else {
    $ext = '';
  }

  wp_enqueue_style( 'x-gravity-forms', X_TEMPLATE_URL . '/framework/dist/css/site/gravity_forms/' . $stack . $ext . '.css', array( 'gforms_reset_css', 'gforms_formsmain_css', 'gforms_ready_class_css', 'gforms_browsers_css' ), X_ASSET_REV, 'all' );
}

add_action('after_setup_theme', 'gf_enqueue');
function gf_enqueue() {
  remove_action( 'x_enqueue_styles', 'x_gravity_forms_enqueue_styles', 10, 2 );
  add_action( 'gform_enqueue_scripts', 'custom_gravity_forms_enqueue_styles', 10, 2 );
}

Hope this helps. Please let us know how it goes.