[Block Library]: Add new Read More block (post link) (#37649)

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

* rename to `read more`

* move block declaration

* change placeholder text

docs/reference-guides/core-blocks.md

@@ -656,6 +656,15 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 -	**Supports:** anchor, typography (fontSize, lineHeight)
 -	**Attributes:** align, citation, value
 
+## Read More
+
+Displays the link of a post, page, or any other content-type. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/read-more))
+
+-	**Name:** core/read-more
+-	**Category:** theme
+-	**Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** content, linkTarget
+
 ## RSS
 
 Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/rss))

lib/blocks.php

@@ -103,6 +103,7 @@ function gutenberg_reregister_core_block_types() {
 				'query-pagination-numbers.php'     => 'core/query-pagination-numbers',
 				'query-pagination-previous.php'    => 'core/query-pagination-previous',
 				'query-title.php'                  => 'core/query-title',
+				'read-more.php'                    => 'core/read-more',
 				'rss.php'                          => 'core/rss',
 				'search.php'                       => 'core/search',
 				'shortcode.php'                    => 'core/shortcode',

packages/block-library/src/index.js

@@ -84,6 +84,7 @@ import * as queryPaginationPrevious from './query-pagination-previous';
 import * as queryTitle from './query-title';
 import * as quote from './quote';
 import * as reusableBlock from './block';
+import * as readMore from './read-more';
 import * as rss from './rss';
 import * as search from './search';
 import * as separator from './separator';
@@ -271,6 +272,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 							postCommentsCount,
 							postCommentsForm,
 							postCommentsLink,
+							readMore,
 					  ]
 					: [] ),
 			].forEach( registerBlock );

packages/block-library/src/read-more/block.json

@@ -0,0 +1,56 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/read-more",
+	"title": "Read More",
+	"category": "theme",
+	"description": "Displays the link of a post, page, or any other content-type.",
+	"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-read-more"
+}

packages/block-library/src/read-more/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 ReadMore( {
+	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={ __( 'Read more' ) }
+				value={ content }
+				onChange={ ( newValue ) =>
+					setAttributes( { content: newValue } )
+				}
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
+				withoutInteractiveFormatting={ true }
+				{ ...blockProps }
+			/>
+		</>
+	);
+}

packages/block-library/src/read-more/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/read-more/index.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/read-more` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/read-more` 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_read_more( $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/read-more` block on the server.
+ */
+function register_block_core_read_more() {
+	register_block_type_from_metadata(
+		__DIR__ . '/read-more',
+		array(
+			'render_callback' => 'render_block_core_read_more',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_read_more' );

packages/block-library/src/read-more/style.scss

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

packages/block-library/src/style.scss

@@ -35,6 +35,7 @@
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
 @import "./quote/style.scss";
+@import "./read-more/style.scss";
 @import "./rss/style.scss";
 @import "./search/style.scss";
 @import "./separator/style.scss";

test/integration/fixtures/blocks/core__read-more.html

@@ -0,0 +1 @@
+<!-- wp:read-more /-->

test/integration/fixtures/blocks/core__read-more.json

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

test/integration/fixtures/blocks/core__read-more.parsed.json

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

test/integration/fixtures/blocks/core__read-more.serialized.html

@@ -0,0 +1 @@
+<!-- wp:read-more /-->