Skip to content
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.

Sign up for GitHub

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

Comment Template: Improve UX of inner block selection #38263

Merged
merged 3 commits into from
Feb 9, 2022
Merged

Comment Template: Improve UX of inner block selection #38263

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38a5b47
Comment Template: Rename firstBlock to firstComment
michalczaplinski Jan 27, 2022
b68599e
Comment Template: Fix jumping of elements
michalczaplinski Jan 27, 2022
aca07fc
Comment template: Fix flicker
michalczaplinski Feb 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 32 additions & 9 deletions packages/block-library/src/comment-template/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* WordPress dependencies
*/
import { useState, useMemo } from '@wordpress/element';
import { useState, useMemo, memo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import {
BlockContextProvider,
BlockPreview,
useBlockProps,
useInnerBlocksProps,
store as blockEditorStore,
__experimentalUseBlockPreview as useBlockPreview,
} from '@wordpress/block-editor';
import { Spinner } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
Expand All @@ -35,7 +35,7 @@ const TEMPLATE = [
* @param {Array} [props.comment] - A comment object.
* @param {Array} [props.activeComment] - The block that is currently active.
* @param {Array} [props.setActiveComment] - The setter for activeComment.
* @param {Array} [props.firstBlock] - First comment in the array.
* @param {Array} [props.firstComment] - First comment in the array.
* @param {Array} [props.blocks] - Array of blocks returned from
* getBlocks() in parent .
* @return {WPElement} Inner blocks of the Comment Template
Expand All @@ -44,7 +44,7 @@ function CommentTemplateInnerBlocks( {
comment,
activeComment,
setActiveComment,
firstBlock,
firstComment,
blocks,
} ) {
const { children, ...innerBlocksProps } = useInnerBlocksProps(
Expand All @@ -53,13 +53,13 @@ function CommentTemplateInnerBlocks( {
);
return (
<li { ...innerBlocksProps }>
{ comment === ( activeComment || firstBlock ) ? (
{ comment === ( activeComment || firstComment ) ? (
children
) : (
<BlockPreview
<MemoizedCommentTemplatePreview
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is currently only rendering the preview if it isn't the selected instance (which makes semantic sense). However, over in #36431, to remove the flicker when clicking between instances, I also needed to render the currently selected instance, but then used styling to set it to display: none. While it does wind up with an extra preview in the DOM, using styling to switch the visibility of the preview means that it doesn't need to be mounted from scratch, which appeared to be the expensive operation that caused the flicker.

blocks={ blocks }
__experimentalLive
__experimentalOnClick={ () => setActiveComment( comment ) }
comment={ comment }
setActiveComment={ setActiveComment }
/>
) }
{ comment?.children?.length > 0 ? (
Expand All @@ -74,6 +74,29 @@ function CommentTemplateInnerBlocks( {
);
}

const CommentTemplatePreview = ( { blocks, comment, setActiveComment } ) => {
const blockPreviewProps = useBlockPreview( {
blocks,
} );

const handleOnClick = () => {
setActiveComment( comment );
};

return (
<div
{ ...blockPreviewProps }
tabIndex={ 0 }
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
role="button"
onClick={ handleOnClick }
onKeyPress={ handleOnClick }
/>
);
};

const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );

/**
* Component that renders a list of (nested) comments. It is called recursively.
*
Expand Down Expand Up @@ -105,7 +128,7 @@ const CommentsList = ( {
activeComment={ activeComment }
setActiveComment={ setActiveComment }
blocks={ blocks }
firstBlock={ comments[ 0 ] }
firstComment={ comments[ 0 ] }
/>
</BlockContextProvider>
) ) }
Expand Down