Skip to content

Release #492

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

Merged
vytisbulkevicius merged 9 commits into from
Jul 11, 2025
Merged

Release #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
267b484
Sync branch [skip ci]
pirate-bot May 27, 2025
b7b94d0
Sync branch [skip ci]
pirate-bot May 27, 2025
256e7eb
refactor: plugin install steps
girishpanchal30 Jul 11, 2025
60fbdc1
refactor: move translatable strings outside HTML
girishpanchal30 Jul 11, 2025
d1c8025
refactor: update description text
girishpanchal30 Jul 11, 2025
4c77d3a
fix:phpcs
girishpanchal30 Jul 11, 2025
86dd47a
fix: onboarding skip step
girishpanchal30 Jul 11, 2025
64d29c4
refactor: install otter block plugin
girishpanchal30 Jul 11, 2025
0fb70bf
Merge pull request #491 from Codeinwp/feat/490
vytisbulkevicius Jul 11, 2025
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
5 changes: 5 additions & 0 deletions assets/css/style-wizard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,11 @@ input.invalid:focus {
color: #d63638;
}

.wpmm-templates-radio.disabled {
opacity: .5;
pointer-events: none;
}

@keyframes abs-spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
Expand Down
68 changes: 47 additions & 21 deletions assets/js/scripts-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,22 +387,17 @@ jQuery( function( $ ) {
$( this ).addClass( 'is-busy' );
$( this ).trigger( 'blur' );

handlePlugins().then( function() {
$.post( wpmmVars.ajaxURL, {
action: 'wpmm_skip_wizard',
_wpnonce: wpmmVars.wizardNonce,
}, function( response ) {
if ( ! response.success ) {
addErrorMessage();
return;
}
$.post( wpmmVars.ajaxURL, {
action: 'wpmm_skip_wizard',
_wpnonce: wpmmVars.wizardNonce,
}, function( response ) {
if ( ! response.success ) {
addErrorMessage();
return;
}

skipWizard = true;
moveToStep( 'import', 'subscribe' );
} );
} ).catch( function() {
addErrorMessage();
$( '.button-skip' ).removeClass( 'is-busy' );
skipWizard = true;
moveToStep( 'import', 'subscribe' );
} );
} );

Expand Down Expand Up @@ -482,16 +477,26 @@ jQuery( function( $ ) {
}
} );

$( '#wizard-otter-block-checkbox' ).on( 'change', function() {
if ( ! $(this).is(':checked') ) {
$( '.wpmm-templates-radio' ).addClass( 'disabled' );
} else {
$( '.wpmm-templates-radio' ).removeClass( 'disabled' );
}
} );

/**
* Adds elements and CSS when importing from wizard
*
* @param {string} slug The template that will be imported
*/
function importInProgress( slug ) {
const template = $( 'input[value=' + slug + '] + .wpmm-template' );

template.addClass( 'loading' );
template.append( '<span class="dashicons dashicons-update"></span><p><i>' + wpmmVars.loadingString + '</i></p>' );
if ( ! $('.wpmm-templates-radio').hasClass('disabled') ) {
const template = $( 'input[value=' + slug + '] + .wpmm-template' );

template.addClass( 'loading' );
template.append( '<span class="dashicons dashicons-update"></span><p><i>' + wpmmVars.loadingString + '</i></p>' );
}

$( '.button-import' ).attr( 'disabled', 'disabled' );
$( '#wpmm-wizard-wrapper .button-skip' ).addClass( 'disabled' );
Expand All @@ -518,8 +523,7 @@ jQuery( function( $ ) {
* @param {Function} callback
*/
function importTemplate( data, callback ) {
handleOtter()
.then( () => handlePlugins() )
handlePlugins()
.then( () => addToPage( data, callback ) )
.catch( ( error ) => {
// eslint-disable-next-line no-console
Expand Down Expand Up @@ -561,6 +565,22 @@ jQuery( function( $ ) {
* @param {Function} callback
*/
function addToPage( data, callback ) {
if ($('.wpmm-templates-radio').hasClass('disabled')) {
$.post( wpmmVars.ajaxURL, {
action: 'wpmm_skip_insert_template',
_wpnonce: wpmmVars.wizardNonce,
}, function( response ) {
if ( ! response.success ) {
addErrorMessage();
return;
}

skipWizard = true;
moveToStep( 'import', 'subscribe' );
} );
return Promise.resolve();
}

data.action = 'wpmm_insert_template';
$.post( wpmmVars.ajaxURL, data, function( response ) {
if ( ! response.success ) {
Expand All @@ -579,6 +599,7 @@ jQuery( function( $ ) {
*/
function handlePlugins() {
const optimoleCheckbox = $( '#wizard-optimole-checkbox' );
const otterBlockCheckbox = $( '#wizard-otter-block-checkbox' );
let promiseChain = Promise.resolve();

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

if ( otterBlockCheckbox.length && otterBlockCheckbox.is( ':checked' ) ) {
promiseChain = promiseChain
.then(() => handleOtter());
}

return promiseChain.catch( ( error ) => {
console.error( 'Error in plugin installation or activation:', error );
});
Expand Down
25 changes: 21 additions & 4 deletions includes/classes/wp-maintenance-mode-admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ private function __construct() {
add_action( 'wp_ajax_wpmm_reset_settings', array( $this, 'reset_plugin_settings' ) );
add_action( 'wp_ajax_wpmm_select_page', array( $this, 'select_page' ) );
add_action( 'wp_ajax_wpmm_insert_template', array( $this, 'insert_template' ) );
add_action( 'wp_ajax_wpmm_skip_insert_template', array( $this, 'skip_insert_template' ) );
add_action( 'wp_ajax_wpmm_skip_wizard', array( $this, 'skip_wizard' ) );
add_action( 'wp_ajax_wpmm_subscribe', array( $this, 'subscribe_newsletter' ) );
add_action( 'wp_ajax_wpmm_change_template_category', array( $this, 'change_template_category' ) );
Expand Down Expand Up @@ -692,10 +693,6 @@ public function select_page() {
* @return void
*/
public function insert_template() {
if ( ! is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
wp_send_json_error( array( 'error' => 'Otter Blocks is not activated' ) );
}

// check nonce existence
if ( empty( $_POST['_wpnonce'] ) ) {
die( esc_html__( 'The nonce field must not be empty.', 'wp-maintenance-mode' ) );
Expand Down Expand Up @@ -749,6 +746,26 @@ public function insert_template() {
wp_send_json_success( array( 'pageEditURL' => get_edit_post_link( $page_id ) ) );
}

/**
* Skip importing a template.
*
* @return void
*/
public function skip_insert_template() {
// check nonce existence
if ( empty( $_POST['_wpnonce'] ) ) {
die( esc_html__( 'The nonce field must not be empty.', 'wp-maintenance-mode' ) );
}

// check nonce validation
if ( ! wp_verify_nonce( $_POST['_wpnonce'], 'wizard' ) ) {
die( esc_html__( 'Security check.', 'wp-maintenance-mode' ) );
}

update_option( 'wpmm_fresh_install', false );
wp_send_json_success();
}

/**
* Skip importing a template (and installing Otter) from the wizard
*
Expand Down
109 changes: 62 additions & 47 deletions views/wizard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,47 +19,60 @@
<div class="slider-wrap">
<div class="step-wrap">
<div class="step import-step">
<h4 class="header"><?php esc_html_e( 'Select the type of page you want', 'wp-maintenance-mode' ); ?></h4>
<p class="templates-description">
<?php
printf(
wp_kses(
/* translators: Otter url */
__( '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' ),
<h4 class="header"><?php esc_html_e( 'Get a boost with our free features', 'wp-maintenance-mode' ); ?></h4>
<?php if ( ! is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) { ?>
<div class="optimole-upsell">
<div class="optimole-upsell-container">
<span class="components-checkbox-control__input-container">
<input id="wizard-otter-block-checkbox" type="checkbox" class="components-checkbox-control__input" checked>
<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>
</span>
<label for="wizard-otter-block-checkbox"><?php echo esc_html__( 'Essential Page Templates', 'wp-maintenance-mode' ); ?></label>
</div>
<p class="description">
<?php
echo wp_kses(
sprintf(
// translators: %1$s is a description, %2$s is otter-block link, %3$s is plugin name, %4$s is description text.
'<strong>%1$s <a href="%2$s" target="_blank">%3$s</a></strong> %4$s',
__( 'Pick a template to get started.', 'wp-maintenance-mode' ),
tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/', $this->plugin_slug, 'wizard' ),
__( 'Otter Blocks', 'wp-maintenance-mode' ),
__( 'plugin will be installed and activated to support and customize your layout.', 'wp-maintenance-mode' ),
),
wpmm_translated_string_allowed_html()
),
tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/', $this->plugin_slug, 'wizard' ),
$this->get_external_link_icon()
);
?>
<br>
<?php
esc_html_e( 'Pick your template below, you can always customise it later.', 'wp-maintenance-mode' );
?>
</p>
<div class="wpmm-templates-radio">
<form>
<?php
$categories = WP_Maintenance_Mode::get_page_categories();
foreach ( $categories as $category => $label ) {
$slug = $default_templates[ $category ]['slug'];
$thumbnail_url = $default_templates[ $category ]['thumbnail'];
);
?>
<div class="templates-radio__item" >
<h6 class="tag"><?php echo $label; ?></h6>
<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' ); ?>>
<label for="<?php echo esc_attr( $slug ); ?>" class="wpmm-template">
<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $slug ); ?>"/>
<span class="checked-icon">
<img src="<?php echo esc_url( WPMM_URL . 'assets/images/checked.svg' ); ?>" alt="<?php echo esc_attr( 'checked-icon' ); ?>"/>
</span>
</label>
</div>
<br>
<?php
}
?>
</form>
</div>
esc_html_e( 'It also unlocks tools like forms and popups - if you need them later.', 'wp-maintenance-mode' );
?>
</p>
</div>
<div class="wpmm-templates-radio">
<form>
<?php
$categories = WP_Maintenance_Mode::get_page_categories();
foreach ( $categories as $category => $label ) {
$slug = $default_templates[ $category ]['slug'];
$thumbnail_url = $default_templates[ $category ]['thumbnail'];
?>
<div class="templates-radio__item" >
<h6 class="tag"><?php echo $label; ?></h6>
<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' ); ?>>
<label for="<?php echo esc_attr( $slug ); ?>" class="wpmm-template">
<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $slug ); ?>"/>
<span class="checked-icon">
<img src="<?php echo esc_url( WPMM_URL . 'assets/images/checked.svg' ); ?>" alt="<?php echo esc_attr( 'checked-icon' ); ?>"/>
</span>
</label>
</div>
<?php
}
?>
</form>
</div>
<?php } ?>
<?php if ( ! is_plugin_active( 'optimole-wp/optimole-wp.php' ) ) { ?>
<div class="optimole-upsell">
<div class="optimole-upsell-container">
Expand All @@ -73,22 +86,24 @@
</div>
<p class="description">
<?php
printf(
wp_kses(
/* translators: Optimole url */
__( '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' ),
wpmm_translated_string_allowed_html()
),
echo wp_kses(
sprintf(
// translators: %1$s is a description, %2$s is optimole-wp link, %3$s is plugin name, %4$s is description text.
'%1$s <a href="%2$s" target="_blank">%3$s</a> %4$s',
__( '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' ),
esc_url( 'https://wordpress.org/plugins/optimole-wp/' ),
$this->get_external_link_icon()
);
'Optimole',
__( 'plugin will be installed and activated.', 'wp-maintenance-mode' ),
),
wpmm_translated_string_allowed_html(),
);
?>
</div>
<?php } ?>

<div id="wizard-buttons" class="import-button">
<input type="button" class="button button-big button-primary disabled button-import" value="<?php esc_html_e( 'Continue', 'wp-maintenance-mode' ); ?>"/>
<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' ); ?>"/>
<input type="button" class="button button-big button-secondary button-skip" value="<?php esc_html_e( 'Skip this step', 'wp-maintenance-mode' ); ?>"/>
</div>
</div>
</div>
Expand Down
Loading