Categories, Tags, and Custom Renders for Bricks

[mouse0270]

I was curious if you ever thought about adding or if the following features exists.

1. Categories, so we can group brinks into my specific groups that maybe have the ability to collapse or expand.
2. Tags [Array], so we can give bricks specific things to tell the system/user what this brick is used for (useful for the next idea)
3. the ability to tell the brick what html to render with other then using the default icon method.

Search would be useful to upate to be able to find bricks by category or tags.

The reason I ask, is I would like to be able to build a layout that looks something closer to the following

[mouse0270]

For the ability to define the html to render, it appears you can use the getIcon and set it as Htmlable and then return an html string, however, this does not seem to like if you return SVG's which makes sense. I was able to get it to display an image, but it still forces it to show the name of the brink along with forcing padding and other issues. I suspect I can solve most of that using CSS.

Looking at the source, there does not appear to be a way to provide a category, or tags to allow for better grouping or more diverse searches.

[awcodes]

What is the difference between a Category and a Tag in this context?

[mouse0270]

The way I am thinking about it is like this:

1. Category is the primary grouping used to organize blocks. They should be fairly generic.
2. Tags are additional keywords that help users discover blocks through search and can be an array of values.

So for example, I could make a brick that looks like this

class Hero extends Brick
{
    use ScopesUploadsToTenant;

    public static function getId(): string
    {
        return 'hero';
    }
    
    public static function getCategory(): string
    {
        return 'Content';
    }

    public static function getTags(): array
    {
        return [
            'hero',
            'banner',
            'header',
            'landing page',
            'marketing',
        ];
    }

    public static function getIcon(): Heroicon
    {
        return Heroicon::OutlinedSparkles;
    }

    public static function toHtml(array $config, ?array $data = null): ?string
    {
        return view('mason.hero', $config)->render();
    }

    public static function configureBrickAction(Action $action): Action
    {
        return $action
            ->slideOver()
            ->schema([ ... ]);
    }
}

This way if the user searches for things like marketing, hero, or banner, this brick will show up. Instead of specifically having to search for hero because thats the name.

[awcodes]

Ok. That makes sense. I'll see what I can do.

I think the 'Category' should be a separate component though instead of registered on the brick itself, that way bricks can belong to different categories on different editor instances.

Something like this when you register the bricks with the editor:

->bricks([
    BrickGroup::make('Content')
        ->bricks([
            Section::class,
            Grid::class,
        ]),
    LeadForm::class,
])

[mouse0270]

I mean, I am not against that. I just want a way to generally group bricks, since right now they are all kinda just thrown into a big list that you can sort of sort on by name, correct?

[awcodes]

Correct, it renders them in the order they are registered at the moment.

[mouse0270]

Also is it possible to do soemthing like this for rendering the brick icons:

@if (filled($brick::getIcon()) && $brick::getIcon() instanceof \Illuminate\Contracts\Support\Htmlable)
  {!! $brick::getIcon()->toHtml() !!}
@elseif (filled($brick::getIcon()))
  <x-filament::icon
    :icon="$brick::getIcon()"
    class="h-5 w-5 shrink-0"
  />
@endif

I was having an issue with the brick not rendering right with the html when passing it into the x-filamnet::icon however switching it to use use $brick::getIcon()->toHtml() seems to have resolved most of my rendering issues. Not sure what the downside to this would be if this was changed to do this.

[mouse0270]

Ignore this I guess... maybe I just had something wrong in my HTML, cause you're right, this totally works fine.

[awcodes]

works with images too. but yea, with a URL you would need to do some CSS make it look right and hide the label. I could probably wrap the label in a span to make it easier to target with CSS.

return 'https://domain.com/some-image.jpg;

[mouse0270]

Actually, better request, can you wrap the {{ $brick::getLabel() }} in span so you can easily target and style it? Right now there is no easy way to target it.

[awcodes]

See previous comment. LOL

[mouse0270]

Sorry, reading is clearly hard and I totally failed. haha

[awcodes]

Ok. Just released 3.0.5 with .mason-actions-brick-label so you can target it easier.

I've made notes to get the Category and Tags implemented. Will get to them as soon as I can.

Thanks for the feedback and suggestions.

[awcodes]

That was easier than I thought. V3.1.0 has BrickGroup and tagging. Cheers.🍻