[Block Library - Post Link]: Add new post link block

docs/reference-guides/core-blocks.md

@@ -530,6 +530,15 @@ Display a post's featured image.
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
 -	**Attributes:** height, isLink, scale, width
 
+## Post Link
+
+Add the link of this post.
+
+-	**Name:** core/post-link
+-	**Category:** theme
+-	**Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** content, linkTarget
+
 ## Post Navigation Link
 
 Displays the next or previous post link that is adjacent to the current post.

lib/blocks.php

@@ -92,6 +92,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-date.php'                    => 'core/post-date',
 				'post-excerpt.php'                 => 'core/post-excerpt',
 				'post-featured-image.php'          => 'core/post-featured-image',
+				'post-link.php'                    => 'core/post-link',
 				'post-navigation-link.php'         => 'core/post-navigation-link',
 				'post-terms.php'                   => 'core/post-terms',
 				'post-title.php'                   => 'core/post-title',

packages/block-library/src/index.js

@@ -69,6 +69,7 @@ import * as postContent from './post-content';
 import * as postDate from './post-date';
 import * as postExcerpt from './post-excerpt';
 import * as postFeaturedImage from './post-featured-image';
+import * as postLink from './post-link';
 import * as postNavigationLink from './post-navigation-link';
 import * as postTemplate from './post-template';
 import * as postTerms from './post-terms';
@@ -193,6 +194,7 @@ export const __experimentalGetCoreBlocks = () => [
 	postAuthor,
 	postDate,
 	postTerms,
+	postLink,
 	postNavigationLink,
 	postTemplate,
 	queryPagination,

packages/block-library/src/post-link/block.json

@@ -0,0 +1,57 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/post-link",
+	"title": "Post Link",
+	"category": "theme",
+	"description": "Add the link of this post.",
+	"keywords": [ "read more" ],
+	"textdomain": "default",
+	"attributes": {
+		"content": {
+			"type": "string"
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+	},
+	"usesContext": [ "postId" ],
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"textDecoration": true
+			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"width": true
+			}
+		}
+	},
+	"style": "wp-block-post-link"
+}

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+export default function PostLink( {
+	attributes: { content, linkTarget },
+	setAttributes,
+	insertBlocksAfter,
+} ) {
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<RichText
+				tagName="a"
+				aria-label={ __( '"Read more" link text' ) }
+				placeholder={ __( 'Add "read more" link text' ) }
+				value={ content }
+				onChange={ ( newValue ) =>
+					setAttributes( { content: newValue } )
+				}
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
+				withoutInteractiveFormatting={ true }
+				{ ...blockProps }
+			/>
+		</>
+	);
+}

packages/block-library/src/post-link/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { link 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,
+};

packages/block-library/src/post-link/index.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-link` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-link` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string  Returns the post link.
+ */
+function render_block_core_post_link( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$post_ID            = $block->context['postId'];
+	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
+	$more_text          = ! empty( $attributes['content'] ) ? $attributes['content'] : __( 'Read more' );
+	return sprintf(
+		'<a %1s href="%2s" target="%3s">%4s</a>',
+		$wrapper_attributes,
+		get_the_permalink( $post_ID ),
+		esc_attr( $attributes['linkTarget'] ),
+		$more_text
+	);
+}
+
+/**
+ * Registers the `core/post-link` block on the server.
+ */
+function register_block_core_post_link() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-link',
+		array(
+			'render_callback' => 'render_block_core_post_link',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_link' );

packages/block-library/src/post-link/style.scss

@@ -0,0 +1,12 @@
+.wp-block-post-link {
+	display: block;
+	width: fit-content;
+	&:not([style*="text-decoration"]) {
+		text-decoration: none;
+
+		&:focus,
+		&:active {
+			text-decoration: none;
+		}
+	}
+}

packages/block-library/src/style.scss

@@ -28,6 +28,7 @@
 @import "./post-comments-form/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
+@import "./post-link/style.scss";
 @import "./post-terms/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";

test/integration/fixtures/blocks/core__post-link.html

@@ -0,0 +1 @@
+<!-- wp:post-link /-->

test/integration/fixtures/blocks/core__post-link.json

@@ -0,0 +1,12 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-link",
+		"isValid": true,
+		"attributes": {
+			"linkTarget": "_self"
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]

test/integration/fixtures/blocks/core__post-link.parsed.json

@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/post-link",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__post-link.serialized.html

@@ -0,0 +1 @@
+<!-- wp:post-link /-->