beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor/bcb custom to styles (#3487)

Browse source 
Refactored "custom" style configuration into "style" configuration for blocks wherever possible. 

This was enabled because Gutenberg recently enabled configuration of styles of blocks even if they don't express support via their block.json.

This also brings alignment configuration in line with recent changes allowing blocks to express "wide/full" configuration individually.
This commit is contained in:
Jason Crist 2021-03-19 10:53:46 -04:00 committed by GitHub
parent ec1d02b399
commit b13c243ae2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 103 additions and 303 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
blank-canvas-blocks/assets/ponyfill.css
View file

@ -11,15 +11,15 @@ body {
-moz-osx-font-smoothing: grayscale;
}
p {
margin: 0;
}
img {
height: auto;
max-width: 100%;
}
* {
box-sizing: border-box;
}
/**
* Required Variables
*/
@ -64,79 +64,9 @@ img {
outline: 0;
}
/*
* Alignments
*/
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
.wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
.wp-site-blocks .wp-block-post-content > * {
max-width: var(--wp--custom--width--default);
margin-left: auto;
margin-right: auto;
padding: 0 var(--wp--custom--margin--horizontal);
}
.wp-site-blocks *[class*="__inner-container"] > .alignwide,
.wp-site-blocks .alignwide {
width: var(--wp--custom--width--wide);
max-width: 100%;
}
.wp-site-blocks *[class*="__inner-container"] > .alignfull,
.wp-site-blocks .alignfull {
max-width: unset;
margin-left: unset;
margin-right: unset;
}
.aligncenter {
text-align: center;
}
@media only screen and (min-width: 482px) {
.block-editor-block-list__layout .alignleft,
.block-editor-block-list__layout .alignright,
.wp-site-blocks .alignleft,
.wp-site-blocks .alignright {
max-width: calc(var(--wp--custom--width--default) / 2);
}
.wp-site-blocks .alignleft {
/*rtl:ignore*/
float: left;
}
.wp-site-blocks .alignright {
/*rtl:ignore*/
float: right;
}
.block-editor-block-list__layout > .alignleft,
.block-editor-block-list__layout > .alignright,
.wp-site-blocks .wp-block-post-content > .alignleft,
.wp-site-blocks .wp-block-post-content > .alignright {
--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
}
.block-editor-block-list__layout > .alignleft,
.wp-site-blocks .wp-block-post-content > .alignleft {
/*rtl:ignore*/
margin-left: var(--alignment-margin);
/*rtl:ignore*/
margin-right: var(--wp--custom--margin--horizontal);
}
.block-editor-block-list__layout > .alignright,
.wp-site-blocks .wp-block-post-content > .alignright {
/*rtl:ignore*/
margin-left: var(--wp--custom--margin--horizontal);
/*rtl:ignore*/
margin-right: var(--alignment-margin);
}
.wp-block-post-content > .alignfull {
margin-left: calc(-1 * var(--wp--custom--margin--horizontal));
margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
}
::selection {
@ -147,15 +77,6 @@ body {
background-color: var(--wp--custom--color--selection);
}
.block-editor-block-list__block {
margin-bottom: 0;
margin-top: 0;
}
.block-editor-block-list__block .block-library-spacer__resize-container {
margin-bottom: 0;
}
*[class*="-background-color"]:not(.has-text-color) {
color: var(--wp--custom--color--background);
}
@ -170,7 +91,7 @@ body {
*/
a {
cursor: pointer;
text-underline-offset: 2px;
text-underline-offset: 0.15em;
text-decoration: none;
}
@ -181,7 +102,6 @@ a:hover, a:focus {
.block-editor-block-list__layout a,
.wp-block-post-content a {
text-decoration: underline;
transition: border-color 0.1s ease-out;
}
.block-editor-block-list__layout a:hover, .block-editor-block-list__layout a:focus,
@ -251,12 +171,6 @@ input[type=checkbox] + label {
line-height: 1em;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-family: var(--wp--custom--heading--typography--font-family);
font-weight: var(--wp--custom--heading--typography--font-weight);
}
/**
* Button
*/
@ -265,11 +179,6 @@ h1, h2, h3, h4, h5, h6 {
*/
.wp-block-button.wp-block-button__link,
.wp-block-button .wp-block-button__link {
font-weight: var(--wp--custom--button--font-weight);
font-family: var(--wp--custom--button--font-family);
font-size: var(--wp--custom--button--font-size);
line-height: var(--wp--custom--button--line-height);
border-radius: var(--wp--custom--button--border-radius);
text-decoration: none;
}
@ -298,25 +207,12 @@ h1, h2, h3, h4, h5, h6 {
text-align: center;
}
/*
Further gutenberg APPEARS to be defaulting the margin to the same as
the below, however (for reason's that aren't clear to me now) this
isn't coming through.
*/
.wp-block-column .wp-block-image {
margin: 0 0 1em 0;
}
ul,
ol {
font-family: var(--wp--custom--list--font-family);
padding-left: var(--wp--custom--list--padding--left);
}
p.has-background {
padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
}
p.has-text-color a {
color: var(--wp--style--color--link, var(--wp--custom--color--primary));
}
@ -444,20 +340,11 @@ p.has-drop-cap:not(:focus):first-letter {
}
}
.wp-block-quote {
border-left: var(--wp--custom--quote--border--width) solid var(--wp--custom--quote--border--color);
padding-left: var(--wp--custom--padding--horizontal);
}
.wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
font-size: var(--wp--custom--quote--citation--typography--font-size);
font-style: var(--wp--custom--quote--citation--typography--font-style);
}
.wp-block-group.has-background:not([class*="block-editor-block"]) {
padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
}
.wp-block-separator:not(.is-style-dots) {
border-bottom: var(--wp--custom--separator--thickness) solid var(--wp--custom--separator--color);
}

2
blank-canvas-blocks/block-templates/index.html
View file

@ -6,4 +6,4 @@
<!-- /wp:query-loop -->
<!-- /wp:query -->
<!-- wp:post-content /-->
<!-- wp:post-content {"layout":{"inherit":true}} /-->

106
blank-canvas-blocks/experimental-theme.json
View file

@ -84,6 +84,10 @@
"vw"
]
},
"layout": {
"contentSize": "620px",
"wideSize": "1000px"
},
"custom": {
"color": {
"primary": "var(--wp--preset--color--black)",
@ -97,20 +101,19 @@
"horizontal": "20px",
"vertical": "20px"
},
"padding": {
"horizontal": "20px",
"vertical": "20px"
},
"width": {
"default": "620px",
"wide": "1000px"
},
"button": {
"fontWeight": "normal",
"fontFamily": "var(--wp--preset--font-family--base)",
"fontSize": "var(--wp--preset--font-size--small)",
"borderRadius": "4px",
"typography": {
"fontWeight": "normal",
"fontFamily": "var(--wp--preset--font-family--base)",
"fontSize": "var(--wp--preset--font-size--small)",
"lineHeight": 2
},
"border": {
"radius": "4px"
},
"color": {
"text": "var(--wp--custom--color--background)",
"background": "var(--wp--custom--color--secondary)",
"hoverText": "var(--wp--custom--color--secondary)",
"hoverBackground": "var(--wp--custom--color--primary)"
}
@ -145,10 +148,6 @@
}
},
"quote": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"width": "1px"
},
"citation": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)",
@ -162,22 +161,21 @@
"width": "150px"
},
"video": {
"caption":{
"caption": {
"margin": "var(--wp--custom--margin--vertical) auto",
"textAlign": "center"
}
},
"heading": {
"typography":{
"typography": {
"fontWeight": 400,
"lineHeight": 1.125,
"fontFamily": "var(--wp--preset--font-family--headings)"
"lineHeight": 1.125
}
},
"list": {
"fontFamily": "var(--wp--custom--font-family--base)",
"padding": {
"left": "calc( 2 * var(--wp--custom--padding--horizontal) )"
"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
}
},
"navigation": {
@ -231,6 +229,14 @@
}
},
"styles": {
"core/post-content": {
"spacing": {
"padding": {
"left": "var(--wp--custom--margin--horizontal)",
"right": "var(--wp--custom--margin--horizontal)"
}
}
},
"root": {
"color": {
"background": "var(--wp--custom--color--background)",
@ -239,50 +245,71 @@
},
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "1.6",
"lineHeight": 1.6,
"fontFamily": "var(--wp--preset--font-family--base)"
}
},
"core/button": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "var(--wp--custom--color--secondary)"
"text": "var(--wp--custom--button--color--text)",
"background": "var(--wp--custom--button--color--background)"
},
"typography": {
"fontWeight": "var(--wp--custom--button--typography--font-weight)",
"fontFamily": "var(--wp--custom--button--typography--font-family)",
"fontSize": "var(--wp--custom--button--typography--font-size)",
"lineHeight": "var(--wp--custom--button--typography--line-height)"
},
"border": {
"radius": "var(--wp--custom--button--border--radius)"
}
},
"core/heading/h1": {
"typography": {
"fontSize": "48px",
"lineHeight": "var(--wp--custom--heading--typography--line-height)"
"fontFamily": "var(--wp--preset--font-family--headings)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)",
"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
}
},
"core/heading/h2": {
"typography": {
"fontSize": "32px",
"lineHeight": "var(--wp--custom--heading--typography--line-height)"
"fontFamily": "var(--wp--preset--font-family--headings)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)",
"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
}
},
"core/heading/h3": {
"typography": {
"fontSize": "var(--wp--preset--font-size--huge)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)"
"fontFamily": "var(--wp--preset--font-family--headings)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)",
"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
}
},
"core/heading/h4": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)"
"fontFamily": "var(--wp--preset--font-family--headings)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)",
"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
}
},
"core/heading/h5": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)"
"fontFamily": "var(--wp--preset--font-family--headings)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)",
"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
}
},
"core/heading/h6": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)"
"fontFamily": "var(--wp--preset--font-family--headings)",
"lineHeight": "var(--wp--custom--heading--typography--line-height)",
"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
}
},
"core/post-title/h1": {
@ -309,6 +336,25 @@
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"core/code": {
"border": {
"radius": "0px",
"color": "#CCCCCC",
"style": "solid",
"width": "2px"
}
},
"core/quote": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"width": "1px"
},
"spacing": {
"padding": {
"left": "var(--wp--custom--margin--horizontal)"
}
}
}
}
}

