From 293831edb47e1a3700fc71cb034407e3ac029222 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Fri, 5 Apr 2024 13:33:04 -0400
Subject: [PATCH] Block styles: Add dots spacer style to parent theme

These dot spacers were initially used on Showcase, but have been added as accents to other sites in various ways. To keep things DRY, this creates a block style for all sites to use, using SVG images for crisp circles at all screen sizes.
---
 .../wporg-parent-2021/images/dots-banner.svg  | 44 +++++++++++
 .../images/dots-blue-banner.svg               | 71 ++++++++++++++++++
 .../images/dots-dark-banner.svg               | 75 +++++++++++++++++++
 .../wporg-parent-2021/inc/block-styles.php    | 27 +++++++
 .../wporg-parent-2021/sass/block-styles.scss  | 22 ++++++
 5 files changed, 239 insertions(+)
 create mode 100644 source/wp-content/themes/wporg-parent-2021/images/dots-banner.svg
 create mode 100644 source/wp-content/themes/wporg-parent-2021/images/dots-blue-banner.svg
 create mode 100644 source/wp-content/themes/wporg-parent-2021/images/dots-dark-banner.svg

diff --git a/source/wp-content/themes/wporg-parent-2021/images/dots-banner.svg b/source/wp-content/themes/wporg-parent-2021/images/dots-banner.svg
new file mode 100644
index 00000000..3bbe212b
--- /dev/null
+++ b/source/wp-content/themes/wporg-parent-2021/images/dots-banner.svg
@@ -0,0 +1,44 @@
+<svg width="1160" height="60" viewBox="0 0 1160 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="2.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="57.5" cy="2.5" r="2.5" fill="#1E1E1E"/>
+<circle cx="112.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="167.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="222.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="277.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="332.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="387.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="442.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="497.5" cy="2.5" r="2.5" fill="#1E1E1E"/>
+<circle cx="552.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="607.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="662.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="717.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="772.5" cy="2.5" r="2.5" fill="#1E1E1E"/>
+<circle cx="827.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="882.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="937.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="992.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1047.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1102.5" cy="2.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="2.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="57.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="112.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="167.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="222.5" cy="57.5" r="2.5" fill="#1E1E1E"/>
+<circle cx="277.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="332.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="387.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="442.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="497.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="552.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="607.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="662.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="717.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="772.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="827.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="882.5" cy="57.5" r="2.5" fill="#1E1E1E"/>
+<circle cx="937.5" cy="57.5" r="2.5" fill="#1E1E1E"/>
+<circle cx="992.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1047.5" cy="57.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1102.5" cy="57.5" r="2.5" fill="#1E1E1E"/>
+</svg>
diff --git a/source/wp-content/themes/wporg-parent-2021/images/dots-blue-banner.svg b/source/wp-content/themes/wporg-parent-2021/images/dots-blue-banner.svg
new file mode 100644
index 00000000..f65d665c
--- /dev/null
+++ b/source/wp-content/themes/wporg-parent-2021/images/dots-blue-banner.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1160" height="121" fill="none" viewBox="0 0 1160 121">
+<circle cx="2.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="57.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="112.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="167.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="222.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="277.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="332.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="387.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="442.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="497.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="552.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="607.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="662.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="717.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="772.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="827.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="882.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="937.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="992.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1047.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1102.5" cy="5.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="2.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="57.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="112.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="167.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="222.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="277.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="332.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="387.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="442.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="497.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="552.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="607.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="662.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="717.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="772.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="827.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="882.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="937.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="992.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1047.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1102.5" cy="60.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="2.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="57.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="112.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="167.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="222.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="277.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="332.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="387.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="442.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="497.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="552.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="607.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="662.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="717.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="772.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="827.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="882.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="937.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="992.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1047.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="1102.5" cy="115.5" r="2.5" fill="#D9D9D9"/>
+<circle cx="662.5" cy="60.5" r="5" fill="#3858e9"/>
+<circle cx="827.5" cy="115.5" r="5" fill="#3858e9"/>
+<circle cx="937.5" cy="5.5" r="5" fill="#3858e9"/>
+<circle cx="497.5" cy="5.5" r="5" fill="#3858e9"/>
+<circle cx="167.5" cy="60.5" r="5" fill="#3858e9"/>
+<circle cx="277.5" cy="115" r="5" fill="#3858e9"/>
+</svg>
diff --git a/source/wp-content/themes/wporg-parent-2021/images/dots-dark-banner.svg b/source/wp-content/themes/wporg-parent-2021/images/dots-dark-banner.svg
new file mode 100644
index 00000000..44d95394
--- /dev/null
+++ b/source/wp-content/themes/wporg-parent-2021/images/dots-dark-banner.svg
@@ -0,0 +1,75 @@
+<svg width="1212" height="121" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="4.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="59.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="114.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="169.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="224.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="279.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="334.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="389.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="444.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="499.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="554.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="609.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="664.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="719.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="774.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="829.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="884.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="939.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="994.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="1049.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="1104.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="1159.5" cy="5.5" r="2.5" fill="#40464D"/>
+    <circle cx="4.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="59.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="114.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="169.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="224.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="279.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="334.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="389.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="444.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="499.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="554.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="609.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="664.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="719.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="774.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="829.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="884.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="939.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="994.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="1049.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="1104.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="1159.5" cy="60.5" r="2.5" fill="#40464D"/>
+    <circle cx="4.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="59.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="114.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="169.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="224.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="279.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="334.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="389.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="444.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="499.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="554.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="609.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="664.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="719.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="774.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="829.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="884.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="939.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="994.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="1049.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="1104.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="1159.5" cy="115.5" r="2.5" fill="#40464D"/>
+    <circle cx="444.5" cy="5.5" r="5" fill="#3858E9"/>
+    <circle cx="664.5" cy="60.5" r="5" fill="#3858E9"/>
+    <circle cx="224.5" cy="60.5" r="5" fill="#3858E9"/>
+    <circle cx="114.5" cy="115.5" r="5" fill="#3858E9"/>
+    <circle cx="994.5" cy="115.5" r="5" fill="#3858E9"/>
+    <circle cx="1104.5" cy="60.5" r="5" fill="#3858E9"/>
+    <circle cx="1049.5" cy="5.5" r="5" fill="#3858E9"/>
+</svg>
\ No newline at end of file
diff --git a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php
index 4906894a..fd81ba68 100644
--- a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php
+++ b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php
@@ -207,6 +207,33 @@ function setup_block_styles() {
 			'style_handle' => STYLE_HANDLE,
 		)
 	);
