editor-styles.scss

/**
 * Editor Normalization Styles
 *
 * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming
 * of the editor by themes.
 * Why do these exist? Why not rely on browser defaults?
 * These styles are necessary so long as CSS can bleed from the wp-admin into the editing canvas itself.
 * Let's continue working to refactor these away, whether through Shadow DOM or better scoping of upstream styles.
 */

body {
	font-family: $editor-font;
	font-size: $editor-font-size;
	line-height: $editor-line-height;
	color: $dark-gray-primary;
	padding: 10px;
}

// For full-wide blocks, we compensate for these 10px.
.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] {
	margin-left: -10px;
	margin-right: -10px;
}


/* Headings */
// These follow a Major Third type scale
// https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Noto%20Serif&fontweight=600
h1 {
	font-size: 2.44em;
}

h2 {
	font-size: 1.95em;
}

h3 {
	font-size: 1.56em;
}

h4 {
	font-size: 1.25em;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: 0.8em;
}

// Adjust line spacing for larger headings.
h1,
h2,
h3 {
	line-height: 1.4;
}

h4 {
	line-height: 1.5;
}

// Default margins.
h1 {
	margin-top: 0.67em;
	margin-bottom: 0.67em;
}

h2 {
	margin-top: 0.83em;
	margin-bottom: 0.83em;
}

h3 {
	margin-top: 1em;
	margin-bottom: 1em;
}

h4 {
	margin-top: 1.33em;
	margin-bottom: 1.33em;
}

h5 {
	margin-top: 1.67em;
	margin-bottom: 1.67em;
}

h6 {
	margin-top: 2.33em;
	margin-bottom: 2.33em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
}

p {
	font-size: inherit;
	line-height: inherit;
	margin-top: $default-block-margin;
	margin-bottom: $default-block-margin;
}

ul,
ol {
	margin-bottom: $default-block-margin;
	padding-left: 1.3em;
	margin-left: 1.3em;

	// Remove bottom margin from nested lists.
	ul,
	ol {
		margin-bottom: 0;
	}

	li {
		// This overrides a bottom margin globally applied to list items in wp-admin.
		margin-bottom: initial;
	}
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

ul ul,
ol ul {
	list-style-type: circle;
}

.wp-align-wrapper {
	max-width: $content-width;

	> .wp-block,
	&.wp-align-full {
		max-width: none;
	}

	&.wp-align-wide {
		max-width: 1100px;
	}
}

a {
	// This inherits the blue link color set by wp-admin, which is unfortunate.
	// However both inherit and unset properties set the color to black.
	transition: none;
}

code,
kbd {
	padding: 0;
	margin: 0;
	background: inherit;
	font-size: inherit;
	font-family: monospace;
}