Make: Quadrat (#3648)

* Scaffolding a universal theme plus basic typography and color palette. * fixed do_blocks routes and override index.html from BCB * added header and footer templates * changed query to post content block * commented with the GB issue * Quadrat: Add new heading sizes and other small misc changes (#3649) * Quadrat: Add new heading sizes * Quadrat: Further work on Lists and Quotes * Quadrat: Remove whitespace * Quadrat: Add responsive Heading font-sizes * Fix typo. * Recompile. * remove older deploy actions and adding quadrat deploy action (#3655) * Add the hosts block pattern. (#3662) * Add the hosts block pattern. * Fix categories. * Update img refs. * Add alt text to media text pattern. * Revise block pattern names. * Add text domain. * Quadrat: override BCB's templates with php ones (#3667) * override BCB's templates with php ones * Revert unrelated changes to Seedlet Blocks that are not in trunk. * Quadrat: Add responsive Paragraph styles and start styling the Code b… (#3663) * Quadrat: Add responsive Paragraph styles and start styling the Code block * Quadrat: Remove Code block styling * Revise heading max vw. Co-authored-by: Jeff Ong <[email protected]> * Quadrat: Add Latest episodes block pattern (#3665) * added Latest episodes block pattern * translatable strings * staging url for media * rebased, updated texts and adjusted paddings * added a group with padding to the blocks * Body line-height to 1.7. Co-authored-by: Jeff Ong <[email protected]> * Add menu locations to quadrat * Remove disconnected changes * Remove footer menu location * rebuild theme.json * Quadrat: Add Quote block styles * Tightened up the line-height and lessened the space between quote and citation. * Remove properties that already exist in the parent theme * Remove quote sass include and rebuild. * Quadrat: Add list styles * Removed variable usage for list item style * Updated list styles to be more correcter * Try/header template part wrapped (#3714) * Modified site-title styles to match comps * Added a navigation rendering function to render the navigation block based on a classic data source, wrap the output in an HTML block to be inserted anywhere blocks are do_block()'ed * Added a header template part that leverages the rendered navigation block markup * Replaced usage of navigation block template with new template-part * Added styles for header for proper layout unachievable with blocks. * Quadrat: Style the Code block * Remove unneeded declarations * Removed font-changing settings on code block * 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 <[email protected]> Co-authored-by: Ben Dwyer <[email protected]> * removes template hack * Quadrat: Add Episode block pattern (#3695) * create episode pattern * added group wrapper for padding * correct url for image * typo * update to use media and text * changed the url of the image, added alt content and em tag * remove unneeded class, added wrapper for bottom padding * Scope the 0 padding to text content without a background. * Remove group, add spacer. Fix local image ref. Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: Jeff Ong <[email protected]> * Change colors used in theme.json from descreptive to semantic (#3725) * Change colors used in theme.json from descreptive to semantic * semanticizing the color * formatting * also changed the child theme.json * Quadrat: Add table styles (#3719) * Quadrat: Add styles for tables * Add tbody for extra specificity * Add a border to the top of the first row * Remove text-align. Co-authored-by: Jeff Ong <[email protected]> * Allowing overflow of group-wrapped navigation (#3732) * Update screenshot.png (#3735) * Quadrat: Add page templates (#3721) * Rebase trunk. * Revise footer. * Add CSS for the next/prev links * Continue rebase. * remove test code * used gutenberg_block_template_part to load template parts on php templates * Remove testing text * alignment tweaks * Add separate templates for page and post. * Restore header wrapper that was accidentally removed in rebase. * Template tweaks. * Add page block template. Co-authored-by: Jeff Ong <[email protected]> Co-authored-by: Maggie Cabrera <[email protected]> * Make index query inherit query string. * Update screenshot.png (#3742) * Quadrat: Add CSS for a featured image * Quadrat: Headlines and Buttons Block Pattern (#3744) * created block pattern * padding rules for mobile * added new class to all the group blocks * Remove all padding from text content on mobile. Co-authored-by: Jeff Ong <[email protected]> * Change hover rules for buttons * Add hover styles for buttons and links * Remove background color from buttons. (#3752) * Quadrat: Add the listen pattern * refactor patterns to single files * move utility classes to BCB * refactor listen to the podcast * Quadrat: Add a join pattern * Make the pattern wide * Check the class exists before calling it * Make sure the plugin is loaded before adding the pattern * Move the block pattern CSS to a new file Co-authored-by: Maggie Cabrera <[email protected]> Co-authored-by: Daniel Dudzic <[email protected]> Co-authored-by: Jason Crist <[email protected]> Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]>
Automattic · May 6, 2021 · b1909b1 · b1909b1
1 parent 839d682
commit b1909b1
Show file tree

Hide file tree

Showing 57 changed files with 5,902 additions and 59 deletions.
diff --git a/.github/workflows/bcb_demo_deploy.yml b/.github/workflows/bcb_demo_deploy.yml
diff --git a/.github/workflows/sb_demo_deploy.yml → .github/workflows/quadrat_deploy.yml b/.github/workflows/sb_demo_deploy.yml → .github/workflows/quadrat_deploy.yml
@@ -1,10 +1,10 @@
-name: Seedlet Blocks BCB Demo Deploy
+name: Quadrat Demo Deploy
 
 # Controls when the action will run. 
 on:
   # Triggers the workflow on push or pull request events but only for the trunk branch
   push:
-    branches: [ make/blank-canvas-blocks ]
+    branches: [ make/quadrat ]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -20,15 +20,15 @@ jobs:
         uses: SamKirkland/[email protected]
         with:
           ftp-server: sftp://sftp.pressable.com:22/htdocs/wp-content/themes/
-          ftp-username: ${{ secrets.SB_DEMO_USERNAME }}
-          ftp-password: ${{ secrets.SB_DEMO_PASSWORD }}
+          ftp-username: ${{ secrets.QUADRAT_DEMO_USERNAME }}
+          ftp-password: ${{ secrets.QUADRAT_DEMO_PASSWORD }}
           git-ftp-args: --insecure
-          local-dir: ./seedlet-blocks/
+          local-dir: ./quadrat/
       - name: Deploy-Parent
         uses: SamKirkland/[email protected]
         with:
           ftp-server: sftp://sftp.pressable.com:22/htdocs/wp-content/themes/
-          ftp-username: ${{ secrets.SB_DEMO_USERNAME }}
-          ftp-password: ${{ secrets.SB_DEMO_PASSWORD }}
+          ftp-username: ${{ secrets.QUADRAT_DEMO_USERNAME }}
+          ftp-password: ${{ secrets.QUADRAT_DEMO_PASSWORD }}
           git-ftp-args: --insecure
           local-dir: ./blank-canvas-blocks/
diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css
diff --git a/blank-canvas-blocks/functions.php b/blank-canvas-blocks/functions.php
@@ -15,6 +15,9 @@ function blank_canvas_blocks_support() {
 		// Add support for editor styles.
 		add_theme_support( 'editor-styles' );
 
+		// Add support for post thumbnails.
+		add_theme_support( 'post-thumbnails' );
+
 		// Enqueue editor styles.
 		add_editor_style(
 			array(

diff --git a/blank-canvas-blocks/sass/base/_alignment.scss b/blank-canvas-blocks/sass/base/_alignment.scss
@@ -1,6 +1,6 @@
 .wp-block-post-content > .alignfull {
-	margin-left: calc(-1 * var(--wp--custom--margin--horizontal));
-	margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
+	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
+	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right));
 	width: unset;
 }
 
@@ -17,7 +17,7 @@
 // When content is aligned left/right (particularly inside of a container) it is floated left/right
 // and needs something to ensure that the content follows the block rather than nestling up beside the floated element.  
 // The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299
-.wp-block-group { 
+.wp-block-group:not(.site-header) { 
 	overflow: auto;
 }
 

diff --git a/blank-canvas-blocks/sass/base/_style.scss b/blank-canvas-blocks/sass/base/_style.scss
@@ -4,18 +4,8 @@
  */
 
 @import "normalize";
-
 @import "breakpoints";
+
 @import "alignment";
 @import "text";
-
-//Colors
-
-// Gutenberg applies a white color to things that are inside of elements that have a background color.
-// White might not be what we're interested in so we'll use the background color instead
-*[class*="-background-color"]:not(.has-text-color) {
-	color: var(--wp--custom--color--background);
-	a {
-		color: var(--wp--custom--color--background);
-	}
-}
+@import "utility";
diff --git a/blank-canvas-blocks/sass/base/_utility.scss b/blank-canvas-blocks/sass/base/_utility.scss
@@ -0,0 +1,14 @@
+//Utility classes for Block styles/Patterns:
+
+//Apply to Image block when we don't want margin bottom before caption
+.image-no-margin {
+	margin: 0;
+	& > * { //the first sibling is a div on the editor and an image on the frontend
+		vertical-align: bottom;
+	}
+}
+
+//Removes padding on Column block when it has a background color
+.has-background-no-padding.wp-block-columns.has-background {
+	padding: 0;
+}
diff --git a/blank-canvas-blocks/sass/blocks/_list.scss b/blank-canvas-blocks/sass/blocks/_list.scss
@@ -2,4 +2,4 @@ ul,
 ol {
 	font-family: var(--wp--custom--list--font-family);
 	padding-left: var(--wp--custom--list--padding--left);
-} 
+}
diff --git a/quadrat/404.php b/quadrat/404.php
@@ -0,0 +1,25 @@
+<?php
+/**
+ * 404 template file
+ *
+ * This is the most generic template file in a WordPress theme
+ * and one of the two required files for a theme (the other being style.css).
+ * It is used to display a page when nothing more specific matches a query.
+ * E.g., it puts together the home page when no home.php file exists.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package Quadrat
+ * @since 1.0.0
+ */
+get_header();
+
+	// the header
+	get_template_part( 'template-parts/header' );
+
+	echo gutenberg_block_template_part( '404' );
+
+	// the footer
+	echo gutenberg_block_template_part( 'footer' );
+
+get_footer();
diff --git a/quadrat/assets/rotated.svg b/quadrat/assets/rotated.svg
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
diff --git a/quadrat/block-template-parts/404.html b/quadrat/block-template-parts/404.html
@@ -0,0 +1,14 @@
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+
+<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"large"} -->
+<h1 class="has-text-align-center has-large-font-size">Oops! That page can’t be found.</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>It looks like nothing was found at this location. Maybe try a search?</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:search {"label":"","buttonText":"Search"} /-->
+</div>
+<!-- /wp:group -->
diff --git a/quadrat/block-template-parts/footer.html b/quadrat/block-template-parts/footer.html
@@ -0,0 +1,11 @@
+<!-- wp:spacer {"height":30} -->
+<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">Powered by WordPress</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":30} -->
+<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
diff --git a/quadrat/block-template-parts/header.html b/quadrat/block-template-parts/header.html
@@ -0,0 +1,11 @@
+<!-- wp:group {"className":"site-header","style":{"spacing":{"padding":{"right":"35px","left":"35px"}}}} -->
+	<div class="wp-block-group site-header" style="padding-right:35px;padding-left:35px">
+		<!-- wp:site-title /-->
+		<!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small"} -->
+			<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
+			<!-- wp:navigation-link {"label":"Services","url":"#"} /-->
+			<!-- wp:navigation-link {"label":"Portfolio","url":"#"} /-->
+			<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+		<!-- /wp:navigation -->
+	</div>
+<!-- /wp:group -->
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ ul, @@
     ol {
     	font-family: var(--wp--custom--list--font-family);
     	padding-left: var(--wp--custom--list--padding--left);
-    }
+    }