diff --git a/.wordpress-org/screenshot-4.png b/.wordpress-org/screenshot-4.png index 76ca411..217d6b5 100644 Binary files a/.wordpress-org/screenshot-4.png and b/.wordpress-org/screenshot-4.png differ diff --git a/README.md b/README.md index bc4222e..d6b6ee1 100644 --- a/README.md +++ b/README.md @@ -36,5 +36,6 @@ If nesting the wavy divider in a group block, you may want to remove the padding Within the block inserter, under the Patterns tab, select 'Wavy Divider' from the dropdown menu to view some special, custom-made wavy patterns. And depending on the time of year, seasonal designs too! ## Example Screenshots +![alt text](.wordpress-org/screenshot-4.png "Example 3") ![alt text](.wordpress-org/screenshot-1.png "Example") ![alt text](.wordpress-org/screenshot-2.png "Example 2") diff --git a/patterns/gradients/gradient-3.html b/patterns/gradients/gradient-3.html new file mode 100644 index 0000000..53f4a87 --- /dev/null +++ b/patterns/gradients/gradient-3.html @@ -0,0 +1,13 @@ + +
+ + + + +

This is it. The real deal.

+ + + +
+
+ diff --git a/patterns/loader.php b/patterns/loader.php index 3f6fbde..8366722 100644 --- a/patterns/loader.php +++ b/patterns/loader.php @@ -38,5 +38,10 @@ 'categories' => ['wavy-dividers'], 'content' => file_get_contents(__DIR__ . '/gradients/gradient-2.html'), ]); + register_block_pattern('wavy/gradient-3', [ + 'title' => 'Wavy Gradient 3', + 'categories' => ['wavy-dividers'], + 'content' => file_get_contents(__DIR__ . '/gradients/gradient-3.html'), + ]); } }); diff --git a/readme.txt b/readme.txt index a173ce5..5928bf1 100644 --- 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.2 -Stable tag: 1.4.0 +Stable tag: 1.5.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html @@ -24,6 +24,7 @@ Generate and add a simple wavy divider to anywhere on your page, giving you the - Stack multiple dividers with group block (see below) - Gradients - easy to use (see below) - Control height, number of points, and direction +- Use a single, smooth point to give you a curved divider = Gradients = @@ -38,7 +39,7 @@ If nesting the wavy divider in a group block, you may want to remove the padding = Patterns = -Within the block inserter, under the Patterns tab, select 'Wavy Divider' from the dropdown menu to view some special, custom-made wavy patterns. And depending on the time of year, seasonal designs too! +Within the block inserter, under the Patterns tab, select 'Wavy Divider' from the dropdown menu to view some example patterns. == Installation == @@ -51,10 +52,13 @@ Within the block inserter, under the Patterns tab, select 'Wavy Divider' from th 1. Separate content with wavy dividers 2. Add gradients in combination with group blocks 3. Control height, point count, smoothness, and more. -3. Fine tune curves and shuffle waves. +3. Set 1 peak to create a single smooth curve == Changelog == += 1.5.0 = +- Feature: Center wave when only 1 point is selected and is smooth + = 1.4.0 = * Update: Updated the patterns to work with 6.2 * Tweak: Load patterns in init and check for function_exists diff --git a/src/Controls.js b/src/Controls.js index 8017aad..b10c01b 100644 --- a/src/Controls.js +++ b/src/Controls.js @@ -21,6 +21,8 @@ import { import { dice } from './icons' export const Controls = ({ attributes, setAttributes }) => { + const { points, smoothness, startingPeak, opacity, height } = attributes + const showCenteredCurve = points === 1 && smoothness === 'smooth' return ( @@ -36,9 +38,9 @@ export const Controls = ({ attributes, setAttributes }) => { setAttributes({ height, @@ -51,7 +53,7 @@ export const Controls = ({ attributes, setAttributes }) => { step={1} min={1} max={10} - value={attributes.points} + value={points} onChange={(points) => { const { startingPeak, peaks: initialPeaks } = attributes @@ -76,75 +78,137 @@ export const Controls = ({ attributes, setAttributes }) => { step={0.1} min={0} max={1} - value={attributes.opacity} + value={opacity} onChange={(opacity) => setAttributes({ opacity })} /> - - - - - - { - setAttributes({ - startingPeak: peak / 100, - path: buildPath({ + {showCenteredCurve ? ( + // special case for a single point, sooth curve + + + { + setAttributes({ + startingPeak: peak / 100, + path: buildPath({ + ...attributes, + startingPeak: peak / 100, + }), + }) + }} + /> + { + const peaksNew = [...attributes.peaks] + peaksNew[0] = [peak / 100, peaksNew[0][1]] + const path = buildPath({ + ...attributes, + peaks: peaksNew, + }) + setAttributes({ peaks: peaksNew, path }) + }} + /> + { + setAttributes({ + endingPeak: peak / 100, + path: buildPath({ + ...attributes, + endingPeak: peak / 100, + }), + }) + }} + /> + + {__( + 'This setting area shows when a single, smooth curve is selected.', + 'wavy-divider', + )} + + + + ) : ( + + + + + + { + setAttributes({ startingPeak: peak / 100, - }), - }) - }} - /> - {[...Array(attributes.points).keys()].map((point) => { - if (attributes.smoothness === 'rigid') { + path: buildPath({ + ...attributes, + startingPeak: peak / 100, + }), + }) + }} + /> + {[...Array(points).keys()].map((point) => { + if (smoothness === 'rigid') { + return ( + + ) + } return ( - ) - } - return ( - - ) - })} - - + })} + + + )} ) } @@ -262,7 +326,7 @@ const LineControl = ({ attributes, point, setAttributes, lastPoint }) => { /> ) : ( { .join('') } -const buildCurves = ({ points, height, peaks, endingPeak }) => { +const buildCurves = ({ points, height, peaks, startingPeak, endingPeak }) => { + // Special case for 1 point + if (points === 1) { + const startingPoint = height * (1 - startingPeak) + const endingPoint = height * (1 - endingPeak) + const controlY = -height - startingPoint - height - endingPoint + const centerPointY = controlY * (peaks[0][0] / 2) + height + return ` Q 50,${centerPointY} 100,${( + height - + height * endingPeak + ).toFixed(0)}` + } + let previousX = 0 return [...Array(points)] .map((_, i) => { @@ -94,6 +106,7 @@ export const buildPath = ({ points, height, peaks, + startingPeak, endingPeak, }) diff --git a/wavy-divider.php b/wavy-divider.php index 28fa116..0b8c724 100644 --- 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.4.0 + * Version: 1.5.0 * Author: Kevin Batdorf * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html