Creating a comma separated list using a Taxonomy Terms or Repeater block

Tips
1

As we have used it multiple times in our projects and some people have enquired about it, I want to share a re-usable solution for creating a comma separated list of terms.

This will work well with either a Repeater or Taxonomy Terms block.

Pre-requisites: You will already have either added an ACF Repeater field or associated a taxonomy containing appropriate terms to the post type you want to display it for.

Steps:

  1. In your query or template, add a Repeater block or Taxonomy Terms block.
  2. With this block selected, add a global class to it called delimited-list
  3. With the delimited-list class selected, click on the Advanced tab and add the following to the SCSS field:
.globalclass>div, .globalclass>span {
  display: inline-block;
}
.globalclass>div>p::after, .globalclass>div>span::after {
  content: ",";
  display: inline-block;
  padding-right: 0.3rem;
}
.globalclass>div:last-child>p::after, .globalclass>div:last-child>span::after {
  content: ""; /* NOTE: If you want to end with a full stop change this to "." */
  padding-right: 0;
}
  1. Inside this block, add a Paragraph block and change it’s html tag to span
  2. Click the dynamic content button and choose Repeater or Taxonomy Query respectively then select the field you want to display - for repeater fields this will be the field name, for taxonomy terms, this will usually be “name”

You should now see a comma separated list of terms. This can be useful for things like blog post categories/tags/terms, lists of authors or any other field with multiple values.

Notes:

  1. You may want to add a bottom margin to the delimited-list class depending on your usage
  2. If you prefer, you can achieve the same end-result using relative styles instead of custom css

Hopefully this will save you some time in your projects.

2 Likes
2

Thanks dude, just used this.

1 Like