oik/contact-field - Add 3 styles #207

bobbingwide · Sep 13, 2022 · 2273fac · 2273fac
1 parent 7ab9a88
commit 2273fac
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 40 deletions.
diff --git a/includes/bw_metadata.php b/includes/bw_metadata.php
@@ -249,7 +249,7 @@ function bw_form_field_numeric( $name, $type, $title, $value, $args ) {
  * Format a checkbox metabox
  */
 function bw_form_field_checkbox( $name, $type, $title, $value, $args ) {
-  bw_checkbox( $name, $title, $value );
+  bw_checkbox( $name, $title, $value, $args );
 }
 
 /**

diff --git a/libs/bobbforms.php b/libs/bobbforms.php
@@ -1,6 +1,6 @@
 <?php // (C) Copyright Bobbing Wide 2009-2022
 if ( !defined( "BOBBFORMS_INCLUDED" ) ) {
-define( "BOBBFORMS_INCLUDED", "3.4.0" );
+define( "BOBBFORMS_INCLUDED", "3.4.1" );
 
 /**
  * Library: bobbforms
@@ -335,7 +335,7 @@ function bw_textfield( $name, $len, $text, $value, $class=null, $extras=null, $a
     if ( bw_is_table() ) {
         bw_tablerow(array($lab, $itext));
     } else {
-        bw_gridrow(array($lab, $itext));
+        bw_gridrow(array($lab, $itext), $class);
     }
 	return;
 }
@@ -359,7 +359,7 @@ function bw_emailfield( $name, $len, $text, $value, $class=null, $extras=null )
     if ( bw_is_table() ) {
         bw_tablerow(array($lab, $itext));
     } else {
-        bw_gridrow(array($lab, $itext));
+        bw_gridrow(array($lab, $itext), $class );
     }
 	return;
 }
@@ -390,7 +390,8 @@ function bw_textarea( $name, $len, $text, $value, $rows=10, $args=null ) {
     if ( bw_is_table() ) {
         bw_tablerow(array($lab, $itext));
     } else {
-        bw_gridrow(array($lab, $itext));
+        $class = bw_array_get( $args, '#class', null );
+        bw_gridrow(array($lab, $itext), $class );
     }
 	return;
 }
@@ -418,7 +419,7 @@ function bw_radio( $name, $text, $values, $labels, $class=null, $extras=null ) {
     if ( bw_is_table() ) {
         bw_tablerow(array($lab, $iradios));
     } else {
-        bw_gridrow(array($lab, $radios));
+        bw_gridrow(array($lab, $radios), $class );
     }
 }
 
@@ -552,7 +553,8 @@ function bw_select( $name, $text, $value, $args ) {
     if ( bw_is_table() ) {
         bw_tablerow(array($lab, $iselect));
     } else {
-        bw_gridrow(array($lab, $iselect));
+        $class = bw_array_get( $args, '#class', null );
+        bw_gridrow(array($lab, $iselect), $class);
     }
 	return;
 }
@@ -593,15 +595,16 @@ function icheckbox( $name, $value=NULL, $disabled=false ) {
  * @param string $name field name
  * @param string $text field label
  * @param integer $value 1 for checked
- * @param array $args future use
+ * @param array $args array of arguments
  */
 function bw_checkbox( $name, $text, $value=1, $args=NULL ) {
 	$lab = BW_::label( $name, $text );
 	$icheckbox = icheckbox( $name, $value );
     if ( bw_is_table() ) {
         bw_tablerow(array($lab, $icheckbox));
     } else {
-        bw_gridrow(array($lab, $icheckbox));
+        $class = bw_array_get( $args, '#class', null );
+        bw_gridrow(array($lab, $icheckbox), $class );
     }
 	return;
 }
@@ -848,16 +851,18 @@ function bw_is_table( $table=null ) {
 
 /**
  * Displays a row as a grid.
+ *
  * @since v3.4.0
+ * @since v3.4.1 Added $class parameter for block styling
  * @param $array
+ * @param string $class - block style
  */
-function bw_gridrow( $array ) {
-    if ( count( $array ) ) {
+function bw_gridrow( $array, $class=null ) {
+    if ( count( $array ) ) { sdiv( $class );
         foreach ($array as $item) {
-            sdiv();
             e($item);
-            ediv();
         }
+        ediv();
     }
 }
 

diff --git a/libs/class-BW-.php b/libs/class-BW-.php
@@ -1,6 +1,6 @@
 <?php // (C) Copyright BobbingWide 2017-2022
 if ( !defined( "CLASS_BW__INCLUDED" ) ) {
-define( "CLASS_BW__INCLUDED", "3.3.0" );
+define( "CLASS_BW__INCLUDED", "3.3.1" );
 
 /**
  * More HTML output library functions
@@ -174,7 +174,7 @@ static function bw_textfield( $name, $len, $text, $value, $class=null, $extras=n
         if ( self::is_table() ) {
             bw_tablerow(array($lab, $itext));
         } else {
-            bw_gridrow(array($lab, $itext));
+            bw_gridrow(array($lab, $itext), $class);
         }
 		return;
 	}
@@ -215,7 +215,7 @@ static function bw_emailfield( $name, $len, $text, $value, $class=null, $extras=
         if ( self::is_table() ) {
             bw_tablerow(array($lab, $itext));
         } else {
-            bw_gridrow(array($lab, $itext));
+            bw_gridrow(array($lab, $itext), $class);
         }
 		return;
 	}
@@ -263,7 +263,8 @@ static function bw_textarea( $name, $len, $text, $value, $rows=10, $args=null )
         if ( self::is_table() ) {
             bw_tablerow(array($lab, $itext));
         } else {
-            bw_gridrow(array($lab, $itext));
+            $class = bw_array_get( $args, '#class', null );
+            bw_gridrow(array($lab, $itext), $class);
         }
 		return;
 	}
@@ -332,7 +333,7 @@ static function bw_radio( $name, $text, $values, $labels, $class=null, $extras=n
         if ( self::is_table() ) {
             bw_tablerow(array($lab, $iradios));
         } else {
-            bw_gridrow(array($lab, $iradios));
+            bw_gridrow(array($lab, $iradios), $class);
         }
 }
 
@@ -350,7 +351,8 @@ static function bw_select( $name, $text, $value, $args ) {
         if ( self::is_table() ) {
             bw_tablerow(array($lab, $iselect));
         } else {
-            bw_gridrow(array($lab, $iselect));
+            $class = bw_array_get( $args, '#class', null );
+            bw_gridrow(array($lab, $iselect), $class);
         }
 		return;
 	}

diff --git a/oik.php b/oik.php
@@ -610,8 +610,11 @@ function oik_register_dynamic_blocks() {
 
 
 	add_filter( 'load_script_textdomain_relative_path', 'oik_load_script_textdomain_relative_path', 10, 2);
+
+    oik_register_block_styles();
 }
 
+
 /**
  * Filters $relative so that md5's match what's expected.
  *
@@ -904,6 +907,18 @@ function oik_server_side_wrapper( $attributes, $html ) {
 	return $html;
 }
 
+/**
+ * Register styles for oik blocks.
+ *
+ */
+
+function oik_register_block_styles() {
+    register_block_style( 'oik/contact-field',  [ 'name' => 'grid', 'label' => __( 'Grid', 'oik'), 'is_default' => true ]);
+    register_block_style( 'oik/contact-field',  [ 'name' => 'above', 'label' => __( 'Label above', 'oik') ]);
+    register_block_style( 'oik/contact-field', [ 'name' => 'reversed', 'label' => __( 'Reversed', 'oik')]);
+
+}
+
 /**
  * Initiate oik processing 
  */

diff --git a/shortcodes/oik-contact-field.php b/shortcodes/oik-contact-field.php
@@ -21,7 +21,8 @@
  * [bw_contact_form][bw_contact_field Email][/bw_contact_form]
  * [bw_contact_form][bw_contact_field Name][bw_contact_field Telephone][/bw_contact_form]
  *
- * Note: The Message ( textarea ) field is automatically added. This is a required field.
+ * @since 4.9.0
+ * Note: The Message ( textarea ) field is not automatically added. It's no longer a required field.
  * @param $atts
  * @param $content
  * @param $tag
@@ -64,6 +65,13 @@ function bw_contact_field( $atts, $content, $tag ) {
         }
     }
 
+    /**
+     * The class name needs to be applied to the surrounding div.
+     */
+    $class = bw_array_get( $atts, 'class', null);
+    $args['#class'] = $class . " is-style-$type";
+
+
     $full_name = bw_contact_field_full_name( $name );
     bw_register_field( $full_name, $type, $label, $args );
     global $bw_contact_fields;
@@ -128,5 +136,6 @@ function bw_contact_field__syntax( $shortcode='bw_contact_field') {
         , "required" => BW_::bw_skv( 'n', 'y', __("Required field") )
         , "requiredindicator" => BW_::bw_skv( null, "<i>" . __( "text", "oik" ) . "</i>", __("Text to indicate the field is required. eg *") )
         ];
+    $syntax += _sc_classes( false );
     return $syntax;
 }
diff --git a/shortcodes/oik-contact-form.php b/shortcodes/oik-contact-form.php
@@ -564,6 +564,10 @@ function bw_contact_field_to_shortcode( $attrs ) {
             $content .= ' requiredindicator="' . $requiredIndicator . '"';
         }
     }
+    $class = bw_array_get( $attrs, "className", null );
+    if ( $class ) {
+        $content .= ' class="' . $class . '"';
+    }
     $content .= "]";
     return $content;
 }
diff --git a/src/oik-contact-field/block.json b/src/oik-contact-field/block.json
@@ -52,7 +52,7 @@
   "supports": {
     "html": false,
     "customClassName": false,
-    "className": false,
+    "className": true,
     "color": {
       "gradients": false,
       "text": false,

diff --git a/src/oik-contact-field/editor.scss b/src/oik-contact-field/editor.scss
@@ -1,17 +1,32 @@
 /*
- Display each field using as a grid layout in the block editor.
+ Display each field using a grid layout in the block editor.
  */
-
-.wp-block-oik-contact-field {
+.wp-block-oik-contact-field.is-style-grid > div {
   display: grid;
   gap: 10px;
   grid-template-columns: 1fr 3fr;
+}
 
-  label {
+/**
+ No need for any specific styling for is-style-above
+ since that's what happens by default.
+ */
 
-  }
-  div.field {
+/**
+ Styling for reversing the fields. Useful for checkboxes.
+ */
+.wp-block-oik-contact-field.is-style-reversed > div {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 3fr;
+}
 
-  }
+.wp-block-oik-contact-field.is-style-reversed > div .label {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
 
+.wp-block-oik-contact-field.is-style-reversed > div .field {
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
diff --git a/src/oik-contact-field/index.js b/src/oik-contact-field/index.js
@@ -6,10 +6,9 @@
  * @copyright (C) Copyright Bobbing Wide 2022
  * @author Herb Miller @bobbingwide
  */
-//import './style.scss';
+import './style.scss';
 import './editor.scss';
 
-
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
@@ -61,11 +60,7 @@ registerBlockType(
         edit: props=> {
             const { attributes, setAttributes, instanceId, focus, isSelected } = props;
             const { textAlign, label } = props.attributes;
-            const blockProps = useBlockProps( {
-                className: classnames( {
-                    [ `has-text-align-${ textAlign }` ]: textAlign,
-                } ),
-            } );
+            const blockProps = useBlockProps();
             const onChangeLabel = (event) => {
                 props.setAttributes({label: event});
             };
@@ -103,6 +98,7 @@ registerBlockType(
                 </InspectorControls>
 
                     <div { ...blockProps}>
+                        <div>
                         <div className="label">
                             <label for={ attributes.name }>{attributes.label}
                                 { attributes.required && <span className="required">{attributes.requiredIndicator}</span> }
@@ -112,6 +108,7 @@ registerBlockType(
                             <ContactFieldControl type={attributes.type} name={attributes.name} required={attributes.required} />
                         </div>
                     </div>
+                    </div>
 
 
                 </Fragment>

diff --git a/src/oik-contact-field/style.scss b/src/oik-contact-field/style.scss
@@ -0,0 +1,37 @@
+.bw_contact_form .bw_grid > div,
+.bw_contact_form bw_grid .is-style-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 3fr;
+}
+
+/**
+ * We don't need the vertical space between the label and the field
+ */
+.bw_contact_form .bw_grid .is-style-above,
+.wp-block-oik-contact-field .is-style-above {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+/**
+ * Reverse the field order - primarily for checkboxes
+ */
+.bw_contact_form .bw_grid .is-style-reversed > div,
+.bw_contact_form .bw_grid .is-style-reversed {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 3fr;
+}
+
+.bw_contact_form .bw_grid .is-style-reversed > div .label,
+.bw_contact_form .bw_grid .is-style-reversed > label {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+
+.bw_contact_form .bw_grid .is-style-reversed > div .field,
+.bw_contact_form .bw_grid .is-style-reversed input {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
diff --git a/src/oik-contact-form/style.scss b/src/oik-contact-form/style.scss
@@ -4,9 +4,5 @@ div.bw_contact_form form {
 	/* background-color: #f5f5f5; */
 }
 
-.bw_contact_form .bw_grid {
-	display: grid;
-	gap: 10px;
-	grid-template-columns: 1fr 3fr;
-}
+