Better than yesterday.

Backstretch Headway block – 02

In the previous post about a Backstretch based Headway block plugin I’ve outlined theme user options and how those will be taken into account from a theme designer using the block settings supplied by the block/plugin developer; that role distinction is important and it’s, in my opinion, one of the main benefits of Headway.
I will be using my libraries to keep the code concise but those will always expose things with a pretty ablative name so comprehension should not be an issue.
The file structure and organization comes straight from a grunt Headway block template.

Setting up the theme user options

The theme user will be given the option to set one or more images as the body background or to, upon a theme developer decision, set a body background color.
Those controls will be added in the Main class of the block plugin adding a section to the Theme Customizer the same way any plugin would do

<?php
namespace htbackstretch;
use \tad\wrappers\ThemeCustomizeSection as Section;
use \tad\wrapers\headway\BlockSetting as Setting;
class Main
{
protected $section;
protected $blockSetting;
public function __construct()
{
add_action('after_setup_theme', array($this, 'blockRegister'));
add_action('init', array($this, 'extend_updater'));
// add the 'Background images' section
// options will be stored in the 'backstretch' option in an array format
// the namespace is used as the text domain
$this->themeSection = new Section('Background images', 'backstretch', 'What to use as site background?', __NAMESPACE__);
// add the multi-image control to allow the user to select one or more images
// defaults to no images
// will be stored in 'backstretch[imageSources]' option
$this->themeSection->addSetting('imageSources', 'Upload or select one or more images.', '', 'multi-image');
// load site-wide settings from the database
// using namespace as it's the same as the block id
$blockSettings = new \tad\wrappers\HeadwayBlockSetting(__NAMESPACE__);
// if no setting about the color picker is found or
// theme developer so did allow then show the color picker
// value will be stored in 'backstretch[bg-color]' option
$showColorPicker = $blockSettings->settings['bg-color-allow'];
if (is_null($showColorPicker) or (bool)$showColorPicker) {
$this->themeSection->addSetting('bg-color', 'Select a background color', '#FFF', 'color');
}
}
public function blockRegister()
{
if (!class_exists('Headway')) {
return;
}
return headway_register_block('\htbackstretch\Block', plugins_url(false, __FILE__));
}
}

Which, in turn, will show the controls in the theme customizer upon activationTheme user options

Implementing theme developer settings

It’s now time to add settings the theme developer can use to control what shows up in the theme customizer and how to use what the user did chose.
The settings will all apply to the entire theme and will hence be shown in a theme-wide setting panel.
To add the panel I will hook into the htbackstretch\Main::__construct method