New Block: Link Wrapper to add a link to a group of blocks.

[ryelle]

In WordPress/wporg-main-2022#258, it was requested that the entire header banner be clickable. This new block mirrors the Group behavior, with an added attribute for "link destination" (url).

This is required before we can update the homepage swag banner, but you can test it with this code

<!-- wp:wporg/link-wrapper {"align":"full","backgroundColor":"blueberry-1","textColor":"white","layout":{"type":"constrained"}} -->
<a class="wp-block-wporg-link-wrapper alignfull has-white-color has-blueberry-1-background-color has-text-color has-background" href="https://mercantile.wordpress.org/"><!-- wp:cover {"url":"https://wordpress.org/files/2023/03/confetti-eased-2-1.png","id":17922,"dimRatio":0,"overlayColor":"blueberry-1","focalPoint":{"x":0.5,"y":0.1},"minHeight":80,"contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"8px","right":"0","bottom":"8px","left":"0"}}},"textColor":"white"} -->
<div class="wp-block-cover alignfull is-light has-white-color has-text-color" style="padding-top:8px;padding-right:0;padding-bottom:8px;padding-left:0;min-height:80px"><span aria-hidden="true" class="wp-block-cover__background has-blueberry-1-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-17922" alt="" src="https://wordpress.org/files/2023/03/confetti-eased-2-1.png" style="object-position:50% 10%" data-object-fit="cover" data-object-position="50% 10%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:image {"width":96,"height":80,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://wordpress.org/files/2023/03/swag-bulk-org.png" alt="" width="96" height="80"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.1"}}} -->
<p style="line-height:1.1">Celebrate the 20th anniversary on May 27th with new swag. #wp20</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></a>
<!-- /wp:wporg/link-wrapper -->

@WordPress/meta-design I've requested a review just to check that this focus & hover state works— I used the same double-border concept that was used on the search so that it could be seen against light & dark backgrounds. The swag banner itself can be reviewed when that PR is ready.

Screenshots

	Screenshot
Block in the editor
In editor, settings open
In editor, warn if there's a nested link
Front end
Front end, hover state
Front end, focus state (on a dark background)
Front end, focus state (on a light background)

To test

• Check out branch, build, spin up a child site
• Try adding the block to a page or template
• Set a destination
• Save & view on the frontend
• The block should look correct, and the entire area should be clickable
• Focus should also work as expected

Try a few different blocks — if you add a link or button, you should see the warning (it's not perfect, but it should catch easy issues).

[jasmussen]

Nice one. Should we update with the sticker image?

here's the updated PNG for the graphic:

If @marko-srb has a moment I'd appreciate a sanity check, otherwise this seems a good step forward.

[ryelle]

Yeah, when I make the PR to actually update the banner I'll use the correct image, this was just the one I had on my test site. Thanks for exporting the image though, that's really helpful.

[adamwoodnz]

Works for me, just one thing; I set the text color to white and the notice has inherited that, so it's almost impossible to read: