Extending Headway standard block - part 2

3-minute read

This post follows along the line drawn by a previous post and chronicles my attempt at extending Headway Themes default navigation block to add a “sticky” factor.

The glue

I will use sticky-kit and it should be a twofold task of:

  1. enqueuing Sticky-kit script when the block is loaded
  2. targeting the navigation bar

All under the condition that I’ve decided the navigation bar to be sticky.

Enqueueing the script

Once downloaded and positioned in a suitable path I will be enqueing the script using Headway-provided enqueue_action method.
Since my block is not extending the HeadwayBlockAPI base class, but the HeadwayNavigationBlock one, simply overriding the method in my block code would remove the “magic” behind the original navigation block I want, instead, to keep. Copying and pasting the navigation block code is not an option and I’m once again copying the original method signature, calling the parent method and then adding my code.

public static function enqueue_action($block_id, $block, $original_block = null) {
    // call the parent block method
    parent::enqueue_action($block_id, $block, $original_block);
    // conditionally enqueue sticky-kit
    $shouldLoadSticky = false;
    $shouldLoadSticky = parent::get_setting($block, 'stickiness');
    if ($shouldLoadSticky) {
        // enqueue Sticky-kit script
        wp_enqueue_script( 'sitcky-kit', STICKYNAV_BLOCK_URL . 'assets/js/headway_sticky_navigation.min.js', array('jquery'));
    }
}

aside for the details about the file path (I’m using my grunt-init block template and grunt to compile my scripts and styles) I’m just enqueueing a script using the default WordPress function.

Targeting the navigation bar

Looking up Sticky-kit examples I will target the navigation block in a script printed to the page using the dynamic_js function; again I’m collecting output from parent::dynamic_js function and appending mine.

public static function dynamic_js($block_id, $block, $original_block = null)
{
    $out = '';
    // get parent original output
    $out .= parent::dynamic_js($block_id, $block, $original_block);
    // conditionally print the script to the page
    $shouldLoadSticky = false;
    $shouldLoadSticky = parent::get_setting($block, 'stickiness');
    if ($shouldLoadSticky) {
        // create the selector
        $selector = '#block-' . $block_id;
        // create the script
        $out .= 'jQuery(document).ready(function(){';
            $out .= 'jQuery("' . $selector . '").stick_in_parent({"parent": "body"});';
            $out .= '});';
    }
    // return script code
    return $out;
}

The script will be printed to the page and the stickiness activated.

But no style!

Comparing the default navigation block and the sticky one appearance clearly shows that some CSS code is not being applied to it
[caption id=“attachment_639” align=“aligncenter” width=“1024”]Headway original navigation block output Headway original navigation block output[/caption] [caption id=“attachment_640” align=“aligncenter” width=“1024”]Sticky navigation block crippled output Sticky navigation block crippled output[/caption] Headway Themes stylesheets and scripts will target block by their type using selectors like

block-type-navigation

where, due to me setting the $id to stickynav in my extending class

class Block extends \HeadwayNavigationBlock
{

public $id = 'stickynav';
...

the resulting block type is

block-type-stickynav

[caption id=“attachment_641” align=“aligncenter” width=“1024”]CSS sticky navigation selector CSS sticky navigation selector[/caption] Trying to mock the navigation block changing the id of the sticky one will yield very bad results confusing both the visual editor and the output; the shortest path, although not the one I like much, is to use the possibility to add custom CSS classes to blocks and adding

block-type-navigation

as a custom class to the sticky navigation one will fix the issues promptly. [caption id=“attachment_643” align=“aligncenter” width=“1024”]Adding the custom class Adding the custom class[/caption] [caption id=“attachment_644” align=“aligncenter” width=“1024”]It looks the same It looks the same[/caption]