Add edit post comment block #30671

diedexx · 2021-04-09T14:13:00Z

Description

Fixes #30577
Adds a Edit Comment Link block which can be used inside a Post Comment block which renders the edit link if the logged in user has the right capabilities to edit the comment.

How has this been tested?

I've placed a Post Comment block on a post and selected an id of an existing comment. In that block, I've placed the new Edit Comment block and modified all available properties in the sidebar and checked if these changes were reflected on the published post.

Screenshots

Types of changes

New feature - New block type: Edit Comment.

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 · 2021-04-09T14:13:40Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @diedexx! 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.

packages/block-library/src/post-comment-edit/index.php

packages/block-library/src/post-comment-edit/index.js

packages/block-library/src/post-comment-edit/block.json

carolinan · 2021-04-09T23:12:48Z

I wonder if the block name should be Post comment edit link,

I know that the pseudo link is used in more than one block, but I think this needs to be reconsidered because it is still possible to right click and open the link, or select and open the link using a screen reader, and the result is not the expected since the current page is opened instead.
But this needs to be part of a larger review of how to handle links in the editors.

I used the following markup to test the block in the post editor:

<!-- wp:post-comment {"commentId":place the id here} -->
<div class="wp-block-post-comment"><!-- wp:post-comment-edit /--></div>
<!-- /wp:post-comment -->

I only tested it with the administrator user role. Except for the remark about the link, the block is working well for me.
The fixtures needs to be added:
https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-tests/fixtures/blocks/README.md#creating-fixtures

talldan

Thought I'd do a quick review and test, but I don't work regularly on FSE, so may be missing some aspects in my review.

Seems really good so far, nice work.

packages/block-library/src/post-comment-edit/edit.js

packages/block-library/src/post-comment-edit/index.php

talldan · 2021-04-12T04:20:54Z

packages/block-library/src/post-comment-edit/edit.js

+				</PanelBody>
+			</InspectorControls>
+			<div { ...useBlockProps() }>
+				<a href="#edit-comment-pseudo-link">{ __( 'Edit' ) }</a>


Clicking the link in the editor seems to cause an unusual crash and some console errors, not sure what's happening, but it's probably unrelated to this PR. Thought I'd flag it though.

Nice catch! It could cause some pretty nasty behaviour. I've created an issue for that: #30967

I wouldn't know how to adres this in the scope of this block though besides removing the href. But removing the href has its own issues.

talldan · 2021-04-12T04:27:44Z

I wonder if the block name should be Post comment edit link,

That name sounds better to me too 👍

diedexx · 2021-04-19T15:45:13Z

Thank you for your feedback @carolinan and @talldan
I have applied most of your suggestions besides the fixtures, which I didn't get around to today.
I'll see if I can spare some time this or next week to add them, otherwise I'm more than fine with somebody else committing them.

talldan · 2021-05-06T03:34:12Z

@diedexx How's it going on this task? Let me know when it's ready for review or if there's anything I can help with.

diedexx · 2021-05-07T13:09:56Z

Hi @talldan, I've just added the requested fixture. I'd really appreciate a review

Co-authored-by: Carolina Nymark <myazalea@hotmail.com>

cbravobernal

Nice work done @diedexx!

I've suggested some changes in order to make this component similar to other existing ones like post-comment-author, post-comment-dateor site-logo.

Hope they are fine!

cbravobernal · 2021-10-20T12:46:21Z

packages/block-library/src/post-comment-edit/edit.js

+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						checked={ openInNewTab }
+						onChange={ () =>
+							setAttributes( {
+								openInNewTab: ! openInNewTab,
+							} )
+						}
+					/>


Using the same approach as site logo block could be:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/site-logo/edit.js#L278-L286

<ToggleControl label={ __( 'Open in new tab' ) } onChange={ ( value ) => setAttributes( { linkTarget: value ? '_blank' : '_self', } ) } checked={ linkTarget === '_blank' } />

cbravobernal · 2021-10-20T12:48:32Z

packages/block-library/src/post-comment-edit/block.json

+		"openInNewTab": {
+			"type": "boolean",
+			"default": false
+		}


There are similar approaches already on production blocks. Maybe we could change this one in order to keep consistency between them!

For example:
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/site-logo/block.json#L19-L22

cbravobernal · 2021-10-20T12:48:59Z

packages/block-library/src/post-comment-edit/block.json

+		"fontSize": true,
+		"lineHeight": true


When I tested on my local site, it appeared a notice telling: fontSize support is now declared under supports.typography.fontSize

Using this new approach should solve it.

"typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true }

