apply color schemes to editor and frontend

Author: kaeizen

src/block-components/block-div/edit.js

@@ -48,8 +48,9 @@ export const Edit = memo( props => {
 	const { getPlaceholder } = useBlockLayoutDefaults()
 
 	const {
-		COLOR_SCHEME_OPTIONS, backgroundModeColorScheme,
-		getScheme, updateColorSchemesInUse,
+		getScheme,
+		COLOR_SCHEME_OPTIONS,
+		backgroundModeColorScheme,
 	} = useBlockColorSchemes()
 
 	return (
@@ -94,9 +95,8 @@ export const Edit = memo( props => {
 						value={ getScheme( backgroundColorScheme || backgroundModeColorScheme, { mode: 'background', returnFallback: false } ) }
 						options={ COLOR_SCHEME_OPTIONS }
 						attribute="backgroundColorScheme"
-						changeCallback={ ( newScheme, oldScheme ) => {
+						changeCallback={ newScheme => {
 							const colorScheme = newScheme === backgroundModeColorScheme ? '' : newScheme
-							updateColorSchemesInUse( colorScheme, oldScheme, 'background' )
 							return colorScheme
 						} }
 						default={ backgroundModeColorScheme }

src/block-components/block-div/index.js

@@ -133,6 +133,7 @@ BlockDiv.Content = props => {
 			uniqueBlockClass,
 			{
 				'stk-block-background': attributes.hasBackground,
+				[ `background-${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
 				// When the block has auto top/bottom margins, we need to force the
 				// parent container to be 100% height or else the auto won't have any
 				// effect in the frontend. This is okay in the editor-side.

src/block-components/container-div/edit.js

@@ -46,8 +46,9 @@ export const Edit = props => {
 	const { getPlaceholder } = useBlockLayoutDefaults()
 
 	const {
-		COLOR_SCHEME_OPTIONS, containerModeColorScheme,
-		getScheme, updateColorSchemesInUse,
+		getScheme,
+		COLOR_SCHEME_OPTIONS,
+		containerModeColorScheme,
 	} = useBlockColorSchemes()
 
 	return (
@@ -65,9 +66,8 @@ export const Edit = props => {
 						value={ getScheme( containerColorScheme || containerModeColorScheme, { returnFallback: false } ) }
 						options={ COLOR_SCHEME_OPTIONS }
 						attribute="containerColorScheme"
-						changeCallback={ ( newScheme, oldScheme ) => {
+						changeCallback={ newScheme => {
 							const colorScheme = newScheme === containerModeColorScheme ? '' : newScheme
-							updateColorSchemesInUse( colorScheme, oldScheme )
 							return colorScheme
 						} }
 						default={ containerModeColorScheme }

src/block-components/container-div/index.js

@@ -73,6 +73,7 @@ ContainerDiv.Content = props => {
 		'stk-hover-parent': attributes.hasContainer && attributes.triggerHoverState, // This is needed to trigger parent-hover hover styles.
 		'stk--no-background': ! attributes.hasContainer,
 		'stk--no-padding': ! attributes.hasContainer,
+		[ `container-${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
 	} )
 
 	return <Div.Content

src/block/countdown/style.scss

@@ -27,6 +27,7 @@
 .stk-block-countdown__digit {
 	font-size: 40px;
 	height: 50%;
+	color: var(--stk-accent-color);
 }
 
 .stk-block-countdown__label,
@@ -39,7 +40,7 @@
 	align-items: center;
 	justify-content: center;
 	.stk-block-countdown__divider-colon {
-		color: #000;
+		color: var(--stk-accent-color, #000);
 		display: flex;
 		position: relative;
 		justify-content: center;

src/block/divider/style.scss

@@ -3,7 +3,7 @@
 .stk-block.stk-block-divider {
 	hr.stk-block-divider__hr,
 	.stk-block-divider__dot {
-		background: #ddd;
+		background: var(--stk-accent-color, #ddd);
 	}
 }
 

src/block/icon-list-item/style.scss

@@ -1,5 +1,6 @@
 .stk-block-icon-list-item {
 	list-style-type: none !important;
+	--stk-icon-list-marker-color: var(--stk-accent-color);
 }
 .stk-block-icon-list.stk-block {
 	.wp-block-stackable-icon-list-item:not(:last-child)::after {

src/block/progress-bar/style.scss

@@ -11,6 +11,7 @@
 	border-radius: var(--progress-border-radius, 0);
 	background-color: var(--progress-background, #f0f0f0);
 	overflow: hidden;
+	--progress-color-1: var(--stk-accent-color);
 	.stk-progress-bar__bar {
 		// 	percentage = ( progressValue (%) / progressMax ) * 100
 		--progress-percent: calc(( var(--progress-value, 50%) / var(--progress-max, 100)) * 100);

src/block/progress-circle/style.scss

@@ -4,6 +4,7 @@
 	position: relative;
 	height: var(--progress-size, 150px);
 	width: var(--progress-size, 150px);
+	--progress-color-1: var(--stk-accent-color);
 	svg {
 		height: var(--progress-size, 150px);
 		width: var(--progress-size, 150px);

src/block/table-of-contents/style.scss

@@ -37,4 +37,9 @@
 		margin-block-start: 0;
 		margin-block-end: 0;
 	}
+
+	// Add this so that it inherits the color from global color schemes.
+	::marker {
+		color: var(--stk-accent-color);
+	}
 }