Merge pull request #2 from KevinBatdorf/add-examples

Add pattern library examples

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")

patterns/defaults/leaf-on-the-wind.html

@@ -0,0 +1,15 @@
+<!-- wp:group {"align":"full"} -->
+<div class="wp-block-group alignfull"><!-- wp:heading -->
+    <h2 id="i-am-a-leaf-on-the-wind">I am a leaf on the wind.</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:wavy/wavy-divider {"path":"M 0,49 S 21,98 28,118 S 46,123 53,176 S 71,84 78,136 S 96,48 100,94 V 250 H 0 Z","height":250,"points":4,"backgroundColor":"black"} -->
+    <div class="wp-block-wavy-wavy-divider alignfull has-black-background-color has-background"><svg fill="none" role="separator" viewbox="0 0 100 250" preserveaspectratio="none" aria-orientation="horizontal" aria-hidden="true" style="height:250px;width:100%;display:block"><path style="transition:all .5s ease;opacity:1" fill="var(--wp--preset--color--black)" d="M 0,49 S 21,98 28,118 S 46,123 53,176 S 71,84 78,136 S 96,48 100,94 V 250 H 0 Z"></path></svg></div>
+    <!-- /wp:wavy/wavy-divider -->
+
+    <!-- wp:group {"backgroundColor":"foreground"} -->
+    <div class="wp-block-group has-foreground-background-color has-background"><!-- wp:paragraph {"textColor":"background","fontSize":"x-large"} -->
+    <p class="has-background-color has-text-color has-x-large-font-size">Watch how I&nbsp;soar.</p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:group --></div>
+    <!-- /wp:group -->

patterns/defaults/so-it-goes.html

@@ -0,0 +1,31 @@
+<!-- wp:group {"align":"wide","style":{"color":{"background":"#ffe2c7"}},"className":"wavy-divider-remove-margin wavy-divider-remove-padding"} -->
+<div class="wp-block-group alignwide wavy-divider-remove-margin wavy-divider-remove-padding has-background" style="background-color:#ffe2c7"><!-- wp:spacer {"height":"50px"} -->
+    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
+    <!-- wp:heading {"textAlign":"center","textColor":"foreground"} -->
+    <h2 class="has-text-align-center has-foreground-color has-text-color" id="valentine-s-day-event">Everything was beautiful and nothing hurt.</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:paragraph {"align":"center"} -->
+    <p class="has-text-align-center"><strong>Vonnegut</strong></p>
+    <!-- /wp:paragraph -->
+
+    <!-- wp:wavy/wavy-divider {"path":"M 0,133 S 4,95 11,100 S 14,56 21,32 S 24,113 31,87 S 34,73 41,111 S 44,21 51,44 S 54,73 61,91 S 64,60 71,69 S 74,120 81,113 S 84,143 91,93 S 94,169 100,178 V 200 H 0 Z","height":200,"points":10,"align":"wide","style":{"color":{"background":"#1e1a1a"}}} -->
+    <div class="wp-block-wavy-wavy-divider alignwide has-background" style="background-color:#1e1a1a"><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:1" fill="#1e1a1a" d="M 0,133 S 4,95 11,100 S 14,56 21,32 S 24,113 31,87 S 34,73 41,111 S 44,21 51,44 S 54,73 61,91 S 64,60 71,69 S 74,120 81,113 S 84,143 91,93 S 94,169 100,178 V 200 H 0 Z"></path></svg></div>
+    <!-- /wp:wavy/wavy-divider -->
+
+    <!-- wp:columns {"style":{"color":{"background":"#1e1a1a"}},"textColor":"background"} -->
+    <div class="wp-block-columns has-background-color has-text-color has-background" style="background-color:#1e1a1a"><!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:paragraph -->
+    <p>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.</p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:paragraph -->
+    <p>We are what we pretend to be, so we must be careful about what we pretend to be.</p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:column --></div>
+    <!-- /wp:columns --></div>
+    <!-- /wp:group -->

patterns/gradients/acid-burn.html

