From 7973f7f03807b199d3d889c8bb6fae799a658312 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 9 Jan 2024 09:24:42 +0100 Subject: [PATCH 1/7] Add post navigation block --- docs/reference-guides/core-blocks.md | 9 ++++ lib/blocks.php | 1 + packages/block-library/src/index.js | 2 + .../src/post-navigation/block.json | 44 +++++++++++++++++++ .../block-library/src/post-navigation/edit.js | 30 +++++++++++++ .../src/post-navigation/index.js | 23 ++++++++++ .../block-library/src/post-navigation/init.js | 6 +++ .../block-library/src/post-navigation/save.js | 12 +++++ .../blocks/core__post-navigation.html | 6 +++ .../blocks/core__post-navigation.json | 31 +++++++++++++ .../blocks/core__post-navigation.parsed.json | 32 ++++++++++++++ .../core__post-navigation.serialized.html | 5 +++ 12 files changed, 201 insertions(+) create mode 100644 packages/block-library/src/post-navigation/block.json create mode 100644 packages/block-library/src/post-navigation/edit.js create mode 100644 packages/block-library/src/post-navigation/index.js create mode 100644 packages/block-library/src/post-navigation/init.js create mode 100644 packages/block-library/src/post-navigation/save.js create mode 100644 test/integration/fixtures/blocks/core__post-navigation.html create mode 100644 test/integration/fixtures/blocks/core__post-navigation.json create mode 100644 test/integration/fixtures/blocks/core__post-navigation.parsed.json create mode 100644 test/integration/fixtures/blocks/core__post-navigation.serialized.html diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index c05cdd3eb009b..721205f291074 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -632,6 +632,15 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber - **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), 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~~), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** + ## 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 d5283afeb7f99..5c168a985b1fc 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -33,6 +33,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 e2e0fd9e414ef..e41be3df18631 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 0000000000000..974459f1015a2 --- /dev/null +++ b/packages/block-library/src/post-navigation/block.json @@ -0,0 +1,44 @@ +{ + "$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", + "supports": { + "align": true, + "ariaLabel": true, + "html": false, + "color": { + "gradients": true, + "link": true, + "__experimentalDefaultControls": { + "background": true, + "text": true, + "link": true + } + }, + "layout": { + "allowSwitching": false, + "allowInheriting": false, + "default": { + "type": "flex", + "justifyContent": "space-between" + } + }, + "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 0000000000000..2cf143fb994bb --- /dev/null +++ b/packages/block-library/src/post-navigation/edit.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; + +/** + * 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( attributes ) { + const blockProps = useBlockProps(); + + const innerBlocksProps = useInnerBlocksProps( blockProps, { + template: TEMPLATE, + allowedBlocks: ALLOWED_BLOCKS, + templateLock: 'all', + orientation: attributes.layout?.orientation ?? 'horizontal', + } ); + return ( + <> +