Bricks

Introduction

Bricks are the indivual building blocks used to define the content you wish to be customized and added by the back end user. In your Section php class you define which bricks should be available and in your Blade file for the section you get access to the hydrated brick (filled with data inputted by the back end user) that you can use to display the content in you markup.

Defining

You define your bricks inside the array in the bricks method of your Section class.

1use Helix\Lego\Bricks\Heading;
2 
3public function bricks()
4{
5    return [
6        'heading' => Heading::name('Heading'),
7    ];
8}

Most bricks have additional methods that can be chained on to set additional aspects of the brick. For example we can set a default element for the "Heading" brick and default content.

1'heading' => Heading::name('Heading')
2    ->defaultElement('h1')
3    ->default('This will be the default heading content when the back end user adds your section.'),

Available Chaining Methods

Every brick has a set of methods that availble on any brick regardsless of type. See the individual brick type for additional methods.

`default()`

This will set the default value of the brick.

1->default('This is the default value')

`help()`

Use this to provide the back end user with a string of text to help them understand what the brick will do.

1->help('Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled.'),

Accessing

Bricks can be accessed in two ways. Either via the public property of via the get() method.
The public property will give you access to JavaScript-friendly data types: string, int, array, boolean, OR one of the following PHP types: Stringable, Collection, DateTime, Model, EloquentCollection, whereas the get() method gives you access to super-charged "Hydrated Value Object" of your brick.
A good example of the power of the hydrated value obejct is the "Media" brick.

1'media' => Media::name('Media')->maxFiles(1),

Accessing this via the public property will give you the array of all the information about the media stored in the database, that you can use however you need.

 1{{ $media }}
 2 
 3// Gives you:
 4(
 5    [provider] => cloudinary
 6    [media] => Array (
 7        [0] => Array (
 8            [url] => http://res.cloudinary.com/helixsleep/video/upload/v1624296581/giphy_agj26f.mp4
 9            [tags] => Array ()
10            [type] => upload
11            [bytes] => 71194
12            [width] => 480
13            [format] => mp4
14            [height] => 384
15            [context] => Array (
16                [custom] => Array (
17                    [alt] => Deadpool on a rocket
18                    [loop] => true
19                    [muted] => true
20                    [caption] => Deadpool being Deadpool
21                    [autoplay] => true
22                )
23            )
24            [version] => 1624296581
25            [duration] => 0.92
26            [metadata] => Array ()
27            [public_id] => giphy_agj26f
28            [created_at] => 2021-06-21T17:29:41Z
29            [created_by] => Array (
30                    [id] => 256a9ea73d60d1f0768299bcc69d8f
31                    [type] => user
32                )
33            [secure_url] => https://res.cloudinary.com/helixsleep/video/upload/v1624296581/giphy_agj26f.mp4
34            [access_mode] => public
35            [uploaded_by] => Array (
36                [id] => 256a9ea73d60d1f0768299bcc69d8f
37                [type] => user
38            )
39            [resource_type] => video
40        )
41    )
42)

Yes, you could display the video by manually writing out the tag, but this is extremely error prone and also, what if it wasn't a video that was uploaded? Now you have to account for that too.

1<video alt="{{ $media['media'][0]['context']['custom']['alt'] }}">
2    <source src="{{ $media['media'][0]['secure_url'] }}" type="video/{{ $media['media'][0]['format'] }}">
3    Your browser does not support the video tag.
4</video>

