Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add center point for single arc #9

Merged
merged 4 commits into from
Jun 27, 2023
Merged

Add center point for single arc #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
589956d
Add center point for single arc
KevinBatdorf Jun 27, 2023
36ee5de
Update readme
KevinBatdorf Jun 27, 2023
583ea16
remove console log
KevinBatdorf Jun 27, 2023
9f7f8f2
Update readme
KevinBatdorf Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .wordpress-org/screenshot-4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
13 changes: 13 additions & 0 deletions patterns/gradients/gradient-3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!-- wp:group {"align":"full","gradient":"diagonal-tertiary-to-background","className":"wavy-divider-remove-margin wavy-divider-remove-padding"} -->
<div class="wp-block-group alignfull wavy-divider-remove-margin wavy-divider-remove-padding has-diagonal-tertiary-to-background-gradient-background has-background"><!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"none"}},"textColor":"foreground","fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-text-align-center has-foreground-color has-text-color has-xx-large-font-size" style="text-transform:none">This is it. The real deal.</h2>
<!-- /wp:heading -->

<!-- wp:wavy/wavy-divider {"path":"M 0,46 Q 50,-74.55000000000001 100,200 V 200 H 0 Z","height":200,"opacity":0.4,"startingPeak":0.77,"endingPeak":0,"peaks":[[0.85,0.47],[0.41,0.46],[0.52,0.59],[0.38,0.67],[0.65,0.88],[0.64,0.55],[0.36,0.54],[0.42,0.41],[0.61,0.89]],"points":1,"backgroundColor":"secondary"} -->
<div class="wp-block-wavy-wavy-divider alignfull has-secondary-background-color has-background"><svg fill="none" role="separator" viewBox="0 0 100 200" preserveAspectRatio="none" aria-orientation="horizontal" aria-hidden="true" style="height:200px;width:100%;display:block"><path style="transition:all .5s ease;opacity:0.4" fill="var(--wp--preset--color--secondary)" d="M 0,46 Q 50,-74.55000000000001 100,200 V 200 H 0 Z"></path></svg></div>
<!-- /wp:wavy/wavy-divider --></div>
<!-- /wp:group -->
5 changes: 5 additions & 0 deletions patterns/loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
]);
}
});
10 changes: 7 additions & 3 deletions readme.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 =

Expand All @@ -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 ==

Expand All @@ -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
Expand Down
182 changes: 123 additions & 59 deletions src/Controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<InspectorControls>
<PanelBody title={__('Settings', 'wavy-divider')}>
Expand All @@ -36,9 +38,9 @@ export const Controls = ({ attributes, setAttributes }) => {
<RangeControl
label={__('Height', 'wavy-divider')}
step={50}
min={100}
min={50}
max={1000}
value={attributes.height}
value={height}
onChange={(height) =>
setAttributes({
height,
Expand All @@ -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
Expand All @@ -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 })}
/>
</BaseControl>
<InfoTip />
</PanelBody>
<PanelBody title={__('Waves', 'wavy-divider')}>
<BaseControl>
<Button
style={{ width: '100%' }}
isSecondary
onClick={() => {
const peaks = calculateVariations({
startingPeak: attributes.startingPeak,
points: attributes.points,
})
const endingPeak = peaks.at(-1)[1]
const path = buildPath({
...attributes,
peaks,
endingPeak,
})
setAttributes({ endingPeak, peaks, path })
}}
icon={<Icon icon={dice()} />}>
{__('Shuffle', 'wavy-divider')}
</Button>
</BaseControl>
<BaseControl>
<RangeControl
label={sprintf(__('Start', 'wavy-divider'))}
step={1}
min={0}
max={100}
value={Math.round(attributes.startingPeak * 100)}
onChange={(peak) => {
setAttributes({
startingPeak: peak / 100,
path: buildPath({
{showCenteredCurve ? (
// special case for a single point, sooth curve
<PanelBody title={__('Single Curve Settings', 'wavy-divider')}>
<BaseControl>
<RangeControl
label={__('Start', 'wavy-divider')}
step={1}
min={0}
max={100}
value={Math.round(startingPeak * 100)}
onChange={(peak) => {
setAttributes({
startingPeak: peak / 100,
path: buildPath({
...attributes,
startingPeak: peak / 100,
}),
})
}}
/>
<RangeControl
label={__('Center Peak', 'wavy-divider')}
step={1}
min={0}
max={100}
value={Math.round(attributes.peaks[0][0] * 100)}
onChange={(peak) => {
const peaksNew = [...attributes.peaks]
peaksNew[0] = [peak / 100, peaksNew[0][1]]
const path = buildPath({
...attributes,
peaks: peaksNew,
})
setAttributes({ peaks: peaksNew, path })
}}
/>
<RangeControl
label={__('End', 'wavy-divider')}
step={1}
min={0}
max={100}
value={Math.round(attributes.endingPeak * 100)}
onChange={(peak) => {
setAttributes({
endingPeak: peak / 100,
path: buildPath({
...attributes,
endingPeak: peak / 100,
}),
})
}}
/>
<Tip>
{__(
'This setting area shows when a single, smooth curve is selected.',
'wavy-divider',
)}
</Tip>
</BaseControl>
</PanelBody>
) : (
<PanelBody title={__('Waves', 'wavy-divider')}>
<BaseControl>
<Button
style={{ width: '100%' }}
variant="secondary"
onClick={() => {
const peaks = calculateVariations({
startingPeak: startingPeak,
points: points,
})
const endingPeak = peaks.at(-1)[1]
const path = buildPath({
...attributes,
peaks,
endingPeak,
})
setAttributes({ endingPeak, peaks, path })
}}
icon={<Icon icon={dice()} />}>
{__('Shuffle', 'wavy-divider')}
</Button>
</BaseControl>
<BaseControl>
<RangeControl
label={__('Start', 'wavy-divider')}
step={1}
min={0}
max={100}
value={Math.round(startingPeak * 100)}
onChange={(peak) => {
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 (
<LineControl
key={point}
attributes={attributes}
point={point}
lastPoint={point === points - 1}
setAttributes={setAttributes}
/>
)
}
return (
<LineControl
<CurveControl
key={point}
attributes={attributes}
point={point}
lastPoint={point === attributes.points - 1}
lastPoint={point === points - 1}
setAttributes={setAttributes}
/>
)
}
return (
<CurveControl
key={point}
attributes={attributes}
point={point}
lastPoint={point === attributes.points - 1}
setAttributes={setAttributes}
/>
)
})}
</BaseControl>
</PanelBody>
})}
</BaseControl>
</PanelBody>
)}
</InspectorControls>
)
}
Expand Down Expand Up @@ -262,7 +326,7 @@ const LineControl = ({ attributes, point, setAttributes, lastPoint }) => {
/>
) : (
<RangeControl
label={sprintf(__('End', 'wavy-divider'))}
label={__('End', 'wavy-divider')}
step={1}
min={0}
max={100}
Expand Down
15 changes: 14 additions & 1 deletion src/functions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,19 @@ const buildLines = ({ points, height, peaks, endingPeak }) => {
.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) => {
Expand Down Expand Up @@ -94,6 +106,7 @@ export const buildPath = ({
points,
height,
peaks,
startingPeak,
endingPeak,
})

Expand Down
2 changes: 1 addition & 1 deletion wavy-divider.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading