New block: Post navigation

docs/reference-guides/core-blocks.md

@@ -645,6 +645,15 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), filter (duotone), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
 -	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
 
+## Post Navigation
+
+Displays links to the next and previous post, when applicable. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-navigation))
+
+-	**Name:** core/post-navigation
+-	**Category:** theme
+-	**Supports:** align, ariaLabel, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** ariaLabel
+
 ## Post Navigation Link
 
 Displays the next or previous post link that is adjacent to the current post. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-navigation-link))

lib/blocks.php

@@ -31,6 +31,7 @@ function gutenberg_reregister_core_block_types() {
 				'more',
 				'nextpage',
 				'paragraph',
+				'post-navigation',
 				'preformatted',
 				'pullquote',
 				'quote',

packages/block-library/src/index.js

@@ -85,6 +85,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 postNavigation from './post-navigation';
 import * as postNavigationLink from './post-navigation-link';
 import * as postTemplate from './post-template';
 import * as postTerms from './post-terms';
@@ -203,6 +204,7 @@ const getAllBlocks = () => {
 		postCommentsLink,
 		postDate,
 		postTerms,
+		postNavigation,
 		postNavigationLink,
 		postTemplate,
 		postTimeToRead,

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

@@ -0,0 +1,74 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/post-navigation",
+	"title": "Post Navigation",
+	"category": "theme",
+	"description": "Displays links to the next and previous post, when applicable.",
+	"textdomain": "default",
+	"attributes": {
+		"ariaLabel": {
+			"type": "string",
+			"source": "attribute",
+			"selector": ".wp-block-post-navigation",
+			"attribute": "aria-label",
+			"default": "Posts"
+		}
+	},
+	"supports": {
+		"align": true,
+		"ariaLabel": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"html": false,
+		"layout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex",
+				"justifyContent": "space-between"
+			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"blockGap": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+const TEMPLATE = [
+	[ 'core/post-navigation-link', { type: 'previous' } ],
+	[ 'core/post-navigation-link' ],
+];
+
+const ALLOWED_BLOCKS = [ 'core/post-navigation-link' ];
+
+export default function PostNavigationEdit( { setAttributes, attributes } ) {
+	const { ariaLabel } = attributes;
+	const blockProps = useBlockProps();
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: ALLOWED_BLOCKS,
+	} );
+	return (
+		<>
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Navigation name' ) }
+					value={ ariaLabel || __( 'Posts' ) }
+					onChange={ ( newLabel ) =>
+						setAttributes( { ariaLabel: newLabel } )
+					}
+				/>
+			</InspectorControls>
+			<nav
+				className="wp-block-post-navigation"
+				aria-label={ ariaLabel || __( 'Posts' ) }
+				{ ...innerBlocksProps }
+			/>
+		</>
+	);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPagination as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/post-navigation/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/block-library/src/post-navigation/save.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<nav { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</nav>
+	);
+}

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

@@ -0,0 +1,6 @@
+<!-- wp:post-navigation -->
+<nav aria-label="Posts" class="wp-block-post-navigation">
+	<!-- wp:post-navigation-link {"type":"previous"} /-->
+	<!-- wp:post-navigation-link /-->
+</nav>
+<!-- /wp:post-navigation -->

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

@@ -0,0 +1,35 @@
+[
+	{
+		"name": "core/post-navigation",
+		"isValid": true,
+		"attributes": {
+			"ariaLabel": "Posts"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/post-navigation-link",
+				"isValid": true,
+				"attributes": {
+					"type": "previous",
+					"showTitle": false,
+					"linkLabel": false,
+					"arrow": "none",
+					"taxonomy": ""
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/post-navigation-link",
+				"isValid": true,
+				"attributes": {
+					"type": "next",
+					"showTitle": false,
+					"linkLabel": false,
+					"arrow": "none",
+					"taxonomy": ""
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]

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

@@ -0,0 +1,32 @@
+[
+	{
+		"blockName": "core/post-navigation",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/post-navigation-link",
+				"attrs": {
+					"type": "previous"
+				},
+				"innerBlocks": [],
+				"innerHTML": "",
+				"innerContent": []
+			},
+			{
+				"blockName": "core/post-navigation-link",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "",
+				"innerContent": []
+			}
+		],
+		"innerHTML": "\n<nav aria-label=\"Posts\" class=\"wp-block-post-navigation\">\n\t\n\t\n</nav>\n",
+		"innerContent": [
+			"\n<nav aria-label=\"Posts\" class=\"wp-block-post-navigation\">\n\t",
+			null,
+			"\n\t",
+			null,
+			"\n</nav>\n"
+		]
+	}
+]

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

@@ -0,0 +1,5 @@
+<!-- wp:post-navigation -->
+<nav aria-label="Posts" class="wp-block-post-navigation"><!-- wp:post-navigation-link {"type":"previous"} /-->
+
+<!-- wp:post-navigation-link /--></nav>
+<!-- /wp:post-navigation -->