Skip to content

Commit 256e7eb

Browse files
refactor: plugin install steps
1 parent b7b94d0 commit 256e7eb

File tree

4 files changed

+98
-52
lines changed

4 files changed

+98
-52
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: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -482,16 +482,26 @@ jQuery( function( $ ) {
482482
}
483483
} );
484484

485+
$( '#wizard-otter-block-checkbox' ).on( 'change', function() {
486+
if ( ! $(this).is(':checked') ) {
487+
$( '.wpmm-templates-radio' ).addClass( 'disabled' );
488+
} else {
489+
$( '.wpmm-templates-radio' ).removeClass( 'disabled' );
490+
}
491+
} );
492+
485493
/**
486494
* Adds elements and CSS when importing from wizard
487495
*
488496
* @param {string} slug The template that will be imported
489497
*/
490498
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>' );
499+
if ( ! $('.wpmm-templates-radio').hasClass('disabled') ) {
500+
const template = $( 'input[value=' + slug + '] + .wpmm-template' );
501+
502+
template.addClass( 'loading' );
503+
template.append( '<span class="dashicons dashicons-update"></span><p><i>' + wpmmVars.loadingString + '</i></p>' );
504+
}
495505

496506
$( '.button-import' ).attr( 'disabled', 'disabled' );
497507
$( '#wpmm-wizard-wrapper .button-skip' ).addClass( 'disabled' );
@@ -518,8 +528,7 @@ jQuery( function( $ ) {
518528
* @param {Function} callback
519529
*/
520530
function importTemplate( data, callback ) {
521-
handleOtter()
522-
.then( () => handlePlugins() )
531+
handlePlugins()
523532
.then( () => addToPage( data, callback ) )
524533
.catch( ( error ) => {
525534
// eslint-disable-next-line no-console
@@ -561,6 +570,10 @@ jQuery( function( $ ) {
561570
* @param {Function} callback
562571
*/
563572
function addToPage( data, callback ) {
573+
if ($('.wpmm-templates-radio').hasClass('disabled')) {
574+
data.category = '';
575+
}
576+
564577
data.action = 'wpmm_insert_template';
565578
$.post( wpmmVars.ajaxURL, data, function( response ) {
566579
if ( ! response.success ) {
@@ -579,6 +592,7 @@ jQuery( function( $ ) {
579592
*/
580593
function handlePlugins() {
581594
const optimoleCheckbox = $( '#wizard-optimole-checkbox' );
595+
const otterBlockCheckbox = $( '#wizard-otter-block-checkbox' );
582596
let promiseChain = Promise.resolve();
583597

584598
if ( optimoleCheckbox.length && optimoleCheckbox.is( ':checked' ) ) {
@@ -594,6 +608,20 @@ jQuery( function( $ ) {
594608
});
595609
}
596610

611+
if ( otterBlockCheckbox.length && otterBlockCheckbox.is( ':checked' ) ) {
612+
promiseChain = promiseChain
613+
.then(() => handleOtter())
614+
.then(() => {
615+
if ( ! wpmmVars.isOtterInstalled ) {
616+
return installPlugin( 'otter-blocks' ).then( () => activatePlugin( 'otter-blocks' ) );
617+
}
618+
619+
if ( ! wpmmVars.isOtterActive ) {
620+
return activatePlugin( 'otter-blocks' );
621+
}
622+
});
623+
}
624+
597625
return promiseChain.catch( ( error ) => {
598626
console.error( 'Error in plugin installation or activation:', error );
599627
});

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -692,9 +692,9 @@ public function select_page() {
692692
* @return void
693693
*/
694694
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-
}
695+
// if ( ! is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
696+
// wp_send_json_error( array( 'error' => 'Otter Blocks is not activated' ) );
697+
// }
698698

699699
// check nonce existence
700700
if ( empty( $_POST['_wpnonce'] ) ) {
@@ -712,10 +712,14 @@ public function insert_template() {
712712
}
713713

714714
$template_slug = $_POST['template_slug'];
715-
$category = $_POST['category'];
716-
$template = json_decode( file_get_contents( WPMM_TEMPLATES_PATH . $category . '/' . $template_slug . '/blocks-export.json' ) );
715+
$blocks = '';
716+
$category = 'maintenance';
717+
if ( ! empty( $_POST['category'] ) ) {
718+
$category = $_POST['category'];
719+
$template = json_decode( file_get_contents( WPMM_TEMPLATES_PATH . $category . '/' . $template_slug . '/blocks-export.json' ) );
717720

718-
$blocks = str_replace( '\n', '', $template->content );
721+
$blocks = str_replace( '\n', '', $template->content );
722+
}
719723

720724
$post_arr = array(
721725
'post_type' => 'page',
@@ -737,7 +741,10 @@ public function insert_template() {
737741
}
738742

739743
$this->plugin_settings['design']['page_id'] = $page_id;
740-
CSS_Handler::generate_css_file( $page_id );
744+
745+
if ( is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
746+
CSS_Handler::generate_css_file( $page_id );
747+
}
741748

742749
if ( 'wizard' === $_POST['source'] ) {
743750
$this->plugin_settings['general']['status'] = 1;

views/wizard.php

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19,47 +19,53 @@
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' ),
29-
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'];
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+
printf(
35+
wp_kses(
36+
/* translators: Otter url */
37+
__( '<strong>Pick a template to get started. <a href="%1$s" target="_blank">Otter Blocks</a> plugin will be installed and activated to support and customize your layout.</strong> It also unlocks tools like forms and popups - if you need them later.', 'wp-maintenance-mode' ),
38+
wpmm_translated_string_allowed_html()
39+
),
40+
tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/', $this->plugin_slug, 'wizard' ),
41+
);
4742
?>
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>
43+
</p>
44+
</div>
45+
<div class="wpmm-templates-radio">
46+
<form>
5847
<?php
59-
}
60-
?>
61-
</form>
62-
</div>
48+
$categories = WP_Maintenance_Mode::get_page_categories();
49+
foreach ( $categories as $category => $label ) {
50+
$slug = $default_templates[ $category ]['slug'];
51+
$thumbnail_url = $default_templates[ $category ]['thumbnail'];
52+
?>
53+
<div class="templates-radio__item" >
54+
<h6 class="tag"><?php echo $label; ?></h6>
55+
<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' ); ?>>
56+
<label for="<?php echo esc_attr( $slug ); ?>" class="wpmm-template">
57+
<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $slug ); ?>"/>
58+
<span class="checked-icon">
59+
<img src="<?php echo esc_url( WPMM_URL . 'assets/images/checked.svg' ); ?>" alt="<?php echo esc_attr( 'checked-icon' ); ?>"/>
60+
</span>
61+
</label>
62+
</div>
63+
<?php
64+
}
65+
?>
66+
</form>
67+
</div>
68+
<?php } ?>
6369
<?php if ( ! is_plugin_active( 'optimole-wp/optimole-wp.php' ) ) { ?>
6470
<div class="optimole-upsell">
6571
<div class="optimole-upsell-container">

0 commit comments

Comments
 (0)