Contextual components in PHP

Colloq's approach

In the article "Better Design System Component Semantics" Holger Bartel presents the technical approach of colloq.io to work with components/partials - but also to give them a semantic context.

He shows this with the example of a card component for conference speakers. This is output in at least two places:

a) In a list of multiple speakers
b) On a single speaker page

So we're dealing with a li element in case a), and e.g. a div element in case b). He solves this by using a partial function ($this->partial()) and passing the contextual data like this (for the sake of readability I changed his examples to PHP's short syntax for array and echo):

// View looping through a collection of speakers
<?= $this->partial('Components/SpeakerCard/Default', [
    'speaker' => $speaker, // The speaker data itself
    'element' => 'li' // Context li
]) ?>

// Partial file 'Components/SpeakerCard/Default'
<?php if ( !isset( $element ) ) $element = 'li'; ?>

<<?= $this->escape( $element ) ?> class="speaker-card">
    <p>SpeakerCard content here</p>
</<?= $this->escape( $element ) ?>>

Laravel Blade

If you are planning a similar approach in a Laravel app, the @include directive is available in the blade template system. Code above would look like this:

// View looping through a collection of speakers
@include('speaker.card', [
    'speaker' => $speaker,
    'element' => 'li'
])

// Partial file 'resources/views/speaker/card.blade.php'
// (example file name and path within resources/views)
<{{{ $element ?: 'div' }}} class="speaker-card">
    <p>SpeakerCard content here</p>
</{{{ $element ?: 'div' }}}>

ProcessWire's wireRenderFile()

My favorite CMS/F ProcessWire has the wireRenderFile() function (see introduction blog post). In ProcessWire you would solve the problem as follows:

// View looping through a collection of speakers
<?php echo wireRenderFile('partials/speaker/card',  [
    'speaker' => $speaker,
    'element => 'li'
]);

// Partial file 'site/templates/partials/speaker/card.php'
// (example file name and path within site/templates)
<<?= $element ?: 'div' ?> class="speaker-card">
    <p>SpeakerCard content here</p>
</<?= $element ?: 'div' ?>>
Read Next

Subscribe

If you want to stay in informed about updates on marcus.io and at my other projects, enter your email address below or or subscribe to the RSS feed