Style oik/contact-field blocks using CSS grid rather than table #207

bobbingwide · Sep 10, 2022 · 38d32f3 · 38d32f3
1 parent e209bce
commit 38d32f3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/oik-contact-field/editor.scss b/src/oik-contact-field/editor.scss
@@ -0,0 +1,13 @@
+.wp-block-oik-contact-field {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 1fr 3fr;
+
+  label {
+
+  }
+  div.field {
+
+  }
+
+}
diff --git a/src/oik-contact-field/index.js b/src/oik-contact-field/index.js
@@ -7,7 +7,7 @@
  * @author Herb Miller @bobbingwide
  */
 //import './style.scss';
-//import './editor.scss';
+import './editor.scss';
 
 
 import { __ } from '@wordpress/i18n';
@@ -92,15 +92,12 @@ registerBlockType(
                 </InspectorControls>
 
                     <div { ...blockProps}>
-                    <tr>
-                        <td>
+                        <div className="label">
                             <label for={ attributes.name }>{attributes.label}</label>
-                        </td>
-                        <td>
+                        </div>
+                        <div className="field">
                             <ContactFieldControl type={attributes.type} name={attributes.name} required={attributes.required} />
-
-                        </td>
-                    </tr>
+                        </div>
                     </div>