Move opinionated styles to separate opt-in theme.scss files

This moves opinionated styles, such as colors, fonts, and other non-structural elements to separate theme.scss files which require opt in by the theme itself. This includes in this PR:

- Code styles
- Embed captions
- Image captions
- Preformatted styles
- Pullquote fonts & border styles
- Quote styles
- Table styles
- Video captions

In addition to this there's a new caption style mixin which reduces caption style reuse.

core-blocks/code/edit.js

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import './editor.scss';
+import './theme.scss';
 import { PlainText } from '@wordpress/editor';
 
 export default function CodeEdit( { attributes, setAttributes, className } ) {

core-blocks/code/theme.scss

@@ -0,0 +1,8 @@
+.wp-block-code {
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	color: $dark-gray-800;
+	padding: .8em 1.6em;
+	border: 1px solid $light-gray-500;
+	border-radius: 4px;
+}

core-blocks/embed/index.js

@@ -26,6 +26,7 @@ import apiRequest from '@wordpress/api-request';
  */
 import './style.scss';
 import './editor.scss';
+import './theme.scss';
 
 // These embeds do not work in sandboxes
 const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];

core-blocks/embed/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-embed figcaption {
+	@include caption-style();
+}

core-blocks/gallery/index.js

@@ -15,6 +15,7 @@ import { RichText, editorMediaUpload } from '@wordpress/editor';
  */
 import './style.scss';
 import { default as edit, defaultColumnsNumber } from './edit';
