Quadrat: add cover pattern (#3676)

* Try using svg for block pattern.

* Try mask-image instead.

* move the svg to a before pseudoelement

* refactored the pseudoelements

* fix for the editor interaction when cover block is highlighted

* Add block pattern.

* Use a transparent div instead of svg. Simplify how color of the diamond is set.

* Rotate closer to the design.

* Use background image with svg and mix-blend-mode.

* made block pattern wide aligned

* created exceptions bof black and white

* changes to fit the design, lowered opacity on black and white versions

* Add autoprefixing to Quadrat

* removed error from rebase

* removed unnecessary z-index, linting

* z-index added

* Scope CSS to cover block.

* :: for consistency.

Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>

quadrat/child-experimental-theme.json

@@ -4,6 +4,16 @@
 			"color": {
 				"gradients": [ ],
 				"palette": [
+					{
+						"slug": "black",
+						"color": "#000000",
+						"name": "Black"
+					},
+					{
+						"slug": "white",
+						"color": "#ffffff",
+						"name": "White"
+					},
 					{
 						"slug": "pink",
 						"color": "#FFD1D1",

quadrat/experimental-theme.json

@@ -18,6 +18,16 @@
 			"color": {
 				"gradients": [],
 				"palette": [
+					{
+						"slug": "black",
+						"color": "#000000",
+						"name": "Black"
+					},
+					{
+						"slug": "white",
+						"color": "#ffffff",
+						"name": "White"
+					},
 					{
 						"slug": "pink",
 						"color": "#FFD1D1",

quadrat/inc/block-patterns.php

@@ -117,6 +117,19 @@ function quadrat_register_block_patterns() {
 				)
 			);
 
+			register_block_pattern(
+				'quadrat/cover-with-heading',
+				array(
+					'title'      => __( 'Cover block with heading', 'quadrat' ),
+					'categories' => array( 'quadrat' ),
+					'content'    => '<!-- wp:cover {"overlayColor":"darker-blue","minHeight":700,"align":"wide","className":"is-style-quadrat-cover-diamond"} -->
+					<div class="wp-block-cover alignwide has-darker-blue-background-color has-background-dim is-style-quadrat-cover-diamond" style="min-height:700px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","textColor":"pink"} -->
+					<h2 class="has-text-align-center has-pink-color has-text-color">' . esc_html__( 'Episode 3: A Cycle of Emotions', 'quadrat' ) . '</h2>
+					<!-- /wp:heading --></div></div>
+					<!-- /wp:cover -->',
+				)
+			);
+
 		}
 	}
 endif;

quadrat/inc/block-styles.php

@@ -16,11 +16,11 @@ function quadrat_register_block_styles() {
 			 * Register block styles
 			 */
 			register_block_style(
-				'core/media-text',
+				'core/cover',
 				array(
-					'name'         => 'quadrat-example',
-					'label'        => __( 'Example', 'quadrat' ),
-					'style_handle' => 'quadrat-example',
+					'name'         => 'quadrat-cover-diamond',
+					'label'        => __( 'Diamond', 'quadrat' ),
+					'style_handle' => 'quadrat-cover-diamond',
 				)
 			);
 		}