Gutenberg Compatibility [wip]

[arinaturcu]

Summary

It makes WP Maintenance compatible with Otter Blocks by changing how maintenance pages are built. A Maintenance Page now uses Gutenberg and templates that use Otter can be imported from the settings page.

Test Instructions

For new users:

• After activating, an onboarding wizard will appear.
• The wizard has 3 steps: one where the user imports one template from 2 available, one where the user can subscribe to a newsletter, and the last one where they can either go to the maintenance page or the settings page.
• When importing a template from the wizard, a new page named "Maintenance Page" should be created and it is set as the page the entire site will redirect when in maintenance mode.

For old users:

• After updating, a notice should appear where we inform them that some changes are made to build maintenance pages with Gutenberg. They can migrate to the new way by clicking the Migrate button from the notice. This notice is undismissible.
• After the migration, changes should be visible in the design tab of the settings page where the user can now select a page as a maintenance page and can import a template, and in the modules tab where we removed the modules that can be replaced with Otter blocks.
• Also, a notice to rollback should be visible and it should disappear after one week if not dismissed.

---

• The Maintenance Page will be private when maintenance mode is off. When the maintenance mode is on, the page becomes the front page of the site and every site URL will redirect to this one.

• When the maintenance page gets deleted or drafted while the maintenance mode is on, notices should appear to let the user know some actions are required.

• The bot will be updated for everyone and will be a chat bubble on the bottom right of the screen

• If the Maintenance page has content inside and the user is trying to import a template, a confirmation prompt should inform the user that the content will be replaced. The import will take place only after clicking Continue

---

Those who use versions below WP 5.8 can't use Otter so they can't import any template. The wizard will not appear for them and in the design tab, they can only see the templates and a notice saying they need WP >= 5.8.

Closes https://github.com/Codeinwp/otter-blocks/issues/935.

[github-actions[bot]]

Plugin build for 2ac22df70644724b95949b0d80c68dd3907b9b15 is ready :bellhop_bell:!

• Download build

[HardeepAsrani]

Few things about the chat box:

• [x] The Submit button looks broken, as the design is weird and doesn't make sense. I was using the default Twenty Twenty theme for the testing.
• [x] The Chatbot starts sending messages as the page loads regardless if the chatbox is open or not. Can we start sending the first message once the user clicks? If not, if you open it after a while, there are already three messages, and the chat window can't fit them all.
• [x] At the same time, the chat window can be made bigger & have a scrollbar, which it doesn't now. You can scroll, but the scrollbar is hidden.
• [x] When you submit your email in the end, you get a console error, as you can see in the screenshot.

Apart from chatbox:

• [x] There's a GDPR option in the backend. If I enable it, I don't see any change in the front. Does it have any functionality in this version, or it's only a relic from the last one?

Action required: your Maintenance page has been deleted. Visit settings page to address this issue.

• [x] "Action required" can be in bold, and the "settings page" can be the link to the page (opening the default design page).
• [x] You also get this notice once you're already inside the Settings page. Here I think we can replace it with more details on how they can fix this. It can be just below the "Custom Page" field to notify them of what has happened and how they can fix it.

Action required: your Maintenance page is drafted. Visit settings page to address this issue.

• [x] Here, we can redirect them to the edit page link for them to publish it instead of the settings page.

• [ ] In the scenario where I have a Maintainance, I delete it. After that, I go and import a new page, but that page isn't selected automatically as my maintenance page.

• [x] Once you select to import the page, it should show a modal saying they've successfully imported it and then show them a done button and an edit option. Right now, it takes me directly to the Editor, which feels weird as I don't know what the next steps are.

• [x] If you have a Maintainance page selected and import a new one, it will be nice to have a confirmation prompt telling me that the existing page will be updated. The user might think it will import another page and lose their current work.

• [x] If the Maintainance mode is Disabled, non-admin access to the Maintainance page should redirect the user to the website's homepage.