cbravobernal · 2021-10-20T12:52:14Z

packages/block-library/src/post-comment-edit/index.php

+	if ( $open_in_new_tab ) {
+		$link_atts .= 'target="_blank"';
+	}


If we change to the other blocks approach. We have to change this into something like attributes['linkTarget'] in order to work on the frontend.

gziolo · 2021-10-21T10:54:54Z

packages/block-library/src/post-comment-edit/index.js

+export { metadata, name };
+
+export const settings = {
+	title: _x( 'Post Comment Edit Link', 'block title' ),


The title and description should be in block.json so it gets exposed also on the server.

gziolo · 2021-10-27T10:29:52Z

Let's close this PR in favor of #35965 opened by @c4rl0sbr4v0. It has additional iterations and is ready for testing. @diedexx, thank you for working on this PR, it was very helpful. All your comments were cherry-picked to the new branch 🎉

diedexx requested review from ajitbohra, spacedmonkey and TimothyBJacobs as code owners April 9, 2021 14:13

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 9, 2021

carolinan reviewed Apr 9, 2021

View reviewed changes

packages/block-library/src/post-comment-edit/index.php Show resolved Hide resolved

carolinan reviewed Apr 9, 2021

View reviewed changes

packages/block-library/src/post-comment-edit/index.js Outdated Show resolved Hide resolved

carolinan reviewed Apr 9, 2021

View reviewed changes

packages/block-library/src/post-comment-edit/block.json Outdated Show resolved Hide resolved

talldan reviewed Apr 12, 2021

View reviewed changes

carolinan added the New Block Suggestion for a new block label Apr 19, 2021

diedexx requested review from nerrad and ntwb as code owners May 7, 2021 13:06

diedexx and others added 7 commits October 8, 2021 14:00

Add edit post comment block

ff83366

Replace spaces with tabs

9d95905

Rename label for consistency

f07e572

Quote the href attribute

9f0e7cc

Don't assume roles will have specific capabilities

5f7fcbd

Co-authored-by: Carolina Nymark <myazalea@hotmail.com>

Update the block title

be8fc6f

Add fixture

a08e66a

diedexx force-pushed the edit-comment-block branch from 14d5f9b to a08e66a Compare October 8, 2021 12:03

diedexx added 2 commits October 8, 2021 14:55

Move fixtures

ef1fdb7

Apply cs

ca9838e

carolinan added the [Block] Comment Template Affects the Comment Template Block label Oct 8, 2021

cbravobernal reviewed Oct 20, 2021

View reviewed changes

gziolo reviewed Oct 21, 2021

View reviewed changes

This was referenced Oct 21, 2021

Post Comment: Handle the case where a comment does not exist #35810

Merged

Block Library: Add new Edit Comment Link block #35965

Merged

gziolo closed this Oct 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add edit post comment block #30671

Add edit post comment block #30671

diedexx commented Apr 9, 2021

github-actions bot commented Apr 9, 2021

carolinan commented Apr 9, 2021

talldan left a comment

talldan Apr 12, 2021

diedexx Apr 19, 2021

talldan commented Apr 12, 2021

diedexx commented Apr 19, 2021

talldan commented May 6, 2021

diedexx commented May 7, 2021

cbravobernal left a comment •

edited

cbravobernal Oct 20, 2021

cbravobernal Oct 20, 2021

cbravobernal Oct 20, 2021 •

edited

cbravobernal Oct 20, 2021

gziolo Oct 21, 2021

gziolo commented Oct 27, 2021

Add edit post comment block #30671

Add edit post comment block #30671

Conversation

diedexx commented Apr 9, 2021

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Apr 9, 2021

carolinan commented Apr 9, 2021

talldan left a comment

Choose a reason for hiding this comment

talldan Apr 12, 2021

Choose a reason for hiding this comment

diedexx Apr 19, 2021

Choose a reason for hiding this comment

talldan commented Apr 12, 2021

diedexx commented Apr 19, 2021

talldan commented May 6, 2021

diedexx commented May 7, 2021

cbravobernal left a comment • edited

Choose a reason for hiding this comment

cbravobernal Oct 20, 2021

Choose a reason for hiding this comment

cbravobernal Oct 20, 2021

Choose a reason for hiding this comment

cbravobernal Oct 20, 2021 • edited

Choose a reason for hiding this comment

cbravobernal Oct 20, 2021

Choose a reason for hiding this comment

gziolo Oct 21, 2021

Choose a reason for hiding this comment

gziolo commented Oct 27, 2021

cbravobernal left a comment •

edited

cbravobernal Oct 20, 2021 •

edited