Skip to content

Commit

Permalink
Merge pull request #22 from rishishah-multidots/try/inline-block-comm…
Browse files Browse the repository at this point in the history
…enting

Update comment API code
  • Loading branch information
poojabhimani12 authored Aug 29, 2024
2 parents 9de8c69 + b8b0292 commit 6996e5f
Show file tree
Hide file tree
Showing 8 changed files with 58 additions and 61 deletions.
5 changes: 0 additions & 5 deletions lib/compat/wordpress-6.6/rest-api.php
Original file line number Diff line number Diff line change
Expand Up @@ -193,11 +193,6 @@ function gutenberg_block_editor_preload_paths_6_6( $paths, $context ) {
*/
if ( ! function_exists( 'update_comment_meta_from_rest_request' ) ) {
function update_comment_meta_from_rest_request( $response, $comment, $request ) {
if ( isset( $request['meta'] ) && is_array( $request['meta'] ) ) {
foreach ( $request['meta'] as $key => $value ) { //phpcs:ignore
update_comment_meta( $comment->comment_ID, 'block_comment', $value );
}
}

if ( isset( $request['comment_type'] ) && ! empty( $request['comment_type'] ) ) {
$comment_data = array(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export function BlockSettingsDropdown( {
selectedBlockClientIds,
openedBlockSettingsMenu,
isContentOnly,
blockClassName,
blockCommentID,
} = useSelect(
( select ) => {
const {
Expand All @@ -89,10 +89,10 @@ export function BlockSettingsDropdown( {
const parentBlockName =
_firstParentClientId && getBlockName( _firstParentClientId );

const className =
const commentID =
// eslint-disable-next-line @wordpress/data-no-store-string-literals
select( 'core/block-editor' ).getBlock( firstBlockClientId )
?.attributes?.className;
?.attributes?.blockCommentId;

return {
firstParentClientId: _firstParentClientId,
Expand All @@ -110,7 +110,7 @@ export function BlockSettingsDropdown( {
openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
isContentOnly:
getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
blockClassName: className,
blockCommentID: commentID,
};
},
[ firstBlockClientId ]
Expand Down Expand Up @@ -290,12 +290,12 @@ export function BlockSettingsDropdown( {
</>
) }
{ isBlockCommentExperimentEnabled &&
! blockClassName && (
<BlockCommentMenuItem
clientId={ clientIds }
onClose={ onClose }
/>
) }
! blockCommentID && (
<BlockCommentMenuItem
clientId={ clientIds }
onClose={ onClose }
/>
) }
</MenuGroup>
{ canCopyStyles && ! isContentOnly && (
<MenuGroup>
Expand Down
16 changes: 8 additions & 8 deletions packages/block-editor/src/components/block-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function PrivateBlockToolbar( {
shouldShowVisualToolbar,
showParentSelector,
isUsingBindings,
blockClassName,
blockCommentID,
} = useSelect( ( select ) => {
const {
getBlockName,
Expand Down Expand Up @@ -99,10 +99,10 @@ export function PrivateBlockToolbar( {
!! getBlockAttributes( clientId )?.metadata?.bindings
);

// eslint-disable-next-line @wordpress/data-no-store-string-literals
const className = select( 'core/block-editor' ).getBlock(
selectedBlockClientId
)?.attributes?.className;
const commentID =
// eslint-disable-next-line @wordpress/data-no-store-string-literals
select( 'core/block-editor' ).getBlock( selectedBlockClientId )
?.attributes?.blockCommentId || null;

return {
blockClientId: selectedBlockClientId,
Expand All @@ -123,7 +123,7 @@ export function PrivateBlockToolbar( {
selectedBlockClientIds.length === 1 &&
_isDefaultEditingMode,
isUsingBindings: _isUsingBindings,
blockClassName: className,
blockCommentID: commentID,
};
}, [] );

Expand Down Expand Up @@ -202,10 +202,10 @@ export function PrivateBlockToolbar( {
</>
) }

{ blockClassName && (
{ blockCommentID && (
<BlockCommentToolbar
clientId={ blockClientId }
blockClassName={ blockClassName }
blockClassName={ blockCommentID }
/>
) }
</ToolbarGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { MenuItem } from '@wordpress/components';
import { collabComment } from '@wordpress/icons';
import { useDispatch } from '@wordpress/data';

export default function BlockCommentMenuItem( { clientId, onClose } ) {
export default function BlockCommentMenuItem( { onClose } ) {
// eslint-disable-next-line @wordpress/data-no-store-string-literals
const { openGeneralSidebar } = useDispatch( 'core/edit-post' );

const openCollabBoard = () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/collab/toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { collabComment } from '@wordpress/icons';
export default function BlockCommentToolbar( {} ) {
return (
<>
<ToolbarGroup className="block-editor-block-lock-toolbar">
<ToolbarGroup className="block-editor-block-comment-toolbar">
<ToolbarButton
accessibleWhenDisabled
icon={ collabComment }
Expand Down
25 changes: 8 additions & 17 deletions packages/editor/src/components/collab-sidebar/add-comment.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,9 @@ import {
* Renders the new comment form.
*
* @param {Object} root0 The component props.
* @param {Object} root0.threads Comments.
* @param {Function} root0.setReloadComments Function to reload comments.
*/
export function AddComment( { threads, setReloadComments } ) {
export function AddComment( { setReloadComments } ) {
const generateNewComment = () => ( {
commentId: Date.now(),
createdBy: currentUser,
Expand All @@ -42,7 +41,6 @@ export function AddComment( { threads, setReloadComments } ) {
// State to manage the comment thread.
const [ inputComment, setInputComment ] = useState( '' );
const [ isEditing, setIsEditing ] = useState( null );
const [ showConfirmation, setShowConfirmation ] = useState( false );

const curruntUserData = useSelect( ( select ) => {
// eslint-disable-next-line @wordpress/data-no-store-string-literals
Expand Down Expand Up @@ -78,11 +76,13 @@ export function AddComment( { threads, setReloadComments } ) {
return getSelectedBlockClientId();
}, [] );

const blockClassName = useSelect( ( select ) => {
const blockCommentId = useSelect( ( select ) => {
const clientID =
// eslint-disable-next-line @wordpress/data-no-store-string-literals
select( 'core/block-editor' ).getSelectedBlockClientId();
// eslint-disable-next-line @wordpress/data-no-store-string-literals
return select( 'core/block-editor' ).getBlock(
select( 'core/block-editor' ).getSelectedBlockClientId()
)?.attributes?.className;
return select( 'core/block-editor' ).getBlock( clientID )?.attributes
?.blockCommentId;
}, [] );

// Get the dispatch functions to save the comment and update the block attributes.
Expand Down Expand Up @@ -160,14 +160,11 @@ export function AddComment( { threads, setReloadComments } ) {
}
};

// Function to show the confirmation overlay.
const showConfirmationOverlay = () => setShowConfirmation( true );

const handleCancel = () => {};

return (
<>
{ null !== clientId && undefined === blockClassName && (
{ null !== clientId && 0 === blockCommentId && (
<VStack spacing="3">
{ 0 < commentsCount && ! isCurrentThreadResolved && (
<>
Expand Down Expand Up @@ -308,12 +305,6 @@ export function AddComment( { threads, setReloadComments } ) {
) }
>
<CheckboxControl
checked={
isResolved
}
onChange={ () =>
showConfirmationOverlay()
}
label={ __(
'Resolve'
) }
Expand Down
16 changes: 0 additions & 16 deletions packages/editor/src/components/collab-sidebar/comments.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,20 +112,6 @@ export function Comments( { threads } ) {
}
};

// Helper function to get updated comments structure
const getUpdatedComments = ( newComment, threadKey ) => ( {
...threads,
[ threadKey ]: {
isResolved: false,
createdAt:
threads?.threadKey?.createdAt || new Date().toISOString(),
createdBy: currentUser,
comments: {
0: newComment,
},
},
} );

const generateReplyComment = ( comment ) => ( {
commentId: Date.now(),
createdBy: currentUser,
Expand All @@ -136,8 +122,6 @@ export function Comments( { threads } ) {
const confirmReplyComment = ( threadID ) => {
if ( threadID ) {
const newComment = generateReplyComment( commentReply );
const commentId = newComment?.commentId;

apiFetch( {
path: '/wp/v2/comments/',
method: 'POST',
Expand Down
32 changes: 29 additions & 3 deletions packages/editor/src/components/collab-sidebar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { useSelect } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';
import { comment as commentIcon } from '@wordpress/icons';

import { addFilter } from '@wordpress/hooks';

/**
* Internal dependencies
*/
Expand All @@ -19,18 +21,42 @@ import { AddComment } from './add-comment';
const isBlockCommentExperimentEnabled =
window?.__experimentalEnableBlockComment;

const modifyBlockCommentAttributes = ( settings, name ) => {
if ( name && name?.includes( 'core/' ) ) {
if (
undefined === settings.attributes.blockCommentId ||
null === settings.attributes.blockCommentId
) {
settings.attributes = {
...settings.attributes,
blockCommentId: {
type: 'number',
default: 0,
},
};
}
}
return settings;
};

// Apply the filter to all core blocks
addFilter(
'blocks.registerBlockType',
'block-comment/modify-core-block-attributes',
modifyBlockCommentAttributes
);

/**
* Renders the Collab sidebar.
*/
export default function CollabSidebar() {
const [ threads, setThreads ] = useState( [] );
const [ reloadComments, setReloadComments ] = useState( false );
const postId = useSelect( ( select ) => {
// eslint-disable-next-line @wordpress/data-no-store-string-literals
return select( 'core/editor' ).getCurrentPostId();
}, [] );

const [ threads, setThreads ] = useState( [] );
const [ reloadComments, setReloadComments ] = useState( false );

useEffect( () => {
if ( postId ) {
apiFetch( {
Expand Down

0 comments on commit 6996e5f

Please sign in to comment.