• [x] Right now, if you as a non-logged-in user visit any page, it redirects you to site.com/maintainance-page. I think the URL should stay of the homepage. Something like this might work:

function custom_page_on_front( $value ) {
    // Your conditions here.
    return 1 // change with your page id.
}

add_filter( 'pre_option_page_on_front', 'custom_page_on_front' );

Let me know if you have any questions and sorry for the long list!

[JohnPixle]

I went through your feedback Hardeep above and makes sense, I will do a test as well tomorrow and share any UIX insights. Thanks for the update Arina!

[JohnPixle]

@arinaturcu great work so far, things are starting to take shape.

Some input on Hardeep's comments:

GDPR

There's a GDPR option in the backend. If I enable it, I don't see any change in the front. Does it have any functionality in this version, or it's only a relic from the last one?

I think it is a left-over from the existing version, and was related to the contact form. It seems that in order to be GDPR compliant, the user must have access to a privacy page. A link for this page is added in the footer.

Also, in GDPR settings there are text fields where the user defines the consent checkbox text in forms. However this can be done directly on the form block itself. The text is basic, and we can have it as default:

This form collects your name and email so that we can reach you back. Check out our <a href="#">Privacy Policy</a> page to fully understand how we protect and manage your submitted data.

I don't know if we can integrate something like that with Otter forms now, or somehow integrate this logic and functionality into the new version. Open to some brainstorming.

Modal after importing the template

Once you select to import the page, it should show a modal saying they've successfully imported it and then show them a done button and an edit option. Right now, it takes me directly to the Editor, which feels weird as I don't know what the next steps are.

I agree, this part actually already exists in FIgma, more on that below.

UIX Feedback

• [x] The template import flow needs a revision @arinaturcu There had been some updates regarding the library layout in the original issue, which involves a popup after importing, and displays the "import button" on thumbnail hover.

This is the Figma board. I had linked to a 2 minute video in the original issue, which showed the hover.

• [x] Template thumbnail width I believe we can make the width of the thumbnails responsive instead of using fixed px values. Currently the width is set to 240px. Can have them in % units with a max-width of 380px ?

This should make better use of space in large screens as well. Let me know if you need more specific details on this or clarifications.

• [x] Remove description text under templates Please note that in the new templates layout shows the button on thumbnail hover, so there will be no need for an import button or descriptive text below the area. But regardless of that, I believe there is no need to display that text, since every user will go through the wizard, and they should already have seen that.

• [x] Remove "Content" title from Design tab I think it does not make much sense to keep the "content" as a title for the Design tab. We can remove it completely, or rename it to something more relevant, what say @mghenciu ?

• [x] Modules tab @HardeepAsrani Maybe we should remove the "subscribe section" from the modules tab? Also, are we indeed integrating Google Analytics behind the scenes?

---

@arinaturcu Let me know if you need any help with the above, happy to clarify any blind spots if any. Sorry for the long scroll.

[arinaturcu]

@JohnPixle Thank you for the input! 🚀

• [ ] Modules tab @HardeepAsrani Maybe we should remove the "subscribe section" from the modules tab? Also, are we indeed integrating Google Analytics behind the scenes?

The subscribe section is useful for collecting emails stored from the bot. And google analytics still works the same as in the current version.

Also, I think we can remove the GDPR tab since the texts can be added from the blocks as you said and the privacy policy page can be set from WordPress itself.

[JohnPixle]

The subscribe section is useful for collecting emails stored from the bot.

Awesome, makes sense.

Also, I think we can remove the GDPR tab since the texts can be added from the blocks as you said and the privacy policy page can be set from WordPress itself.

Agreed 👍🏻

Thanks for the update @arinaturcu !

[HardeepAsrani]

Also, in GDPR settings there are text fields where the user defines the consent checkbox text in forms. However this can be done directly on the form block itself. The text is basic, and we can have it as default:

That is fine, we can have a Paragraph in Form for that. But what happens with the ChatBot that also collects emails?

