Add viewbox fine tuning

KevinBatdorf · Nov 18, 2023 · f14bee1 · f14bee1
1 parent 43700e2
commit f14bee1
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/block.json b/block.json
@@ -53,6 +53,10 @@
             "type": "string",
             "default": "smooth"
         },
+        "viewBoxOffset": {
+            "type": "number",
+            "default": 0
+        },
         "align": {
             "type": "string",
             "default": "full"

diff --git a/readme.txt b/readme.txt
@@ -2,7 +2,7 @@
 Contributors:      kbat82
 Tags:              hr, waves, divider, block, wavy, separator, svg, gradient
 Tested up to:      6.4
-Stable tag:        1.5.0
+Stable tag:        1.6.0
 License:           GPL-2.0-or-later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -55,6 +55,9 @@ Within the block inserter, under the Patterns tab, select 'Wavy Divider' from th
 
 == Changelog ==
 
+= 1.6.0 =
+- Feature: Add viewBox fine tuning to fix instances where a tiny pixel gap my appear
+
 = 1.5.0 =
 - Feature: Center wave when only 1 point is selected and is smooth
 

diff --git a/src/Controls.js b/src/Controls.js
@@ -21,7 +21,8 @@ import {
 import { dice } from './icons'
 
 export const Controls = ({ attributes, setAttributes }) => {
-    const { points, smoothness, startingPeak, opacity, height } = attributes
+    const { points, smoothness, startingPeak, opacity, height, viewBoxOffset } =
+        attributes
     const showCenteredCurve = points === 1 && smoothness === 'smooth'
     return (
         <InspectorControls>
@@ -81,6 +82,20 @@ export const Controls = ({ attributes, setAttributes }) => {
                         value={opacity}
                         onChange={(opacity) => setAttributes({ opacity })}
                     />
+                    <RangeControl
+                        label={__('ViewBox offset', 'wavy-divider')}
+                        help={__(
+                            'Adjust the svg viewBox value to account for tiny pixel offsets.',
+                            'wavy-divider',
+                        )}
+                        step={1}
+                        min={-5}
+                        max={5}
+                        value={attributes.viewBoxOffset || 0}
+                        onChange={(viewBoxOffset) => {
+                            setAttributes({ viewBoxOffset })
+                        }}
+                    />
                 </BaseControl>
                 <InfoTip />
             </PanelBody>

diff --git a/src/Wave.js b/src/Wave.js
@@ -7,6 +7,7 @@ export const Wave = ({
     opacity,
     path,
     fill,
+    viewBoxOffset = 0,
 }) => {
     // Fill is passed in only for the example currently
     if (!fill) {
@@ -20,7 +21,7 @@ export const Wave = ({
         <svg
             fill="none"
             role="separator"
-            viewBox={`0 0 100 ${height}`}
+            viewBox={`0 0 100 ${height + viewBoxOffset}`}
             preserveAspectRatio="none"
             aria-orientation="horizontal"
             aria-hidden={true}
@@ -29,8 +30,7 @@ export const Wave = ({
                 height: `${height}px`,
                 width: '100%',
                 display: 'block',
-            }}
-        >
+            }}>
             <path
                 style={{ transition: 'all .5s ease', opacity }}
                 fill={fill}
@@ -47,4 +47,5 @@ Wave.propTypes = {
     opacity: PropTypes.number,
     path: PropTypes.string,
     fill: PropTypes.string,
+    viewBoxOffset: PropTypes.number,
 }
diff --git a/src/index.js b/src/index.js
@@ -18,8 +18,8 @@ registerBlockType('wavy/wavy-divider', {
             opacity: 1,
             height: 200,
             fill: '#bbbbbb',
-            path:
-                'M 0,180 S 21,138 28,87 S 46,141 53,144 S 71,141 78,141 S 96,162 100,198 V 300 H 0 Z',
+            viewBoxOffset: 0,
+            path: 'M 0,180 S 21,138 28,87 S 46,141 53,144 S 71,141 78,141 S 96,162 100,198 V 300 H 0 Z',
         },
     },
     edit: ({ attributes, setAttributes }) => {

diff --git a/wavy-divider.php b/wavy-divider.php
@@ -4,7 +4,7 @@
  * Description:       A creative, fun, lightweight wavy svg divider block to energize your website with character and pizazz
  * Requires at least: 5.8
  * Requires PHP:      7.0
- * Version:           1.5.0
+ * Version:           1.6.0
  * Author:            Kevin Batdorf
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html