Block Variation Configurable

[nadar]

Some of the CMS blocks must have Variations in order to support multiple template schemas inside just one block.

Example:

The paragraph block (Text Block) can be used within different contexts:

context1:

<p>$content</p>

context2:

<div class="content">
    <p>$content</p>
</div>

So the user should have abilities to pick a variation for the matching use case.

Questions:
Should the block render different templates or just predefined configuration variables (like a preset value for $class)

[nadar]

Maybe a block can implement variations like this:

public function configurable()
{
    return [
        'class', 'otherVar',
    ]
}

inside the config:

'cms' => [
    'blockVariation' => [
        'theNameOfTheBlock' => [
            'green' => ['class' => 'text-green'],
            'red' => ['class' => 'text-red', 'otherVar' => 'this-and-that']
        ]
    ]
]

Now the provided red variation will define the defaultValue of $this->varValue('class') if the users has choosen red:

variation	method	output
none	$this->varValue('class')	null
green	$this->varValue('class')	text-green
red	$this->varValue('class')	text-red

[rolandschaub]

Maybe it makes sense to split the individual variables into multiple selects in the administration and configure them like this:

// In the block definition

public function configurable()
{
    return [
        'background-color', 'border-color',
    ]
}

// In the project config
'cms' => [
    'blocks' => [
        'textBlock' => [
            'background-color' => [
                ['value' => '#f00', 'label' => 'Red'],
                ['value' => '#ff0', 'label' => 'Yellow'],
            ],
            'border-color' => [
                ['value' => '#fff', 'label' => 'White'],
                ['value' => '#000', 'label' => 'Black'],
            ]
        ]
    ]
]

background-color and border-color would probably refer to vars or cfgs of the block?

[nadar]

so in your case background-color and border-color are cfgs/vars inside the config method?

like this:

public function config()
{
    return [
        'vars' => [
             ['var' => 'background-color', 'type' => 'zaa-text', 'label' => 'Color'],
       ]
    ];
}

[nadar]

I think the variation should contain the variables and not the other way around.

variation1 = ['var1' => 'this-value', 'var2' => 'other-value'];
variation2 = ['var1' => '....'],