Block Library: Add new Edit Comment Link block (#35965)

* Add edit post comment block * Replace spaces with tabs * Rename label for consistency * Quote the href attribute * Don't assume roles will have specific capabilities Co-authored-by: Carolina Nymark <[email protected]> * Update the block title * Add fixture * Move fixtures * Apply cs * Add edit post comment block * Replace spaces with tabs * Rename label for consistency * Quote the href attribute * Don't assume roles will have specific capabilities Co-authored-by: Carolina Nymark <[email protected]> * Update the block title * Add fixture * Move fixtures * Apply cs * Update block to be similar to other comment blocks * Escape attributes and format php Co-authored-by: Diede Exterkate <[email protected]> Co-authored-by: Carolina Nymark <[email protected]> Co-authored-by: Carlos Bravo <[email protected]>
WordPress · Oct 27, 2021 · 70ee670 · 70ee670
1 parent dd1f5ea
commit 70ee670
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 1 deletion.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -74,6 +74,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-comment-author-avatar.php' => 'core/post-comment-author-avatar',
 				'post-comment-content.php'       => 'core/post-comment-content',
 				'post-comment-date.php'          => 'core/post-comment-date',
+				'post-comment-edit.php'          => 'core/post-comment-edit',
 				'post-comments.php'              => 'core/post-comments',
 				'post-comments-count.php'        => 'core/post-comments-count',
 				'post-comments-form.php'         => 'core/post-comments-form',

diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -83,6 +83,7 @@ import * as postCommentAuthor from './post-comment-author';
 import * as postCommentAuthorAvatar from './post-comment-author-avatar';
 import * as postCommentContent from './post-comment-content';
 import * as postCommentDate from './post-comment-date';
+import * as postCommentEdit from './post-comment-edit';
 import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
@@ -245,6 +246,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postCommentAuthorAvatar,
 								postCommentContent,
 								postCommentDate,
+								postCommentEdit,
 								postComments,
 								postCommentsCount,
 								postCommentsForm,

diff --git a/packages/block-library/src/post-comment-author/index.php b/packages/block-library/src/post-comment-author/index.php
@@ -28,7 +28,7 @@ function render_block_core_post_comment_author( $attributes, $content, $block )
 	$link               = get_comment_author_url( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
-		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', $link, $attributes['linkTarget'], $comment_author );
+		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
 	}
 
 	return sprintf(

diff --git a/packages/block-library/src/post-comment-edit/block.json b/packages/block-library/src/post-comment-edit/block.json
@@ -0,0 +1,33 @@
+{
+	"apiVersion": 2,
+	"name": "core/post-comment-edit",
+	"title": "Post Comment Edit Link",
+	"category": "design",
+	"parent": [ "core/post-comment" ],
+	"description": "Displays a link to edit the comment in the WordPress Dashboard. This link is only visible to users with the edit comment capability.",
+	"textdomain": "default",
+	"usesContext": [ "commentId" ],
+	"attributes": {
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+	},
+	"supports": {
+		"html": false,
+		"color": {
+			"link": true,
+			"gradients": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		}
+	}
+}
diff --git a/packages/block-library/src/post-comment-edit/edit.js b/packages/block-library/src/post-comment-edit/edit.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( {
+	attributes: { className, linkTarget },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps( { className } );
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Link settings' ) }>
+				<ToggleControl
+					label={ __( 'Open in new tab' ) }
+					onChange={ ( value ) =>
+						setAttributes( {
+							linkTarget: value ? '_blank' : '_self',
+						} )
+					}
+					checked={ linkTarget === '_blank' }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	return (
+		<>
+			{ inspectorControls }
+			<div { ...blockProps }>
+				<a
+					href="#edit-comment-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ __( 'Edit' ) }
+				</a>
+			</div>
+		</>
+	);
+}
diff --git a/packages/block-library/src/post-comment-edit/index.js b/packages/block-library/src/post-comment-edit/index.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { edit as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
diff --git a/packages/block-library/src/post-comment-edit/index.php b/packages/block-library/src/post-comment-edit/index.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comment-edit` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-comment-edit` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Return the post comment's date.
+ */
+function render_block_core_post_comment_edit( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) || ! current_user_can( 'edit_comment', $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$edit_comment_link = get_edit_comment_link( $block->context['commentId'] );
+
+	$link_atts = '';
+
+	if ( ! empty( $attributes['linkTarget'] ) ) {
+		$link_atts .= sprintf( 'target="%s"', esc_attr( $attributes['linkTarget'] ) );
+	}
+
+	return sprintf(
+		'<div %1$s><a href="%2$s" %3$s>%4$s</a></div>',
+		get_block_wrapper_attributes(),
+		esc_url( $edit_comment_link ),
+		$link_atts,
+		esc_html__( 'Edit' )
+	);
+}
+
+/**
+ * Registers the `core/post-comment-edit` block on the server.
+ */
+function register_block_core_post_comment_edit() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-comment-edit',
+		array(
+			'render_callback' => 'render_block_core_post_comment_edit',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_post_comment_edit' );
diff --git a/test/integration/fixtures/blocks/core__post-comment-edit.html b/test/integration/fixtures/blocks/core__post-comment-edit.html
@@ -0,0 +1 @@
+<!-- wp:post-comment-edit {"linkTarget":"_blank","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}},"backgroundColor":"recommended-color-03","fontSize":"extra-large","fontFamily":"system-monospace"} /-->
diff --git a/test/integration/fixtures/blocks/core__post-comment-edit.json b/test/integration/fixtures/blocks/core__post-comment-edit.json
@@ -0,0 +1,31 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-comment-edit",
+		"isValid": true,
+		"attributes": {
+			"linkTarget": "_blank",
+			"backgroundColor": "recommended-color-03",
+			"fontFamily": "system-monospace",
+			"fontSize": "extra-large",
+			"style": {
+				"typography": {
+					"fontStyle": "normal",
+					"fontWeight": "700",
+					"lineHeight": "2",
+					"textTransform": "uppercase",
+					"letterSpacing": "13px"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#ed1717"
+						}
+					}
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-comment-edit.parsed.json b/test/integration/fixtures/blocks/core__post-comment-edit.parsed.json
@@ -0,0 +1,30 @@
+[
+	{
+		"blockName": "core/post-comment-edit",
+		"attrs": {
+			"linkTarget": "_blank",
+			"style": {
+				"typography": {
+					"fontStyle": "normal",
+					"fontWeight": "700",
+					"lineHeight": "2",
+					"textTransform": "uppercase",
+					"letterSpacing": "13px"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#ed1717"
+						}
+					}
+				}
+			},
+			"backgroundColor": "recommended-color-03",
+			"fontSize": "extra-large",
+			"fontFamily": "system-monospace"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-comment-edit.serialized.html b/test/integration/fixtures/blocks/core__post-comment-edit.serialized.html
@@ -0,0 +1 @@
+<!-- wp:post-comment-edit {"linkTarget":"_blank","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","fontSize":"extra-large","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!-- wp:post-comment-edit {"linkTarget":"_blank","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}},"backgroundColor":"recommended-color-03","fontSize":"extra-large","fontFamily":"system-monospace"} /-->