A simple jQuery plugin for making the cover block an anchor link.

JS Code Snippets/Functions

How to use?

Feature:

  • If an anchor or the A tag href value is not equal to the site URL it will be redirected to a new tab.

1. Copy and paste this on the global.js

$.fn.coverblocklink = function(){
    return $(this).hover(function(){
	const the_link = $(this).find('.wp-block-cover__inner-container a').attr('href'); 
	const origin   = window.location.origin+'/'; //getting only the origin of the whole href url on the element 
	const base = new URL('/', the_link).href; //getting the base of the siteurl which is https://flyinglessonsbbwpc.wpcomstaging.com/
			
	//if origin or the current url is eqaul to the <a href>, 
	//redirect without the new tab, else not equal to the current url and set to new tab 
	if(origin == base){
	    $(this).attr('onclick', "window.location='"+the_link+"'");
	}else{
	    $(this).attr('onclick', "window.open('"+the_link+"', '_blank')");
	}
			
    }).addClass('cursor-pointer');
}

2. Assign a class or an ID on the cover block container. Example below:

//class selector
$('.photos-and-videos .wp-block-column').coverblocklink();

//ID selector
$('#photos-and-videos .wp-block-column').coverblocklink();

Leave a Reply

Your email address will not be published. Required fields are marked *