Add arrows to post navigation link (#40684)

* Add arrows to post navigation link
WordPress · Sep 14, 2022 · e21026b · e21026b
1 parent 5cbfe81
commit e21026b
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 6 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -555,7 +555,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), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** label, linkLabel, showTitle, textAlign, type
+-	**Attributes:** arrow, label, linkLabel, showTitle, 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
@@ -24,6 +24,10 @@
 		"linkLabel": {
 			"type": "boolean",
 			"default": false
+		},
+		"arrow": {
+			"type": "string",
+			"default": "none"
 		}
 	},
 	"supports": {
@@ -45,5 +49,6 @@
 				"fontSize": true
 			}
 		}
-	}
+	},
+	"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
@@ -6,23 +6,36 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToggleControl,
+	PanelBody,
+} from '@wordpress/components';
 import {
 	InspectorControls,
 	RichText,
 	BlockControls,
 	AlignmentToolbar,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 export default function PostNavigationLinkEdit( {
-	attributes: { type, label, showTitle, textAlign, linkLabel },
+	attributes: { type, label, showTitle, textAlign, linkLabel, arrow },
 	setAttributes,
 } ) {
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
+	const arrowMap = {
+		none: '',
+		arrow: isNext ? '→' : '←',
+		chevron: isNext ? '»' : '«',
+	};
+
+	const displayArrow = arrowMap[ arrow ];
+
 	if ( showTitle ) {
 		/* translators: Label before for next and previous post. There is a space after the colon. */
 		placeholder = isNext ? __( 'Next: ' ) : __( 'Previous: ' );
@@ -63,6 +76,39 @@ export default function PostNavigationLinkEdit( {
 							}
 						/>
 					) }
+					<ToggleGroupControl
+						label={ __( 'Arrow' ) }
+						value={ arrow }
+						onChange={ ( value ) => {
+							setAttributes( { arrow: value } );
+						} }
+						help={ __(
+							'A decorative arrow for the next and previous link.'
+						) }
+						isBlock
+					>
+						<ToggleGroupControlOption
+							value="none"
+							label={ _x(
+								'None',
+								'Arrow option for Next/Previous link'
+							) }
+						/>
+						<ToggleGroupControlOption
+							value="arrow"
+							label={ _x(
+								'Arrow',
+								'Arrow option for Next/Previous link'
+							) }
+						/>
+						<ToggleGroupControlOption
+							value="chevron"
+							label={ _x(
+								'Chevron',
+								'Arrow option for Next/Previous link'
+							) }
+						/>
+					</ToggleGroupControl>
 				</PanelBody>
 			</InspectorControls>
 			<BlockControls>
@@ -74,6 +120,13 @@ export default function PostNavigationLinkEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
+				{ ! isNext && displayArrow && (
+					<span
+						className={ `wp-block-post-navigation-link__arrow-previous is-arrow-${ arrow }` }
+					>
+						{ displayArrow }
+					</span>
+				) }
 				<RichText
 					tagName="a"
 					aria-label={ ariaLabel }
@@ -92,6 +145,14 @@ export default function PostNavigationLinkEdit( {
 						{ __( 'An example title' ) }
 					</a>
 				) }
+				{ isNext && displayArrow && (
+					<span
+						className={ `wp-block-post-navigation-link__arrow-next is-arrow-${ arrow }` }
+						aria-hidden={ true }
+					>
+						{ displayArrow }
+					</span>
+				) }
 			</div>
 		</>
 	);

diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php
@@ -34,6 +34,18 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );
 	$label  = '';
 
+	$arrow_map = array(
+		'none'    => '',
+		'arrow'   => array(
+			'next'     => '→',
+			'previous' => '←',
+		),
+		'chevron' => array(
+			'next'     => '»',
+			'previous' => '«',
+		),
+	);
+
 	// If a custom label is provided, make this a link.
 	// `$label` is used to prepend the provided label, if we want to show the page title as well.
 	if ( isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ) {
@@ -71,6 +83,17 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 		}
 	}
 
+	// Display arrows.
+	if ( isset( $attributes['arrow'] ) && ! empty( $attributes['arrow'] ) && 'none' !== $attributes['arrow'] ) {
+		$arrow = $arrow_map[ $attributes['arrow'] ][ $navigation_type ];
+
+		if ( 'next' === $navigation_type ) {
+			$format = '%link <span class="wp-block-post-navigation-link__arrow-next is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span>';
+		} else {
+			$format = '<span class="wp-block-post-navigation-link__arrow-previous is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span> %link';
+		}
+	}
+
 	// The dynamic portion of the function name, `$navigation_type`,
 	// refers to the type of adjacency, 'next' or 'previous'.
 	$get_link_function = "get_{$navigation_type}_post_link";

diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss
@@ -0,0 +1,23 @@
+.wp-block-post-navigation-link {
+
+	.wp-block-post-navigation-link__arrow-previous {
+		display: inline-block;
+		margin-right: 1ch;
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+	.wp-block-post-navigation-link__arrow-next {
+		display: inline-block;
+		margin-left: 1ch;
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -30,6 +30,7 @@
 @import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
+@import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";

diff --git a/test/integration/fixtures/blocks/core__post-navigation-link.json b/test/integration/fixtures/blocks/core__post-navigation-link.json
@@ -5,7 +5,8 @@
 		"attributes": {
 			"type": "next",
 			"showTitle": false,
-			"linkLabel": false
+			"linkLabel": false,
+			"arrow": "none"
 		},
 		"innerBlocks": []
 	}