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',
  )
  );
  }