Issue #44 - another attempt at supporting alignfull and alignwide - s…

…olution copied/cobbled from TT1-blocks
bobbingwide · Mar 13, 2021 · 0a3723e · 0a3723e
1 parent 1b9be68
commit 0a3723e
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 9 deletions.
diff --git a/experimental-theme.json b/experimental-theme.json
@@ -164,9 +164,29 @@
             "fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
             "slug": "geneva-verdana"
           }
-          ]
+        ]
+      },
+      "spacing": {
+        "customPadding": true
+      },
+       "custom": {
+          "font-primary": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+          "line-height": {
+            "body": 1.7,
+            "heading": 1.3,
+            "page-title": 1.1
+          },
+          "responsive": {
+            "aligndefault-width": "1140px",
+            "alignwide-width": "1340px"
+          },
+          "spacing": {
+            "unit": "20px",
+            "horizontal": "25px",
+            "vertical": "30px"
+          }
+        }
       }
-    }
   },
   "styles": {
     "root": {

diff --git a/functions.php b/functions.php
@@ -28,6 +28,9 @@ function fizzie_after_setup_theme()
      */
     add_theme_support('experimental-link-color');
 
+	// Add support for custom units.  Is this necessary for FSE?
+	//add_theme_support( 'custom-units' );
+
     /**
      * You need to register nav menus in order for admin to display Appearance > Menus
      * and for Navigation (beta) to allow you to Manage locations.
@@ -81,15 +84,14 @@ function fizzie_enqueue_a2z() {
 add_action( 'after_setup_theme', 'fizzie_stanley_theme_support');
 add_action( 'init', 'fizzie_init', 20 );
 
-
 /**
  * Sets up theme defaults and registers support for various WordPress features.
  *
  * Note that this function is hooked into the after_setup_theme hook, which
  * runs before the init hook. The init hook is too late for some features, such
  * as indicating support for post thumbnails.
  *
- * Copied from stanley theme. 2020/10/27
+ * Originally copied from stanley theme on 2020/10/27.
  */
 function fizzie_stanley_theme_support() {
 
@@ -111,6 +113,8 @@ function fizzie_stanley_theme_support() {
 
     // Add support for full and wide align blocks.
     add_theme_support( 'align-wide' );
+
+
 }
 
 /**

diff --git a/style.css b/style.css
@@ -28,7 +28,7 @@ body {
 }
 
 
-
+/*
 .wp-block-template-part >  *:not(.alignfull),
 figure:not(.alignfull) {
     width: 71%;
@@ -50,6 +50,8 @@ figure.alignfull {
 
 }
 
+ */
+
 
 
 a {
@@ -212,19 +214,24 @@ h6 {
 .wp-block-group.page-footer .wp-block-group__inner-container,
 .wp-block-group.page,
 .wp-block-group.post,
-.wp-block-group.posts,
+.wp-block-group.posts,div.a2z,
+*/
 div.breadcrumbs,
-div.a2z,
 div.information,
 div.download,
 div.metadates,
 section.archive,
 div.home {
     max-width: 1140px;
+    max-width: var(--wp--custom--responsive--aligndefault-width);
     margin: 0 auto;
 }
 
- */
+div.breadcrumbs {
+    margin-top: 0.5em;
+}
+
+
 
 div.wp-block-template-part {
     display: block;
@@ -552,7 +559,7 @@ h2.wp-block-post-title {
 }
 
 div.information {
-    padding: 20px 30px;
+    /*padding: 20px 30px; */
     margin-top: 20px;
 }
 
@@ -716,9 +723,28 @@ div.wp-site-blocks > div.WP_DEBUG:first-of-type:hover {
 }
 
 .wp-block-template-part:not(.alignfull) .wp-block-group {
+    padding: 0.5em 0;
+}
+
+/*
+.wp-block-template-part:not(.alignfull) .wp-block-group__inner-container > * {
     padding: 0.5em;
 }
 
+
+.wp-block-template-part:not(.alignfull) :not(.wp-block-cover) {
+    padding: 0.5em;
+}
+*/
+h1,h2,h3,h4,h5,h6,
+*:not(.alignfull) p:not(.wp-block-site-title)
+p:not(.wp-block-site-tagline){
+    padding: 0.5em;
+}
+
+
+
+
 .home .wp-block-post-title
 .home p{
     padding: 0px 30px 20px 30px;
@@ -759,6 +785,70 @@ div.wp-site-blocks > div.WP_DEBUG:first-of-type:hover {
     background-color: #5b5f13;
 }
 
+/*--------------------------------------------------------------
+# Alignments
+--------------------------------------------------------------*/
+
+* {
+    box-sizing: border-box;
+}
+
+/**
+ Styling copied from TT1-blocks
+ where do the vars come from?
+
+*/
+.wp-site-blocks,
+.wp-block-template-part {
+    /* padding: 0 var(--wp--custom--spacing--horizontal); */
+    max-width: 100%;
+}
+
+.wp-block-oik-sb-toolicons,
+.wp-block-oik-sb-toolicons * {
+    margin: 0;
+}
+
+
+.wp-site-blocks * {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.wp-site-blocks *:not(.wp-block-template-part):not(.wp-block-post-content):not(.wp-block-group):not(.alignfull):not(.alignwide):not([class$="__inner-container"]):not(img) {
+    max-width: var(--wp--custom--responsive--aligndefault-width);
+}
+
+.wp-site-blocks .alignwide {
+    width: var(--wp--custom--responsive--alignwide-width);
+    max-width: 100%;
+}
+
+.aligncenter {
+    text-align: center;
+}
+
+.wp-site-blocks .alignleft {
+    float: left;
+    margin-right: 2em;
+    max-width: 360px;
+}
+
+.wp-site-blocks .alignright {
+    float: right;
+    margin-left: 2em;
+    max-width: 360px;
+}
+
+/** This shifts some of the template parts to the left */
+.wp-site-blocks *:not(.wp-block-template-part) *:not(.wp-block-template-part):not(.wp-block-columns).alignfull {
+    /* margin: 0 calc(0px - var(--wp--custom--spacing--horizontal));
+    width: calc(100% + (2 - var(--wp--custom--spacing--horizontal))); */
+    margin: 0 auto;
+    width: 100%;
+}
+
+