Issue #34 - start making use of the SelectTextControlCombo block for …

…formats and orderby attributes

blocks/oik-content/SelectTextControlCombo.js

@@ -0,0 +1,52 @@
+/**
+ * Implements a Select Control / Text control combo where the
+ * text value overrides the option(s) selected from the SelectControl.
+ *
+ *
+ * @copyright (C) Copyright Bobbing Wide 2020
+ * @author Herb Miller @bobbingwide
+ */
+
+
+const { Component, Fragment } = wp.element;
+const { SelectControl, TextControl } = wp.components;
+
+export class SelectTextControlCombo extends Component {
+    constructor() {
+        super(...arguments);
+
+    }
+
+    renderSelect( props ) {
+
+            //var options = formats.map((format) => this.formatsOption(format));
+        var custom_label = `Custom value: ${this.props.label}`;
+            return (
+                <Fragment>
+                <SelectControl label={this.props.label} value={this.props.value}
+                               options={this.props.options}
+                               onChange={this.props.onChange}
+                />
+                <TextControl label={custom_label} hideLabelFromVision={ true } value={this.props.value} onChange={this.props.onChange} />
+                </Fragment>
+            );
+
+    }
+
+
+
+    /**
+     * Map the format_option to a select list option
+     *
+     * @param format
+     * @returns {{label: *, value: *}}
+     */
+    formatOption( format ) {
+        return( { value: format.value, label: format.label });
+    }
+
+    render() {
+        return( this.renderSelect()
+        );
+    }
+}

blocks/oik-content/edit.js

@@ -41,6 +41,7 @@ import {PostTypes} from "./post_type";
 import{ NumberPosts } from './numberposts';
 import { orderby, order } from './attributes';
 import { Formats } from './formats';
+import { SelectTextControlCombo } from './SelectTextControlCombo';
 
 const edit= withInstanceId(
     ( { attributes, setAttributes, instanceId, isSelected } ) => {
@@ -108,7 +109,7 @@ const edit= withInstanceId(
                         />
 
                         <PostTypes value={ attributes.post_type } onChange={ onChangePostType } />
-                        <SelectControl label="Order by" value={ attributes.orderby} options={ orderby} onChange={onChangeOrderBy} />
+                        <SelectTextControlCombo label="Order by" value={ attributes.orderby} options={ orderby} onChange={onChangeOrderBy} />
                         <SelectControl label="Order" value={ attributes.order} options={ order} onChange={onChangeOrder} />
                         <RangeControl label="Number posts" value={ attributes.numberposts } onChange={ onChangeNumberPosts } min={-1} max={100} />
                         <TextControl value={ attributes.post_parent} onChange={ onChangePostParent } label="Post Parent" />

blocks/oik-content/formats.js

@@ -1,13 +1,24 @@
+/**
+ * Implements a control to represent the format= parameter to the bw_pages shortcode.
+ *
+ * @copyright (C) Copyright Bobbing Wide 2020
+ * @author Herb Miller @bobbingwide
+ */
+
 const format_options = [
-    { label: 'Default', value: 'LIER',},
-    { label: 'Link,image', value: 'LI', },
+    { label: 'Link, image, excerpt, read more', value: 'LIER',},
+    { label: 'Link, image', value: 'LI', },
     { label: 'Link, image, excerpt', value: 'LIE' },
     { label: 'Image, link', value: 'IL', },
     { label: 'Image, link, excerpt', value: 'ILE' },
     { label: 'Link, Image, Date, Author', value: 'LI/d/a'},
-    { label: 'None', value: '' },
 ];
 
+/**
+ * Each of the different letters in the format_options value fields has a meaning.
+ * It would make sense to help the user to type the right characters when
+ * defining a Custom value.
+ */
 const single_format_options = [
     { label: 'None', value: null, },
     { label: 'Title', value: 'T', },
@@ -26,9 +37,8 @@ const single_format_options = [
     { label: 'Edit', value: 'e' },
     ];
 
-const { select, subscribe } = wp.data;
 const { Component } = wp.element;
-const { SelectControl } = wp.components;
+import { SelectTextControlCombo } from './SelectTextControlCombo';
 
 export class Formats extends Component {
     constructor() {
@@ -43,7 +53,7 @@ export class Formats extends Component {
         if (formats) {
             //var options = formats.map((format) => this.formatsOption(format));
             return (
-                <SelectControl label="Format" value={this.props.format}
+                <SelectTextControlCombo label="Format" value={this.props.format}
                            options={format_options}
                            onChange={this.props.onChange}
                 />