Add group variation for full block link

* Use first link inside the block and expand it to full width/height
* Give separate editor styles: a dashed border round the block to show the clickable area.
* Prevent conflict with pdf and external link styles, by using :before instead of :after.

assets/src/editorIndex.js

@@ -21,6 +21,7 @@ import { SubPagesBlock } from './blocks/SubPages/SubPagesBlock';
 import { blockEditorValidation } from './BlockEditorValidation';
 import { registerGuestBookBlock } from './blocks/GuestBook/GuestBookBlock';
 import { registerBlock as registerShareButtonsBlock } from './blocks/ShareButtons/ShareButtonsBlock';
+import { Fragment } from 'react';
 
 blockEditorValidation();
 new ArticlesBlock();
@@ -47,3 +48,18 @@ replaceTaxonomyTermSelectors();
 setupCustomSidebar();
 setUpCssVariables();
 blockEditorValidation();
+
+const { registerBlockVariation } = wp.blocks;
+const { __ } = wp.i18n;
+
+registerBlockVariation('core/group', {
+  name: 'group-stretched-link',
+  title: __('Stretched Link', 'planet4-blocks-backend'),
+  description: __('Make the entire block contents clickable, using the first link inside.', 'planet4-blocks-backend'),
+  attributes: { className: 'is-style-stretched-link' },
+  scope: ['inserter', 'transform'],
+  isActive: (blockAttributes) => {
+    return blockAttributes.className === 'is-style-stretched-link';
+  },
+  icon: <Fragment>🔗</Fragment>,
+});

assets/src/styles/blocks.scss

@@ -23,7 +23,6 @@
 
 // Other
 @import "blocks/WideBlocks";
-@import "blocks/Editor";
 
 .is-style-small-padding {
   padding: 8px;
@@ -58,3 +57,6 @@
 .is-style-roboto-font-family {
   font-family: $roboto;
 }
+
+// Variations
+@import "../variations/stretched-link";

assets/src/styles/editorStyle.scss

@@ -15,6 +15,7 @@
 @import "blocks/TakeActionBoxout/edit";
 @import "blocks/CookiesEditor";
 @import "blocks/core-overrides/HeadingEditor";
+@import "../variations/stretched-link/edit";
 
 @import "components/LayoutSelector";
 @import "components/EmptyMessage";
@@ -27,3 +28,8 @@
 @import "components/FormField";
 @import "components/HTMLSidebarHelp";
 @import "editorFonts";
+
+.block-edit-mode-warning {
+  padding: $sp-2;
+  margin: 0;
+}

assets/src/variations/stretched-link/edit.scss

@@ -0,0 +1,4 @@
+.is-style-stretched-link {
+  outline: 1px dashed grey;
+  outline-offset: 2px;
+}

assets/src/variations/stretched-link/index.scss

@@ -0,0 +1,21 @@
+.is-style-stretched-link {
+  position: relative;
+  width: fit-content;
+  margin: auto;
+
+  // Ensure it's only applying to the first link.
+  a:first-of-type {
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}