SEO Effects Of Wrapping Block-level Elements In Links

Sometimes when I am working on a website and the webdesign has something like boxes (online shops' products in grid especially), I tend to hesitate whether to make the whole box a link or not. For example:

<a class="product-box" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/product/123">  
    <img src="/someimage.jpg">
    <h3>My product</h3>  
    <span class="price">1000$</span>  
    <button>See detail</button>  
</a>

It seems much more user friendly to me when these box-like elements are whole links, because when on mobile devices, it is harder to hit a small button. However I am not convinced if there's no negative effect on SEO after doing this. It just appears odd to me when a large block of HTML is enclosed in a <a> tag.

It is quite hard to find any discussions on this matter so any opinion is appreciated.

This is valid in HTML5, so you're ok to wrap block-level elements in a link. Here's another article on the subject.

That said, Google is still on the fence about the practice. According to this thread from the Webmaster Central Help Forum, Google's John Mu says:

That usage [wrapping block-level elements in links] would be fine with us - we'd still pick up the link, and would be able to associate your text as an anchor with that. We're pretty flexible with parsing HTML, so you could probably even use this with HTML4. That said, the clearer you make your anchor text, the easier it is for us to understand the context of the link, so I wouldn't necessarily always use a whole paragraph as the anchor for all of your internal links.

In short, wrapping an entire element in a link makes it hard for Google to understand the context of the link.