Add style to make a link cover a container

* This only works properly if there is a single link. Needs some editor CSS.
greenpeace · Apr 20, 2022 · 5eed377 · 5eed377
1 parent 1eac73c
commit 5eed377
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/admin/js/editor.js b/admin/js/editor.js
@@ -32,4 +32,12 @@ wp.domReady(() => {
   ];
 
   registerBlockStyle('core/button', styles);
+  const coreBlocks = ['core/media-text', 'core/group', 'core/column'];
+  coreBlocks.forEach(block => {
+    registerBlockStyle(block, {
+      name: 'expand-link',
+      label: 'Expand link',
+    });
+  });
+
 });
diff --git a/assets/src/styles/blocks.scss b/assets/src/styles/blocks.scss
@@ -32,3 +32,17 @@
 // Other
 @import "blocks/WideBlocks";
 @import "blocks/Editor";
+
+.is-style-expand-link {
+  position: relative;
+
+  a:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(210, 184, 14, 0.22);
+  }
+}