+import './theme.scss';
 
 const blockAttributes = {
 	align: {

core-blocks/gallery/style.scss

@@ -29,16 +29,16 @@
 		}
 
 		figcaption {
+			position: absolute;
+			width: 100%;
+			max-height: 100%;
+			overflow: auto;
 			padding: 40px 10px 5px;
 			color: $white;
 			text-align: center;
 			font-size: $default-font-size;
 			background: linear-gradient( 0deg, rgba( $color: $black, $alpha: 0.7 ) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent );
-			position: absolute;
-			width: 100%;
-			max-height: 100%;
-			overflow: auto;
-
+
 			img {
 				display: inline;
 			}

core-blocks/gallery/theme.scss

@@ -0,0 +1,9 @@
+.wp-block-gallery {
+	figcaption {
+		padding: 40px 10px 5px;
+		color: $white;
+		text-align: center;
+		font-size: $default-font-size;
+		background: linear-gradient( 0deg, rgba( $color: $black, $alpha: 0.7 ) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent );
+	}
+}

core-blocks/image/index.js

@@ -20,6 +20,7 @@ import { createBlobURL } from '@wordpress/blob';
  * Internal dependencies
  */
 import './style.scss';
+import './theme.scss';
 import edit from './edit';
 
 export const name = 'core/image';

core-blocks/image/style.scss

@@ -1,13 +1,6 @@
 .wp-block-image {
 	width: fit-content;
 
-	figcaption {
-		margin-top: 0.5em;
-		color: $dark-gray-300;
-		text-align: center;
-		font-size: $default-font-size;
-	}
-
 	&.aligncenter {
 		display: block;
 		margin-left: auto;

core-blocks/image/theme.scss

@@ -0,0 +1,5 @@
+.wp-block-image {
+	figcaption {
+		@include caption-style();
+	}
+}

core-blocks/preformatted/editor.scss

@@ -1,8 +1,5 @@
 .wp-block-preformatted {
 	pre {
 		white-space: pre-wrap;
-		font-family: $editor-html-font;
-		font-size: $text-editor-font-size;
-		color: $dark-gray-800;
 	}
 }

core-blocks/preformatted/index.js

@@ -9,6 +9,7 @@ import { RichText } from '@wordpress/editor';
  * Internal dependencies
  */
 import './editor.scss';
+import './theme.scss';
 
 export const name = 'core/preformatted';
 

core-blocks/preformatted/theme.scss

@@ -0,0 +1,7 @@
+.wp-block-preformatted {
+	pre {
+		font-family: $editor-html-font;
+		font-size: $text-editor-font-size;
+		color: $dark-gray-800;
+	}
+}

core-blocks/pullquote/index.js

@@ -19,6 +19,7 @@ import {
  */
 import './editor.scss';
 import './style.scss';
+import './theme.scss';
 
 const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) );
 const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( {

core-blocks/pullquote/style.scss

@@ -1,7 +1,4 @@
 .wp-block-pullquote {
-	border-top: 4px solid $dark-gray-500;
-	border-bottom: 4px solid $dark-gray-500;
-	color: $dark-gray-600;
 	padding: 3em 0;
 	text-align: center;
 
@@ -21,9 +18,6 @@
 
 	cite,
 	footer {
-		color: $dark-gray-600;
 		position: relative;
-		text-transform: uppercase;
-		font-size: $default-font-size;
 	}
 }

core-blocks/pullquote/theme.scss

@@ -0,0 +1,12 @@
+.wp-block-pullquote {
+	border-top: 4px solid $dark-gray-500;
+	border-bottom: 4px solid $dark-gray-500;
+	color: $dark-gray-600;
+
+	cite,
+	footer {
+		color: $dark-gray-600;
+		text-transform: uppercase;
+		font-size: $default-font-size;
+	}
+}

core-blocks/quote/style.scss

@@ -1,12 +1,6 @@
 .wp-block-quote {
-	cite,
-	footer {
-		margin-top: 1em;
-		position: relative;
-		font-style: normal;
-	}
-
-	&.is-style-large, &.is-large {
+	&.is-style-large,
+	&.is-large {
 		margin: 0 0 16px;
 		padding: 0 1em;
 
@@ -18,7 +12,7 @@
 
 		cite,
 		footer {
-			font-size: 19px;
+			font-size: 18px;
 			text-align: right;
 		}
 	}

core-blocks/quote/theme.scss

@@ -5,10 +5,9 @@
 	footer {
 		color: $dark-gray-300;
 		font-size: $default-font-size;
-	}
-
-	p {
-		margin-bottom: 16px;
+		margin-top: 1em;
+		position: relative;
+		font-style: normal;
 	}
 }
 

core-blocks/table/index.js

@@ -26,6 +26,7 @@ import {
  */
 import './editor.scss';
 import './style.scss';
+import './theme.scss';
 import TableBlock from './table-block';
 
 const tableContentSchema = {

core-blocks/table/style.scss

@@ -1,21 +1,4 @@
 .wp-block-table {
-	overflow-x: auto;
-	display: block;
-	border-collapse: collapse;
-	width: 100%;
-
-	tbody {
-		width: 100%;
-		display: table;
-		min-width: $break-mobile / 2;
-	}
-
-	td,
-	th {
-		padding: 0.5em;
-		border: 1px solid currentColor;
-	}
-
 	// Fixed layout toggle
 	&.has-fixed-layout tbody {
 		table-layout: fixed;

core-blocks/table/theme.scss

@@ -0,0 +1,18 @@
+.wp-block-table {
+	overflow-x: auto;
+	display: block;
+	border-collapse: collapse;
+	width: 100%;
+
+	tbody {
+		width: 100%;
+		display: table;
+		min-width: $break-mobile / 2;
+	}
+
+	td,
+	th {
+		padding: 0.5em;
+		border: 1px solid currentColor;
+	}
+}

core-blocks/video/index.js

@@ -12,6 +12,7 @@ import { RichText } from '@wordpress/editor';
  * Internal dependencies
  */
 import './style.scss';
+import './theme.scss';
 import edit from './edit';
 
 export const name = 'core/video';

core-blocks/video/style.scss

@@ -1,13 +1,4 @@
 .wp-block-video {
-	margin: 0;
-
-	figcaption {
-		margin-top: 0.5em;
-		color: $dark-gray-300;
-		text-align: center;
-		font-size: $default-font-size;
-	}
-
 	&.aligncenter {
 		text-align: center;
 	}

core-blocks/video/theme.scss

@@ -0,0 +1,5 @@
+.wp-block-video {
+	figcaption {
+		@include caption-style();
+	}
+}

edit-post/assets/stylesheets/_mixins.scss

@@ -278,3 +278,15 @@
 		right: $sidebar-width;
 	}
 }
+
+
+/**
+ * Styles that are reused verbatim in a few places
+ */
+
+@mixin caption-style() {
+	margin-top: 0.5em;
+	color: $dark-gray-300;
+	text-align: center;
+	font-size: $default-font-size;
+}