diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 34db859f71d1de..15b950c66e9a62 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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)) diff --git a/lib/blocks.php b/lib/blocks.php index c3fdb26700c58c..b0381162ad7d9d 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -31,6 +31,7 @@ function gutenberg_reregister_core_block_types() { 'more', 'nextpage', 'paragraph', + 'post-navigation', 'preformatted', 'pullquote', 'quote', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 56365c87a268fd..d66b689235526d 100644 --- a/packages/block-library/src/index.js +++ b/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, diff --git a/packages/block-library/src/post-navigation/block.json b/packages/block-library/src/post-navigation/block.json new file mode 100644 index 00000000000000..d93d931676290c --- /dev/null +++ b/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 + } + } + } +} diff --git a/packages/block-library/src/post-navigation/edit.js b/packages/block-library/src/post-navigation/edit.js new file mode 100644 index 00000000000000..774dfc838e6b73 --- /dev/null +++ b/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 ( + <> + + + setAttributes( { ariaLabel: newLabel } ) + } + /> + +