Merge pull request #3437 from Automattic/add/bcb/list-block-styles

Blank Canvas Blocks: Add default styles for List block

blank-canvas-blocks/assets/ponyfill.css

@@ -293,6 +293,32 @@ h1, h2, h3, h4, h5, h6 {
 	border-color: var(--wp--custom--button--color--hover-background);
 }
 
+.wp-block-image {
+	/* 
+	From what I can tell the below are styles regularly used by themes
+	to fix the image block.  I believe these should go into the block's
+	default styles.  It's difficult to say how this will land, however 
+	based on discussion found in (many) related issues here: 
+	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;
+}
+
+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);
 }
@@ -380,24 +406,4 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-align: var(--wp--custom--video--caption--text-align);
 }
 
-.wp-block-image {
-	/* 
-	From what I can tell the below are styles regularly used by themes
-	to fix the image block.  I believe these should go into the block's
-	default styles.  It's difficult to say how this will land, however 
-	based on discussion found in (many) related issues here: 
-	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;
-}
-
 /*# sourceMappingURL=ponyfill.css.map */

blank-canvas-blocks/experimental-theme.json

@@ -168,6 +168,12 @@
 						"lineHeight": 1.125,
 						"fontFamily": "var(--wp--preset--font-family--headings)"
 					}
+				},
+				"list": {
+					"fontFamily": "var(--wp--custom--font-family--base)",
+					"padding": {
+						"left": "calc( 2 * var(--wp--custom--padding--horizontal) )"
+					}
 				}
 			}
 		}

blank-canvas-blocks/sass/blocks/_list.scss

@@ -0,0 +1,5 @@
+ul,
+ol {
+	font-family: var(--wp--custom--list--font-family);
+	padding-left: var(--wp--custom--list--padding--left);
+} 

blank-canvas-blocks/sass/ponyfill.scss

@@ -11,10 +11,11 @@
 //   spacing with CSS-variables overrides
 @import "blocks/heading";
 @import "blocks/button";
+@import "blocks/image";
+@import "blocks/list";
 @import "blocks/paragraph";
 @import "blocks/navigation";
 @import "blocks/quote";
 @import "blocks/group";
 @import "blocks/separator";
 @import "blocks/video";
-@import "blocks/image";