Please note that in the new templates layout shows the button on thumbnail hover, so there will be no need for an import button or descriptive text below the area. But regardless of that, I believe there is no need to display that text, since every user will go through the wizard, and they should already have seen that.

I think it should still be there in case someone exit the Wizard and then finds Otter being installed a surprise. Always better to avoid such situations.

What do you think? @JohnPixle @arinaturcu

[arinaturcu]

@JohnPixle @HardeepAsrani Only the new users will have seen the wizard, so that text might be useful for the users that just update to the new version.

Since we will move that button from below the templates to the thumbnail hover, there will be no space left for the text, but maybe we can put it somewhere in the modal after the import, just to inform them that Otter is installed.

[HardeepAsrani]

@arinaturcu That won't work as we need to have their consent before we install any plugin else user might not be happy about it.

[irinelenache]

@arinaturcu Nice work 🚀 Did some testing and here are my findings:

• [x] The alignment on the social icons and advanced heading doesn't work on any template (on a single post it works fine). https://vertis.d.pr/zDZt60
• [x] For the third maintenance template, the contact form is not present after importing https://vertis.d.pr/UOBJNs
• [x] For the third coming soon page, after import there is a countdown block that's not visible in the preview card https://vertis.d.pr/jSqjNB
• [x] When i'm adding my email to the chatbot, nothing happens and i'm getting a console error https://vertis.d.pr/oBbXNL
• [x] There should be some spacing between the input box and the send button here https://vertis.d.pr/PWUsnn
• [x] The dashboard link setting isn't doing anything now https://vertis.d.pr/lL5ptK

Note: Testing is not complete on my end, i still have to check some more behaviours/contexts

[JohnPixle]

@HardeepAsrani @arinaturcu ok, in this case we can leave the text I suppose, and simply put it above the template thumbnails (and without the button ofc).

Let me know your thoughts

[HardeepAsrani]

Yea, wherever we put it is fine as long as it's visible to the user. Users are never happy about plugins being installed without their knowledge. 😄

[JohnPixle]

@arinaturcu I have finished with the updated forms in the templates, so you should feel free to use the updated code.

Only the templates with the forms have been affected. Links below.

Coming Soon - Modern Maintenance – Modern

A list of all 6 templates is listed here.

Please let me know if you need any clarifications or any help in general! John

[arinaturcu]

Thank you @JohnPixle 🚀

[mghenciu]

I've also tested the Build.

• [x] One thing I noticed, but may be related to the way I installed the plugins, is the Popup when closing the save settings modal.

Repro steps:

1. Create a fresh instance & install the live version WPM
2. Go to Plugins page and upload the build from here
3. On the WPM settings page, change some settings and Save them
4. After saving there should be a Confirmations toast. Close the Toast
5. Notice the Browser Popup

https://user-images.githubusercontent.com/52494172/185899013-ea1a40bb-bb1e-4f00-8d87-98555d8c7150.mov

---

• [x] This is how the Default page looks before & after the Migration. Can we keep the same CSS even after the Migration, on the Default page?

---

• [x] After installing & activating the plugin, shouldn't it initialise the Wizard? Right now, nothing happens after the WPM plugin is activated.

---

• [x] Maybe here we can make the max-width bigger then 480px for this container, something like 600px?

---

• [x] Can we have a Default Avatar image? I think the second one on the right would work the best

Make sure to also add the Cursor Mouse when hovering on the Chat bubble, @arinaturcu .

---

For the user flow where I import a New Template, and the old one is deleted, do you guys think this is the most common flow? @JohnPixle @HardeepAsrani I am thinking maybe marking the old one as Draft and Importing a new template without Deleting the old one, could also be a solution that doesn't remove things users may have.

---

Style inheritance

What I noticed here is that usually when viewing the Site in Incognito Mode, there look to be some Style differences for font families, between Incognito & the live site. I am not sure if this is some caching issue or else:

