Editor style fixes.

stratford/sass/style-child-theme-editor.scss

@@ -35,14 +35,45 @@
 /**
  * Extras
  */
+$color_background: #{map-deep-get($config-global, "color", "background", "default")};
+$color_background_light: #{map-deep-get($config-global, "color", "background", "light")};
+$color_foreground: #{map-deep-get($config-global, "color", "foreground", "default")};
+$color_primary: #{map-deep-get($config-global, "color", "primary", "default")};
+$color_secondary: #{map-deep-get($config-global, "color", "secondary", "default")};
+$color_primary_hover: #{map-deep-get($config-global, "color", "primary", "hover")};
+$spacing_horizontal: #{map-deep-get($config-global, "spacing", "horizontal")};
+$spacing_vertical: #{map-deep-get($config-global, "spacing", "vertical")};
+$font_size_xs: #{map-deep-get($config-global, "font", "size", "xs")};
+$font_size_md: #{map-deep-get($config-global, "font", "size", "md")};
+$font_size_base: #{map-deep-get($config-global, "font", "size", "base")};
+$font_size_xl: #{map-deep-get($config-global, "font", "size", "xl")};
+$font_family_primary: #{map-deep-get($config-global, "font", "family", "primary")};
+$font_family_secondary: #{map-deep-get($config-global, "font", "family", "secondary")};
+$font_family_code: #{map-deep-get($config-global, "font", "family", "code")};
+$font_line_height_body: #{map-deep-get($config-global, "font", "line-height", "body")};
+$button_line_height: #{map-deep-get($config-button, "font", "line-height")};
+$button_font_weight: #{map-deep-get($config-button, "font", "weight")};
+$button_font_family: #{map-deep-get($config-button, "font", "family")};
+$button_font_size: #{map-deep-get($config-button, "font", "size")};
+$button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")}; 
+$button_spacing_horizontal: #{map-deep-get($config-button, "padding", "horizontal")};
+$button_color: #{map-deep-get($config-button, "color", "text")};
+$button_color_hover: #{map-deep-get($config-button, "color", "text-hover")};
+$button_background: #{map-deep-get($config-button, "color", "background")};
+$button_background_hover: #{map-deep-get($config-button, "color", "background-hover")};
+$font_size_widget_title: #{map-deep-get($config-heading, "font", "size", "h3")};
+  
+/**
+ * 1. General Styles
+ */
+a {
+	text-decoration: none;
+}
 
- $color_primary: #{map-deep-get($config-global, "color", "primary", "default")};
-
- .editor-post-title__block .editor-post-title__input {
+.editor-post-title__block .editor-post-title__input {
 	text-align: center;
 	color: $color_primary;
- }
- 
+}
 
 h1,
 h2,
@@ -51,4 +82,162 @@ h4,
 h5,
 h6 {
 	color: $color_primary;
+}
+
+
+/**
+ * 2. Block Specific Styles
+ */
+
+/**
+ * 2.1. Column Block
+ */
+//  .wp-block-coblocks-column {
+// 	h1, 
+// 	h2, 
+// 	h3, 
+// 	h4, 
+// 	h5, 
+// 	h6 {
+// 		margin-bottom: .857em;
+// 	}
+// 	a {
+// 		color: #{map-deep-get($config-global, "color", "secondary", "default")};
+// 		&:hover {
+// 			color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+// 		}
+// 	}
+// }
+
+/**
+ * 2.2. Quote Block
+ */
+ .wp-block-quote, 
+ .wp-block-quote[style*="text-align:center"], 
+ .wp-block-quote[style*="text-align:right"] {
+	border: 1px solid $color_background_light;
+	padding: $spacing_horizontal;
+	p {
+		font-family: $font_family_secondary;
+		font-size: $font_size_md;
+		line-height: $font_line_height_body;
+	}
+	.wp-block-quote__citation {
+		color: inherit;
+		font-size: $font_size_md;
+	}
+ }
+
+ /**
+ * 2.3. File Block
+ */
+.wp-block-file {
+	div {
+		&.wp-block-file__button {
+			line-height: $button_line_height;
+			cursor: pointer;
+			font-weight: $button_font_weight;
+			font-family: $button_font_family;
+			background-color: $button_background;
+			font-size: $button_font_size;
+			padding: $button_spacing_vertical $button_spacing_horizontal;
+			text-transform: uppercase;
+			display: inline-block;
+			&:focus,
+			&:hover {
+				color: $button_color_hover;
+				background-color: $button_background_hover;
+				opacity: 1;
+			}
+		}
+	}
+}
+
+/**
+ * 2.4. Pre Block and Verse Block
+ */
+.wp-block-preformatted,
+.wp-block-verse {
+	pre {
+		font-family: $font_family_code;
+	}
+}
+
+/**
+ * 2.5. Button Block
+ */
+ .wp-block-button {
+	div {
+		&.wp-block-button__link {
+			text-transform: uppercase;
+			border: 0;
+			border-radius: 5em;
+			text-transform: uppercase;
+			&.has-background {
+				&:focus,
+				&:hover,
+				&:visited {
+					opacity: .8;
+				}
+			}
+		}
+	}
+	&.minimal {
+		.wp-block-button__link {
+			background: 0 0;
+			border: 2px solid;
+		}
+	}
+}
+
+/**
+ * 2.6. Search Block
+ */
+ .wp-block-search {
+	.wp-block-search__button {
+		text-transform: uppercase;
+		line-height: $button_line_height;
+		color: $button_color;
+		cursor: pointer;
+		font-weight: $button_font_weight;
+		font-family: $button_font_family;
+		font-size: $button_font_size;
+		background-color: $button_background;
+		border-radius: 5em;
+		border-width: 0;
+		padding: $button_spacing_vertical $button_spacing_horizontal;
+		display: inline-block;
+		&:focus, 
+		&:hover, 
+		&:visited {
+			color: $button_color_hover;
+			background-color: $button_background_hover;
+			opacity: 1;
+		}
+		border: none;
+		box-shadow: none;
+	}
+}
+
+.wp-block-columns {
+	.wp-block-latest-posts {
+		border-bottom: 1px solid $color_background_light;
+		> li {
+			border-top: 1px solid $color_background_light;
+			margin: 0;
+			padding-top: $spacing_horizontal;
+			padding-bottom: $spacing_horizontal;
+			> a {
+				font-size: $font_size_base;
+				font-weight: normal;
+				font-family: $font_family_secondary;
+				line-height: $font_line_height_body;
+			}
+			> time {
+				&.wp-block-latest-posts__post-date {
+					font-size: $font_size_base;
+				}
+			}
+		}
+	}
 }

