Add collaboration mode picker for view and edit modes #108
Conversation
Adds a new collaboration mode picker component in the editor toolbar that lets users switch between View mode and Edit mode. Currently its just an UI without any functionality.
|
|
||
| import '@/components/collaboration-mode/collaboration-mode-picker.scss'; | ||
|
|
||
| type CollaborationModeType = 'view' | 'edit'; |
There was a problem hiding this comment.
This'd be better in the settings store imo. It can be set to edit by default, and hidden outside of development mode.
We should ideally have an enum that's exported, and re-usable outside this component. We are going to be implementing the functionality and it'd be nice to prep for that too.
There was a problem hiding this comment.
https://github.com/Automattic/vip-real-time-collaboration/compare/add/view-only-mode?expand=1
Got a version of this for the view only mode that I'm working on. It's a toggle for just the view only mode but ideally it should be a "enable elected modes" which in turn reveals that modal.
|
|
||
| return ( | ||
| <> | ||
| <CollaborationMode> |
There was a problem hiding this comment.
This should be feature flagged btw. It's not in use right now as we are still developing it.
ingeniumed
left a comment
There was a problem hiding this comment.
Should really use another slotfill that we have added to Gutenberg? I think there's some merit to the feedback that was mentioned in the Gutenberg PR. I know the designs suggest putting it in that location, but I wonder if it's better to instead have it in one of two places:
-
Next to the publish/save button if it's really needed in the top document bar. There's some work in the workflow plugin that'd be useful to check out here on how to do this.
-
Within the post info, where the details of the post are present. We could add a mode dropdown there so you could select what mode you are in.
I honestly like #2 more, as we would take advantage of the Post info and it relates to how the "post" is being worked on imo.
Prob need some feedback from @jarekmorawski.
Hide the collaboration mode picker behind a development-only setting since the functionality is not yet complete.
Wrapped all UI strings in the collaboration mode picker and settings panel with the __() function to support translations.
|
I was thinking if toggling off the mode selection should reset the mode to the default value - |
Yip, the toggle is temporary during the development of the elected modes feature. Once we finish development, we'll remove the toggle and allow the model to always be visible with a default value set to Edit. Then, as part of enforced modes we can tweak what the default model values should be. |
| case 'SET_MODE': { | ||
| return { | ||
| ...state, | ||
| currentMode: action.payload.mode, |
There was a problem hiding this comment.
Noting this for a follow up PR: We should save this mode into local storage like the settings are saved right now and read from there as well. That way on refresh it's not lost.
There was a problem hiding this comment.
I didn't persist this in localStorage intentionally as that would lead to that getting persisted for other posts even those open in other tabs. Using sessionStorage might be better as thats limited to the current tab, would still apply to another post opened in same tab. If we do want to persist on refresh, might to strike a balance here. Top of mind we could persist something like Record< postId, mode > in sessionStorage and check by postId.
There was a problem hiding this comment.
I figured, whether we use local or session storage the key would be used to differentiate that.
One other important part is that, we would want to eventually persist these on user meta possible so a user can carry this from one browser session to the other.
|
Noting that in #110, there's a bunch of cleanup I'm doing to this PR. |
Description
Adds a new collaboration mode picker component in the editor toolbar that lets users switch between View mode and Edit mode.
Currently its just an UI without any functionality.
Depends on gutenberg PR - WordPress/gutenberg#73196
Screenshots
Screen Recording
ElectedModesUI_v1.mp4