Backstretch Headway block – 03

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.

Allow the user to set a body background color
Allow the user to set a body background color

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.

Here theme developer allows
Here theme developer allows

Here theme user can set
Here theme user can set

It's up to the theme developer
It’s up to the theme developer

No color picker for theme user here
No color picker for theme user here

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

No more color picker here
No more color picker here

No image selector too
No image selector too

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.

Visual feedback
Visual feedback

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.

I appreciate your input