-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Inline comment experimental flag #60622
base: trunk
Are you sure you want to change the base?
Changes from 177 commits
200bd36
08d520f
4cddd7b
4fce70c
ead6f64
5225f4d
89930f1
48ddd17
694c2ea
5be0043
682a21b
f4d866e
768d87d
d82ecc2
0cea02c
871c745
82a01f4
db64f73
94c9d67
ecd5c98
6d3eb6d
6132e5e
b9e182a
618254a
10c9ed0
271895a
f2b7114
5e0890c
031e8d5
6b0c3b3
d2d6215
cbee86f
b36c2ab
b7b1ba4
6c0862d
77ee009
a8ea60e
ec302ff
f002607
fdc44a3
bb2c0bd
e6ac0b4
9447911
bf84cc4
57ed39a
b9668fd
6628689
1d81922
87fe4f9
139135d
20f2bd3
2df0bdb
515a592
08fd837
251ae5f
e747430
b7a5bd7
16d2186
877f090
1ce0191
1a677d8
d67d2b1
e0cb8b5
9004004
d23a0a6
cf605d5
f115c3b
f748ad9
59e96c4
18e5081
c9f4964
1ed6d54
84733c5
2d5d162
e68cdcc
8042e22
ceb188c
575361c
8c45982
a2345e8
2004c04
8ac8328
868c095
ab73559
d5df8cc
533c5d4
c0a5dcd
56e475b
9de8c69
4104869
b8b0292
6996e5f
0321430
3bf3c4c
c66fbcd
751d727
9a42d64
68d5e1c
1f5a2c2
6477102
66832a7
5c70d90
cc28c6a
951d8b4
b0ad9d5
a5e12e1
cf59158
6cfdb29
465b438
c9d50d8
fd6f327
15c85e0
c7be827
bd1a7ce
19dfab8
48ee928
8fa3f85
5f0ae80
69d1878
d6e01f3
668671b
ee6fe75
de2cd8f
8e6da19
90ba459
e2fd75a
aad19d0
6f03c48
2b057cc
59caf1c
efa41ac
4ee210d
38bea58
609cad6
8a54986
2fd78b0
f236a42
b3c879d
bc308e9
11cf1f1
22c189a
33cd398
211944c
a4abbec
5c99dcc
50e8101
ce7f7bc
b0c5960
f768b4a
92870c4
37fa922
4d6841a
71f7a39
6f73a0b
edab788
6e528a1
b129367
8d17f22
fd4c045
4d3eeb1
f06340a
6b8027a
06c8526
e1d4396
c78f981
da72b79
d7bca6e
68d203e
b296d2d
bddceeb
c5094a0
a23241a
9548565
06e840f
3883a11
334daf2
b028876
cd63f6a
9b12661
f287eff
16ebd4c
7aa5508
e55109f
f66d825
7ff9a79
d01c693
2caf2d1
6bda66d
64b1b31
31ea3b5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -163,6 +163,18 @@ function gutenberg_initialize_experiments_settings() { | |
) | ||
); | ||
|
||
add_settings_field( | ||
'gutenberg-block-comment', | ||
__( 'Block Comments', 'gutenberg' ), | ||
'gutenberg_display_experiment_field', | ||
'gutenberg-experiments', | ||
'gutenberg_experiments_section', | ||
array( | ||
'label' => __( 'Enable multi-user commenting on blocks', 'gutenberg' ), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should say something about being internal or for collaborators. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We’ve made this update based on the feedback provided here: #60622 (comment). There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm happy to defer to Matías if he has suggestions. Perhaps: "Enable collaborative commenting on blocks."? |
||
'id' => 'gutenberg-block-comment', | ||
) | ||
); | ||
|
||
add_settings_field( | ||
'gutenberg-media-processing', | ||
__( 'Client-side media processing', 'gutenberg' ), | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { _x } from '@wordpress/i18n'; | ||
import { MenuItem } from '@wordpress/components'; | ||
import { collabComment } from '@wordpress/icons'; | ||
import { useSelect, useDispatch } from '@wordpress/data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { store as blockEditorStore } from '../../store'; | ||
|
||
export default function BlockCommentMenuItem( { onClose } ) { | ||
// eslint-disable-next-line @wordpress/data-no-store-string-literals | ||
const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This looks concerning beyond using a string literal for the store name. The block-editor package is expected to be WordPress-agnostic, so accessing the edit post store doesn't make sense. This likely hints that this component should live in another package, closer to the post editor. This applies to multiple instances in that PR that attempt to use the edit post store in the block editor package. |
||
|
||
const { updateBlockAttributes } = useDispatch( blockEditorStore ); | ||
|
||
const clientId = useSelect( ( select ) => { | ||
const { getSelectedBlockClientId } = select( blockEditorStore ); | ||
return getSelectedBlockClientId(); | ||
}, [] ); | ||
|
||
const openCollabBoard = () => { | ||
onClose(); | ||
updateBlockAttributes( clientId, { | ||
showCommentBoard: true, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This sort of state should not live in block attributes. |
||
} ); | ||
openGeneralSidebar( 'edit-post/collab-sidebar' ); | ||
}; | ||
|
||
return ( | ||
<MenuItem | ||
icon={ collabComment } | ||
onClick={ openCollabBoard } | ||
aria-haspopup="dialog" | ||
> | ||
{ _x( 'Comment', 'Add comment button' ) } | ||
</MenuItem> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { _x } from '@wordpress/i18n'; | ||
import { ToolbarButton } from '@wordpress/components'; | ||
import { collabComment } from '@wordpress/icons'; | ||
import { useSelect, useDispatch } from '@wordpress/data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { store as blockEditorStore } from '../../store'; | ||
|
||
export default function BlockCommentToolbar() { | ||
// eslint-disable-next-line @wordpress/data-no-store-string-literals | ||
const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); | ||
|
||
// eslint-disable-next-line @wordpress/data-no-store-string-literals | ||
const { updateBlockAttributes } = useDispatch( blockEditorStore ); | ||
|
||
const clientId = useSelect( ( select ) => { | ||
// eslint-disable-next-line @wordpress/data-no-store-string-literals | ||
const { getSelectedBlockClientId } = select( blockEditorStore ); | ||
return getSelectedBlockClientId(); | ||
}, [] ); | ||
|
||
const openCollabBoard = () => { | ||
updateBlockAttributes( clientId, { | ||
showCommentBoard: true, | ||
} ); | ||
openGeneralSidebar( 'edit-post/collab-sidebar' ); | ||
}; | ||
|
||
return ( | ||
<ToolbarButton | ||
accessibleWhenDisabled | ||
icon={ collabComment } | ||
label={ _x( 'Comment', 'Open comment button' ) } | ||
onClick={ openCollabBoard } | ||
/> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,6 +34,7 @@ | |
"@babel/runtime": "^7.16.0", | ||
"@wordpress/a11y": "file:../a11y", | ||
"@wordpress/api-fetch": "file:../api-fetch", | ||
"@wordpress/autop": "^4.7.0", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why do we need this? This is a sort of legacy package that should be avoided. I don't understand why it's needed. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Based on feedback, we have added this package. |
||
"@wordpress/blob": "file:../blob", | ||
"@wordpress/block-editor": "file:../block-editor", | ||
"@wordpress/blocks": "file:../blocks", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __, _x } from '@wordpress/i18n'; | ||
import { useSelect, useDispatch } from '@wordpress/data'; | ||
import { useState, useEffect } from '@wordpress/element'; | ||
import { | ||
__experimentalHStack as HStack, | ||
__experimentalVStack as VStack, | ||
Button, | ||
TextControl, | ||
} from '@wordpress/components'; | ||
import { store as blockEditorStore } from '@wordpress/block-editor'; | ||
import { store as coreStore } from '@wordpress/core-data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { sanitizeCommentString } from './utils'; | ||
|
||
/** | ||
* Renders the new comment form. | ||
* | ||
* @param {Object} root0 The component props. | ||
* @param {Function} root0.onSubmit Function to add new comment. | ||
*/ | ||
export function AddComment( { onSubmit } ) { | ||
// State to manage the comment thread. | ||
const [ inputComment, setInputComment ] = useState( '' ); | ||
|
||
const { | ||
defaultAvatar, | ||
clientId, | ||
blockCommentId, | ||
showAddCommentBoard, | ||
currentUser, | ||
} = useSelect( ( select ) => { | ||
const { getSettings } = select( blockEditorStore ); | ||
const { __experimentalDiscussionSettings } = getSettings(); | ||
const selectedBlock = select( blockEditorStore ).getSelectedBlock(); | ||
const userData = select( coreStore ).getCurrentUser(); | ||
return { | ||
defaultAvatar: __experimentalDiscussionSettings?.avatarURL, | ||
clientId: selectedBlock?.clientId, | ||
blockCommentId: selectedBlock?.attributes?.blockCommentId, | ||
showAddCommentBoard: selectedBlock?.attributes?.showCommentBoard, | ||
currentUser: userData, | ||
}; | ||
} ); | ||
|
||
const userAvatar = currentUser?.avatar_urls[ 48 ] ?? defaultAvatar; | ||
|
||
useEffect( () => { | ||
setInputComment( '' ); | ||
}, [ clientId ] ); | ||
|
||
// Get the dispatch functions to save the comment and update the block attributes. | ||
const { updateBlockAttributes } = useDispatch( blockEditorStore ); | ||
|
||
const handleCancel = () => { | ||
updateBlockAttributes( clientId, { | ||
showCommentBoard: false, | ||
} ); | ||
setInputComment( '' ); | ||
}; | ||
|
||
if ( ! showAddCommentBoard || ! clientId || 0 !== blockCommentId ) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<VStack | ||
spacing="3" | ||
className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread" | ||
> | ||
<HStack alignment="left" spacing="3"> | ||
<img | ||
src={ userAvatar } | ||
// translators: alt text for user avatar image | ||
alt={ __( 'User Avatar' ) } | ||
className="editor-collab-sidebar-panel__user-avatar" | ||
width={ 32 } | ||
height={ 32 } | ||
/> | ||
<span className="editor-collab-sidebar-panel__user-name"> | ||
{ currentUser?.name ?? '' } | ||
</span> | ||
</HStack> | ||
<TextControl | ||
__next40pxDefaultSize | ||
__nextHasNoMarginBottom | ||
value={ inputComment } | ||
onChange={ setInputComment } | ||
placeholder={ _x( 'Comment', 'noun' ) } | ||
/> | ||
<HStack alignment="right" spacing="3"> | ||
<Button | ||
__next40pxDefaultSize | ||
variant="tertiary" | ||
text={ _x( 'Cancel', 'Cancel comment button' ) } | ||
onClick={ handleCancel } | ||
size="compact" | ||
/> | ||
<Button | ||
__next40pxDefaultSize | ||
accessibleWhenDisabled | ||
variant="primary" | ||
text={ _x( 'Comment', 'Add comment button' ) } | ||
disabled={ | ||
0 === sanitizeCommentString( inputComment ).length | ||
} | ||
onClick={ () => onSubmit( inputComment ) } | ||
size="compact" | ||
/> | ||
</HStack> | ||
</VStack> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't see this in the REST API PR #65181, is it not relevant there?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have implemented changes based on feedback from @tyxla directly in the REST API PR #65181 . For testing purposes, both files have been synced. If you'd prefer us to remove the REST API code from this PR, please let us know, and we'll handle it.