[New block] Post Navigation Link

lib/blocks.php

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

packages/block-library/src/index.js

@@ -72,6 +72,7 @@ import * as queryPagination from './query-pagination';
 import * as queryPaginationNext from './query-pagination-next';
 import * as queryPaginationNumbers from './query-pagination-numbers';
 import * as queryPaginationPrevious from './query-pagination-previous';
+import * as postNavigationLink from './post-navigation-link';
 import * as postTitle from './post-title';
 import * as postContent from './post-content';
 import * as postAuthor from './post-author';
@@ -236,6 +237,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postFeaturedImage,
 								postHierarchicalTerms,
 								postTags,
+								postNavigationLink,
 						  ]
 						: [] ),
 				].forEach( registerBlock );

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

@@ -0,0 +1,25 @@
+{
+	"apiVersion": 2,
+	"name": "core/post-navigation-link",
+	"category": "design",
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
+		"type": {
+			"type": "string",
+			"default": "next"
+		},
+		"label": {
+			"type": "string"
+		},
+		"showTitle": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"reusable": false,
+		"html": false
+	}
+}

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

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	InspectorControls,
+	RichText,
+	BlockControls,
+	AlignmentToolbar,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function PostNavigationLinkEdit( {
+	attributes: { type, label, showTitle, textAlign },
+	setAttributes,
+} ) {
+	const isNext = type === 'next';
+	const placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
+	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody>
+					<ToggleControl
+						label={ __( 'Display the title as a link' ) }
+						help={ __(
+							'If you have entered a custom label, it will be prepended before the title.'
+						) }
+						checked={ !! showTitle }
+						onChange={ () =>
+							setAttributes( {
+								showTitle: ! showTitle,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				<RichText
+					tagName="a"
+					aria-label={ ariaLabel }
+					placeholder={ placeholder }
+					value={ label }
+					allowedFormats={ [ 'core/bold', 'core/italic' ] }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+					keepPlaceholderOnFocus
+				/>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import variations from './variations';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: _x(
+		'Post Navigation Link',
+		'name of the block that displays the next or previous post link that is adjacent to the current post'
+	),
+	description: __(
+		'Displays the next or previous post link that is adjacent to the current post.'
+	),
+	edit,
+	variations,
+};

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

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-navigation-link` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-navigation-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 next or previous post link that is adjacent to the current post.
+ */
+function render_block_core_post_navigation_link( $attributes, $content, $block ) {
+	if ( ! is_singular() ) {
+		return '';
+	}
+
+	// Get the nagigation type to show the proper link. Available options are `next|previous`.
+	$navigation_type = isset( $attributes['type'] ) ? $attributes['type'] : 'next';
+	// Allow only `next` and `previous` in `$navigation_type`.
+	if ( ! in_array( $navigation_type, array( 'next', 'previous' ), true ) ) {
+		return '';
+	}
+	$classes = "post-navigation-link-$navigation_type";
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= " has-text-align-{$attributes['textAlign']}";
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	// Set default values.
+	$format = '%link';
+	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link', 'gutenberg' ) : _x( 'Previous', 'label for previous post link', 'gutenberg' );
+	$label  = '';
+	// If a custom label is provided, make this a link.
+	// `$label` is used to prepend the provided label, if we want to show the page title as well.
+	if ( isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ) {
+		$label = "{$attributes['label']}";
+		$link  = $label;
+	}
+
+	// If we want to also show the page title, make the page title a link and prepend the label.
+	if ( isset( $attributes['showTitle'] ) && $attributes['showTitle'] ) {
+		if ( $label ) {
+			$format = "$label %link";
+		}
+		$link = '%title';
+	}
+	// The dynamic portion of the function name, `$navigation_type`,
+	// refers to the type of adjacency, 'next' or 'previous'.
+	$get_link_function = "get_{$navigation_type}_post_link";
+	$content           = $get_link_function( $format, $link );
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+/**
+ * Registers the `core/post-navigation-link` block on the server.
+ */
+function register_block_core_post_navigation_link() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-navigation-link',
+		array(
+			'render_callback' => 'render_block_core_post_navigation_link',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_navigation_link' );

packages/block-library/src/post-navigation-link/variations.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
+
+const variations = [
+	{
+		isDefault: true,
+		name: 'post-next',
+		title: __( 'Next post' ),
+		description: __(
+			'Displays the post link that follows the current post.'
+		),
+		icon: next,
+		attributes: { type: 'next' },
+		scope: [ 'inserter', 'transform' ],
+	},
+	{
+		name: 'post-previous',
+		title: __( 'Previous post' ),
+		description: __(
+			'Displays the post link that precedes the current post.'
+		),
+		icon: previous,
+		attributes: { type: 'previous' },
+		scope: [ 'inserter', 'transform' ],
+	},
+];
+
+/**
+ * Add `isActive` function to all `post-navigation-link` variations, if not defined.
+ * `isActive` function is used to find a variation match from a created
+ *  Block by providing its attributes.
+ */
+variations.forEach( ( variation ) => {
+	if ( variation.isActive ) return;
+	variation.isActive = ( blockAttributes, variationAttributes ) =>
+		blockAttributes.type === variationAttributes.type;
+} );
+
+export default variations;

packages/e2e-tests/fixtures/blocks/core__post-navigation-link.html

@@ -0,0 +1 @@
+<!-- wp:post-navigation-link {"type":"next"} /-->

packages/e2e-tests/fixtures/blocks/core__post-navigation-link.json

@@ -0,0 +1,13 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/post-navigation-link",
+        "isValid": true,
+        "attributes": {
+            "type": "next",
+            "showTitle": false
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

packages/e2e-tests/fixtures/blocks/core__post-navigation-link.parsed.json

@@ -0,0 +1,20 @@
+[
+    {
+        "blockName": "core/post-navigation-link",
+        "attrs": {
+            "type": "next"
+        },
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__post-navigation-link.serialized.html

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

packages/icons/src/index.js

@@ -141,6 +141,8 @@ export { default as postExcerpt } from './library/post-excerpt';
 export { default as postFeaturedImage } from './library/post-featured-image';
 export { default as postList } from './library/post-list';
 export { default as postTitle } from './library/post-title';
+export { default as previous } from './library/previous';
+export { default as next } from './library/next';
 export { default as preformatted } from './library/preformatted';
 export { default as pullLeft } from './library/pull-left';
 export { default as pullRight } from './library/pull-right';

packages/icons/src/library/next.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const next = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M6.6 6L5.4 7l4.5 5-4.5 5 1.1 1 5.5-6-5.4-6zm6 0l-1.1 1 4.5 5-4.5 5 1.1 1 5.5-6-5.5-6z" />
+	</SVG>
+);
+
+export default next;

packages/icons/src/library/previous.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const previous = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M11.6 7l-1.1-1L5 12l5.5 6 1.1-1L7 12l4.6-5zm6 0l-1.1-1-5.5 6 5.5 6 1.1-1-4.6-5 4.6-5z" />
+	</SVG>
+);
+
+export default previous;