Sidebar UI

[HardeepAsrani]

Closes #1333, #1347, #1358.

Summary

https://www.loom.com/share/e8918257337e4d6998241187d4906810

This PR introduced a Block Tools Panel that can be used to add:

• Blocks CSS
• Blocks Animation
• Block Conditions
• Sticky Extension

Apart from this, it removes the Otter icon in the Toolbar and instead puts the Export & Copy/Paste back into the more menu, given that Copy/Paste can be easily used with Keyboard shortcuts now.

It also moves the controls for Typing/Counting animations straight to the selected input instead of the sidebar.

In addition, we also bump minimum WP version to 5.9.

Screenshots

---

Test instructions

• Make sure everything works as expected in FSE, Widgets & such. If some feature wasn't available in Widgets before this PR then it'll probably not be available after this either.

---

Checklist before the final review

• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.

[pirate-bot]

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	54.1	8.41	50.01	72.73 (60ms)	100 (80ms)

Values above 60ms

"6 - 73.44, 7 - 68.15, 10 - 68.16, 17 - 64.02, 19 - 67.16, 20 - 61.70, 21 - 64.20, 23 - 64.88, 24 - 66.86, 25 - 75.45, 26 - 62.75, 28 - 69.32, 29 - 66.21, 30 - 60.27, 31 - 70.89, 70 - 63.92, 71 - 62.89, 74 - 61.49, 75 - 60.66, 77 - 62.12, 78 - 60.92, 80 - 60.50, 82 - 60.66, 90 - 64.06, 91 - 62.35, 94 - 61.71, 97 - 71.14"

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	191.24 KB	192.89 KB	1.64 KB (0.86%)
Blocks	1.29 MB	1.28 MB	-1.53 KB (-0.12%)
CSS	6.65 KB	7.26 KB	628 B (9.22%)
Dashboard	44.89 KB	44.89 KB	0 B (0.00%)
Export Import	5.06 KB	4.74 KB	-337 B (-6.50%)
Pro	105.4 KB	105.4 KB	0 B (0.00%)

[github-actions]

Plugin build for addc059 is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[mghenciu]

Did some testing and this are my findings:

• initially I was concern that going back with Ctrl + Z won't work, but fortunately it does, and that's good. For example if I add an Animation for a block, remove it and then Redo the changes using Ctrl + Z.

• what are your thoughts on the Block Tools panel Familiarity/knowledge for the Users?
  Meaning that at this point it's not clear that the Block Tools panel comes from Otter, so this may cause some confusion.
  What I am thinking is may we can add a small visual hint, showing that those options are from Otter, either adding it the the Panel name or like this:
  

• from what I know, when adding Custom CSS, behind the scene we are adding a new custom class in the ADDITIONAL CSS CLASS(ES) field. But a small issue I noticed is when duplicating a Block that already has those classes, which will also be present on the clone (attached video). So my question is if we can clean those, in case the user clicked Reset All?

Screen.Recording.2023-01-05.at.14.08.26.mov

---

And 2 things just to get a better understanding on how this works.

Adding an Empty setting

I noticed that if I add one of those option to a Block, but leave it empty, the option will be cleared when I come back to that block (the empty added option is not there anymore). But I guess this is expected, and shouldn't have any disadvantage for the users:

Screen.Recording.2023-01-05.at.13.36.18.mov

Otter Dashboard options

I was also thinking how would this change the current setting we have in the Otter Dashboard, regarding Modules.
One thing we can do is have a Global Control that will enable Block Tools globally, but I guess we can revisit this later and see it goes with the current approach, as we also have there the sticky option.

Other than this, I think it's ready for QA 🚀

[HardeepAsrani]

What I am thinking is may we can add a small visual hint, showing that those options are from Otter, either adding it the the Panel name or like this:

I don't see an option to really add that there, so we can't do it, unfortunately. But that's fine, I actually wanted to make it look generic for users who don't want to use the feature. But when you add something, you get the powered by Otter notice.

from what I know, when adding Custom CSS, behind the scene we are adding a new custom class in the ADDITIONAL CSS CLASS(ES) field. But a small issue I noticed is when duplicating a Block that already has those classes, which will also be present on the clone (attached video). So my question is if we can clean those, in case the user clicked Reset All?

It's a weird thing that happens, for CSS we just leave the class in case the person is using it somewhere else too. But animations, I'll take a look to confirm see if we can get rid of the extra class but for now, it's not a problem as without the animated class, those class won't do anything.

I noticed that if I add one of those option to a Block, but leave it empty, the option will be cleared when I come back to that block (the empty added option is not there anymore). But I guess this is expected, and shouldn't have any disadvantage for the users:

Yea, it's expected.

I'll put this for QA, thanks for the review!

[irinelenache]

@HardeepAsrani Tested the PR and everything's fine on my end 🚀

[pirate-bot]

🎉 This PR is included in version 2.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