3
blank-canvas-blocks/functions.php
View file

@ -12,9 +12,6 @@ if ( ! function_exists( 'blank_canvas_blocks_support' ) ) :
// https://github.com/WordPress/gutenberg/issues/26901
add_theme_support( 'responsive-embeds' );
// Add support for "reasonable default" block styles
add_theme_support( 'wp-block-styles');
// Add support for editor styles.
add_theme_support( 'editor-styles' );
}

99
blank-canvas-blocks/sass/base/_alignment.scss
View file

@ -1,98 +1,5 @@
/*
* Alignments
*/
body {
margin: 0;
.wp-block-post-content > .alignfull {
margin-left: calc(-1 * var(--wp--custom--margin--horizontal));
margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
}
* {
box-sizing: border-box;
}
// This is the default with of blocks on the page with not assign alignwide or alignfull
.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
.wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
.wp-site-blocks .wp-block-post-content > * {
max-width: var(--wp--custom--width--default);
margin-left: auto;
margin-right: auto;
padding: 0 var(--wp--custom--margin--horizontal);
}
// Align the block to be on the "wider" side of things
.wp-site-blocks *[class*="__inner-container"] > .alignwide,
.wp-site-blocks .alignwide {
width: var(--wp--custom--width--wide);
max-width: 100%;
}
// The block should span the full width of the page
.wp-site-blocks *[class*="__inner-container"] > .alignfull,
.wp-site-blocks .alignfull {
max-width: unset;
margin-left: unset;
margin-right: unset;
}
// Align Center
.aligncenter {
text-align: center;
}
// Align Left and Right
@include media(mobile) {
.block-editor-block-list__layout .alignleft,
.block-editor-block-list__layout .alignright,
.wp-site-blocks .alignleft,
.wp-site-blocks .alignright {
max-width: calc(var(--wp--custom--width--default) / 2);
}
// Align Left
.wp-site-blocks .alignleft {
/*rtl:ignore*/
float: left;
}
// Align Right
.wp-site-blocks .alignright {
/*rtl:ignore*/
float: right;
}
// When alignments are applied to top level blocks
// we need to add more left/right margin as the block is full width.
.block-editor-block-list__layout > .alignleft, // For the editor.
.block-editor-block-list__layout > .alignright, // For the editor.
.wp-site-blocks .wp-block-post-content > .alignleft,
.wp-site-blocks .wp-block-post-content > .alignright {
// Content width is the lesser of the viewport width (subtracting margins)
// or the default site width.
// This variable is only used for this element.
--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
// The alignment margin is the viewport, subtract the content and divide by two
// Then subtract the block padding
--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
}
// Align Left
.block-editor-block-list__layout > .alignleft, // For the editor.
.wp-site-blocks .wp-block-post-content > .alignleft {
/*rtl:ignore*/
margin-left: var(--alignment-margin);
/*rtl:ignore*/
margin-right: var(--wp--custom--margin--horizontal);
}
// Align Right
.block-editor-block-list__layout > .alignright, // For the editor.
.wp-site-blocks .wp-block-post-content > .alignright {
/*rtl:ignore*/
margin-left: var(--wp--custom--margin--horizontal);
/*rtl:ignore*/
margin-right: var(--alignment-margin);
}
}

8
blank-canvas-blocks/sass/base/_normalize.scss
View file

@ -10,12 +10,12 @@ body {
-moz-osx-font-smoothing: grayscale;
}
p {
margin: 0;
}
// Needed until https://github.com/WordPress/gutenberg/pull/27518/ is merged.
img {
height: auto;
max-width: 100%;
}
* {
box-sizing: border-box;
}

1
blank-canvas-blocks/sass/base/_style.scss
View file

@ -10,7 +10,6 @@
@import "alignment";
@import "text-selection";
@import "vertical-margins";
//Colors

9
blank-canvas-blocks/sass/base/_vertical-margins.scss
View file

@ -1,9 +0,0 @@
// Remove editor margins
.block-editor-block-list__block {
margin-bottom: 0;
margin-top: 0;
.block-library-spacer__resize-container {
margin-bottom: 0;
}
}

17
blank-canvas-blocks/sass/blocks/_button.scss
View file

@ -1,15 +1,18 @@
/**
* Button
*/
// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist.
@mixin button-main-styles {
font-weight: var(--wp--custom--button--font-weight);
font-family: var(--wp--custom--button--font-family);
font-size: var(--wp--custom--button--font-size);
line-height: var(--wp--custom--button--line-height);
border-radius: var(--wp--custom--button--border-radius);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
border-radius: var(--wp--custom--button--border--radius);
line-height: var(--wp--custom--button--border--line-height);
text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
}
// NOTE: These remain for the hover styling of blocks. This can be removed when the button block has configurable hover states.
@mixin button-hover-styles {
&:hover,
&:focus,
@ -24,11 +27,9 @@
* Block Options
*/
.wp-block-button {
&.wp-block-button__link,
.wp-block-button__link {
@include button-main-styles;
@include button-hover-styles;
text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
}
}

6
blank-canvas-blocks/sass/blocks/_group.scss
View file

@ -1,6 +0,0 @@
// NOTE: Gutenberg sets a padding value by default for groups with a background.
// However this isn't customizable so that's being overwritten here.
// Unfortunately it borks up the editor padding so the :not() is for the editor.
.wp-block-group.has-background:not([class*="block-editor-block"]) {
padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
}

5
blank-canvas-blocks/sass/blocks/_heading.scss
View file

@ -1,5 +0,0 @@
h1, h2, h3, h4, h5, h6 {
clear: both;
font-family: var(--wp--custom--heading--typography--font-family);
font-weight: var(--wp--custom--heading--typography--font-weight);
}

9
blank-canvas-blocks/sass/blocks/_image.scss
View file

@ -7,13 +7,4 @@
https://github.com/WordPress/gutenberg/issues/28923
*/
text-align: center;
}
/*
Further gutenberg APPEARS to be defaulting the margin to the same as
the below, however (for reason's that aren't clear to me now) this
isn't coming through.
*/
.wp-block-column .wp-block-image {
margin: 0 0 1em 0;
}

4
blank-canvas-blocks/sass/blocks/_paragraph.scss
View file

@ -1,9 +1,5 @@
p {
// inherits general font style set at <body>
&.has-background {
padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
}
// Override `color: inherit` from Core styles.
&.has-text-color a {

2
blank-canvas-blocks/sass/blocks/_quote.scss
View file

@ -1,6 +1,4 @@
.wp-block-quote {
border-left: var(--wp--custom--quote--border--width) solid var(--wp--custom--quote--border--color);
padding-left: var(--wp--custom--padding--horizontal);
cite, .wp-block-quote__citation {
font-size: var(--wp--custom--quote--citation--typography--font-size);
font-style: var(--wp--custom--quote--citation--typography--font-style);

4
blank-canvas-blocks/sass/elements/_links.scss
View file

@ -1,7 +1,7 @@
// Default link styles
a {
cursor: pointer;
text-underline-offset: 2px;
text-underline-offset: 0.15em;
text-decoration: none;
&:hover,
@ -10,7 +10,7 @@ a {
}
}
// Links that appear in the main content area
//Links that appear in the main content area
.block-editor-block-list__layout a, // Needed for the post area
.wp-block-post-content a {
text-decoration: underline;

2
blank-canvas-blocks/sass/ponyfill.scss
View file

@ -9,7 +9,6 @@
// Blocks
// - These styles replace key Gutenberg Block styles for fonts, colors, and
// spacing with CSS-variables overrides
@import "blocks/heading";
@import "blocks/button";
@import "blocks/gallery";
@import "blocks/image";
@ -17,6 +16,5 @@
@import "blocks/paragraph";
@import "blocks/navigation";
@import "blocks/quote";
@import "blocks/group";
@import "blocks/separator";
@import "blocks/video";