https://user-images.githubusercontent.com/52494172/185917223-de89ec0a-fad0-478e-9d60-fbf6f797659c.mov

---

Compatibility with other Themes

In terms of testing the compatibility with other themes, as the old plugin looks less prone to breaking (in terms of page styling), I think we should establish a list of 5-10 most popular themes, where we make sure the templates import work as expected. For the other themes, that are not so popular, we can maybe create a E2E (smoke) test.

[arinaturcu]

After installing & activating the plugin, shouldn't it initialise the Wizard? Right now, nothing happens after the WPM plugin is activated.

@mghenciu The wizard appears if the user didn't previously install the plugin. So after deleting and installing again the wizard won't appear, only when installing for the first time. If you think the flow should be different let me know.

Style inheritance

What I noticed here is that usually when viewing the Site in Incognito Mode, there look to be some Style differences for font families, between Incognito & the live site. I am not sure if this is some caching issue or else:

Thank you for spotting this! For some reason, the google fonts won't load when the user is logged out. I'm looking into it now.

[mghenciu]

@mghenciu The wizard appears if the user didn't previously install the plugin. So after deleting and installing again the wizard won't appear, only when installing for the first time. If you think the flow should be different let me know.

So in this case, I've created a fresh instance, used the build from above. Should've the Wizard init itself after the plugin is activated? or only when the users go to the Settings page for the first time?

https://user-images.githubusercontent.com/52494172/186127221-80d55b31-c205-49ea-bacd-8a40da68df10.mov

[arinaturcu]

Only when the user goes to the settings for the first time. We can make it appear after the plugin is activated if it would be better. What do you think @HardeepAsrani?

[HardeepAsrani]

@arinaturcu Yea, it should appear on the install. Normally, you can just redirect them to plugin screen open successful activation like this: https://github.com/Codeinwp/otter-blocks/blob/c19e498a670e65119a0b278b4fe8da661799a9a2/inc/plugins/class-dashboard.php#L29 - this the wizard will start.

We also make sure to not redirect them in cases where the plugin is being installed from other ways like WP-CLI or ajax.

[arinaturcu]

@irinelenache You can give it a run again 🚀

[irinelenache]

@arinaturcu The mentioned issues are fixed, thank you 🚀

Here are my other findings:

