editor sidebar & settings.

[ineagu]

Description:

Right now we add accordion items for custom CSS, display rules & animations. Things like animations & display rules can look smoother if we transform them into icons and settings open as popups. e.g https://vertis.d.pr/i/vTb3yu

Alternatives:

do nothing

@HardeepAsrani this is one of the points I've mentioned in the video and I saw an interesting solution that doesn't involve us disabling this setting by default.

[HardeepAsrani]

While I agree that we can do better management of space, this type of UI is pretty weird and most Block Editor users won't be familiar to them. Also, Animations & CSS are widely used features by the users.

Maybe we can, apart from allowing users to enable/disable them using Onboarding, can come up with more friendly UI.

Initial idea from me is that we can do something like this Dimension control where we only have "Extensions," which allows users to add them if needed. But that's just the initial idea maybe @mghenciu @JohnPixle can think of something better.

[mghenciu]

I think the main pain point here (and this is since we introduced those 3 adv. options) is the positioning of the Panels, also mentioned by Ionut. By this I mean, they show up all the time, on any Panel and block, even if those are seen as advanced settings and can be in a more Advanced side of the UI.
The other thing here is how those are loaded, which is also usually quite messy (at the beginning, in between, at end)

---

Your suggestions sounds like a good plan, but definitely we need to keep in mind the previous instances where users already use those options.

Two things we can do now:

• add the Option for users to enable those Advanced Settings to be seen only in Otter blocks, in all blocks (including 3rd party), disabled for all blocks. By default those options will be enabled only in Otter Blocks. This way we'll avoid messing the other Block Libraries setting panels (one example is Stackable were Otter settings is making quite a mess)
• if we use your suggestion, I would still stick to Panels. By this I mean that if a User click the plus icons and adds Custom CSS, that will add a new Panel, not just the Custom CSS settings inside the dimensions. And those Settings can working something like this, we just need to test more if there is enough space in a modal.

[HardeepAsrani]

if we use your suggestion, I would still stick to Panels. By this I mean that if a User click the plus icons and adds Custom CSS, that will add a new Panel, not just the Custom CSS settings inside the dimensions. And those Settings can working something WordPress/gutenberg#39427, we just need to test more if there is enough space in a modal.

I like this. But I'm not 100% sure if we will add more Panels when user clicks on + icon or just append color-control like option which have thing inside the Popover?

[ineagu]

@HardeepAsrani while not a popular UI choice, I find the icon for some of those settings pretty popular across the web and most of users should have some idea of what that is about, but we can skip it.

Even easier choice, why don't leverage the already existing Advanced Tab from the core? Custom CSS & animations should be natural choices to be there since there is already html class setting.

Even visibility conditions can work there.

I am not too worried that users won't find them, we can show the location in onboarding and I personally always tend to check what the advanced settings are, since there is a generic name and want to see how they can help me.

[mghenciu]

Even if we add them inside the Advanced Panel, I think there's need for a visual hint to show that those options come from Otter.

[ineagu]

Even if we add them inside the Advanced Panel, I think there's need for a visual hint to show that those options come from Otter.

Agree, this is a separate thing that we can discuss @mghenciu in a separate thread. I think the current "powered by Otter" is not the best approach, I like this approach from Cwicly on blocks: https://vertis.d.pr/i/m5xEHa, where they have a small signature icon, so ideally we want a very subtle, but visible way for people to know that a block, a pattern, a toolbar setting or panel is coming from Otter.

[mghenciu]

Make sense, Ionut,

just to add an example from Qubely, where they also add things in the Advanced Panel; that's why I think we need to think it through how to add Otter options (if) under Advanced Settings:

[ineagu]

sure, but just moving the things from the panels to advanced, as they are now, along with powered by otter, should not create any new issues on top of the ones that exist already (if we can do it).

That's why I think is good to discuss the differentiation aspect independently. If you have a specific idea for this how it can be implemented would be great. My focus for now is to make sure there is nothing that is making people to deactivate Otter, so I am looking at all the small potential annoyances I can see :D

[JohnPixle]

I am not too worried that users won't find them, we can show the location in onboarding and I personally always tend to check what the advanced settings are, since there is a generic name and want to see how they can help me.

That's some good perspective here, thanks.

I'would personally agree to put controls under the advanced tab, without any icons at the primary panels. The "powered by otter" will be enough, with proper grouping of the UI. Also 👇🏻

so ideally we want a very subtle, but visible way for people to know that a block, a pattern, a toolbar setting or panel is coming from Otter.

Yeah, this is challenging "by default", from the scope of being too invasive. It has to merge in the native UI, and with much less detail than the current otter icon.

Just as an abstract idea, color can also be an option, if we attempted a good balance, what would you say?
How it would look in our case, where I roughly added it in the advanced tab.

On a second thought, might turn out to be an overstretched idea, I don't know how you feel about it.
It's kind hard to achieve the proper gravity for the color, and I don't know how can this applied in the toolbar or the other cases.

[HardeepAsrani]

@JohnPixle I'd say to not use the color but to have the option to enable these inside Advance and then showing the Panel in the Block that has it activated.

[ineagu]

I am not sure how it would work @HardeepAsrani , I would be concerned if this increase the nr of clicks required to do an action ( which ideally should not )

For me, the idea of accent color for our settings, can't hurt. It gives the subtle feeling that those are not core. But also. think we should not worry too much, core should come up I think with some guidelines around this, I bet they won't like a plugin to add some illegal crap and can be perceived as WP core

[ineagu]

I mean we can take action on the "coming from Otter" thing, but don't really aim for a perfect solution yet.

[ineagu]

going back to the initial discussion, @HardeepAsrani can we maybe for now, just move Animations & Custom CSS settings in the advanced tab? without any enhancements, just visible that they are from Otter?

Until we figure out better ways, to de-clutter a bit the sidebar.

[JohnPixle]

Just referencing Mihai's mockups on this as shared in Slack.

[HardeepAsrani]

Here's the solution we came up with: https://www.loom.com/share/e8918257337e4d6998241187d4906810

[ineagu]

It looks good, I think having a small popup first time a user sees the panel showing is coming from otter and explaining the tool would help address some of our concerns.I am not thinking something that open generically in the middle of the screen, but more specific for that section, potentially appear as a small thing at first which expand on click or something .Sent from my iPhoneOn Dec 26, 2022, at 20:00, Hardeep Asrani ***@***.***> wrote: Here's the solution we came up with: https://www.loom.com/share/e8918257337e4d6998241187d4906810 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[ineagu]

Not sure if naming the section “ Block Tools by Otter” would also helpSent from my iPhoneOn Dec 26, 2022, at 20:00, Hardeep Asrani ***@***.***> wrote: Here's the solution we came up with: https://www.loom.com/share/e8918257337e4d6998241187d4906810 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[HardeepAsrani]

@ineagu We show a Popup to users when they install Otter for the first time, so we can add info about it there.

[HardeepAsrani]

@ineagu I've kept it like this on purpose so people feel it's part of the Core and they see an Otter Logo when they add anything there.

[ineagu]

I am not sure if that would help but we can discuss more specific.Sent from my iPhoneOn Dec 26, 2022, at 20:21, Hardeep Asrani ***@***.***> wrote: @ineagu We show a Popup to users when they install Otter for the first time, so we can add info about it there. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>