From 2f88ee68393890bc10d5abcec9f330aa48efbc65 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Mon, 24 Feb 2020 09:51:31 -0800
Subject: [PATCH] Block Library: Add features to the Post Tags block.

---
 .../block-library/src/post-tags/block.json    | 14 ++++-
 packages/block-library/src/post-tags/edit.js  | 56 +++++++++++++++++--
 .../block-library/src/post-tags/index.php     | 44 +++++++++++++--
 3 files changed, 101 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/post-tags/block.json b/packages/block-library/src/post-tags/block.json
index 29db26b80c7679..b53434ef97c2b5 100644
--- a/packages/block-library/src/post-tags/block.json
+++ b/packages/block-library/src/post-tags/block.json
@@ -1,4 +1,16 @@
 {
 	"name": "core/post-tags",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"beforeText": {
+			"type": "string"
+		},
+		"separator": {
+			"type": "string",
+			"default": " | "
+		},
+		"afterText": {
+			"type": "string"
+		}
+	}
 }
diff --git a/packages/block-library/src/post-tags/edit.js b/packages/block-library/src/post-tags/edit.js
index 817ebf40579f8f..0dc3bdb5304401 100644
--- a/packages/block-library/src/post-tags/edit.js
+++ b/packages/block-library/src/post-tags/edit.js
@@ -4,8 +4,12 @@
 import { useEntityProp, useEntityId } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
 
-function PostTagsDisplay() {
+function PostTagsDisplay( {
+	attributes: { beforeText, separator, afterText },
+	setAttributes,
+} ) {
 	const [ tags ] = useEntityProp( 'postType', 'post', 'tags' );
 	const tagLinks = useSelect(
 		( select ) => {
@@ -28,15 +32,55 @@ function PostTagsDisplay() {
 	);
 	return (
 		tagLinks &&
-		( tagLinks.length === 0
-			? __( 'No tags.' )
-			: tagLinks.reduce( ( prev, curr ) => [ prev, ' | ', curr ] ) )
+		( tagLinks.length === 0 ? (
+			__( 'No tags.' )
+		) : (
+			<>
+				<RichText
+					tagName="span"
+					placeholder={ __( 'Before text.' ) }
+					keepPlaceholderOnFocus
+					value={ beforeText }
+					onChange={ ( newBeforeText ) =>
+						setAttributes( { beforeText: newBeforeText } )
+					}
+				/>{ ' ' }
+				{ tagLinks.reduce( ( prev, curr ) => [
+					prev,
+					<RichText
+						key={ prev + curr }
+						tagName="span"
+						placeholder={ __( ' | ' ) }
+						keepPlaceholderOnFocus
+						value={ separator }
+						onChange={ ( newSeparator ) =>
+							setAttributes( { separator: newSeparator } )
+						}
+					/>,
+					curr,
+				] ) }{ ' ' }
+				<RichText
+					tagName="span"
+					placeholder={ __( 'After text.' ) }
+					keepPlaceholderOnFocus
+					value={ afterText }
+					onChange={ ( newAfterText ) =>
+						setAttributes( { afterText: newAfterText } )
+					}
+				/>
+			</>
+		) )
 	);
 }
 
-export default function PostTagsEdit() {
+export default function PostTagsEdit( { attributes, setAttributes } ) {
 	if ( ! useEntityId( 'postType', 'post' ) ) {
 		return 'Post Tags Placeholder';
 	}
-	return <PostTagsDisplay />;
+	return (
+		<PostTagsDisplay
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+		/>
+	);
 }
diff --git a/packages/block-library/src/post-tags/index.php b/packages/block-library/src/post-tags/index.php
index 84a969dac7518e..b44c65488570e3 100644
--- a/packages/block-library/src/post-tags/index.php
+++ b/packages/block-library/src/post-tags/index.php
@@ -8,20 +8,40 @@
 /**
  * Renders the `core/post-tags` block on the server.
  *
+ * @param array $attributes The block attributes.
+ *
  * @return string Returns the filtered post tags for the current post wrapped inside "a" tags.
  */
-function render_block_core_post_tags() {
+function render_block_core_post_tags( $attributes ) {
 	$post = gutenberg_get_post_from_context();
 	if ( ! $post ) {
 		return '';
 	}
 	$post_tags = get_the_tags();
 	if ( ! empty( $post_tags ) ) {
-		$output = '';
-		foreach ( $post_tags as $tag ) {
-			$output .= '<a href="' . get_tag_link( $tag->term_id ) . '">' . $tag->name . '</a>' . ' | ';
-		}
-		return trim( $output, ' | ' );
+		$output = array_map(
+			function ( $tag ) {
+				return '<a href="' .
+				get_tag_link( $tag->term_id ) .
+				'">' .
+				$tag->name .
+				'</a>';
+			},
+			$post_tags
+		);
+		$output = join(
+			$attributes['separator'],
+			$output
+		);
+		return ( isset( $attributes['beforeText'] )
+			? ( $attributes['beforeText'] . ' ' )
+			: ''
+		) .
+		$output .
+		( isset( $attributes['afterText'] )
+			? ( ' ' . $attributes['afterText'] )
+			: ''
+		);
 	}
 }
 
@@ -32,6 +52,18 @@ function register_block_core_post_tags() {
 	register_block_type(
 		'core/post-tags',
 		array(
+			'attributes'      => array(
+				'beforeText' => array(
+					'type' => 'string',
+				),
+				'separator'  => array(
+					'type'    => 'string',
+					'default' => ' | ',
+				),
+				'afterText'  => array(
+					'type' => 'string',
+				),
+			),
 			'render_callback' => 'render_block_core_post_tags',
 		)
 	);