From 5973aef7adcd24b30f24f8e15925765836521886 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 10 May 2021 18:04:48 +0100 Subject: [PATCH 1/2] Quadrat: Add aligment rules --- blank-canvas-blocks/assets/ponyfill.css | 232 +++++++++++------- blank-canvas-blocks/experimental-theme.json | 4 + blank-canvas-blocks/sass/base/_alignment.scss | 23 +- blank-canvas-blocks/sass/elements/_style.scss | 3 +- blank-canvas-blocks/sass/ponyfill.scss | 10 +- quadrat/block-template-parts/header.html | 4 +- quadrat/child-experimental-theme.json | 2 + quadrat/experimental-theme.json | 10 +- quadrat/template-parts/header.php | 4 +- 9 files changed, 189 insertions(+), 103 deletions(-) diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css index 8a66fd8f49..95796665ee 100644 --- a/blank-canvas-blocks/assets/ponyfill.css +++ b/blank-canvas-blocks/assets/ponyfill.css @@ -77,6 +77,22 @@ img { text-align: center; } +.wp-block-image.alignfull, +.wp-block-cover.alignfull, +.wp-block-video.alignfull { + margin: 0 calc(-1 * var(--wp--custom--margin--body-horizontal)); + width: calc(100% + var(--wp--custom--margin--body-horizontal)*2); +} + +@media (min-width: 480px) { + .wp-block-image.alignfull, + .wp-block-cover.alignfull, + .wp-block-video.alignfull { + margin: 0 calc(-1 * var(--wp--custom--margin--body-horizontal-desktop)); + width: calc(100% + var(--wp--custom--margin--body-horizontal-desktop)*2); + } +} + ::selection { background-color: var(--wp--custom--color--selection); } @@ -102,92 +118,6 @@ p, h1, h2, h3, h4, h5, h6 { padding: 0; } -/** - * Elements - * - Styles for basic HTML elemants - */ -a { - cursor: pointer; - text-underline-offset: 0.15em; - text-decoration: none; -} - -a:hover, a:focus { - text-decoration-line: underline; -} - -.block-editor-block-list__layout a, -.wp-block-post-content a { - text-decoration-line: underline; -} - -.block-editor-block-list__layout a:hover, .block-editor-block-list__layout a:focus, -.wp-block-post-content a:hover, -.wp-block-post-content a:focus { - text-decoration: none; -} - -input[type="text"], -input[type="email"], -input[type="url"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="tel"], -input[type="range"], -input[type="date"], -input[type="month"], -input[type="week"], -input[type="time"], -input[type="datetime"], -input[type="datetime-local"], -input[type="color"], -textarea { - border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); - border-radius: var(--wp--custom--form--border--radius); - color: var(--wp--custom--form--color--text); - padding: var(--wp--custom--form--padding); - background: var(--wp--custom--form--color--background); - box-shadow: var(--wp--custom--form--color--box-shadow); -} - -input[type="text"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -input[type="range"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="week"]:focus, -input[type="time"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="color"]:focus, -textarea:focus { - color: var(--wp--custom--form--color--text); - border-color: var(--custom--form--color--border); -} - -select { - color: var(--wp--custom--colors--foreground); - border: var(--wp--custom--form--border--width) solid var(--wp--custom--form--border--color); - font-family: inherit; - font-size: 100%; -} - -textarea { - width: 100%; -} - -input[type=checkbox] + label { - display: inline; - margin-left: 0.5em; - line-height: 1em; -} - /** * Button */ @@ -677,4 +607,134 @@ p.has-drop-cap:not(:focus):first-letter { background: url(svg/post-category.svg) no-repeat; } +/** + * Elements + * - Styles for basic HTML elemants + */ +/** + * Breakpoints & Media Queries + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** + * These are default block editor widths in case the theme doesn't provide them. + */ +body { + padding: var(--wp--custom--margin--body-vertical) var(--wp--custom--margin--body-horizontal); +} + +@media (min-width: 480px) { + body { + padding: var(--wp--custom--margin--body-vertical-desktop) var(--wp--custom--margin--body-horizontal-desktop); + } +} + +a { + cursor: pointer; + text-underline-offset: 0.15em; + text-decoration: none; +} + +a:hover, a:focus { + text-decoration-line: underline; +} + +.block-editor-block-list__layout a, +.wp-block-post-content a { + text-decoration-line: underline; +} + +.block-editor-block-list__layout a:hover, .block-editor-block-list__layout a:focus, +.wp-block-post-content a:hover, +.wp-block-post-content a:focus { + text-decoration: none; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); + border-radius: var(--wp--custom--form--border--radius); + color: var(--wp--custom--form--color--text); + padding: var(--wp--custom--form--padding); + background: var(--wp--custom--form--color--background); + box-shadow: var(--wp--custom--form--color--box-shadow); +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="color"]:focus, +textarea:focus { + color: var(--wp--custom--form--color--text); + border-color: var(--custom--form--color--border); +} + +select { + color: var(--wp--custom--colors--foreground); + border: var(--wp--custom--form--border--width) solid var(--wp--custom--form--border--color); + font-family: inherit; + font-size: 100%; +} + +textarea { + width: 100%; +} + +input[type=checkbox] + label { + display: inline; + margin-left: 0.5em; + line-height: 1em; +} + /*# sourceMappingURL=ponyfill.css.map */ \ No newline at end of file diff --git a/blank-canvas-blocks/experimental-theme.json b/blank-canvas-blocks/experimental-theme.json index 480e9a4491..b27fd01032 100644 --- a/blank-canvas-blocks/experimental-theme.json +++ b/blank-canvas-blocks/experimental-theme.json @@ -129,6 +129,10 @@ }, "margin": { "baseline": "10px", + "bodyHorizontal": "0px", + "bodyVertical": "0px", + "bodyHorizontalDesktop": "0px", + "bodyVerticalDesktop": "0px", "horizontal": "30px", "vertical": "30px" }, diff --git a/blank-canvas-blocks/sass/base/_alignment.scss b/blank-canvas-blocks/sass/base/_alignment.scss index c415a78699..8184839d4b 100644 --- a/blank-canvas-blocks/sass/base/_alignment.scss +++ b/blank-canvas-blocks/sass/base/_alignment.scss @@ -5,7 +5,7 @@ } @include break-mobile { - // limit size of any element that is aligned left/right + // limit size of any element that is aligned left/right .wp-block[data-align="left"], // This is for the editor .wp-block[data-align="right"], // This is for the editor .wp-site-blocks .alignleft, @@ -15,9 +15,9 @@ } // 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. +// 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:not(.site-header) { +.wp-block-group:not(.site-header) { overflow: auto; } @@ -26,4 +26,19 @@ // class which would do this for us. I'm not sure why but this centers things appropriately. .aligncenter { text-align: center; -} \ No newline at end of file +} + +// These blocks go right to the edge of the viewport +.wp-block-image, +.wp-block-cover, +.wp-block-video { + &.alignfull { + margin: 0 calc(-1 * var(--wp--custom--margin--body-horizontal)); + width: calc(100% + var(--wp--custom--margin--body-horizontal)*2); + + @include break-mobile { + margin: 0 calc(-1 * var(--wp--custom--margin--body-horizontal-desktop)); + width: calc(100% + var(--wp--custom--margin--body-horizontal-desktop)*2); + } + } +} diff --git a/blank-canvas-blocks/sass/elements/_style.scss b/blank-canvas-blocks/sass/elements/_style.scss index 90c270e9dc..3208484c50 100644 --- a/blank-canvas-blocks/sass/elements/_style.scss +++ b/blank-canvas-blocks/sass/elements/_style.scss @@ -3,5 +3,6 @@ * - Styles for basic HTML elemants */ +@import "body"; @import "links"; -@import "forms"; \ No newline at end of file +@import "forms"; diff --git a/blank-canvas-blocks/sass/ponyfill.scss b/blank-canvas-blocks/sass/ponyfill.scss index 9eca2062b4..935ddae789 100644 --- a/blank-canvas-blocks/sass/ponyfill.scss +++ b/blank-canvas-blocks/sass/ponyfill.scss @@ -2,10 +2,6 @@ // - Reset the browser @import "base/style"; -// Elements -// - Styles for basic HTML elemants -@import "elements/style"; - // Blocks // - These styles replace key Gutenberg Block styles for fonts, colors, and // spacing with CSS-variables overrides @@ -26,4 +22,8 @@ @import "blocks/table"; @import "blocks/video"; @import "blocks/columns"; -@import "post/meta"; \ No newline at end of file +@import "post/meta"; + +// Elements +// - Styles for basic HTML elemants +@import "elements/style"; diff --git a/quadrat/block-template-parts/header.html b/quadrat/block-template-parts/header.html index 590e95559e..fabef40e63 100644 --- a/quadrat/block-template-parts/header.html +++ b/quadrat/block-template-parts/header.html @@ -1,5 +1,5 @@ - -
+ +
diff --git a/quadrat/child-experimental-theme.json b/quadrat/child-experimental-theme.json index d455085b9b..4b4acbbfc5 100644 --- a/quadrat/child-experimental-theme.json +++ b/quadrat/child-experimental-theme.json @@ -78,6 +78,8 @@ } }, "margin": { + "bodyHorizontal": "20px", + "bodyHorizontalDesktop": "35px", "horizontal": "20px", "vertical": "30px" }, diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json index 7c9099e9d3..7e6525498b 100644 --- a/quadrat/experimental-theme.json +++ b/quadrat/experimental-theme.json @@ -129,6 +129,10 @@ }, "margin": { "baseline": "10px", + "bodyHorizontal": "20px", + "bodyVertical": "0px", + "bodyHorizontalDesktop": "35px", + "bodyVerticalDesktop": "0px", "horizontal": "20px", "vertical": "30px" }, @@ -193,8 +197,8 @@ }, "post-content": { "padding": { - "left": "var(--wp--custom--margin--horizontal)", - "right": "var(--wp--custom--margin--horizontal)" + "left": "0px", + "right": "0px" } }, "pullquote": { @@ -518,4 +522,4 @@ "fontWeight": "300" } } -} \ No newline at end of file +} diff --git a/quadrat/template-parts/header.php b/quadrat/template-parts/header.php index e3c8c00294..519efacd94 100644 --- a/quadrat/template-parts/header.php +++ b/quadrat/template-parts/header.php @@ -14,10 +14,10 @@ \ No newline at end of file + From 159c22b1dd094c37a1635728e6c36df12c26591d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 10 May 2021 18:05:14 +0100 Subject: [PATCH 2/2] Quadrat: Add aligment rules --- blank-canvas-blocks/sass/elements/_body.scss | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 blank-canvas-blocks/sass/elements/_body.scss diff --git a/blank-canvas-blocks/sass/elements/_body.scss b/blank-canvas-blocks/sass/elements/_body.scss new file mode 100644 index 0000000000..0b61352a67 --- /dev/null +++ b/blank-canvas-blocks/sass/elements/_body.scss @@ -0,0 +1,9 @@ +@import '../base/breakpoints'; + +body { + padding: var(--wp--custom--margin--body-vertical) var(--wp--custom--margin--body-horizontal); + + @include break-mobile { + padding: var(--wp--custom--margin--body-vertical-desktop) var(--wp--custom--margin--body-horizontal-desktop); + } +}