stratford/style-editor.css

@@ -865,6 +865,13 @@ table th,
 /**
  * Extras
  */
+/**
+ * 1. General Styles
+ */
+a {
+	text-decoration: none;
+}
+
 .editor-post-title__block .editor-post-title__input {
 	text-align: center;
 	color: #2c313f;
@@ -878,3 +885,130 @@ h5,
 h6 {
 	color: #2c313f;
 }
+
+/**
+ * 2. Block Specific Styles
+ */
+/**
+ * 2.1. Column Block
+ */
+/**
+ * 2.2. Quote Block
+ */
+.wp-block-quote,
+.wp-block-quote[style*="text-align:center"],
+.wp-block-quote[style*="text-align:right"] {
+	border: 1px solid #f3f3f3;
+	padding: 16px;
+}
+
+.wp-block-quote p,
+.wp-block-quote[style*="text-align:center"] p,
+.wp-block-quote[style*="text-align:right"] p {
+	font-family: "Lato", sans-serif;
+	font-size: 1.2rem;
+	line-height: 1.6;
+}
+
+.wp-block-quote .wp-block-quote__citation,
+.wp-block-quote[style*="text-align:center"] .wp-block-quote__citation,
+.wp-block-quote[style*="text-align:right"] .wp-block-quote__citation {
+	color: inherit;
+	font-size: 1.2rem;
+}
+
+/**
+ * 2.3. File Block
+ */
+.wp-block-file div.wp-block-file__button {
+	line-height: 1.44;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	background-color: #3e69dc;
+	font-size: 0.83333rem;
+	padding: 16px 16px;
+	text-transform: uppercase;
+	display: inline-block;
+}
+
+.wp-block-file div.wp-block-file__button:focus, .wp-block-file div.wp-block-file__button:hover {
+	color: white;
+	background-color: #2c313f;
+	opacity: 1;
+}
+
+/**
+ * 2.4. Pre Block and Verse Block
+ */
+.wp-block-preformatted pre,
+.wp-block-verse pre {
+	font-family: "Inconsolata", monospace;
+}
+
+/**
+ * 2.5. Button Block
+ */
+.wp-block-button div.wp-block-button__link {
+	text-transform: uppercase;
+	border: 0;
+	border-radius: 5em;
+	text-transform: uppercase;
+}
+
+.wp-block-button div.wp-block-button__link.has-background:focus, .wp-block-button div.wp-block-button__link.has-background:hover, .wp-block-button div.wp-block-button__link.has-background:visited {
+	opacity: .8;
+}
+
+.wp-block-button.minimal .wp-block-button__link {
+	background: 0 0;
+	border: 2px solid;
+}
+
+/**
+ * 2.6. Search Block
+ */
+.wp-block-search .wp-block-search__button {
+	text-transform: uppercase;
+	line-height: 1.44;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 0.83333rem;
+	background-color: #3e69dc;
+	border-radius: 5em;
+	border-width: 0;
+	padding: 16px 16px;
+	display: inline-block;
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button:focus, .wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:visited {
+	color: white;
+	background-color: #2c313f;
+	opacity: 1;
+}
+
+.wp-block-columns .wp-block-latest-posts {
+	border-bottom: 1px solid #f3f3f3;
+}
+
+.wp-block-columns .wp-block-latest-posts > li {
+	border-top: 1px solid #f3f3f3;
+	margin: 0;
+	padding-top: 16px;
+	padding-bottom: 16px;
+}
+
+.wp-block-columns .wp-block-latest-posts > li > a {
+	font-size: 1rem;
+	font-weight: normal;
+	font-family: "Lato", sans-serif;
+	line-height: 1.6;
+}
+
+.wp-block-columns .wp-block-latest-posts > li > time.wp-block-latest-posts__post-date {
+	font-size: 1rem;
+}