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.

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

Site Editor: Add new Post Comment Content block #35183

Draft
wants to merge 5 commits into
base: trunk
Choose a base branch
from

Conversation

@DAreRodz
Copy link

@DAreRodz DAreRodz commented Sep 28, 2021

Description

This PR continues the implementation of the Post Comment Content block that already existed. It works inside the Post Comment block, using the commentId that it receives via context.

Related to issue #30574.

Currently, it's WIP.

How has this been tested?

I'm using the following environment:

  • WordPress: 5.9-alpha-51826
  • gutenberg: 11.6.0-rc.1
  • wp-env: 4.1.1
  • node: 14.17.6
  • npm: 6.14.15
  • OS: Ubuntu 21.04

Types of changes

  • Type Experimental
  • New Feature Site Editor

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
@github-actions
Copy link

@github-actions github-actions bot commented Sep 28, 2021

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @DAreRodz! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@mtias
Copy link
Contributor

@mtias mtias commented Sep 28, 2021

Commenting here but we should transfer to the general tracking issue — the "Post" prefix is a bit pointless, we should simplify the naming of all these blocks to be "Comment Content", "Comment Author" etc.

"lineHeight": true
},
"html": false,
"__experimentalLayout": true
Copy link
Contributor

@ntsekouras ntsekouras Sep 28, 2021

I think we will not need to add the __experimentalLayout for this block. Layout is for container blocks that enables controlling width/height.

Copy link
Author

@DAreRodz DAreRodz Sep 29, 2021

Thanks, @ntsekouras. I did that because @SantosGuillamot suggested adding that specific setting. I'll talk with him to clarify that.

Copy link

@SantosGuillamot SantosGuillamot Sep 29, 2021

I suggested adding that because it's something supported in the Post Content block, and I thought it could be a good idea to follow a similar pattern. It seemed to me that it would add more flexibility for editing the layout, but I don't have a strong opinion here, so no problem if you feel it's better to change it 🙂

Copy link
Contributor

@mtias mtias Sep 29, 2021

@scruffian @MaggieCabrera @jffng curious what has come up in themes as uses here.

Copy link
Contributor

@scruffian scruffian Sep 29, 2021

I've not seen a real life use case where we'd want to use this outside of a post comment block.

Copy link
Contributor

@ntsekouras ntsekouras Sep 30, 2021

I think layout would make more sense in the parent blocks like Comment Loop

@jameskoster
Copy link
Contributor

@jameskoster jameskoster commented Sep 28, 2021

I understand that this happens when the comment ID is not specified in the parent block, am I right?

Correct. Example: editing the single post template in isolation, with no post data.

What should the block show when the comment ID is not correct? Is it OK showing the same message?

I presume you're referring to this interface in the current "Post Comment" block:

Screenshot 2021-09-28 at 15 44 26

I don't think we should offer this functionality in the Comment Content block since it is strictly a template-only block, IE it will always have an ID passed to it by the queried post.

Regarding the icon, I guess I have to create a new one inside @wordpress/icons using the design, right?

Perfect! Here's the SVG:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.68822 16.625L5.5 17.8145L5.5 5.5L18.5 5.5L18.5 16.625L6.68822 16.625ZM7.31 18.125L19 18.125C19.5523 18.125 20 17.6773 20 17.125L20 5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V19.5247C4 19.8173 4.16123 20.086 4.41935 20.2237C4.72711 20.3878 5.10601 20.3313 5.35252 20.0845L7.31 18.125ZM16 9.99997H8V8.49997H16V9.99997ZM8 14H13V12.5H8V14Z" fill="black"/>
</svg>

I'm not sure, but these settings don't seem quite possible to be added as that would modify the comment content, if I'm not mistaken.

Good point, these should probably be omitted :)

@ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Sep 28, 2021

I don't think we should offer this functionality in the Comment Content block since it is strictly a template-only block, IE it will always have an ID passed to it by the queried post.

I agree with @jameskoster , but let's change this when we have the comments loop block. What do you think?

@jameskoster
Copy link
Contributor

@jameskoster jameskoster commented Sep 28, 2021

Hmm, this is a new block, no? So no harm leaving it out?

To be clear, we should keep that interface for the Post Comment block, but not have it for the Comment Content block.

Edit: I understand now. Imo we should update the Post Comment block to check the ID when the user adds it, and throw an "comment not found" error (or similar) if they input a bad ID.

@DAreRodz
Copy link
Author

@DAreRodz DAreRodz commented Sep 29, 2021

Imo we should update the Post Comment block to check the ID when the user adds it, and throw an "comment not found" error (or similar) if they input a bad ID.

Makes completely sense, I'll do that. Thanks for all your feedback, guys. 🙌

@DAreRodz DAreRodz force-pushed the add/comment-content-block branch from b98c625 to 5714fef Sep 29, 2021
const commentContent = (
<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<Path
fill-rule="evenodd"
Copy link
Contributor

@ntsekouras ntsekouras Sep 30, 2021

You have to change these props to fillRule and clipRule as Path is a React component. This way it produces React Invalid DOM property warnings.

@@ -15,13 +24,23 @@ export default function Edit( { context: { commentId } } ) {
'content',
commentId
);

// Show a placeholder when there is no context.
if ( ! commentId ) {
Copy link
Contributor

@ntsekouras ntsekouras Sep 30, 2021

If no commentId exists the message should be something like no comment exists.
If content is undefined has two cases:

  1. still loading
  2. comment doesn't exist (this can be handled in a separate PR though and has to do with useEntityProp)

The below if ( ! content?.rendered ) check (I had hastily added yesterday) is not correct as it should be shown when the comment exists and there is no content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants