Issue #24 - seems SelectControl can't display SVGs in the option field

bobbingwide · Jan 13, 2019 · 9066c39 · 9066c39
1 parent 45787d3
commit 9066c39
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/blocks/oik-blockicon/blockicons.js b/blocks/oik-blockicon/blockicons.js
@@ -1,7 +1,14 @@
 /*
- * Block icons
+ * Block icons select control
+ *
+ * I don't fully understand when to use `function Blah` vs `class Blah extends Component`
+ * I supposed it's just a syntax thing.. modern JavaScript ES2015 vs original.
+ * So here we have a mixture.
+ *
+ * @copyright (C) Copyright Bobbing Wide 2019
+ * @author Herb Miller @bobbingwide
+ *
  */
-//import {dashiconslist} from "../oik-dashicon/dashiconlist";
 
 const { Component }  = wp.element;
 const{ getBlockTypes, getBlockType } = wp.blocks;
@@ -11,6 +18,9 @@ const { SelectControl } = wp.components;
 function BlockiconsSelect( { value, onChange, ...props } ) {
 
     const options = getOptions();
+    //console.log( options );
+    options.sort( compareValues );
+    //console.log( options );
 
     return (
 
@@ -21,17 +31,41 @@ function BlockiconsSelect( { value, onChange, ...props } ) {
 
     }
 
+    function compareValues(a, b) {
+        if (a.value < b.value )
+            return -1;
+        if (a.value > b.value )
+            return 1;
+        return 0;
+    }
+
+
     function getOptions() {
         var block_types = getBlockTypes();
         const options = block_types.map ( ( block ) => getBlockiconOption( block ) );
-        console.log( options );
+        //console.log( options );
         return options;
     }
 
     function getBlockiconOption( block ) {
-        var label = block.name;
+        //var label = BlockiconStyled( block.name );
+
+        var label = getOptionLabel( block );
         var value = block.name;
-        return {'label': label, 'value': value};
+        return {'label': label, 'value': value };
+    }
+
+/**
+ * So how do I get the icon into the option label?
+ * It seems it's not possible.
+ *
+ * @param block
+ * @returns {string}
+ */
+
+function getOptionLabel( block ) {
+        var label = `${block.name} - ${ block.title }`;
+        return label;
     }
 
 

diff --git a/blocks/oik-blockicon/index.js b/blocks/oik-blockicon/index.js
@@ -84,12 +84,8 @@ export default registerBlockType(
                 <InspectorControls >
                     <PanelBody>
 
-                        <PanelRow>
-                            <TextControl label="Blockicon"
-                                         value={ props.attributes.blockicon }
-                                         onChange={ onChangeBlockicon }
-                            />
-                        </PanelRow>
+
+
                         <PanelRow>
                             <BlockiconsSelect value={ props.attributes.blockicon } onChange={ onChangeBlockicon } />
                         </PanelRow>