Inline Commenting: Added new sidebar as extension of the canvas #67347
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
akasunil
added
the
Collaborative Workflows
|
Size Change: +233 B (+0.01%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in f1d7e1c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12049742545
|
ellatrix
reviewed
Nov 28, 2024
| const iframeBody = iframeDocument?.body; | ||
| if ( iframeBody ) { | ||
| const style = window.getComputedStyle( iframeBody ); | ||
| return style?.backgroundColor; |
There was a problem hiding this comment.
It would be nice if we can just get the colour from global styles, but I guess this is fine for now.
There was a problem hiding this comment.
I’ve updated the implementation to pull the color directly from the global styles., and also kept this function for fallback background color.
There was a problem hiding this comment.
Let's remove it for now, and reduce complexity. There's also cases where the editor doesn't have an iframe, so this code is too fragile atm.
There was a problem hiding this comment.
Got it, I'll remove the fallback function for now. However, we might still encounter cases where global styles aren't supported, should we consider that later?
…e-commenting-canvas-sidebar
…e-commenting-canvas-sidebar
Thanks for the feedback! Should be fine now, Edit-Post-.Hello-World-.-.-gutenberg-.-WordPress.2.webm |
ellatrix
approved these changes
Nov 29, 2024
ellatrix
reviewed
Nov 29, 2024
| enableComplementaryArea( 'core', 'edit-post/collab-sidebar' ); | ||
| unsubscribe(); | ||
| } | ||
| } ); |
There was a problem hiding this comment.
We could probably create an option for PluginSidebar to use the sidebar as a fallback sidebar that is always open instead of this, but it's fine as a temporary solution.
ellatrix
reviewed
Nov 29, 2024
| const backgroundColor = GlobalStyles?.styles?.color?.background; | ||
|
|
||
| if ( 0 < resultComments.length ) { | ||
| const unsubscribe = subscribe( () => { |
There was a problem hiding this comment.
Can you change this to an effect? We shouldn't subscribe on render.
There was a problem hiding this comment.
useEffect won't work in this case, as the component doesn't re-render when another sidebar is toggled from outside the editor.
Mamaduka
reviewed
Dec 4, 2024
Comment on lines
+247
to
+263
| const { threads } = useSelect( ( select ) => { | ||
| const { getCurrentPostId } = select( editorStore ); | ||
| const _postId = getCurrentPostId(); | ||
| const data = !! _postId | ||
| ? select( coreStore ).getEntityRecords( 'root', 'comment', { | ||
| post: _postId, | ||
| type: 'block_comment', | ||
| status: 'any', | ||
| per_page: 100, | ||
| } ) | ||
| : null; | ||
|
|
||
| return { | ||
| postId: _postId, | ||
| threads: data, | ||
| }; | ||
| }, [] ); |
There was a problem hiding this comment.
Moving the selector in the parent component re-introduces the performance issue fixed in #66670. We should be careful and avoid introducing similar regressions in the future.
P.S. I'm working on a fix and will create a PR shortly.
There was a problem hiding this comment.
Sorry, I didn't notice this. We now have two sidebars with separate comment orders, thus I had to transfer selector to the parent component.
im3dabasia
pushed a commit
to im3dabasia/gutenberg
that referenced
this pull request
Dec 4, 2024
…Press#67347) Co-authored-by: akasunil <[email protected]> Co-authored-by: ellatrix <[email protected]>
michalczaplinski
pushed a commit
that referenced
this pull request
Dec 5, 2024
Co-authored-by: akasunil <[email protected]> Co-authored-by: ellatrix <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of - #66377
What? & Why?
To align with the new designs, one sidebar should be colored to provide a seamless extension of the canvas. This "sidebar" should appear anytime no other sidebars are active, such as the inspector, global styles, second comment sidebar, and so on.
How?
This PR adds a new sidebar that resembles an extension of canvas, with the same background color applied to it. This sidebar will open when you click the comment icon in the block toolbar.
Comment's order and locations relative to blocks will be addressed in separate PR.
Testing Instructions
Gutenberg->ExperimentsScreenshots or screencast
Edit-Post-.Hello-world-.-.-gutenberg-.-WordPress.1.webm