@@ -0,0 +1,45 @@
+<!-- wp:group {"align":"wide"} -->
+<div class="wp-block-group alignwide"><!-- wp:group {"align":"wide","style":{"color":{"gradient":"linear-gradient(90deg,rgb(235,175,175) 0%,rgb(223,48,197) 51%,rgb(215,46,105) 100%)"}},"className":"wavy-divider-remove-margin wavy-divider-remove-padding"} -->
+    <div class="wp-block-group alignwide wavy-divider-remove-margin wavy-divider-remove-padding has-background" style="background:linear-gradient(90deg,rgb(235,175,175) 0%,rgb(223,48,197) 51%,rgb(215,46,105) 100%)"><!-- wp:spacer {"height":"50px"} -->
+    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
+    <!-- wp:heading {"textAlign":"center","textColor":"foreground"} -->
+    <h2 class="has-text-align-center has-foreground-color has-text-color" id="valentine-s-day-event">The beauty of the baud</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:columns {"style":{"spacing":{"padding":{"top":"4rem","right":"4rem","bottom":"0rem","left":"4rem"}}}} -->
+    <div class="wp-block-columns" style="padding-top:4rem;padding-right:4rem;padding-bottom:0rem;padding-left:4rem"><!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:paragraph -->
+    <p>Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod. </p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:paragraph -->
+    <p>Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod. </p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:column --></div>
+    <!-- /wp:columns -->
+
+    <!-- wp:wavy/wavy-divider {"path":"M 0,0 L 100,200 V 200 H 0 Z","height":200,"points":1,"smoothness":"rigid","align":"wide","backgroundColor":"white"} -->
+    <div class="wp-block-wavy-wavy-divider alignwide has-white-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:1" fill="var(--wp--preset--color--white)" d="M 0,0 L 100,200 V 200 H 0 Z"></path></svg></div>
+    <!-- /wp:wavy/wavy-divider --></div>
+    <!-- /wp:group -->
+
+    <!-- wp:group {"style":{"spacing":{"padding":{"top":"4rem","right":"4rem","bottom":"4rem","left":"4rem"}}},"backgroundColor":"white"} -->
+    <div class="wp-block-group has-white-background-color has-background" style="padding-top:4rem;padding-right:4rem;padding-bottom:4rem;padding-left:4rem"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
+    <div class="wp-block-columns" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:paragraph -->
+    <p>Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod. </p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:paragraph -->
+    <p>Non id do minim. Amet sit occaecat duis laborum sint elit commodo aute eiusmod. </p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:column --></div>
+    <!-- /wp:columns --></div>
+    <!-- /wp:group --></div>
+    <!-- /wp:group -->

patterns/gradients/the-mystery-of-life.html

@@ -0,0 +1,17 @@
+<!-- wp:group {"align":"full","gradient":"cool-to-warm-spectrum","className":"wavy-divider-remove-margin wavy-divider-remove-padding"} -->
+<div class="wp-block-group alignfull wavy-divider-remove-margin wavy-divider-remove-padding has-cool-to-warm-spectrum-gradient-background has-background"><!-- wp:wavy/wavy-divider {"path":"M 0,415 S 7,531 14,377 S 20,530 26,375 S 32,362 39,279 S 45,190 51,342 S 57,110 64,198 S 70,164 76,235 S 82,306 89,310 S 95,257 100,107 V 0 H 0 Z","height":600,"direction":"top","points":8,"backgroundColor":"white"} -->
+    <div class="wp-block-wavy-wavy-divider alignfull has-white-background-color has-background"><svg fill="none" role="separator" viewbox="0 0 100 600" preserveaspectratio="none" aria-orientation="horizontal" aria-hidden="true" style="height:600px;width:100%;display:block"><path style="transition:all .5s ease;opacity:1" fill="var(--wp--preset--color--white)" d="M 0,415 S 7,531 14,377 S 20,530 26,375 S 32,362 39,279 S 45,190 51,342 S 57,110 64,198 S 70,164 76,235 S 82,306 89,310 S 95,257 100,107 V 0 H 0 Z"></path></svg></div>
+    <!-- /wp:wavy/wavy-divider -->
+
+    <!-- wp:heading {"textAlign":"center"} -->
+    <h2 class="has-text-align-center" id="the-mystery-of-life-isn-t-a-problem-to-solve-but-a-reality-to-experience">The mystery of life isn't a problem to solve, but a reality to experience.</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
+    <p class="has-text-align-center has-x-large-font-size">Frank Herbert</p>
+    <!-- /wp:paragraph -->
+
+    <!-- wp:spacer -->
+    <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer --></div>
+    <!-- /wp:group -->