+
+	register_block_style(
+		'core/spacer',
+		array(
+			'name'         => 'dots-background',
+			'label'        => __( 'Dots', 'wporg' ),
+			'style_handle' => STYLE_HANDLE,
+		)
+	);
+
+	register_block_style(
+		'core/spacer',
+		array(
+			'name'         => 'blue-dots-background',
+			'label'        => __( 'Dots (blue)', 'wporg' ),
+			'style_handle' => STYLE_HANDLE,
+		)
+	);
+
+	register_block_style(
+		'core/spacer',
+		array(
+			'name'         => 'dark-dots-background',
+			'label'        => __( 'Dots (dark)', 'wporg' ),
+			'style_handle' => STYLE_HANDLE,
+		)
+	);
 }
 
 /**
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss b/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss
index e287d7d8..1b97be74 100644
--- a/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss
+++ b/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss
@@ -576,3 +576,25 @@
 .is-style-list-long-items > li {
 	margin-bottom: var(--wp--preset--spacing--20);
 }
+
+.wp-block-spacer {
+	&.is-style-dots-background,
+	&.is-style-dark-dots-background,
+	&.is-style-blue-dots-background {
+		background-position: top center;
+		background-repeat: repeat-x;
+		background-size: auto;
+	}
+
+	&.is-style-dots-background {
+		background-image: url(../images/dots-banner.svg);
+	}
+
+	&.is-style-blue-dots-background {
+		background-image: url(../images/dots-blue-banner.svg);
+	}
+
+	&.is-style-dark-dots-background {
+		background-image: url(../images/dots-dark-banner.svg);
+	}
+}
\ No newline at end of file