But if we use the $this->get('media) method we can abstract a lot of that boilerplate code away to interact with it with ease.

1{!! $this->get('media')->first() !!}

And it will give you the exact same code as above, but if a picure was uploaded, it will use an <img> tag instead, even SVG it handles, and it can be expanded even further.

Besides being easier to interact with we can also chain additional methods to it. Let's say we want it to autoplay on page load. All we have to do is chain the ->autoplay() method.

1{!!
2    $this->get('media')->first()
3        ->autoplay()
4        ->muted()
5        ->loop()
6        ->showVideoControls()
7!!}

We now have a autoplaying, looping video with controls. It must be muted for it to be allowed to be autoplayed in most modern browsers.

1<video autoplay="" muted="" loop="" controls="" alt="Deadpool on a rocket">
2    <source src="https://res.cloudinary.com/helixsleep/video/upload/v1624296581/giphy_agj26f.mp4" type="video/mp4">
3    Your browser does not support the video tag.
4</video>

Notice we have to chain the ->first() method on the $this->get('media') as the "Media" brick gives you a collection of media.

Available Bricks

All Bricks extends the base Brick which provides a standard set of methods that all bricks should have access to, such as defining a help text and setting a default value.

Button
Checkbox
Editor
Group
Heading
Link
Media
Number
Repeater
Select
Text
Video

Button

Checkbox

Defining

Helix\Lego\Bricks\Checkbox::class

Method	Description	Argument type
`->default()`	Set the default value. `true` or `false`.	`bool`
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\CheckboxValueObject::class

Method	Description	Argument type
`->isChecked()`	Returns a `bool` whether it has been checked or not.	`null`
`->getValue()`	Returns the value. `bool`.	`null`

Editor

Defining

Helix\Lego\Bricks\Editor::class

Defining methods	Description	Argument type
`->default()`	Set the default value.	`string`
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\EditorValueObject::class

Group

Sometimes you want to group a set of bricks that are more closely related in the back end.

Defining

Helix\Lego\Bricks\Group::class

Method	Description	Argument type
`->bricks()`	Define the bricks that should be grouped together.	`array`

Example

1'testimonial' => Group::name('Testimonial')
2    ->bricks([
3        'author' => Text::name('Author'),
4        'quote' => Text::name('Quote'),
5        'image' => Media::name('Image'),
6    ])

Accessing

Helix\Lego\Bricks\ValueObjects\GroupValueObject::class

 1<blockquote>
 2    <div>
 3        <p class="text-base text-gray-500">
 4            {{ $testimonial->quote }} 
 5        </p>
 6    </div>
 7    <footer class="mt-3">
 8        <div class="flex items-center space-x-3">
 9            @if($testimonial->image->hasMedia())
10                <div class="flex-shrink-0">
11                    {!! $testimonial->image->first()->class('h-6 w-6 rounded-full') !!} 
12                </div>
13            @endif
14            <div class="text-base font-medium text-gray-700">
15                {{ $testimonial->author }} 
16            </div>
17        </div>
18    </footer>
19</blockquote>

Heading

Defining

Helix\Lego\Bricks\Heading::class

Method	Description	Argument type
`->default()`	Set the default value. `true` or `false`.	`bool`
`->defaultElement()`	Set the default element. `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `div`, `span`, `p`.	`string`
`->placeholder()`	Set the placeholder for the input field in the backend	`string`
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\HeadingValueObject::class

Method	Description	Argument type
`->getContent()`	Returns the content. `string`	`null`
`->getElement()`	Returns the element. `string`	`null`
`->getValue()`	Returns the value. `array`.	`null`

Link

Defining

Helix\Lego\Bricks\Link::class

Method	Description	Argument type
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\LinkValueObject::class

Method	Description	Argument type
`->getText()`	Returns the text of the link. `string`	`null`
`->getHref()`	Returns the URL. `string`	`null`
`->getTarget()`	Returns the target for where to open the hyperlink. `_blank` or `_self`	`null`
`->getA11yTitle()`	Returns the a11y title of the link. `string` Defaults to the "text" if not defined.	`null`
`->getValue()`	Returns the value. `array`.	`null`

Media

Defining

Helix\Lego\Bricks\Media::class

Method	Description	Argument type
`->allowMultiple()`	Allow multiple media files. Default: `true`	`bool`
`->maxFiles()`	Set number of max media files allowed to be selected.	`int`
`->help()`	Set the help text for the back end user.	`string`

1public function bricks()
2{
3    return [
4        'singleMediaCollection' => Media::name('media')->maxFiles(1)
5        'multipleMediaCollection' => Media::name('media')
6    ];
7}

Accessing

Helix\Lego\Bricks\ValueObjects\MediaValueObject::class

Method	Description	Argument type
`->getUrl()`	Returns src URL. `string`	`null`
`->getFormat()`	Returns the media format. `string`	`null`
`->getExtra()`	Returns an array of extra attributes. `array`	`null`
`->class()`	Sets CSS class on the HTML tag.	`string`
`->attribute()`	Set an attribute in form of a the "key" and "value". `string`.	`string`, `string`
`->attributes()`	Set multiple attributes.	`array`
`->showVideoControls()`	Show the video controls. (Is only applied if media is a video). Default: `true`	`bool`
`->loop()`	Loop the video. (Is only applied if media is a video). Default: `true`	`bool`
`->autoplay()`	Autoplay the video. (Is only applied if media is a video). Default: `true`	`bool`
`->muted()`	Mute the video. (Is only applied if media is a video). Default: `true`	`bool`
`->isVideoFormat()`	Check if the media is a video. `bool`	`null`

Examples

 1{!!
 2    $this->get('singleMediaCollection')
 3        ->first()
 4        ->class('object-cover lg:h-full lg:w-full')
 5        ->muted()
 6        ->autoplay()
 7        ->loop()
 8        ->showVideoControls()
 9        ->attribute('data-key', 'value')
10        ->attributes([
11            'data-key-1' => 'value 1',
12            'data-key-2' => 'value 2',
13        ])
14!!}

1<!-- Output -->
2<video muted="" autoplay="" loop="" controls="" data-key="value" data-key-1="value 1" data-key-2="value 2" class="object-cover lg:h-full lg:w-full">
3    <source src="https://res.cloudinary.com/helixsleep/video/upload/v1616002356/deadpool_byimju.mp4" type="video/mp4">
4    Your browser does not support the video tag.
5</video>

Number

Defining

Helix\Lego\Bricks\Number::class

Method	Description	Argument type
`->min()`	Set the lowest number allowed.	`int`
`->max()`	Set the highest number allowed.	`int`
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\NumberValueObject::class

Method	Description	Argument type
`->getValue()`	Returns the value. `int`.	`null`

Repeater

Repeaters can be used to allow the back end user to define how many iterations of a given set of bricks to be used.

Defining

Helix\Lego\Bricks\Repeater::class

Method	Description	Argument type
`->bricks()`	Define the bricks that should be repeated.	`array`

Example

1'testimonials' => Repeater::name('Testimonials')
2    ->bricks([
3        'author' => Text::name('Author'),
4        'quote' => Text::name('Quote'),
5        'image' => Media::name('Image'),
6    ])

Accessing

Helix\Lego\Bricks\ValueObjects\RepeaterValueObject::class

 1@foreach ($this->get('testimonials') as $testimonial) 
 2    <blockquote>
 3        <div>
 4            <p class="text-base text-gray-500">
 5                {{ $testimonial->quote }} 
 6            </p>
 7        </div>
 8        <footer class="mt-3">
 9            <div class="flex items-center space-x-3">
10                @if($testimonial->image->hasMedia())
11                    <div class="flex-shrink-0">
12                        {!! $testimonial->image->first()->class('h-6 w-6 rounded-full') !!} 
13                    </div>
14                @endif
15                <div class="text-base font-medium text-gray-700">
16                    {{ $testimonial->author }} 
17                </div>
18            </div>
19        </footer>
20    </blockquote>
21@endforeach

Select

Use the "Select" brick to display a dropdown input for the back end user to select from.

Defining

Helix\Lego\Bricks\Select::class

Method	Description	Argument type
`->options()`	Define the options that can be selected.	`array`
`->help()`	Set the help text for the back end user.	`string`

Example

1'superHero' => Select::name('Super Hero')
2    ->options([
3        'wonder_woman' => 'Wonder Woman',
4        'batman' => 'Batman',
5        'catwoman' => 'Catwoman',
6        'spider-man' => 'Spider-Man',
7        'deadpool' => 'Deadpool',
8    ])

Accessing

Helix\Lego\Bricks\ValueObjects\SelectValueObject::class

Method	Description	Argument type
`->getValue()`	Returns the selected value. `mixed`.	`null`
`->getKey()`	Returns the selected key. `mixed`.	`null`

1{{ $this->get('superHero')->getValue() // Deadpool }}
2{{ $this->get('superHero')->getKey() // deadpool }}

Text

Defining

Helix\Lego\Bricks\Text::class

Method	Description	Argument type
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\TextValueObject::class

Method	Description	Argument type
`->getValue()`	Returns the value. `string`.	`null`

Video (embedded)

Use the "Video" brick when you want to display an embedded video from either YouTube or Vimeo.
The back end user will have options to:

Allow fullscreen
Auto play
Loop
Show video controls
Show related videos after (YouTube only)
Start video at (YouTube only)

Defining

Helix\Lego\Bricks\Video::class

Method	Description	Argument type
`->defaultProvider()`	Set the default provider. `youtube` or `vimeo`.	`string`
`->defaultId()`	Set the default ID.	`string`
`->help()`	Set the help text for the back end user.	`string`

Accessing

Helix\Lego\Bricks\ValueObjects\VideoValueObject::class

Method	Description	Argument type
`->getId()`	Returns the embedded video's ID. `mixed`	`null`
`->getProvider()`	Returns the embedded video's provider. `string`	`null`
`->class()`	Sets CSS class on the HTML tag.	`string`

Examples

1{!! $this->get('video') !!}

1<iframe width="100%" height="100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=1&amp;start=1&amp;rel=1&amp;autoplay=1" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; autoplay; fullscreen" allowfullscreen=""></iframe>