Custom Blade Directives in Laravel

Blade Directives provides a convenient and clean way to display data in View. There are various Blade Directives available like @if, @for, @foreach, while which have similar syntax as their PHP Counterparts. Also, we have slightly more robust Directives like @auth, @guest etc.

It is entirely possible to create your own Custom Directives as well. Suppose you want to display the Date in a particular format through-out your App. You can easily do so using a Custom Blade Directive.

You need to register all your Custom Blade Directives boot method of the AppServiceProvider. We can call the directive method of the Blade. First parameter is the name of the Directive. This should be unique. And Second would be a callback with the parameter and we would return PHP expression which will format the parameter.

Blade::directive(‘datetime’, function ($expression) {
    return “<?php echo ($expression)->format(‘jS M, Y’); ?>”;
});

Now, within our View we can simply use this Directive as below

@directive($post->created_at)

The parameter $post_created_at will be available as $expression and then we are simply returning a particular Format. This way if we need to change the Format, we only need to make change in our directive.

We can even use other Classes like Str in our Directive. Take the following example:

Blade::directive(‘padLeft’, function ($expression) {
    return “<?php echo Str::of($expression)->padLeft(10, ‘-’) ?>”;
});

This is using Str Class and we are using its padLeft Method which will pad the Left of the String with ‘-’ if its length is less than 10. We can use this Directive as below:

@padLeft($post->type)

Another cool feature while creating Custom Blade Directive is to create a Directive using Blade::if. Lets say we create a PaidSubscriber Blade Directive like below

Blade::if(‘PaidSubscriber’, function () {
   //Some Logic which returns boolean
});

Now we can use this Directive like below to display content to user based on the Value returned by Directive.

@PaidSubscriber
      Display Paid Content Here.
@else
      Subscribe to our Plans to access Paid Content.        
@endPaidSubscriber

We can perform more complex check like accessing the Logged in User inside our Directive.

Blade::if(‘PaidSubscriber’, function () {
    if ($user = auth()->user()) { //If Logged In
        if ($user->subscriber == 1) { //If Subscriber.
            return true;
        }
    }
    return false;
});

Now, if you have a lot of Custom Directives, your AppServiceProvider could become unnecessarily large. You could easily extract all your Custom Directives into a Trait. We will extract our Directives in a Trait at App\Http\Traits\BladeDirectives.php

<?php
namespace App\Http\Traits;
use Illuminate\Support\Facades\Blade;
trait BladeDirectives
{
    public function setupCustomDirectives()
    {
        Blade::directive('datetime', function ($expression) {
            return "<?php echo ($expression)->format('jS M, Y'); ?>";
        });
        Blade::directive('padL', function ($expression) {
            return "<?php echo Str::of($expression)->padLeft(10, '-') ?>";
        });
        Blade::if('PaidSubscriber', function () {
            if ($user = auth()->user()) {
                if ($user->subscriber == 2) {
                    return true;
                }
            }
            return false;
        });
    }
}

You can of course create a different method for each Blade Directive to improve the Readability further. Then inside our Service Provider, we just need to include this Trait and call the setupCustomDirectives() inside our boot method like below

use App\Http\Traits\BladeDirectives;
class AppServiceProvider extends ServiceProvider
{
    .
    .
    .
    public function boot()
    {
        //
        $this->setupCustomDirectives();
    }
}

Blade Directives are a great way to remove complexity from your Views and refine your Logic. Anytime you find yourself writing complex or repetitive code you should consider extracting the code to Blade Directive.