Make: Quadrat

.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/FTP-Deploy-Action@3.1.1
         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/FTP-Deploy-Action@3.1.1
         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/

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(

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

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";

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

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

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();

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 -->

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 -->

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 -->