here is my sample code to explain what I need.
// Ybox Modal Popup
add_filter( 'lazyblock/uni-ybox-link/frontend_callback', 'uni_ybox_output', 10, 2 );
if ( ! function_exists( 'uni_ybox_output' ) ) :
function uni_ybox_output( $output, $attributes ) {
ob_start(); ?>
<?php
wp_register_script('uniyboxjsfile', get_template_directory_uri() . '/js/yBox.min.js', array('unibs'), null, true);
wp_enqueue_script('uniyboxjsfile'); // Enqueue it!
wp_register_style('uniyboxstyle', get_template_directory_uri() . '/css/yBox.min.css', array('unibsstyle'), null, 'all');
wp_enqueue_style('uniyboxstyle'); // Enqueue it!
if ( ! function_exists( 'uniyboxscript' ) ) :
add_action( 'wp_footer', 'uniyboxscript', 30, 0 );
function uniyboxscript(){ ?>
<script>
// script for popup content and video
window.onload = function(){
if(document.querySelector('.yBox')){
var myYbox = new yBox();
myYbox.init();
};
}
</script>
<?php } endif; ?>
<a class="yBox <?php echo esc_html( $attributes['uni-ybox-linkclass'] ); ?>" <?php echo $attributes['uni-custom-attribute'] ; ?> href="<?php echo esc_url( $attributes['uni-ybox-link'] ); ?>">
<?php if ( $attributes['uni-icon-position'] == 'start' ) { if ( $attributes['uni-ybox-iconid'] ) { ?><span class="icon-cover"><svg class="icon left"><use xlink:href="#<?php echo esc_html( $attributes['uni-ybox-iconid'] ); ?>" /></svg></span><?php } } ?>
<?php if($attributes['uni-ybox-link-text']) { echo $attributes['uni-ybox-link-text']; } ?>
<?php if ( $attributes['uni-icon-position'] == 'end' ) { if ( $attributes['uni-ybox-iconid'] ) { ?><span class="icon-cover"><svg class="icon right"><use xlink:href="#<?php echo esc_html( $attributes['uni-ybox-iconid'] ); ?>" /></svg></span><?php } } ?>
<?php if($attributes['uni-ybox-thumbnail']){ ?>
<img class="img-fluid <?php echo esc_html( $attributes['uni-image-thumbnailclass'] ); ?>" src="<?php echo wp_get_attachment_url($attributes['uni-ybox-thumbnail']['id']); ?>"
<?php if($attributes['uni-thumbnail-custom-alt']){ ?>
alt="<?php echo $attributes['uni-thumbnail-custom-alt'] ; ?>"
<?php }
else{ ?>
<?php $image_alt = get_post_meta( $attributes['uni-ybox-thumbnail']['id'], '_wp_attachment_image_alt', true); ?>
alt="<?php echo $image_alt ; ?>"
<?php } ?>>
<?php } ?>
</a>
<?php
return ob_get_clean();
}
endif;
In the code above I am including a css file “yBox.min.css” but it getting added in very bottom in the footer, instead I want to load it in head tag like other css files load when you add it in functions.php file. The dependency “unibsstyle” is already in head tag.
Plugin Author
nK
(@nko)
Hey.
The filter lazyblock/uni-ybox-link/frontend_callback is called right after the block is rendered in the content (when the head rendering already is not available). If you want to enqueue assets in the header, you should use the wp_enqueue_scripts hook before content rendering.
To check if a block exists on the page, you can use something like this https://wordpress.stackexchange.com/questions/310301/check-what-gutenberg-blocks-are-in-post-content
Regards, nK.
Hi @nko ,
I have tried has_block() function to conditionally check the block existence on the page and only then load the stylesheet file, but there is problem with it, if we use the block in a reusable block, that condition not work. So has_block() function not able to find out if a block exist in a reusable block or not.
Plugin Author
nK
(@nko)
This is more like a question to the Gutenberg team, and not to our plugin. I can only refer you to our own code, which we use to parse blocks in content. It is not perfect, but it works – https://github.com/nk-crew/visual-portfolio/blob/master/src/classes/class-parse-blocks.php
