Skip to content

Commit 0fb70bf

Browse files
vytisbulkeviciusvytisbulkevicius
authored
Merge pull request #491 from Codeinwp/feat/490
Update plugin onboarding steps.
2 parents b7b94d0 + 64d29c4 commit 0fb70bf

File tree

4 files changed

+135
-72
lines changed

4 files changed

+135
-72
lines changed

‎assets/css/style-wizard.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,11 @@ input.invalid:focus {
353353
color: #d63638;
354354
}
355355

356+
.wpmm-templates-radio.disabled {
357+
opacity: .5;
358+
pointer-events: none;
359+
}
360+
356361
@keyframes abs-spin {
357362
from {
358363
transform: translate(-50%, -50%) rotate(0deg);

‎assets/js/scripts-admin.js‎

Lines changed: 47 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -387,22 +387,17 @@ jQuery( function( $ ) {
387387
$( this ).addClass( 'is-busy' );
388388
$( this ).trigger( 'blur' );
389389

390-
handlePlugins().then( function() {
391-
$.post( wpmmVars.ajaxURL, {
392-
action: 'wpmm_skip_wizard',
393-
_wpnonce: wpmmVars.wizardNonce,
394-
}, function( response ) {
395-
if ( ! response.success ) {
396-
addErrorMessage();
397-
return;
398-
}
390+
$.post( wpmmVars.ajaxURL, {
391+
action: 'wpmm_skip_wizard',
392+
_wpnonce: wpmmVars.wizardNonce,
393+
}, function( response ) {
394+
if ( ! response.success ) {
395+
addErrorMessage();
396+
return;
397+
}
399398

400-
skipWizard = true;
401-
moveToStep( 'import', 'subscribe' );
402-
} );
403-
} ).catch( function() {
404-
addErrorMessage();
405-
$( '.button-skip' ).removeClass( 'is-busy' );
399+
skipWizard = true;
400+
moveToStep( 'import', 'subscribe' );
406401
} );
407402
} );
408403

@@ -482,16 +477,26 @@ jQuery( function( $ ) {
482477
}
483478
} );
484479

480+
$( '#wizard-otter-block-checkbox' ).on( 'change', function() {
481+
if ( ! $(this).is(':checked') ) {
482+
$( '.wpmm-templates-radio' ).addClass( 'disabled' );
483+
} else {
484+
$( '.wpmm-templates-radio' ).removeClass( 'disabled' );
485+
}
486+
} );
487+
485488
/**
486489
* Adds elements and CSS when importing from wizard
487490
*
488491
* @param {string} slug The template that will be imported
489492
*/
490493
function importInProgress( slug ) {
491-
const template = $( 'input[value=' + slug + '] + .wpmm-template' );
492-
493-
template.addClass( 'loading' );
494-
template.append( '<span class="dashicons dashicons-update"></span><p><i>' + wpmmVars.loadingString + '</i></p>' );
494+
if ( ! $('.wpmm-templates-radio').hasClass('disabled') ) {
495+
const template = $( 'input[value=' + slug + '] + .wpmm-template' );
496+
497+
template.addClass( 'loading' );
498+
template.append( '<span class="dashicons dashicons-update"></span><p><i>' + wpmmVars.loadingString + '</i></p>' );
499+
}
495500

496501
$( '.button-import' ).attr( 'disabled', 'disabled' );
497502
$( '#wpmm-wizard-wrapper .button-skip' ).addClass( 'disabled' );
@@ -518,8 +523,7 @@ jQuery( function( $ ) {
518523
* @param {Function} callback
519524
*/
520525
function importTemplate( data, callback ) {
521-
handleOtter()
522-
.then( () => handlePlugins() )
526+
handlePlugins()
523527
.then( () => addToPage( data, callback ) )
524528
.catch( ( error ) => {
525529
// eslint-disable-next-line no-console
@@ -561,6 +565,22 @@ jQuery( function( $ ) {
561565
* @param {Function} callback
562566
*/
563567
function addToPage( data, callback ) {
568+
if ($('.wpmm-templates-radio').hasClass('disabled')) {
569+
$.post( wpmmVars.ajaxURL, {
570+
action: 'wpmm_skip_insert_template',
571+
_wpnonce: wpmmVars.wizardNonce,
572+
}, function( response ) {
573+
if ( ! response.success ) {
574+
addErrorMessage();
575+
return;
576+
}
577+
578+
skipWizard = true;
579+
moveToStep( 'import', 'subscribe' );
580+
} );
581+
return Promise.resolve();
582+
}
583+
564584
data.action = 'wpmm_insert_template';
565585
$.post( wpmmVars.ajaxURL, data, function( response ) {
566586
if ( ! response.success ) {
@@ -579,6 +599,7 @@ jQuery( function( $ ) {
579599
*/
580600
function handlePlugins() {
581601
const optimoleCheckbox = $( '#wizard-optimole-checkbox' );
602+
const otterBlockCheckbox = $( '#wizard-otter-block-checkbox' );
582603
let promiseChain = Promise.resolve();
583604

584605
if ( optimoleCheckbox.length && optimoleCheckbox.is( ':checked' ) ) {
@@ -594,6 +615,11 @@ jQuery( function( $ ) {
594615
});
595616
}
596617

618+
if ( otterBlockCheckbox.length && otterBlockCheckbox.is( ':checked' ) ) {
619+
promiseChain = promiseChain
620+
.then(() => handleOtter());
621+
}
622+
597623
return promiseChain.catch( ( error ) => {
598624
console.error( 'Error in plugin installation or activation:', error );
599625
});

‎includes/classes/wp-maintenance-mode-admin.php‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ private function __construct() {
5959
add_action( 'wp_ajax_wpmm_reset_settings', array( $this, 'reset_plugin_settings' ) );
6060
add_action( 'wp_ajax_wpmm_select_page', array( $this, 'select_page' ) );
6161
add_action( 'wp_ajax_wpmm_insert_template', array( $this, 'insert_template' ) );
62+
add_action( 'wp_ajax_wpmm_skip_insert_template', array( $this, 'skip_insert_template' ) );
6263
add_action( 'wp_ajax_wpmm_skip_wizard', array( $this, 'skip_wizard' ) );
6364
add_action( 'wp_ajax_wpmm_subscribe', array( $this, 'subscribe_newsletter' ) );
6465
add_action( 'wp_ajax_wpmm_change_template_category', array( $this, 'change_template_category' ) );
@@ -692,10 +693,6 @@ public function select_page() {
692693
* @return void
693694
*/
694695
public function insert_template() {
695-
if ( ! is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
696-
wp_send_json_error( array( 'error' => 'Otter Blocks is not activated' ) );
697-
}
698-
699696
// check nonce existence
700697
if ( empty( $_POST['_wpnonce'] ) ) {
701698
die( esc_html__( 'The nonce field must not be empty.', 'wp-maintenance-mode' ) );
@@ -749,6 +746,26 @@ public function insert_template() {
749746
wp_send_json_success( array( 'pageEditURL' => get_edit_post_link( $page_id ) ) );
750747
}
751748

749+
/**
750+
* Skip importing a template.
751+
*
752+
* @return void
753+
*/
754+
public function skip_insert_template() {
755+
// check nonce existence
756+
if ( empty( $_POST['_wpnonce'] ) ) {
757+
die( esc_html__( 'The nonce field must not be empty.', 'wp-maintenance-mode' ) );
758+
}
759+
760+
// check nonce validation
761+
if ( ! wp_verify_nonce( $_POST['_wpnonce'], 'wizard' ) ) {
762+
die( esc_html__( 'Security check.', 'wp-maintenance-mode' ) );
763+
}
764+
765+
update_option( 'wpmm_fresh_install', false );
766+
wp_send_json_success();
767+
}
768+
752769
/**
753770
* Skip importing a template (and installing Otter) from the wizard
754771
*

‎views/wizard.php‎

Lines changed: 62 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,47 +19,60 @@
1919
<div class="slider-wrap">
2020
<div class="step-wrap">
2121
<div class="step import-step">
22-
<h4 class="header"><?php esc_html_e( 'Select the type of page you want', 'wp-maintenance-mode' ); ?></h4>
23-
<p class="templates-description">
24-
<?php
25-
printf(
26-
wp_kses(
27-
/* translators: Otter url */
28-
__( 'Get started with custom templates, and build engaging pages using Contact forms, Popups and more, with <a href="%1$s" target="_blank">Otter%2$s</a>.', 'wp-maintenance-mode' ),
22+
<h4 class="header"><?php esc_html_e( 'Get a boost with our free features', 'wp-maintenance-mode' ); ?></h4>
23+
<?php if ( ! is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) { ?>
24+
<div class="optimole-upsell">
25+
<div class="optimole-upsell-container">
26+
<span class="components-checkbox-control__input-container">
27+
<input id="wizard-otter-block-checkbox" type="checkbox" class="components-checkbox-control__input" checked>
28+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="presentation" class="components-checkbox-control__checked" aria-hidden="true" focusable="false"><path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path></svg>
29+
</span>
30+
<label for="wizard-otter-block-checkbox"><?php echo esc_html__( 'Essential Page Templates', 'wp-maintenance-mode' ); ?></label>
31+
</div>
32+
<p class="description">
33+
<?php
34+
echo wp_kses(
35+
sprintf(
36+
// translators: %1$s is a description, %2$s is otter-block link, %3$s is plugin name, %4$s is description text.
37+
'<strong>%1$s <a href="%2$s" target="_blank">%3$s</a></strong> %4$s',
38+
__( 'Pick a template to get started.', 'wp-maintenance-mode' ),
39+
tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/', $this->plugin_slug, 'wizard' ),
40+
__( 'Otter Blocks', 'wp-maintenance-mode' ),
41+
__( 'plugin will be installed and activated to support and customize your layout.', 'wp-maintenance-mode' ),
42+
),
2943
wpmm_translated_string_allowed_html()
30-
),
31-
tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/', $this->plugin_slug, 'wizard' ),
32-
$this->get_external_link_icon()
33-
);
34-
?>
35-
<br>
36-
<?php
37-
esc_html_e( 'Pick your template below, you can always customise it later.', 'wp-maintenance-mode' );
38-
?>
39-
</p>
40-
<div class="wpmm-templates-radio">
41-
<form>
42-
<?php
43-
$categories = WP_Maintenance_Mode::get_page_categories();
44-
foreach ( $categories as $category => $label ) {
45-
$slug = $default_templates[ $category ]['slug'];
46-
$thumbnail_url = $default_templates[ $category ]['thumbnail'];
44+
);
4745
?>
48-
<div class="templates-radio__item" >
49-
<h6 class="tag"><?php echo $label; ?></h6>
50-
<input id="<?php echo esc_attr( $slug ); ?>" type="radio" name="wizard-template" value="<?php echo esc_attr( $slug ); ?>" data-category="<?php echo esc_attr( $category ); ?>" <?php checked( $category, 'coming-soon' ); ?>>
51-
<label for="<?php echo esc_attr( $slug ); ?>" class="wpmm-template">
52-
<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $slug ); ?>"/>
53-
<span class="checked-icon">
54-
<img src="<?php echo esc_url( WPMM_URL . 'assets/images/checked.svg' ); ?>" alt="<?php echo esc_attr( 'checked-icon' ); ?>"/>
55-
</span>
56-
</label>
57-
</div>
46+
<br>
5847
<?php
59-
}
60-
?>
61-
</form>
62-
</div>
48+
esc_html_e( 'It also unlocks tools like forms and popups - if you need them later.', 'wp-maintenance-mode' );
49+
?>
50+
</p>
51+
</div>
52+
<div class="wpmm-templates-radio">
53+
<form>
54+
<?php
55+
$categories = WP_Maintenance_Mode::get_page_categories();
56+
foreach ( $categories as $category => $label ) {
57+
$slug = $default_templates[ $category ]['slug'];
58+
$thumbnail_url = $default_templates[ $category ]['thumbnail'];
59+
?>
60+
<div class="templates-radio__item" >
61+
<h6 class="tag"><?php echo $label; ?></h6>
62+
<input id="<?php echo esc_attr( $slug ); ?>" type="radio" name="wizard-template" value="<?php echo esc_attr( $slug ); ?>" data-category="<?php echo esc_attr( $category ); ?>" <?php checked( $category, 'coming-soon' ); ?>>
63+
<label for="<?php echo esc_attr( $slug ); ?>" class="wpmm-template">
64+
<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $slug ); ?>"/>
65+
<span class="checked-icon">
66+
<img src="<?php echo esc_url( WPMM_URL . 'assets/images/checked.svg' ); ?>" alt="<?php echo esc_attr( 'checked-icon' ); ?>"/>
67+
</span>
68+
</label>
69+
</div>
70+
<?php
71+
}
72+
?>
73+
</form>
74+
</div>
75+
<?php } ?>
6376
<?php if ( ! is_plugin_active( 'optimole-wp/optimole-wp.php' ) ) { ?>
6477
<div class="optimole-upsell">
6578
<div class="optimole-upsell-container">
@@ -73,22 +86,24 @@
7386
</div>
7487
<p class="description">
7588
<?php
76-
printf(
77-
wp_kses(
78-
/* translators: Optimole url */
79-
__( 'Templates would have pre-optimized images and all of your website\'s images would be delivered via Amazon Cloudfront CDN, resulting in an ≈ 80%% increase in speed, with <a href="%1$s" target="_blank">Optimole%2$s</a>.', 'wp-maintenance-mode' ),
80-
wpmm_translated_string_allowed_html()
81-
),
89+
echo wp_kses(
90+
sprintf(
91+
// translators: %1$s is a description, %2$s is optimole-wp link, %3$s is plugin name, %4$s is description text.
92+
'%1$s <a href="%2$s" target="_blank">%3$s</a> %4$s',
93+
__( 'Templates would have pre-optimized images and all of your website’s images would be delivered via Amazon Cloudfront CDN, resulting in an ≈ 80% increase in speed.', 'wp-maintenance-mode' ),
8294
esc_url( 'https://wordpress.org/plugins/optimole-wp/' ),
83-
$this->get_external_link_icon()
84-
);
95+
'Optimole',
96+
__( 'plugin will be installed and activated.', 'wp-maintenance-mode' ),
97+
),
98+
wpmm_translated_string_allowed_html(),
99+
);
85100
?>
86101
</div>
87102
<?php } ?>
88103

89104
<div id="wizard-buttons" class="import-button">
90105
<input type="button" class="button button-big button-primary disabled button-import" value="<?php esc_html_e( 'Continue', 'wp-maintenance-mode' ); ?>"/>
91-
<input type="button" class="button button-big button-secondary button-skip" value="<?php esc_html_e( 'I don’t want to use a template', 'wp-maintenance-mode' ); ?>"/>
106+
<input type="button" class="button button-big button-secondary button-skip" value="<?php esc_html_e( 'Skip this step', 'wp-maintenance-mode' ); ?>"/>
92107
</div>
93108
</div>
94109
</div>

0 commit comments

Comments
 (0)