Add a "separator" attribute to post-terms block (#32812)

* Add a "separator" attribute to post-terms * Change default from a pipe to a comma * fix defaults * Add separator class * update fixtures * change selector from sep to separator * Add styles * indentation fix * import style Co-authored-by: ntsekouras <ntsekouras@outlook.com>
WordPress · Jul 12, 2021 · 940c279 · 940c279
1 parent bf4f3ec
commit 940c279
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 22 deletions.
diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
@@ -11,6 +11,10 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"separator": {
+			"type": "string",
+			"default": ", "
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
@@ -24,5 +28,6 @@
 			"lineHeight": true,
 			"fontSize": true
 		}
-	}
+	},
+	"style": "wp-block-post-terms"
 }
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
@@ -8,11 +8,12 @@ import classnames from 'classnames';
  */
 import {
 	AlignmentToolbar,
+	InspectorAdvancedControls,
 	BlockControls,
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Spinner } from '@wordpress/components';
+import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -27,7 +28,7 @@ export default function PostTermsEdit( {
 	context,
 	setAttributes,
 } ) {
-	const { term, textAlign } = attributes;
+	const { term, textAlign, separator } = attributes;
 	const { postId, postType } = context;
 
 	const selectedTerm = useSelect(
@@ -78,6 +79,17 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
+			<InspectorAdvancedControls>
+				<TextControl
+					autoComplete="off"
+					label={ __( 'Separator' ) }
+					value={ separator || '' }
+					onChange={ ( nextValue ) => {
+						setAttributes( { separator: nextValue } );
+					} }
+					help={ __( 'Enter character(s) used to separate terms.' ) }
+				/>
+			</InspectorAdvancedControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
 				{ ! isLoading &&
@@ -92,7 +104,15 @@ export default function PostTermsEdit( {
 								{ postTerm.name }
 							</a>
 						) )
-						.reduce( ( prev, curr ) => [ prev, ' | ', curr ] ) }
+						.reduce( ( prev, curr ) => (
+							<>
+								{ prev }
+								<span className="wp-block-post-terms__separator">
+									{ separator || ' ' }
+								</span>
+								{ curr }
+							</>
+						) ) }
 				{ ! isLoading &&
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||

diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php
@@ -23,10 +23,7 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 	}
 
 	$post_terms = get_the_terms( $block->context['postId'], $attributes['term'] );
-	if ( is_wp_error( $post_terms ) ) {
-		return '';
-	}
-	if ( empty( $post_terms ) ) {
+	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
 		return '';
 	}
 
@@ -35,21 +32,16 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$classes .= ' has-text-align-' . $attributes['textAlign'];
 	}
 
-	$terms_links = '';
-	foreach ( $post_terms as $term ) {
-		$terms_links .= sprintf(
-			'<a href="%1$s">%2$s</a> | ',
-			get_term_link( $term->term_id ),
-			esc_html( $term->name )
-		);
-	}
-	$terms_links        = trim( $terms_links, ' | ' );
+	$separator = empty( $attributes['separator'] ) ? ' ' : $attributes['separator'];
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
-	return sprintf(
-		'<div %1$s>%2$s</div>',
-		$wrapper_attributes,
-		$terms_links
+	return get_the_term_list(
+		$block->context['postId'],
+		$attributes['term'],
+		"<div $wrapper_attributes>",
+		'<span class="wp-block-post-terms__separator">' . $separator . '</span>',
+		'</div>'
 	);
 }
 

diff --git a/packages/block-library/src/post-terms/style.scss b/packages/block-library/src/post-terms/style.scss
@@ -0,0 +1,3 @@
+.wp-block-post-terms__separator {
+	white-space: pre-wrap;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -31,6 +31,7 @@
 @import "./post-comments/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-excerpt/style.scss";
+@import "./post-terms/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";

diff --git a/packages/e2e-tests/fixtures/blocks/core__post-terms.json b/packages/e2e-tests/fixtures/blocks/core__post-terms.json
@@ -3,7 +3,9 @@
 		"clientId": "_clientId_0",
 		"name": "core/post-terms",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"separator": ", "
+		},
 		"innerBlocks": [],
 		"originalContent": ""
 	}