Issue #42 - Add styles to the block icon block ( oik-blocks/blockicon )

bobbingwide · Oct 26, 2020 · 22a800a · 22a800a
1 parent 7b45750
commit 22a800a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/blocks/oik-blockicon/index.js b/blocks/oik-blockicon/index.js
@@ -77,12 +77,14 @@ export default registerBlockType(
          * the SVG to adjust in size.
          *
          * https://code.tutsplus.com/tutorials/implementing-block-style-variations-in-gutenberg-part-1--cms-32243
-
+         */
         styles: [
-            { name: 'default', label: 'Default', isDefault: true },
-            { name: 'svg64', label: 'Large' },
+            { name: 'svg24', label: '24px'},
+            { name: 'svg64', label: '64px', isDefault: true  },
+            { name: 'svg100', label: '100px'},
+            { name: 'svg150', label: '150px'},
         ],
-        */
+
 
         edit: props => {
 

diff --git a/blocks/oik-blockicon/style.scss b/blocks/oik-blockicon/style.scss
@@ -1,7 +1,8 @@
 /* oik-blockicon/style.scss */
 .wp-block-oik-block-blockicon svg {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
 }
 
 .wp-block-oik-block-blockicon.svg64 svg {
@@ -18,7 +19,7 @@
 }
 
 
-.wp-block-oik-block-blockicon .is-style-svg64 {
+.wp-block-oik-block-blockicon.is-style-svg64 {
     svg {
       width: 64px;
       height: 64px;
@@ -29,6 +30,13 @@
 
 }
 
+/**
+ Override default styling for block icons.
+ */
+.wp-block-oik-block-blockicon .block-editor-block-icon {
+  display: inline;
+}
+
 @mixin sizeablesvg( $svg-size, $sizepx ) {
   .wp-block-oik-block-blockicon.#{$svg-size} svg {
     width: $sizepx;
@@ -44,7 +52,7 @@
   }
 
 
-  .wp-block-oik-block-blockicon .is-style-#{$svg-size} {
+  .wp-block-oik-block-blockicon.is-style-#{$svg-size} {
     svg {
       width: $sizepx;
       height: $sizepx;