• [x] On an instance with Neve installed and Shop starter site imported (Maintenance mode active), after just updating to this PR, without making any change, the frontend of the website looked like this https://vertis.d.pr/9H1NXs
• [x] When i'm activating the chatbot, there is a white section at the end of the page https://vertis.d.pr/IV5518
• [x] The chat bot has a red dot that should indicate there is a new message (just my assumption), and that red dot is present even if the conversation has ended https://vertis.d.pr/l5Aumk . Also, i can't leave the chat by clicking somewhere on the page, i have to click on the chat circle again.
• [x] There are 2 errors in console when i'm in the Maintenance mode settings https://vertis.d.pr/ipWzSD
• [x] If i want to edit an existing template, there won't be any default colors for paragraph or blocks, i have to manually change it to black (this is a bit misguiding as i first thought that it's not working at all) https://vertis.d.pr/RJeqiW
• [x] When i want to import a template and click the Back button, the page is refreshed (i'm not sure this is intended) https://vertis.d.pr/h79D2G

Issues can be checked here:

 Admin area URL: https://anticipatebears.s2-tastewp.com/wp-admin 
 Username: irinel 
 Password: 6BVmynsSgzg 

⚠️ Note: The testing is still not complete, i mainly tested the migration and the rollback option of the plugin so everything will be for existing users

[JohnPixle]

Thanks for the input @irinelenache 🙌🏻

> If i want to edit an existing template, there won't be any default colors for paragraph or blocks, i have to manually change it to black

Great catch on this one, it's on me. This happened because there was a (forgotten) white text color applied to the elements of the group in which you added the text. So it was white on white. Confusing indeed. The issue was there for both "minimal" type of templates. I fixed that on both.

@arinaturcu Whenever you want, please feel free to update the two "minimal" templates, and use the updated content ffrom these pages:

Minimal Coming Soon Minimal Maintenance

Thank you both!

[arinaturcu]

Great 🚀 Thank you @JohnPixle!

[arinaturcu]

@irinelenache Thank you for finding these 🚀
They should be fixed now.

Also, I can't leave the chat by clicking somewhere on the page, I have to click on the chat circle again.

For this, I think it is expected to work like this, for example, on https://www.pluralsight.com/ it works the same way.

Let me know what you think and feel free to give it another run.

[irinelenache]

@arinaturcu The mentioned issues are fixed now, thank you 🚀

Here are my other findings:

• [x] There is a typo in the wizard and in the design tab. It should be customize instead of customise
• [x] I can't skip the wizard. If i click the exit button and try to access WPMM settings, the wizard will appear again https://vertis.d.pr/JDhaVh
• [x] After taking the steps in the wizard, the Maintenance mode will be activated by default, i think the user should do this action
• [x] If i'm selecting the Maintenance page in the first step of the wizard, i'll get the message "Your coming soon page is ready" and that's a bit confusing (the message should be written based on the page type that i selected) https://vertis.d.pr/q1260O
• [x] The sharing icons changed their alignment on all templates https://vertis.d.pr/1oiQ2m
• [x] If i have a template already imported and try to import another one, when i check the editor the Update button looks disabled and gives the impression that the changes should be visible in frontend. In frontend, the page is either blank or without styling. I have to make a small change in editor (like add a character) and hit the Update button in order to make the page work properly in frontend

Besides these, everything works fine on my end ✌️

[selul]

@irinelenache for 2 and 3 this is intended; nothing to fix here. you can review the discussion here.

[arinaturcu]

The sharing icons changed their alignment on all templates https://vertis.d.pr/1oiQ2m

@irinelenache This happens only on FSE themes, like Twenty twenty-two, right?

[irinelenache]

@arinaturcu Yes, i was using Twenty twenty-two. I checked and it works fine with Neve

[arinaturcu]

@irinelenache The issues should be fixed now.

• [x] If i have a template already imported and try to import another one, when i check the editor the Update button looks disabled and gives the impression that the changes should be visible in frontend. In frontend, the page is either blank or without styling. I have to make a small change in editor (like add a character) and hit the Update button in order to make the page work properly in frontend

Now all templates are automatically updated right after importing so there should be no need to press the Update button.

Let me know if you find anything else 🚀

[irinelenache]

@arinaturcu The mentioned issues are fixed now, thank you 🚀

Found a single problem:

• [x] When i disable the maintenance mode, i'm getting a fatal error and after i refresh the page everything works fine https://vertis.d.pr/P96z5F

You can check it here:

https://wpmm.us4.instawp.xyz/wp-admin
Username: wpmm
Password: hE9FxYii

[arinaturcu]

Thank you @irinelenache! It should be fixed now 🚀

[HardeepAsrani]

@arinaturcu @irinelenache Is it ready for a release then?

Will be nice @arinaturcu if you can just do a quick test to make sure that nothing breaks if one is using this plugin on, let's say WordPress 4.9 or 5.4. The features won't work but just want to make sure it is still compatible with older versions of WordPress.

And if I have a heads up from both of you then we can maybe release. What do you think @selul

[arinaturcu]

@HardeepAsrani The above issue is not fixed yet, Irinel pointed that to me on slack and I am working on it. Then I'll do some tests like you said to make sure thinks don't break.

[arinaturcu]

It's fixed now, I will check the plugin with older versions of WP.

[arinaturcu]

@HardeepAsrani I found only one small thing: when selecting a page as maintenance page, the template was not set automatically on older versions. It's fixed now.

Besides this, everything seems to be working fine.

[HardeepAsrani]

Awesome @arinaturcu, thanks.

[pirate-bot]

:tada: This PR is included in version 2.5.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: