Add stretched link variations from plugin (#2270)

* Add stretched link variations

- Include styles and JS code from plugin

---------

Co-authored-by: Dan Tovbein <dtovbein@gmail.com>

assets/src/block-variations/index.js

@@ -0,0 +1,22 @@
+const {registerBlockVariation} = wp.blocks;
+const {__} = wp.i18n;
+
+/*
+ This file will register general block variations. In case of register a very
+ specific block variation, such as PostsList or ActionsList ,you can create an isolated file.
+*/
+
+export const registerBlockVariations = () => {
+  // Group Stretched Link variation
+  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: 'group-stretched-link'},
+    scope: ['inserter', 'transform'],
+    isActive: blockAttributes => {
+      return blockAttributes.className === 'group-stretched-link';
+    },
+    icon: 'admin-links',
+  });
+};

assets/src/editorIndex.js

@@ -10,6 +10,7 @@ import {registerMediaBlock} from './blocks/Media/MediaBlock';
 import {registerBlockTemplates} from './block-templates/register';
 import {registerTimelineBlock} from './blocks/Timeline/TimelineBlock';
 import {registerColumnsBlock} from './blocks/Columns/ColumnsBlock';
+import {registerBlockVariations} from './block-variations';
 
 wp.domReady(() => {
   // Make sure to unregister the posts-list native variation before registering planet4-blocks/posts-list
@@ -30,6 +31,9 @@ wp.domReady(() => {
   // Beta blocks
   registerActionsListBlock();
   registerPostsListBlock();
+
+  // Block variations
+  registerBlockVariations();
 });
 
 setupCustomSidebar();

assets/src/scss/editorStyle.scss

@@ -42,3 +42,6 @@
 @import "blocks/Submenu/SubmenuEditorStyle";
 @import "blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle";
 @import "blocks/Timeline/TimelineEditorStyle";
+
+// Variations
+@import "variations/stretched-link/edit";

assets/src/scss/style.scss

@@ -85,6 +85,9 @@ Text Domain: planet4-master-theme
 
 @import "layout/query-loop-overrides";
 
+// Variations
+@import "variations/stretched-link";
+
 // Hide WPML footer language switcher.
 .wpml-ls-statics-footer {
   display: none;

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

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

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

@@ -0,0 +1,35 @@
+.group-stretched-link {
+  position: relative;
+
+  [class*="is-style-rounded-"].force-no-caption {
+    overflow: hidden;
+    border-radius: 50%;
+    transform: translateZ(0); // This is needed for Safari, otherwise the animation looks off.
+
+    img {
+      transition: transform .2s ease-in-out;
+    }
+  }
+
+  &:hover {
+    [class*="is-style-rounded-"] img {
+      transform: scale(1.3);
+    }
+  }
+
+  // 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;
+    }
+  }
+}