Skip to content

Update plugin onboarding steps. #491

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 6 commits into from
Jul 11, 2025
Merged

Update plugin onboarding steps. #491

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
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
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
40 changes: 34 additions & 6 deletions assets/js/scripts-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,16 +482,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 +528,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 +570,10 @@ jQuery( function( $ ) {
* @param {Function} callback
*/
function addToPage( data, callback ) {
if ($('.wpmm-templates-radio').hasClass('disabled')) {
data.category = '';
}

data.action = 'wpmm_insert_template';
$.post( wpmmVars.ajaxURL, data, function( response ) {
if ( ! response.success ) {
Expand All @@ -579,6 +592,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 +608,20 @@ jQuery( function( $ ) {
});
}

if ( otterBlockCheckbox.length && otterBlockCheckbox.is( ':checked' ) ) {
promiseChain = promiseChain
.then(() => handleOtter())
.then(() => {
if ( ! wpmmVars.isOtterInstalled ) {
return installPlugin( 'otter-blocks' ).then( () => activatePlugin( 'otter-blocks' ) );
}

if ( ! wpmmVars.isOtterActive ) {
return activatePlugin( 'otter-blocks' );
}
});
}

return promiseChain.catch( ( error ) => {
console.error( 'Error in plugin installation or activation:', error );
});
Expand Down
21 changes: 14 additions & 7 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 @@ -692,9 +692,9 @@ 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' ) );
}
// 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'] ) ) {
Expand All @@ -712,10 +712,14 @@ public function insert_template() {
}

$template_slug = $_POST['template_slug'];
$category = $_POST['category'];
$template = json_decode( file_get_contents( WPMM_TEMPLATES_PATH . $category . '/' . $template_slug . '/blocks-export.json' ) );
$blocks = '';
$category = 'maintenance';
if ( ! empty( $_POST['category'] ) ) {
$category = $_POST['category'];
$template = json_decode( file_get_contents( WPMM_TEMPLATES_PATH . $category . '/' . $template_slug . '/blocks-export.json' ) );

$blocks = str_replace( '\n', '', $template->content );
$blocks = str_replace( '\n', '', $template->content );
}

$post_arr = array(
'post_type' => 'page',
Expand All @@ -737,7 +741,10 @@ public function insert_template() {
}

$this->plugin_settings['design']['page_id'] = $page_id;
CSS_Handler::generate_css_file( $page_id );

if ( is_plugin_active( 'otter-blocks/otter-blocks.php' ) ) {
CSS_Handler::generate_css_file( $page_id );
}

if ( 'wizard' === $_POST['source'] ) {
$this->plugin_settings['general']['status'] = 1;
Expand Down
84 changes: 45 additions & 39 deletions views/wizard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,47 +19,53 @@
<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' ),
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'];
<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
printf(
wp_kses(
/* translators: Otter url */
__( '<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' ),
Comment thread
girishpanchal30 marked this conversation as resolved.
Outdated
wpmm_translated_string_allowed_html()
),
tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/', $this->plugin_slug, 'wizard' ),
);
?>
<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>
</p>
</div>
<div class="wpmm-templates-radio">
<form>
<?php
}
?>
</form>
</div>
$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 Down
Loading