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.

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,
+		)
+	);
 }
 
 /**

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