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:
- enqueuing Sticky-kit script when the block is loaded
- 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[/caption] [caption id=“attachment_640” align=“aligncenter” width=“1024”] 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[/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[/caption] [caption id=“attachment_644” align=“aligncenter” width=“1024”] It looks the same[/caption]