When you add an additional nesting level, all categories, including child categories, are displayed on the categories page

Bug
5

What you’re looking for is decided based on a property called isGrandParent in the template here.

discourse/parent-category-row.hbs at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

When a category has grandchildren, we render the relevant markup for grandchild categories. Otherwise, we render the child categories.

The easiest way around this is to override that property in the parent-category-row ember component.

You can achieve that with the modifyClass plugin-api method.

Developer’s guide to Discourse Themes

modifyClass allows you to reopen the parent-category-row ember component class and add new methods.

To ensure those methods fire and the data is available, you’ll need to hook them to the didReceiveAttrs hook.

To do that, you can use the @on built-in decorator.

Once you have that all ready, you can simply override isGrandParent for all categories rendered via that component’s template and set them to false.

Here’s all of that put together

<script type="text/discourse-plugin" version="0.8">
  const { on } = require("discourse-common/utils/decorators");

  api.modifyClass("component:parent-category-row", {
    @on("didReceiveAttrs")
    removeGrandchildCategories() {
      this.category?.set("isGrandParent", false);
    }
  });
</script>

You add this to the header tab of your theme under common

This will cause the template to only render child categories and ignore grandchild categories.

You can use this same pattern to modify any property in any component.

2 Likes