Backstretch Headway block – 03

5-minute read

Proceeding on the road outlined in the previous post I will now use one of the settings the block gives a theme developer to limit the user options.

Using the first block setting

The setting is the one that will allow a theme user to set a background color as a fallback measure when no images are set to be used as the body background.

[caption id=“attachment_836” align=“aligncenter” width=“1024”]Allow the user to set a body background color Allow the user to set a body background color[/caption] This particular theme-wide setting will condition the presence of the color picker control and that decision will be made in the htbackstretch\Main class adding a control to the theme customizer the same way any plugin or theme would do.
I’m using here three of my wrapping classes to keep the code short: GlobalSettings, ThemeCustomizeSection and VEPanel.
The code for the htbackstretch\Main::__construct method, the one that gets called when the block plugin is loaded by WordPress alongside all the other plugins, is

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]'
    $this->themeSection->addSetting('imageSources', 'Upload or select one or more images.', '', 'multi-image');

    // load site-wide settings from the database passing a prefix to get this block
    // theme-wide settings only
    // see the htbackstretch\VisualEditorPanel class for the settings slugs
    $blockSettings = new Settings('htbackstretch-');

    // default behavior is to allow the user to set the bg color
    // access 'htbackstretch-no-image-selected' setting in camelBack
    $dbValue = $blockSettings->noImageSelected;
    is_null($dbValue) ? $this->showColorPicker = '0' : $this->showColorPicker = $dbValue;

    // please note: the first option in the select the theme developer
    // uses has the index 0 and that's the one reading
    // 'user can set a background color'
    if ($this->showColorPicker == '0') {

        // if the setting has not been set yet or the setting is
        // true then add the color picker to theme customizer controls
        // the set color will be stored in the 'backstretch[bg-color]' option
        $this->themeSection->addSetting('bg-color', 'Select a background color', '#FFF', 'color');
    }

    // register this block theme-wide settings
    $this->panel = new VEPanel(__NAMESPACE__ . '\VisualEditorPanel');
}

And the theme customizer will now hide or show (“add” and “do not add” actually) the color picker control depending on the theme developer chosen setting. [caption id=“attachment_837” align=“aligncenter” width=“1024”]Here theme developer allows Here theme developer allows[/caption] [caption id=“attachment_838” align=“aligncenter” width=“722”]Here theme user can set Here theme user can set[/caption] [caption id=“attachment_845” align=“aligncenter” width=“1024”]It’s up to the theme developer It’s up to the theme developer[/caption] [caption id=“attachment_839” align=“aligncenter” width=“716”]No color picker for theme user here No color picker for theme user here[/caption] The control allowing a user to select one or more images will, of course, always show.

On the road modification

While it makes sense for the block plugin to allow the theme designer to set the possibility for a user to set a body background color it really makes no sense setting a default body background color or image in the block visual editor panel: Headway offers that possibility already and hence I will remove that options entirely to avoid redundancy and confusion.
The revised version of the visual editor panel now looks like [caption id=“attachment_840” align=“aligncenter” width=“940”]No more color picker here No more color picker here[/caption]

[caption id=“attachment_847” align=“aligncenter” width=“916”]No image selector too No image selector too[/caption] and I’ve not done much but replace the color picker and image selection control with two simple notices.

Using the settings and the options

Incrementally building the plugin I won’t need to set anything if the theme designer decides to set himself a body background color or image but will instead need to override those styles if the theme user is allowed to and decides to set a body background color.
To do so I will:

  1. hook into the body_class filter to add the htbackstretch-color class among the body custom ones
  2. print a style targeting the body.htbackstretch-color element in a script printed to the page at wp_enqueue_scripts time

with respect to the conditional nature of the whole function I will call it maybePrintBodyStyle and will call it at the end of the htbackstretch\Main::__construct method like

    ...
    // register this block theme-wide settings
    $this->panel = new VEPanel(__NAMESPACE__ . '\VisualEditorPanel');
    // depending on the setting then print a style to the page
    $this->maybePrintBodyStyle();
}

protected function maybePrintBodyStyle()
{
    // if the theme user is not allowed to set a body background color return
    if ($this->showColorPicker != '0') {
        return;
    }
    // hook into the 'wp_enqueue_scripts' hook to print the style $tag = 'wp_enqueue_scripts';
    $function = function () {
        $class = 'htbackstretch-color';
        $color = \tad\wrappers\Option::on('backstretch')->bgColor;
        echo sprintf('<style>body.%s{background-color:%s;}</style>', $class, $color);
    };
    add_action($tag, $function);
    // hook into th body_class filter to add a class to the body
    $tag = 'body_class';
    $function = function ($classes) {
        $classes[] = 'htbackstretch-color';
        return $classes;
    };
    add_filter($tag, $function);
}

Since Headway will style the body background without resorting to any exotic mechanism the more specific rule of body.htbackstretch will successfully override the theme designer set background color allowing the theme user to preview his changes in the theme customizer. [caption id=“attachment_849” align=“aligncenter” width=“1024”]Visual feedback Visual feedback[/caption]

Next steps

I will take care of the other settings available to both the theme user and developer in the next posts, the whole final code shown here is on GitHub tagged 0.0.2.