diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 735d75237618f9..48de4f311f4b0d 100644 --- 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 index c7e53bdce0af37..7b8d87fe26ad7a 100644 --- 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 index 6e2c8934194ac9..7d4eb2187cc973 100644 --- a/packages/block-library/src/post-navigation-link/edit.js +++ b/packages/block-library/src/post-navigation-link/edit.js @@ -6,7 +6,12 @@ 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, @@ -14,15 +19,23 @@ import { 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( { } /> ) } + { + setAttributes( { arrow: value } ); + } } + help={ __( + 'A decorative arrow for the next and previous link.' + ) } + isBlock + > + + + + @@ -74,6 +120,13 @@ export default function PostNavigationLinkEdit( { />
+ { ! isNext && displayArrow && ( + + { displayArrow } + + ) } ) } + { isNext && displayArrow && ( + + { displayArrow } + + ) }
); diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index b0677e4b3ebf31..cb1fe568bdf0e7 100644 --- 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 '; + } else { + $format = ' %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 new file mode 100644 index 00000000000000..7af462c3808193 --- /dev/null +++ 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 index 81ffa1784ff0aa..f553df10ea17c8 100644 --- 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 index c5620889735c38..9689f956f11509 100644 --- 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": [] }