Add a UI for a public version of the plugin about gutenberg-ramp HOT 9 CLOSED

I think that switching to and from Gutenberg should take only 1 click. Checkboxes/Toggles are for settings that don't have an immediate effect. So for example "Allow Comments".

I think we can use inspiration from other page builders here.

Beaver Builder

I'm not a real fan of the tabs because clicking it actually takes you somewhere radically different than what you were seeing before. Tabs are supposed to be just that - tabs, like in the browser where you can seamlessly switch back & forth. So I'm not sure I like that as a solution for Ramp as well.

Elementor

They're using a bolder approach here. Elementor wants you to use Elementor instead of the TinyMCE editor, so I assume that's the reason they've chosen to make the button to be big and in your face.
I'm not entirely sure how I feel about a big in-your-face button, but I think that it should probably be something similar to this. Maybe a little more subtle?

from gutenberg-ramp.

So here are a few of my attempts:

1) Directly inspired by Elementor

2) A little more subtle. Maybe a bit too subtle.

3) Inspired by Beaver Builder. It doesn't look good at all imho.

4) A little bit better, but I still don't particularly like the tabs idea.

5) A little more WordPress like - keep it in the sidebar area:

I like the last approach best. I think it kind of looks like it belongs there. On top of that - if the toggle button is placed in the sidebar, a button to go back to the "Classic Editor" could also be placed somewhere in approximately the same place when in "Gutenberg mode". I think it would be good for consistency. When you switch to Gutenberg - you won't have to hunt for a button to switch back - you already know that the button was in the sidebar.

from gutenberg-ramp.

But it's not switching to Gutenberg temporarily. It's super important that we do NOT encourage switching back and forth. That's gonna break stuff.

It's a (fairly) permanent setting for administrators to configure, similar to how they might set up discussion or sharing options via Settings

from gutenberg-ramp.

That didn't occur to me.
My logic was that when you get a new button on the dashboard - you might want to click it to see what it does. That means that you might also want to go back because the new thing you're seeing (Gutenberg) is something you don't want right now and you just want to go back.

Maybe we want to do a pop-up confirmation that shows up when you click "Turn on" that says something like:

Are you sure?
Be careful. Turning Gutenberg on might have an impact on your existing post layout.
[  OK  ]  |   [ Cancel ]

So - let's not encourage back-&-forth, but I think that an action should still be triggered by a button, not a checkbox.

from gutenberg-ramp.

A button for an action is sound logic so let's go with that. Option 5 appeals to me most as it's the most consistent with core UI components. Let's lock that in. For consistency, let's use "Enable Gutenberg" for the title, "Enable" for the button text, and let's make the explanatory text crystal clear:

This overrides global configuration in Settings > Writing for this post.

Wording should be equivalent in the reverse version, when the post is set to use Gutenberg. In that case the text must read "Disable Gutenberg" etc.

Notification would be good. I think we can be even more explicit in the warning:

Switching between editors can affect layout. Please use this sparingly. [ Cancel | Proceed ]

from gutenberg-ramp.

This overrides global configuration in Settings > Writing for this post.

Perfect.

Switching between editors can affect layout. Please use this sparingly. [ Cancel | Proceed ]

Maybe

Switching between editors can affect current post layout. Please use this sparingly. [ Cancel | Proceed ]

Just to drive home that no other posts will be affected?

As for the notification - I'm not sure I've seen if there are any "native" WordPress ok/cancel notifications. Any idea how we'd want that to look?

from gutenberg-ramp.

As for the notification - I'm not sure I've seen if there are any "native" WordPress ok/cancel notifications. Any idea how we'd want that to look?

Good point. What do you think about adding the warning as part of the explanatory text? So it becomes:

This overrides global configuration in Settings > Writing for this post. Switching between editors can affect layout so please use sparingly.

As the warning comes right after the specification of 'this post' it is clear we are referring to the affect on this specific post, yes? And we no longer have to add a separate notification. Much easier :-)

from gutenberg-ramp.

@justnorris Adding a note here before I forget... We need a hook to disable the UI on the VIP version of the plugin.

from gutenberg-ramp.

Updated Global UI mockup (changed text) below.

Also recording here that upon discussion, we've decided to start with just the Global settings for public release milestone. We'll come back to the post override as time permits.

from gutenberg-ramp.