-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Library: Add new Comment Reply Link block (#35774)
* Comment Reply: Init block files * Remove unexpected throw * Comment Reply: Render a clickable link - It uses `get_comment_reply_link` to generate the link. - That function already cover most of the cases, except comments depth. * Comment Reply: Add style settings * Comment Reply: Create block fixture files * Comment Reply: Fix phpcs errors * Comment Reply: Fix some comments * Icons: Fix comment reply link * Comment Reply: Change href in editor Using `#comment-reply-pseudo-link` for consistency. That pattern is being used in other blocks, e.g. Post Comment Author or Post Comment Date * Comment Reply: Fix SSR for some cases The cases are: - The comment ID passed is invalid - The comment doesn't have any parents - There is no link to render Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
- Loading branch information
Showing
13 changed files
with
275 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
packages/block-library/src/post-comment-reply-link/block.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
{ | ||
"apiVersion": 2, | ||
"name": "core/post-comment-reply-link", | ||
"title": "Post Comment Reply Link", | ||
"category": "design", | ||
"parent": [ "core/post-comment" ], | ||
"description": "Displays a link to reply to a comment.", | ||
"textdomain": "default", | ||
"usesContext": [ "commentId" ], | ||
"attributes": { | ||
"textAlign": { | ||
"type": "string" | ||
} | ||
}, | ||
"supports": { | ||
"color": { | ||
"gradients": true, | ||
"link": true, | ||
"text": false | ||
}, | ||
"typography": { | ||
"fontSize": true, | ||
"lineHeight": true, | ||
"__experimentalFontFamily": true, | ||
"__experimentalFontWeight": true, | ||
"__experimentalFontStyle": true, | ||
"__experimentalTextTransform": true, | ||
"__experimentalLetterSpacing": true | ||
}, | ||
"html": false | ||
} | ||
} |
59 changes: 59 additions & 0 deletions
59
packages/block-library/src/post-comment-reply-link/edit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import classnames from 'classnames'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { | ||
AlignmentControl, | ||
BlockControls, | ||
useBlockProps, | ||
} from '@wordpress/block-editor'; | ||
|
||
/** | ||
* Renders the `core/post-comment-reply-link` block on the editor. | ||
* | ||
* @param {Object} props React props. | ||
* @param {Object} props.setAttributes Callback for updating block attributes. | ||
* @param {Object} props.attributes Block attributes. | ||
* @param {string} props.attributes.textAlign The `textAlign` attribute. | ||
* | ||
* @return {JSX.Element} React element. | ||
*/ | ||
function Edit( { setAttributes, attributes: { textAlign } } ) { | ||
const blockProps = useBlockProps( { | ||
className: classnames( { | ||
[ `has-text-align-${ textAlign }` ]: textAlign, | ||
} ), | ||
} ); | ||
|
||
const blockControls = ( | ||
<BlockControls group="block"> | ||
<AlignmentControl | ||
value={ textAlign } | ||
onChange={ ( newAlign ) => | ||
setAttributes( { textAlign: newAlign } ) | ||
} | ||
/> | ||
</BlockControls> | ||
); | ||
|
||
return ( | ||
<> | ||
{ blockControls } | ||
<div { ...blockProps }> | ||
<a | ||
href="#comment-reply-pseudo-link" | ||
onClick={ ( event ) => event.preventDefault() } | ||
> | ||
{ __( 'Reply' ) } | ||
</a> | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default Edit; |
18 changes: 18 additions & 0 deletions
18
packages/block-library/src/post-comment-reply-link/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { postCommentReplyLink 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 = { | ||
edit, | ||
icon, | ||
}; |
80 changes: 80 additions & 0 deletions
80
packages/block-library/src/post-comment-reply-link/index.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
<?php | ||
/** | ||
* Server-side rendering of the `core/post-comment-reply-link` block. | ||
* | ||
* @package WordPress | ||
*/ | ||
|
||
/** | ||
* Renders the `core/post-comment-reply-link` 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 reply link. | ||
*/ | ||
function render_block_core_post_comment_reply_link( $attributes, $content, $block ) { | ||
if ( ! isset( $block->context['commentId'] ) ) { | ||
return ''; | ||
} | ||
|
||
$thread_comments = get_option( 'thread_comments' ); | ||
if ( ! $thread_comments ) { | ||
return ''; | ||
} | ||
|
||
$comment = get_comment( $block->context['commentId'] ); | ||
if ( empty( $comment ) ) { | ||
return ''; | ||
} | ||
|
||
$depth = 1; | ||
$max_depth = get_option( 'thread_comments_depth' ); | ||
$parent_id = $comment->comment_parent; | ||
|
||
// Compute comment's depth iterating over its ancestors. | ||
while ( ! empty( $parent_id ) ) { | ||
$depth++; | ||
$parent_id = get_comment( $parent_id )->comment_parent; | ||
} | ||
|
||
$comment_reply_link = get_comment_reply_link( | ||
array( | ||
'depth' => $depth, | ||
'max_depth' => $max_depth, | ||
), | ||
$comment | ||
); | ||
|
||
// Render nothing if the generated reply link is empty. | ||
if ( empty( $comment_reply_link ) ) { | ||
return; | ||
} | ||
|
||
$classes = ''; | ||
if ( isset( $attributes['textAlign'] ) ) { | ||
$classes .= 'has-text-align-' . $attributes['textAlign']; | ||
} | ||
|
||
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); | ||
|
||
return sprintf( | ||
'<div %1$s>%2$s</div>', | ||
$wrapper_attributes, | ||
$comment_reply_link | ||
); | ||
} | ||
|
||
/** | ||
* Registers the `core/post-comment-reply-link` block on the server. | ||
*/ | ||
function register_block_core_post_comment_reply_link() { | ||
register_block_type_from_metadata( | ||
__DIR__ . '/post-comment-reply-link', | ||
array( | ||
'render_callback' => 'render_block_core_post_comment_reply_link', | ||
) | ||
); | ||
} | ||
|
||
add_action( 'init', 'register_block_core_post_comment_reply_link' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Path, SVG } from '@wordpress/primitives'; | ||
|
||
const postCommentsReplyLink = ( | ||
<SVG | ||
width="24" | ||
height="24" | ||
viewBox="0 0 24 24" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<Path d="M6.68822 10.625L6.24878 11.0649L5.5 11.8145L5.5 5.5L12.5 5.5V8L14 6.5V5C14 4.44772 13.5523 4 13 4H5C4.44772 4 4 4.44771 4 5V13.5247C4 13.8173 4.16123 14.086 4.41935 14.2237C4.72711 14.3878 5.10601 14.3313 5.35252 14.0845L7.31 12.125H8.375L9.875 10.625H7.31H6.68822ZM14.5605 10.4983L11.6701 13.75H16.9975C17.9963 13.75 18.7796 14.1104 19.3553 14.7048C19.9095 15.2771 20.2299 16.0224 20.4224 16.7443C20.7645 18.0276 20.7543 19.4618 20.7487 20.2544C20.7481 20.345 20.7475 20.4272 20.7475 20.4999L19.2475 20.5001C19.2475 20.4191 19.248 20.3319 19.2484 20.2394V20.2394C19.2526 19.4274 19.259 18.2035 18.973 17.1307C18.8156 16.5401 18.586 16.0666 18.2778 15.7483C17.9909 15.4521 17.5991 15.25 16.9975 15.25H11.8106L14.5303 17.9697L13.4696 19.0303L8.96956 14.5303L13.4394 9.50171L14.5605 10.4983Z" /> | ||
</SVG> | ||
); | ||
|
||
export default postCommentsReplyLink; |
1 change: 1 addition & 0 deletions
1
test/integration/fixtures/blocks/core__post-comment-reply-link.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<!-- wp:post-comment-reply-link {"textAlign":"right","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}},"fontSize":"extra-large","fontFamily":"cambria-georgia"} /--> |
31 changes: 31 additions & 0 deletions
31
test/integration/fixtures/blocks/core__post-comment-reply-link.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
[ | ||
{ | ||
"clientId": "_clientId_0", | ||
"name": "core/post-comment-reply-link", | ||
"isValid": true, | ||
"attributes": { | ||
"textAlign": "right", | ||
"fontFamily": "cambria-georgia", | ||
"fontSize": "extra-large", | ||
"style": { | ||
"typography": { | ||
"lineHeight": "0.8", | ||
"textTransform": "uppercase", | ||
"letterSpacing": "10px" | ||
}, | ||
"elements": { | ||
"link": { | ||
"color": { | ||
"text": "var:preset|color|blue" | ||
} | ||
} | ||
}, | ||
"color": { | ||
"background": "#c82222" | ||
} | ||
} | ||
}, | ||
"innerBlocks": [], | ||
"originalContent": "" | ||
} | ||
] |
30 changes: 30 additions & 0 deletions
30
test/integration/fixtures/blocks/core__post-comment-reply-link.parsed.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
[ | ||
{ | ||
"blockName": "core/post-comment-reply-link", | ||
"attrs": { | ||
"textAlign": "right", | ||
"style": { | ||
"typography": { | ||
"lineHeight": "0.8", | ||
"textTransform": "uppercase", | ||
"letterSpacing": "10px" | ||
}, | ||
"elements": { | ||
"link": { | ||
"color": { | ||
"text": "var:preset|color|blue" | ||
} | ||
} | ||
}, | ||
"color": { | ||
"background": "#c82222" | ||
} | ||
}, | ||
"fontSize": "extra-large", | ||
"fontFamily": "cambria-georgia" | ||
}, | ||
"innerBlocks": [], | ||
"innerHTML": "", | ||
"innerContent": [] | ||
} | ||
] |
1 change: 1 addition & 0 deletions
1
test/integration/fixtures/blocks/core__post-comment-reply-link.serialized.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<!-- wp:post-comment-reply-link {"textAlign":"right","fontFamily":"cambria-georgia","fontSize":"extra-large","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}}} /--> |