Chronicles of a build – qTranslate Headway Theme block 02

Following from a previous post I will be adding some options to a simple Headway block meant to show qTranslate plugin language selector on the page.
The code I’m starting the article from is on GitHub tagged 0.2.0.

A first layout option

qTranslate plugin allows the language selector to output in 4 display modes:

  • images
  • text
  • images and text
  • dropdown

The first three options will output an ul (unordered list) filled with li items while the last one will, instead, output a select element populated with option elements hence it makes sense giving the user the option to choose between vertical and horizontal layout in the first three cases.
A first implementation to allow the user of the block to select the layout mode is added in the BlockOptions

<?php
namespace qtblock;

class BlockOptions extends \HeadwayBlockOptionsAPI
{

    public $tabs = array(
        'settings' => 'Settings'
        );

    public $inputs = array(

        'settings' => array(
            'display-mode' => array(
                'type' => 'select',
                'name' => 'display-mode',
                'label' => 'Display mode',
                'default' => 'dropdown',
                'options' => array(
                    'image' => 'Images',
                    'text' => 'Text',
                    'both' => 'Images and text',
                    'dropdown' => 'Dropdown'
                    )
                ),
            'layout-mode' => array(
                'type' => 'select',
                'name' => 'layout-mode',
                'label' => 'Layout mode',
                'default' => 'dropdown',
                'options' => array(
                    'vertical' => 'Vertical',
                    'horizontal' => 'Horizontal'
                    )
                )
            )
        );
}

And consumed in the block dynamic_css method. Once again I’m using Headway Blocks API examples as a template and modifying to my needs

public function dynamic_css($block_id, $block, $original_block = null)
{
    $displayMode = \HeadwayBlocksData::get_block_setting($block, 'display-mode', 'dropdown');
    if ($displayMode == 'dropdown') {
        return;
    }
    $selector = '#block-' . $block_id;
    if (is_array($original_block)) {
        $block_id = $original_block['id'];
        $block = $original_block;
        $selector .= '.block-original-' . $block_id;
    }
    $layoutMode = \HeadwayBlocksData::get_block_setting($block, 'layout-mode', 'horizontal');
    $marginRight = '0.5rem';
    $marginBottom = '0.5rem';
    $out = '';
    if ($layoutMode == 'horizontal') {
        $out .= $selector . ' ul.qtrans_language_chooser > li {display:inline-block;';
        $out .= 'margin-right:' . $marginRight . ';';
        $out .= 'margin-bottom:' . $marginBottom . ';';
        $out .= '}';
    }
    return $out;
}

And here it’s used on the page

Spacing options
Spacing options

Play along

Headway will allow any block to have a title and a subtitle and since a user could be using those values it only makes sense to take those into account

Any block can have a title and subtitle
Any block can have a title and subtitle

Without any further intervention the default layout will be this one
A little cramped
A little cramped

I’m going to add one possible setting alone: the vertical spacing between qTranslate plugin output and the block title and subtitle. The actual code looks like

public function dynamic_css($block_id, $block, $original_block = null)
{
    $displayMode = \HeadwayBlocksData::get_block_setting($block, 'display-mode', 'dropdown');
    if ($displayMode == 'dropdown') {
        return;
    }
    $selector = '#block-' . $block_id;
    if (is_array($original_block)) {
        $block_id = $original_block['id'];
        $block = $original_block;
        $selector .= '.block-original-' . $block_id;
    }
    $layoutMode = \HeadwayBlocksData::get_block_setting($block, 'layout-mode', 'horizontal');
    $marginRight = \HeadwayBlocksData::get_block_setting($block, 'horizontal-spacing', '0.5rem');
    $marginBottom = \HeadwayBlocksData::get_block_setting($block, 'vertical-spacing', '0.5rem');
    $titleSpacing = \HeadwayBlocksData::get_block_setting($block, 'title-spacing', '0.5rem');
    $out = '';
    if ($layoutMode == 'horizontal') {
        $out .= $selector . ' ul.qtrans_language_chooser > li {display:inline-block;';
        $out .= 'margin-right:' . $marginRight . ';';
        $out .= 'margin-bottom:' . $marginBottom . ';';
        $out .= '}';
    }
    $selectorAndContent = $selector . '> .block-content';
    $out .= $selectorAndContent . ' > .block-title';
    $out .= ',' . $selectorAndContent . ' > .block-subtitle';
    $out .= ',' . $selectorAndContent . ' > hgroup';
    $out .= '{margin-bottom: ' . $titleSpacing . ';';
    $out .= '}';
    return $out;
}

My 5 cents on block options

I know it might sound apologetic but I think that adding too much options to blocks, while helping the code-phobic, is not the way to go.
Since blocks are adding CSS relevant to their instances in a function like dynamic_css outputting general-purpose CSS there will produce duplicated rules and/or wasted CPU time while Headway discards those duplicated rules not to print them on the page twice.
Hence I think specific-to-the-block only CSS rules have a place there and this means that those rules will target the block content very specifically and with an hefty weight.
The block above produces a rule like

#block-9 ul.qtrans_language_chooser > li {
display: inline-block;
margin-right: 1rem;
margin-bottom: 1rem;
}

which, due to an id selector, weighs a lot.
If I’m adding an option to style the font color (it’s an example) any one using the block will have to override that rule using styles that begin with

#block-9 ul.qtrans_language_chooser > li

And now think about a block that’s used 6 times on a layout: long, gnarly and un-maintainable stylesheets with 6 very specific rules doing the same thing. It’s against the stylesheet purpose.

Code on GitHub

The final code is on GitHub

I appreciate your input