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 [caption id=“attachment_671” align=“aligncenter” width=“1024”] Spacing options[/caption]
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
[caption id=“attachment_672” align=“aligncenter” width=“1024”] Any block can have a title and subtitle[/caption] Without any further intervention the default layout will be this one [caption id=“attachment_673” align=“aligncenter” width=“538”] A little cramped[/caption] 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