patterns/loader.php

@@ -0,0 +1,40 @@
+<?php
+
+defined('ABSPATH') || exit;
+
+register_block_pattern_category(
+    'wavy-dividers',
+    ['label' => __('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'),
+]);

patterns/seasonal/valentines-1.html

@@ -0,0 +1,31 @@
+<!-- wp:group {"align":"wide","backgroundColor":"vivid-red","className":"wavy-divider-remove-margin wavy-divider-remove-padding"} -->
+<div class="wp-block-group alignwide wavy-divider-remove-margin wavy-divider-remove-padding has-vivid-red-background-color has-background"><!-- wp:spacer {"height":"50px"} -->
+    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
+    <!-- wp:heading {"textAlign":"center"} -->
+    <h2 class="has-text-align-center" id="valentine-s-day-event">Valentine's Day</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:columns {"style":{"spacing":{"padding":{"top":"4rem","right":"4rem","bottom":"0rem","left":"4rem"}}}} -->
+    <div class="wp-block-columns" style="padding-top:4rem;padding-right:4rem;padding-bottom:0rem;padding-left:4rem"><!-- wp:column {"width":"33.33%"} -->
+    <div class="wp-block-column" style="flex-basis:33.33%"></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column {"width":"66.66%"} -->
+    <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:quote {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"fontSize":"large"} -->
+    <blockquote class="wp-block-quote is-style-default has-large-font-size" style="font-style:normal;font-weight:500"><p>“Such aching mystery hides, in your stardust-glimmer eyes.”</p><cite>John Mark Green</cite></blockquote>
+    <!-- /wp:quote --></div>
+    <!-- /wp:column --></div>
+    <!-- /wp:columns -->
+
+    <!-- wp:wavy/wavy-divider {"path":"M 0,0 L 25,150 L 100,75 V 150 H 0 Z","height":150,"points":2,"align":"wide","backgroundColor":"pale-pink"} -->
+    <div class="wp-block-wavy-wavy-divider alignwide has-pale-pink-background-color has-background"><svg fill="none" role="separator" viewbox="0 0 100 150" preserveaspectratio="none" aria-orientation="horizontal" aria-hidden="true" style="height:150px;width:100%;display:block"><path style="transition:all .5s ease;opacity:1" fill="var(--wp--preset--color--pale-pink)" d="M 0,0 L 25,150 L 100,75 V 150 H 0 Z"></path></svg></div>
+    <!-- /wp:wavy/wavy-divider -->
+
+    <!-- wp:group {"backgroundColor":"pale-pink"} -->
+    <div class="wp-block-group has-pale-pink-background-color has-background"><!-- wp:heading {"textAlign":"center"} -->
+    <h2 class="has-text-align-center" id="a-day-to-cherish">A day to cherish</h2>
+    <!-- /wp:heading --></div>
+    <!-- /wp:group --></div>
+    <!-- /wp:group -->

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

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 (
-                    <>
-                        <Controls
-                            attributes={attributes}
-                            setAttributes={setAttributes}
-                        />
-                        <div {...blockProps()}>
-                            <Wave {...attributes} />
-                        </div>
-                    </>
-                )
-            },
-            save: ({ attributes }) => {
-                return (
-                    <div {...blockProps.save()}>
-                        <Wave {...attributes} />
-                    </div>
-                )
-            },
+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 (
+            <>
+                <Controls
+                    attributes={attributes}
+                    setAttributes={setAttributes}
+                />
+                <div {...blockProps()}>
+                    <Wave {...attributes} />
+                </div>
+            </>
+        )
+    },
+    save: ({ attributes }) => {
+        return (
+            <div {...blockProps.save()}>
+                <Wave {...attributes} />
+            </div>
+        )
+    },
+})

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;
 }

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';