themes-wordpress/seedlet/assets/sass/blocks/utilities/_editor.scss

/**
* Editor Post Title
* - Needs a special styles
*/

// Post title style
.editor-post-title__block .editor-post-title__input {
	color: var(--global--color-foreground);
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
	font-size: var(--heading--font-size-h2);
	letter-spacing: var(--heading--letter-spacing-h2);
	line-height: var(--heading--line-height);
}

// Editor UI font styles
.wp-block.block-editor-default-block-appender > textarea {
	font-family: var(--global--font-secondary);
	font-size: var(--global--font-size-md);
}

// Gutenberg text color options
.has-text-color {}

.has-primary-color[class] {
	color: var(--global--color-primary) !important;
}

.has-secondary-color[class] {
	color: var(--global--color-secondary) !important;
}

.has-foreground-color[class] {
	color: var(--global--color-foreground) !important;
}

.has-foreground-light-color[class] {
	color: var(--global--color-foreground-light) !important;
}

.has-foreground-dark-color[class] {
	color: var(--global--color-foreground-dark) !important;
}

.has-tertiary-color[class] {
	color: var(--global--color-tertiary) !important;
}

.has-background-dark-color[class] {
	color: var(--global--color-background-dark) !important;
}

.has-background-color[class] {
	color: var(--global--color-background) !important;
}

// Gutenberg background-color options
.has-background {
	&:not(.has-background-background-color) a,
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-primary-background-color[class] {
	background-color: var(--global--color-primary) !important;
	color: var(--global--color-background);
}

.has-primary-background-color[class] {
	background-color: var(--global--color-primary) !important;
	color: var(--global--color-background);
}

.has-secondary-background-color[class] {
	background-color: var(--global--color-secondary) !important;
	color: var(--global--color-background);
}

.has-foreground-background-color[class] {
	background-color: var(--global--color-foreground) !important;
	color: var(--global--color-background);
}

.has-foreground-light-background-color[class] {
	background-color: var(--global--color-foreground-light) !important;
	color: var(--global--color-background);
}

.has-foreground-dark-background-color[class] {
	background-color: var(--global--color-foreground-dark) !important;
	color: var(--global--color-background);
}

.has-tertiary-background-color[class] {
	background-color: var(--global--color-tertiary) !important;
	color: var(--global--color-foreground);
}

.has-background-dark-background-color[class] {
	background-color: var(--global--color-background-dark) !important;
	color: var(--global--color-foreground);
}

.has-background-background-color[class] {
	background-color: var(--global--color-background) !important;
	color: var(--global--color-foreground);
}

.has-white-background-color[class] {
	background-color: var(--global--color-white) !important;
	color: var(--global--color-secondary);
}

.has-black-background-color[class] {
	background-color: var(--global--color-black) !important;
	color: var(--global--color-primary);
}

// Gutenberg Font-size utility classes
.is-tiny-text,
.has-tiny-font-size {
	font-size: var(--global--font-size-xs);
}

.is-small-text,
.has-small-font-size {
	font-size: var(--global--font-size-sm);
}

.is-regular-text,
.has-regular-font-size,
.has-normal-font-size,
.has-medium-font-size {
	font-size: var(--global--font-size-md);
}

.is-large-text,
.has-large-font-size {
	font-size: var(--global--font-size-lg);
	line-height: var(--global--line-height-heading);
}

.is-larger-text,
.has-larger-font-size,
.has-huge-font-size {
	font-size: var(--global--font-size-xl);
	line-height: var(--global--line-height-heading);
}

// Drop cap
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--heading--font-family);
	font-size: calc(2 * var(--heading--font-size-h1));
	font-weight: var(--heading--font-weight);
}

/**
 * Spacing Overrides
 */

[data-block] {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);

	[data-block]:first-child {
		margin-top: 0;
	}

	// Needs to be the second-last child to avoid applying this to the appender. 
	[data-block]:nth-last-child(2) {
		margin-bottom: 0;
	}
}

/* 
 * Custom gradients 
*/
.has-hard-diagonal-gradient-background {
	background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
}

.has-hard-diagonal-inverted-gradient-background {
	background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
}

.has-diagonal-gradient-background {
	background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-diagonal-inverted-gradient-background {
	background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-hard-horizontal-gradient-background {
	background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
}

.has-hard-horizontal-inverted-gradient-background {
	background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
}

.has-horizontal-gradient-background {
	background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-horizontal-inverted-gradient-background {
	background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-stripe-gradient-background {
	background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
}

/* Block Alignments */
.wp-block {

	// Gutenberg injects a rule that limits the max width of .wp-block to 580px
	// This line overrides it to use the responsive spacing rules for default width content
	max-width: var(--responsive--aligndefault-width);

	// Use the theme's max-width for wide alignment.
	&[data-align="wide"],
	&.alignwide {
		max-width: var(--responsive--alignwide-width);
	}

	&[data-align="full"],
	&.alignfull {
		max-width: none;
	}
}

.alignleft {
	margin: 0;
	margin-right: var(--global--spacing-horizontal);
}

.alignright {
	margin: 0;
	margin-left: var(--global--spacing-horizontal);
}