Post Navigation Link: Add border and spacing block support

docs/reference-guides/core-blocks.md

@@ -651,7 +651,7 @@ Displays the next or previous post link that is adjacent to the current post. ([
 
 -	**Name:** core/post-navigation-link
 -	**Category:** theme
--	**Supports:** color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** arrow, label, linkLabel, showTitle, taxonomy, textAlign, type
 
 ## Post Template

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

@@ -63,7 +63,27 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"spacing": {
+			"__experimentalSkipSerialization": true,
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"__experimentalBorder": {
+			"__experimentalSkipSerialization": true,
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-post-navigation-link:not(:empty)",
+		"spacing": ".wp-block-post-navigation-link:not(:empty)"
+	},
 	"style": "wp-block-post-navigation-link"
 }

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

@@ -19,27 +19,27 @@ import {
 	BlockControls,
 	AlignmentToolbar,
 	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function PostNavigationLinkEdit( {
 	context: { postType },
-	attributes: {
-		type,
-		label,
-		showTitle,
-		textAlign,
-		linkLabel,
-		arrow,
-		taxonomy,
-	},
+	attributes,
 	setAttributes,
 } ) {
+	const { type, label, showTitle, textAlign, linkLabel, arrow, taxonomy } =
+		attributes;
+
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
+	const borderProps = useBorderProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+
 	const arrowMap = {
 		none: '',
 		arrow: isNext ? '→' : '←',
@@ -184,7 +184,14 @@ export default function PostNavigationLinkEdit( {
 					} }
 				/>
 			</BlockControls>
-			<div { ...blockProps }>
+			<div
+				{ ...blockProps }
+				style={ {
+					...blockProps.style,
+					...borderProps.style,
+					...spacingProps.style,
+				} }
+			>
 				{ ! isNext && displayArrow && (
 					<span
 						className={ `wp-block-post-navigation-link__arrow-previous is-arrow-${ arrow }` }

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

@@ -30,9 +30,15 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= " has-text-align-{$attributes['textAlign']}";
 	}
+
+	$support_styles = block_core_post_navigation_link_get_border_and_spacing_attributes( $attributes );
+	$classes       .= ! empty( $support_styles['class'] ) ? " {$support_styles['class']}" : '';
+
+	// Get the wrapper attributes.
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'class' => $classes,
+			'style' => $support_styles['style'],
 		)
 	);
 	// Set default values.
@@ -123,6 +129,80 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	);
 }
 
+/**
+ * Generates class names and styles to apply the border and spacing support styles for
+ * the Post Navigation Link block.
+ *
+ * @since 6.7.0
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border and spacing related classnames and styles for the block.
+ */
+function block_core_post_navigation_link_get_border_and_spacing_attributes( $attributes ) {
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	// Individual padding styles e.g. top, left etc.
+	$padding_style = array();
+	foreach ( $sides as $side ) {
+		$padding_style[ $side ] = $attributes['style']['spacing']['padding'][ $side ] ?? null;
+	}
+
+	// Individual margin styles e.g. top, left etc.
+	$margin_style = array();
+	foreach ( $sides as $side ) {
+		$margin_style[ $side ] = $attributes['style']['spacing']['margin'][ $side ] ?? null;
+	}
+
+	$styles     = wp_style_engine_get_styles(
+		array(
+			'border'  => $border_styles,
+			'spacing' => array(
+				'padding' => $padding_style,
+				'margin'  => $margin_style,
+			),
+		)
+	);
+	$attributes = array();
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+	return $attributes;
+}
+
 /**
  * Registers the `core/post-navigation-link` block on the server.
  *

packages/block-library/src/post-navigation-link/style.scss

@@ -1,4 +1,6 @@
 .wp-block-post-navigation-link {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	.wp-block-post-navigation-link__arrow-previous {
 		display: inline-block;