Skip to content
This repository has been archived by the owner on Feb 17, 2025. It is now read-only.

Quadrat: add cover pattern #3676

Merged
merged 18 commits into from
Apr 28, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions quadrat/assets/rotated.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions quadrat/assets/theme.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions quadrat/child-experimental-theme.json
Original file line number Diff line number Diff line change
@@ -4,6 +4,16 @@
"color": {
"gradients": [ ],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "pink",
"color": "#FFD1D1",
10 changes: 10 additions & 0 deletions quadrat/experimental-theme.json
Original file line number Diff line number Diff line change
@@ -18,6 +18,16 @@
"color": {
"gradients": [],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "pink",
"color": "#FFD1D1",
13 changes: 13 additions & 0 deletions quadrat/inc/block-patterns.php
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 4 additions & 4 deletions quadrat/inc/block-styles.php
Original file line number Diff line number Diff line change
@@ -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',
)
);
}
765 changes: 745 additions & 20 deletions quadrat/package-lock.json

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions quadrat/package.json
Original file line number Diff line number Diff line change
@@ -6,15 +6,18 @@
"dependencies": {},
"devDependencies": {
"@wordpress/base-styles": "^3.4.0",
"autoprefixer": "^10.2.5",
"chokidar-cli": "^2.1.0",
"node-sass": "^5.0.0",
"node-sass-package-importer": "^5.3.2"
"node-sass-package-importer": "^5.3.2",
"postcss": "^8.2.12",
"postcss-cli": "^8.3.1"
},
"scripts": {
"start": "chokidar \"**/*.scss\" child-experimental-theme.json ../blank-canvas-blocks/experimental-theme.json -c \"npm run build\" --initial",
"build": "npm run build:theme && npm run build:scss",
"build:theme": "node ../blank-canvas-blocks/build.js quadrat",
"build:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/theme.scss assets/theme.css --output-style expanded --indent-type tab --indent-width 1 --source-map true"
"build:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/theme.scss --output-style expanded --indent-type tab --indent-width 1 | postcss --use autoprefixer --output assets/theme.css --map"
},
"author": "",
"license": "GPLv2"
41 changes: 41 additions & 0 deletions quadrat/sass/blocks/_cover.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.wp-block-cover.is-style-quadrat-cover-diamond {

&::after {
background-image: url(rotated.svg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 70%;
content: "";
mix-blend-mode: soft-light;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

&.has-white-background-color,
&.has-black-background-color {

&.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
opacity: 0;
}

&::after {
mix-blend-mode: normal;
mask-image: url(rotated.svg);
mask-repeat: no-repeat;
mask-size: auto 70%;
mask-position: center;
opacity: 0.25;
}
}

&.has-white-background-color::after {
background: #000;
}

&.has-black-background-color::after {
background: #fff;
}
}
1 change: 1 addition & 0 deletions quadrat/sass/theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
@import "blocks/cover";
@import "blocks/media-text";
@import "blocks/list";
@import "header";