diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 66f713b3aa40fc..ce666fbb4b9d9e 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index 5f1b295119822a..573320ed2c2251 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/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" } diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js index e27d094feb79ab..dd3cc0027aa8fb 100644 --- a/packages/block-library/src/post-navigation-link/edit.js +++ b/packages/block-library/src/post-navigation-link/edit.js @@ -19,6 +19,8 @@ import { BlockControls, AlignmentToolbar, useBlockProps, + __experimentalUseBorderProps as useBorderProps, + __experimentalGetSpacingClassesAndStyles as useSpacingProps, } from '@wordpress/block-editor'; import { __, _x } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; @@ -26,20 +28,18 @@ 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( { } } /> -
+
{ ! isNext && displayArrow && ( $classes, - ) - ); + // Set default values. $format = '%link'; $link = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' ); @@ -116,6 +112,17 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $content = $get_link_function( $format, $link ); } + $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' => ! empty( $content ) && $support_styles['style'] ? $support_styles['style'] : '', + ) + ); + return sprintf( '
%2$s
', $wrapper_attributes, @@ -123,6 +130,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. * diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss index 0f6a9fd3062b81..f22d12a69be6cc 100644 --- a/packages/block-library/src/post-navigation-link/style.scss +++ b/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;