diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json index 1f9f61738eb59..a79af6ef85539 100644 --- 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 index 15b981bf69af6..4a939e2af579c 100644 --- 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( { } } /> + + { + setAttributes( { separator: nextValue } ); + } } + help={ __( 'Enter character(s) used to separate terms.' ) } + /> +
{ isLoading && } { ! isLoading && @@ -92,7 +104,15 @@ export default function PostTermsEdit( { { postTerm.name } ) ) - .reduce( ( prev, curr ) => [ prev, ' | ', curr ] ) } + .reduce( ( prev, curr ) => ( + <> + { prev } + + { separator || ' ' } + + { 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 index 436611d756704..2573c4f0fba4b 100644 --- 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( - '%2$s | ', - 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( - '
%2$s
', - $wrapper_attributes, - $terms_links + return get_the_term_list( + $block->context['postId'], + $attributes['term'], + "
", + '' . $separator . '', + '
' ); } diff --git a/packages/block-library/src/post-terms/style.scss b/packages/block-library/src/post-terms/style.scss new file mode 100644 index 0000000000000..e447f1fd6b60d --- /dev/null +++ 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 index 92e10a3dee23a..c475eab47f5dc 100644 --- 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 index 18f7983b7b80a..34cd4804b0160 100644 --- 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": "" }