diff --git a/README.md b/README.md index 59d55e7..0377f8d 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,9 @@ If nesting the wavy divider in a group block, you may want to remove the padding - `wavy-divider-remove-margin` - `wavy-divider-remove-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! ## Example Screenshots ![alt text](.wordpress-org/screenshot-1.png "Example") ![alt text](.wordpress-org/screenshot-2.png "Example 2") diff --git a/patterns/defaults/leaf-on-the-wind.html b/patterns/defaults/leaf-on-the-wind.html new file mode 100644 index 0000000..7d57df4 --- /dev/null +++ b/patterns/defaults/leaf-on-the-wind.html @@ -0,0 +1,15 @@ + +
+

I am a leaf on the wind.

+ + + +
+ + + +
+

Watch how I soar.

+
+
+ diff --git a/patterns/defaults/so-it-goes.html b/patterns/defaults/so-it-goes.html new file mode 100644 index 0000000..d74431a --- /dev/null +++ b/patterns/defaults/so-it-goes.html @@ -0,0 +1,31 @@ + +
+ + + + +

Everything was beautiful and nothing hurt.

+ + + +

Vonnegut

+ + + +
+ + + +
+
+

I want to stand as close to the edge as I can without going over. Out on the edge you see all kinds of things you can't see from the center.

+
+ + + +
+

We are what we pretend to be, so we must be careful about what we pretend to be.

+
+
+
+ diff --git a/patterns/gradients/acid-burn.html b/patterns/gradients/acid-burn.html new file mode 100644 index 0000000..e427cdc --- /dev/null +++ b/patterns/gradients/acid-burn.html @@ -0,0 +1,45 @@ + +
+
+ + + + +

The beauty of the baud

+ + + +
+
+

Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod.

+
+ + + +
+

Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod.

+
+
+ + + +
+
+ + + +
+
+
+

Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod.

+
+ + + +
+

Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod.

+
+
+
+
+ diff --git a/patterns/gradients/the-mystery-of-life.html b/patterns/gradients/the-mystery-of-life.html new file mode 100644 index 0000000..ae8e988 --- /dev/null +++ b/patterns/gradients/the-mystery-of-life.html @@ -0,0 +1,17 @@ + +
+
+ + + +

The mystery of life isn't a problem to solve, but a reality to experience.

+ + + +

Frank Herbert

+ + + + +
+ diff --git a/patterns/loader.php b/patterns/loader.php new file mode 100644 index 0000000..8e638cf --- /dev/null +++ b/patterns/loader.php @@ -0,0 +1,40 @@ + __('Wavy Dividers', 'wavy-divier') ] +); + +$today = new DateTime(); +// Valentines Day +if (strtotime('15 january this year') <= time() && + time() <= strtotime('16 february this year')) { + register_block_pattern('wavy/valentines-1', [ + 'title' => 'Valentine\'s Day', + 'categories' => ['wavy-dividers'], + 'content' => file_get_contents(__DIR__ . '/seasonal/valentines-1.html'), + ]); +} + +register_block_pattern('wavy/so-it-goes', [ + 'title' => 'So it goes...', + 'categories' => ['wavy-dividers'], + 'content' => file_get_contents(__DIR__ . '/defaults/so-it-goes.html'), +]); +register_block_pattern('wavy/acid-burn', [ + 'title' => 'Acid Burn', + 'categories' => ['wavy-dividers'], + 'content' => file_get_contents(__DIR__ . '/gradients/acid-burn.html'), +]); +register_block_pattern('wavy/leaf-on-the-wind', [ + 'title' => 'A Leaf on the Wind', + 'categories' => ['wavy-dividers'], + 'content' => file_get_contents(__DIR__ . '/defaults/leaf-on-the-wind.html'), +]); +register_block_pattern('wavy/the-mystery-of-life', [ + 'title' => 'The Mystery of Life', + 'categories' => ['wavy-dividers'], + 'content' => file_get_contents(__DIR__ . '/gradients/the-mystery-of-life.html'), +]); diff --git a/patterns/seasonal/valentines-1.html b/patterns/seasonal/valentines-1.html new file mode 100644 index 0000000..fa252f6 --- /dev/null +++ b/patterns/seasonal/valentines-1.html @@ -0,0 +1,31 @@ + +
+ + + + +

Valentine's Day

+ + + +
+
+ + + +
+

“Such aching mystery hides, in your stardust-glimmer eyes.”

John Mark Green
+
+
+ + + +
+ + + +
+

A day to cherish

+
+
+ diff --git a/readme.txt b/readme.txt index 26f05c5..61448dd 100644 --- a/readme.txt +++ b/readme.txt @@ -2,7 +2,7 @@ Contributors: kbat82 Tags: hr, separator, svg, divider, gradient, wavy, block Tested up to: 5.9.0 -Stable tag: 1.1.4 +Stable tag: 1.2.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html @@ -35,6 +35,10 @@ If nesting the wavy divider in a group block, you may want to remove the padding - `wavy-divider-remove-margin` - `wavy-divider-remove-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! + == Installation == 1. Install the plugin through the WordPress plugins screen directly. @@ -49,6 +53,9 @@ If nesting the wavy divider in a group block, you may want to remove the padding == Changelog == += 1.2.0 = +* Fix: Add pattern examples, including Valentine's Day themed + = 1.1.4 = * Fix: Swap fill-opacity attribute with opacity styling. * Tweak: Clamp default state to integers diff --git a/src/index.js b/src/index.js index a4997ae..21d8d72 100644 --- a/src/index.js +++ b/src/index.js @@ -5,46 +5,41 @@ import { blockIcon } from './icons' import { Wave } from './Wave' import { Controls } from './Controls' import { __ } from '@wordpress/i18n' -import * as blockConfig from '../block.json' +import blockConfig from '../block.json' -registerBlockType( - 'wavy/wavy-divider', - Object.assign( - { - icon: blockIcon, - title: __('Wavy Divider', 'wavy-divider'), - example: { - attributes: { - points: 4, - direction: 'bottom', - opacity: 1, - height: 200, - fill: '#bbbbbb', - path: - 'M 0,141.02860048635554 S 15.5,149.62576844884103 22,44.38429499729722, S 35.5,109.49785734826821 42,112.37437978662143, S 55.5,81.82622726454179 65,71.25365594766248, S 75.5,108.62068964175967 82,167.8899588207349, S 95.5,118.85814344229925 102,75.32845414857354 V 200 H 0 Z', - }, - }, - edit: ({ attributes, setAttributes }) => { - return ( - <> - -
- -
- - ) - }, - save: ({ attributes }) => { - return ( -
- -
- ) - }, +registerBlockType('wavy/wavy-divider', { + ...blockConfig, + icon: blockIcon, + title: __('Wavy Divider', 'wavy-divider'), + example: { + attributes: { + points: 4, + direction: 'bottom', + opacity: 1, + height: 200, + fill: '#bbbbbb', + path: + 'M 0,141.02860048635554 S 15.5,149.62576844884103 22,44.38429499729722, S 35.5,109.49785734826821 42,112.37437978662143, S 55.5,81.82622726454179 65,71.25365594766248, S 75.5,108.62068964175967 82,167.8899588207349, S 95.5,118.85814344229925 102,75.32845414857354 V 200 H 0 Z', }, - blockConfig, - ), -) + }, + edit: ({ attributes, setAttributes }) => { + return ( + <> + +
+ +
+ + ) + }, + save: ({ attributes }) => { + return ( +
+ +
+ ) + }, +}) diff --git a/src/style.scss b/src/style.scss index fadb853..fb37a5b 100644 --- a/src/style.scss +++ b/src/style.scss @@ -4,6 +4,11 @@ body div.wp-block-wavy-wavy-divider { background-color: transparent !important; margin: 0; } +.block-editor-block-list__block.wp-block.wp-block-wavy-wavy-divider ~ div.wp-block, +.editor-styles-wrapper .wp-block .wp-block-wavy-wavy-divider ~ div.wp-block, +body div.wp-block-wavy-wavy-divider ~ div.wp-block { + margin-top: 0!important; +} .wavy-divider-remove-padding { padding: 0 !important; } diff --git a/wavy-divider.php b/wavy-divider.php index 9b562d6..ebf46dc 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.1.4 + * Version: 1.2.0 * Author: Kevin Batdorf * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html @@ -15,3 +15,5 @@ register_block_type(__DIR__); wp_set_script_translations('wavy-wavy-divider', 'wavy-divider'); }); + +include_once __DIR__ . '/patterns/loader.php';