From 0a3723e9f3fc94fcef9b87a43bcbead1d98e7699 Mon Sep 17 00:00:00 2001 From: Herb Miller Date: Sat, 13 Mar 2021 10:16:14 +0000 Subject: [PATCH] Issue #44 - another attempt at supporting alignfull and alignwide - solution copied/cobbled from TT1-blocks --- experimental-theme.json | 24 +++++++++- functions.php | 8 +++- style.css | 100 ++++++++++++++++++++++++++++++++++++++-- 3 files changed, 123 insertions(+), 9 deletions(-) diff --git a/experimental-theme.json b/experimental-theme.json index 3a84668..4452098 100644 --- 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 index e2ce75b..5e95852 100644 --- 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,7 +84,6 @@ 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. * @@ -89,7 +91,7 @@ function fizzie_enqueue_a2z() { * 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 index a5be7d8..cf79b33 100644 --- 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%; +} + +