1 files changed, 144 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/markdown/editor.scss b/plugins/jetpack/extensions/blocks/markdown/editor.scss
new file mode 100644
index 00000000..0cb11581
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/markdown/editor.scss
@@ -0,0 +1,144 @@
+@import '../../shared/styles/gutenberg-colors.scss';
+@import '../../shared/styles/gutenberg-variables.scss';
+
+.wp-block-jetpack-markdown__placeholder {
+	opacity: 0.62; // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L72
+	pointer-events: none;
+}
+
+// @TODO: Remove all these specific styles when related Gutenberg core styles become more generic
+.editor-block-list__block {
+	.wp-block-jetpack-markdown__preview {
+		min-height: 1.8em;
+		line-height: 1.8;
+
+		& > * {
+			margin-top: 32px;
+			margin-bottom: 32px;
+		}
+
+		// See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-library/src/heading/editor.scss#L12-L35
+		h1,
+		h2,
+		h3 {
+			line-height: 1.4;
+		}
+
+		h1 {
+			font-size: 2.44em;
+		}
+
+		h2 {
+			font-size: 1.95em;
+		}
+
+		h3 {
+			font-size: 1.56em;
+		}
+
+		h4 {
+			font-size: 1.25em;
+			line-height: 1.5;
+		}
+
+		h5 {
+			font-size: 1em;
+		}
+
+		h6 {
+			font-size: 0.8em;
+		}
+
+		hr {
+			border: none;
+			border-bottom: 2px solid $dark-gray-100;
+			margin: 2em auto;
+			max-width: 100px;
+		}
+
+		p {
+			line-height: 1.8;
+		}
+
+		blockquote {
+			border-left: 4px solid $black;
+			margin-left: 0;
+			margin-right: 0;
+			padding-left: 1em;
+
+			p {
+				line-height: 1.5;
+				margin: 1em 0;
+			}
+		}
+
+		ul,
+		ol {
+			margin-left: 1.3em;
+			padding-left: 1.3em;
+		}
+
+		li {
+			p {
+				margin: 0;
+			}
+		}
+
+		// See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L28-L39
+		code,
+		pre {
+			color: $dark-gray-800;
+			font-family: $editor-html-font;
+		}
+
+		code {
+			background: $light-gray-200;
+			border-radius: 2px;
+			font-size: inherit; // This is necessary to override upstream CSS.
+			padding: 2px;
+		}
+
+		pre {
+			border-radius: 4px;
+			border: 1px solid $light-gray-500;
+			font-size: $text-editor-font-size;
+			padding: 0.8em 1em;
+
+			code {
+				background: transparent;
+				padding: 0;
+			}
+		}
+
+		table {
+			overflow-x: auto;
+			border-collapse: collapse;
+			width: 100%;
+		}
+
+		thead,
+		tbody,
+		tfoot {
+			width: 100%;
+			min-width: 240px;
+		}
+
+		td,
+		th {
+			padding: 0.5em;
+			border: 1px solid currentColor;
+		}
+	}
+}
+
+.wp-block-jetpack-markdown {
+	.wp-block-jetpack-markdown__editor {
+		font-family: $editor-html-font;
+		font-size: $text-editor-font-size;
+
+		&:focus {
+			border-color: transparent;
+			box-shadow: 0 0 0 transparent;
+		}
+	}
+}