OtterTools Controls Improvement #1350
Conversation
E2E SummaryTyping
Values above 60ms"0 - 113.56, 1 - 112.50, 2 - 117.41, 3 - 120.06, 4 - 110.39, 5 - 131.12, 6 - 109.59, 7 - 115.57, 8 - 119.65, 9 - 116.10, 10 - 124.09, 11 - 128.24, 12 - 119.99, 13 - 115.72, 14 - 135.04, 15 - 121.50, 16 - 114.42, 17 - 112.75, 18 - 114.21, 19 - 128.44, 20 - 114.26, 21 - 120.38, 22 - 115.85, 23 - 117.48, 24 - 115.30, 25 - 114.35, 26 - 127.58, 27 - 125.00, 28 - 151.30, 29 - 141.19, 30 - 110.36, 31 - 137.26, 32 - 150.40, 33 - 113.30, 34 - 118.73, 35 - 135.20, 36 - 124.56, 37 - 115.76, 38 - 116.29, 39 - 120.80, 40 - 127.21, 41 - 125.72, 42 - 116.45, 43 - 128.69, 44 - 117.06, 45 - 117.22, 46 - 112.44, 47 - 114.66, 48 - 126.71, 49 - 118.06, 50 - 116.56, 51 - 115.11, 52 - 121.03, 53 - 114.25, 54 - 115.97, 55 - 113.60, 56 - 118.16, 57 - 117.38, 58 - 114.73, 59 - 122.41, 60 - 114.67, 61 - 111.81, 62 - 114.28, 63 - 478.16, 64 - 140.70, 65 - 137.72, 66 - 151.00, 67 - 134.96, 68 - 139.28, 69 - 417.77, 70 - 124.42, 71 - 113.97, 72 - 116.01, 73 - 121.09, 74 - 117.29, 75 - 124.64, 76 - 112.78, 77 - 115.28, 78 - 118.12, 79 - 121.05, 80 - 155.34, 81 - 122.09, 82 - 120.74, 83 - 114.87, 84 - 118.87, 85 - 117.43, 86 - 115.73" |
|
@mghenciu @JohnPixle @ineagu Do you think this can be a good idea? To not show Otter icon but this tools icon in every block (including Otter) and have the "Powered by Otter" thing in the Popover instead of Feedback link. |
|
I am not 100% sure about this tbh. The tool icon looks generic and can be considered as part of the core. I am not sure it is a good idea as I would personally prefer to have a clear idea on the otter-specific functionality. Although the tool icon looks good and blends well in the UI, I think it might cause more confusion. I understand that the "powered by Otter text will help somehow. Open to hear what others have to say. Thanks for the update! |
|
I am not sure if this helps, what I think we can do and be enough si the 1 & 2 below :
a) The "Help us improve" is out of place there in the dropdown menu, the user is working, let's not bother them. |
|
I agree with the suggestions from Ionut, and I think the overall idea would be to analyse how often those options would actually be used (and based on that decide if it's worth a section in the Toolbar or not). Based on this assumptions:
Alternatively, we can remove the Icon from the Toolbar, and move the Otter Settings under the options button, but have it in a separate Otter Settings, like this: |
Can you check if we can possibly do this? @Soare-Robert-Daniel |
|
definitively, we would want to see how and if people are using those things. |
|
After some prototyping, here are some observations
Extending the Options has basic functionality without many customization options or how to make a better grouping. The only component that we can use is this one https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md The component has an option for location, but it is unusable.
The separate Otter icon might look a little intrusive, but still has fewer downsides and more flexibility. @mghenciu at the beginning, I tried with @HardeepAsrani to find some free keys combination and failed to find them. Most easy key combinations are bound to browsers. I think we try to find a more odd combination but not sure if it will be accessible on usage (like Opt/Alt + Shift + B). |
|
Why not use the same keys elementor is using? Users migrating from it would know them already?Sent from my iPhoneOn Dec 5, 2022, at 11:31, Soare Robert Daniel ***@***.***> wrote:
After some prototyping, here are some observations
We can have an Otter Menu in the Options (three dots), but we don't have a working option to control the location for a good separation (result below). When trying to make the feel of group section, I added some little hacks. The result still doesn't look too good, but we don't too many tools.
The options are starting to get big. Almost the size of the page in a 16-inch mac display. I was thinking about adding a dropdown for the menu (to be a two clicks action) to save space.
Extending the Options has basic functionality without many customization options or how to make a better grouping.
The only component that we can use is this one https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md
The component has an option for location, but it is unusable.
The separate Otter icon might look a little intrusive, but still has fewer downsides and more flexibility.
@mghenciu at the beginning, I tried with @HardeepAsrani to find some free keys combination and failed to find them. Most easy key combinations are bound to browsers. I think we try to find a more odd combination but not sure if it will be accessible on usage (like Opt/Alt + Shift + B).
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>
|
We do not have the luxury of Elementor. Copy Style a separate feature for us and not integrated like in full-editors like Elementor or Stackable. For pasting style, the This observation is based on using Gutenberg's API for shortcuts (which I tested at the beginning). We can force the override in some hacky way but not sure if we break some workflow (or other plugins). Elementor might enforce that binding for them in their own editor, but in Gutenberg, we have to play nice with others. I can implement a prototype to see how it works and make a better opinion. |
|
Those combinations seams to work on Apple. The reliability is not great, you need multiple tries for it to trigger. |
|
On Firefox, |
|
To be fair this looks even worse: #1350 (comment) - the list is too big and more intrusive. I suggest we stop here and only take action when we have something specific in mind instead of a knee-jerk reaction. Thank you @Soare-Robert-Daniel for helping with the quick prototype to see how things will feel. |
|
Things done:
In questions:
Observations:
|
|
I think we can keep this as it was before, I would just remove removing the feedback button and add the shortcuts. |
Need a test machine for it. BrowserStack seams to not do the job
Bundle Size Diff
|
|
Plugin build for bd9bd6f is ready 🛎️!
|
|
This will be kept as a discussion thread. The currently approved changes are #1378 |
|
Closing this in favor of #1403 |
|
🎉 This issue has been resolved in version 2.2.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
pirate-bot
added
the
released
Closes #1333.
Summary
Improvements:
Screenshots
On Core and Otter blocks, the Otter icon will be displayed. For third-party, another one will be used:
Test instructions
Please make sure that the shortcuts are displayed and that they work.
⚠️ For Windows, you will need a machine for it. Browserstack does not seem to work well.
Checklist before the final review