Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conditionally enqueue scripts and styles only if there is a contact form rendered #1279

Closed
wants to merge 5 commits into from
Closed

Conditionally enqueue scripts and styles only if there is a contact form rendered #1279

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6efd7c9
Only enqueue scripts and styles when a form is on the page
westonruter Aug 9, 2023
98d8a53
Enqueue HTML5 fallback at wpcf7_enqueue_scripts action
westonruter Aug 9, 2023
50c901c
Enqueue recaptcha script at wpcf7_enqueue_scripts action
westonruter Aug 9, 2023
3194c1a
Register swv script at wp_default_scripts action
westonruter Aug 9, 2023
9d8fee2
Revert conditional enqueueing of reCAPTCHA script
westonruter Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions includes/contact-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,6 +652,14 @@ public function form_html( $args = '' ) {
$html .= "\n" . '</form>';
$html .= "\n" . '</div>';

if ( wpcf7_load_js() ) {
wpcf7_enqueue_scripts();
}

if ( wpcf7_load_css() ) {
wpcf7_enqueue_styles();
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that these styles only affect the response related markup that is only triggered by an AJAX submission, it should be fine to load the CSS later - i.e. no layout shifts 👍


return $html . "\n";
}

Expand Down
48 changes: 29 additions & 19 deletions includes/controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ function wpcf7_control_init() {


/**
* Registers main scripts and styles.
* Registers main scripts.
*/
add_action(
'wp_enqueue_scripts',
static function () {
'wp_default_scripts',
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that the use of wp_default_scripts is needed due to block themes since they apply the_content filters before the wp_enqueue_scripts action runs. By using wp_default_scripts and wp_default_styles we can be assured that the scripts and styles are registered so that they can be enqueued when blocks are rendered.

static function ( WP_Scripts $scripts ) {
$assets = array();
$asset_file = wpcf7_plugin_path( 'includes/js/index.asset.php' );

Expand All @@ -46,46 +46,52 @@ static function () {
'version' => WPCF7_VERSION,
) );

wp_register_script(
$scripts->add(
'contact-form-7',
wpcf7_plugin_url( 'includes/js/index.js' ),
array_merge(
$assets['dependencies'],
array( 'swv' )
),
$assets['version'],
true
1 // in_footer
);

wp_register_script(
$scripts->add(
'contact-form-7-html5-fallback',
wpcf7_plugin_url( 'includes/js/html5-fallback.js' ),
array( 'jquery-ui-datepicker' ),
WPCF7_VERSION,
true
1 // in_footer
);
},
10, 1
);

if ( wpcf7_load_js() ) {
wpcf7_enqueue_scripts();
}

wp_register_style(
/**
* Registers main styles.
*/
add_action(
'wp_default_styles',
static function ( WP_Styles $styles ) {
$styles->add(
'contact-form-7',
wpcf7_plugin_url( 'includes/css/styles.css' ),
array(),
WPCF7_VERSION,
'all'
);

wp_register_style(
$styles->add(
'contact-form-7-rtl',
wpcf7_plugin_url( 'includes/css/styles-rtl.css' ),
array( 'contact-form-7' ),
WPCF7_VERSION,
'all'
);

wp_register_style(
$styles->add(
'jquery-ui-smoothness',
wpcf7_plugin_url(
'includes/js/jquery-ui/themes/smoothness/jquery-ui.min.css'
Expand All @@ -94,19 +100,19 @@ static function () {
'1.12.1',
'screen'
);

if ( wpcf7_load_css() ) {
wpcf7_enqueue_styles();
}
},
10, 0
10, 1
);


/**
* Enqueues scripts.
*/
function wpcf7_enqueue_scripts() {
if ( did_action( 'wpcf7_enqueue_scripts' ) ) {
return;
}

wp_enqueue_script( 'contact-form-7' );

$wpcf7 = array(
Expand Down Expand Up @@ -138,6 +144,10 @@ function wpcf7_script_is() {
* Enqueues styles.
*/
function wpcf7_enqueue_styles() {
if ( did_action( 'wpcf7_enqueue_styles' ) ) {
return;
}

wp_enqueue_style( 'contact-form-7' );

if ( wpcf7_is_rtl() ) {
Expand All @@ -157,7 +167,7 @@ function wpcf7_style_is() {


add_action(
'wp_enqueue_scripts',
'wpcf7_enqueue_scripts',
'wpcf7_html5_fallback',
20, 0
);
Expand Down
10 changes: 5 additions & 5 deletions includes/swv/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<?php

add_action(
'wp_enqueue_scripts',
static function () {
'wp_default_scripts',
static function ( WP_Scripts $scripts ) {
$assets = array();
$asset_file = wpcf7_plugin_path( 'includes/swv/js/index.asset.php' );

Expand All @@ -15,12 +15,12 @@ static function () {
'version' => WPCF7_VERSION,
) );

wp_register_script( 'swv',
$scripts->add( 'swv',
wpcf7_plugin_url( 'includes/swv/js/index.js' ),
$assets['dependencies'],
$assets['version'],
true
1 // in_footer
);
},
10, 0
10, 1
);
2 changes: 1 addition & 1 deletion modules/recaptcha/recaptcha.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function wpcf7_recaptcha_register_service() {


add_action(
'wp_enqueue_scripts',
'wpcf7_enqueue_scripts',
'wpcf7_recaptcha_enqueue_scripts',
20, 0
);
Expand Down