From a02df3ffd42b51fbd91293ab79fb43dfb5afe076 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 5 Aug 2024 19:24:11 +0530 Subject: [PATCH 01/13] Add border support to post mavigation block --- .../src/post-navigation-link/block.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index ce733759846fee..39722365999816 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -57,6 +57,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "style": "wp-block-post-navigation-link" From f3315384cdb55ef78dfd6853b109754f07d9e0d2 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 5 Aug 2024 19:25:13 +0530 Subject: [PATCH 02/13] Add box sizing style to post navigation link block --- packages/block-library/src/post-navigation-link/style.scss | 2 ++ 1 file changed, 2 insertions(+) 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; From e9fff19496106d7a25792e57c18d573d2e869229 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 7 Aug 2024 19:48:58 +0530 Subject: [PATCH 03/13] Return empty if the adjacent post is unavailable --- packages/block-library/src/post-navigation-link/index.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 8162b74d8af17f..b9e21e5eb0d348 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -116,6 +116,11 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $content = $get_link_function( $format, $link ); } + // Return If the adjacent post is unavailable. + if ( empty( $content ) ) { + return ''; + } + return sprintf( '
%2$s
', $wrapper_attributes, From 6baaa155b4a92c77c0aa1c830b5483f5fda13192 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 7 Aug 2024 19:55:27 +0530 Subject: [PATCH 04/13] Update comment text --- packages/block-library/src/post-navigation-link/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index b9e21e5eb0d348..0ea0a916e00e8b 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -116,7 +116,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $content = $get_link_function( $format, $link ); } - // Return If the adjacent post is unavailable. + // Return empty if the adjacent post is unavailable. if ( empty( $content ) ) { return ''; } From 700f22c3017a77eb770c941a87f27367210e40e0 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 9 Aug 2024 10:26:30 +0530 Subject: [PATCH 05/13] Add spacing support to post navigation link --- docs/reference-guides/core-blocks.md | 2 +- .../src/post-navigation-link/block.json | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 5beb712c80a113..e159e8763d5cc0 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 39722365999816..e19cbdb7ba6abf 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -58,17 +58,19 @@ "interactivity": { "clientNavigation": true }, + "spacing": { + "margin": true, + "padding": true, + "__experimentalDefaultControls": { + "margin": false, + "padding": false + } + }, "__experimentalBorder": { "radius": true, "color": true, "width": true, - "style": true, - "__experimentalDefaultControls": { - "radius": true, - "color": true, - "width": true, - "style": true - } + "style": true } }, "style": "wp-block-post-navigation-link" From 6aa39df21c8cd15a8f6ce3258129629edffb04bb Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 13 Aug 2024 22:33:15 +0530 Subject: [PATCH 06/13] Revert changes of render function --- packages/block-library/src/post-navigation-link/index.php | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 0ea0a916e00e8b..8162b74d8af17f 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -116,11 +116,6 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $content = $get_link_function( $format, $link ); } - // Return empty if the adjacent post is unavailable. - if ( empty( $content ) ) { - return ''; - } - return sprintf( '
%2$s
', $wrapper_attributes, From 0551091a686cbf046a5dcd3e23263f1ac067d0c5 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 14 Aug 2024 10:26:09 +0530 Subject: [PATCH 07/13] Add selectors for border and spacing support --- packages/block-library/src/post-navigation-link/block.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index e19cbdb7ba6abf..8a0390c5233ba6 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -71,6 +71,10 @@ "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" From c46823f50873e677a17428d45799c1531339966d Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 16 Aug 2024 18:53:52 +0530 Subject: [PATCH 08/13] Remove styles from empty post navigation link element --- .../block-library/src/post-navigation-link/block.json | 8 ++++---- packages/block-library/src/post-navigation-link/index.php | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index 8a0390c5233ba6..827bf02cd990af 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -71,11 +71,11 @@ "color": true, "width": true, "style": true - }, - "selectors": { - "border": ".wp-block-post-navigation-link:not(:empty)", - "spacing": ".wp-block-post-navigation-link:not(:empty)" } }, + "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/index.php b/packages/block-library/src/post-navigation-link/index.php index 8162b74d8af17f..3d9b06dc8f43e6 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -118,7 +118,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) { return sprintf( '
%2$s
', - $wrapper_attributes, + ! empty( $content ) ? $wrapper_attributes : "class=\"post-navigation-link {$classes}\"", $content ); } From 311f5d8e2b5292732036222d46d6c77dbe1cdb71 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 26 Sep 2024 19:02:21 +0530 Subject: [PATCH 09/13] Skip serialization of border and spacing support --- packages/block-library/src/post-navigation-link/block.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index 961d35cdafb9cf..573320ed2c2251 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -65,6 +65,7 @@ "clientNavigation": true }, "spacing": { + "__experimentalSkipSerialization": true, "margin": true, "padding": true, "__experimentalDefaultControls": { @@ -73,6 +74,7 @@ } }, "__experimentalBorder": { + "__experimentalSkipSerialization": true, "radius": true, "color": true, "width": true, From 6404d134b46603afe2cf379d8a12b03c80b85c7d Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 26 Sep 2024 19:02:52 +0530 Subject: [PATCH 10/13] Apply border and spacing support manully --- .../src/post-navigation-link/edit.js | 26 +++--- .../src/post-navigation-link/index.php | 82 ++++++++++++++++++- 2 files changed, 97 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js index e27d094feb79ab..8c795c2b0106b8 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,13 @@ export default function PostNavigationLinkEdit( { } } /> -
+
{ ! isNext && displayArrow && ( $classes, + 'style' => $support_styles['style'], ) ); // Set default values. @@ -118,11 +124,85 @@ function render_block_core_post_navigation_link( $attributes, $content ) { return sprintf( '
%2$s
', - ! empty( $content ) ? $wrapper_attributes : "class=\"post-navigation-link {$classes}\"", + $wrapper_attributes, $content ); } +/** + * Generates class names and styles to apply the border support styles for + * the Post Navigation Link block. + * + * @since 6.7.0 + * + * @param array $attributes The block attributes. + * @return array The border-related classnames and styles for the block. + */ +function get_block_core_post_navigation_link_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 padding 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. * From b0fdd00da73084b1237742f5c7dfdd9c73b86d30 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 26 Sep 2024 19:17:53 +0530 Subject: [PATCH 11/13] Update comment texts --- packages/block-library/src/post-navigation-link/edit.js | 1 + packages/block-library/src/post-navigation-link/index.php | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js index 8c795c2b0106b8..dd3cc0027aa8fb 100644 --- a/packages/block-library/src/post-navigation-link/edit.js +++ b/packages/block-library/src/post-navigation-link/edit.js @@ -187,6 +187,7 @@ export default function PostNavigationLinkEdit( {
Date: Thu, 26 Sep 2024 19:23:25 +0530 Subject: [PATCH 12/13] Fix coding standards --- packages/block-library/src/post-navigation-link/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 4b1845de0660cf..c332a22f7a0d27 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -31,8 +31,8 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $classes .= " has-text-align-{$attributes['textAlign']}"; } - $support_styles = get_block_core_post_navigation_link_border_and_spacing_attributes( $attributes ); - $classes .= ! empty( $support_styles['class'] ) ? " {$support_styles['class']}" : ''; + $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( @@ -138,7 +138,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) { * @param array $attributes The block attributes. * @return array The border and spacing related classnames and styles for the block. */ -function get_block_core_post_navigation_link_border_and_spacing_attributes( $attributes ) { +function block_core_post_navigation_link_get_border_and_spacing_attributes( $attributes ) { $border_styles = array(); $sides = array( 'top', 'right', 'bottom', 'left' ); From b027a57c9bbea4b9d046befdc6533e84020c43ee Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 3 Oct 2024 12:18:49 +0530 Subject: [PATCH 13/13] Fix inline support style issue --- .../src/post-navigation-link/index.php | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index c332a22f7a0d27..ab4df800a6d99d 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -31,16 +31,6 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $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. $format = '%link'; $link = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' ); @@ -122,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,