Feat: Global Color Schemes (#3457)

* init

* feat: inspector-sub-header for new global settings

* working responsive in editor and frontend

* hover state

* hover states

* fix: use onClick properly

* feat: global font pairs

* fix: use new scraped font pairs; adjust code to simpler json structure

* fix: make scrolling to current font pair independent from current view

* fix: rename stackable_font_pair_name to stackable_selected_font_pair

* fix: rename stackable_font_pair_name to stackable_selected_font_pair, reset previous commit

* fix: move bulk of code to FontPairPicker, restructure with consistent naming

* apply other block layouts

* init

* change request part 1

* feat: separate pro features

* fix: proper resetting in editingMode and in not

* feat: add confirmation when changing font pair while dirty

* styling tweaks

* fix: make typography settings headings consistent

* fix: error when no previously selected font pair

* fix: pro notice update, translation, renaming default theme

* change request part 2

-hover state notice
-orange indicator
-reset button
-bug fixes

* fix: move editingMode to pro code

* fix: error when resetting

* change block components placeholder

* fix: reset display bug

* fix css

* feat: inspector-sub-header for new global settings

* fix: use onClick properly

* feat: global font pairs

* fix: use new scraped font pairs; adjust code to simpler json structure

* fix: make scrolling to current font pair independent from current view

* fix: rename stackable_font_pair_name to stackable_selected_font_pair

* fix: rename stackable_font_pair_name to stackable_selected_font_pair, reset previous commit

* fix: move bulk of code to FontPairPicker, restructure with consistent naming

* feat: separate pro features

* styling tweaks

* fix: proper resetting in editingMode and in not

* feat: add confirmation when changing font pair while dirty

* fix: make typography settings headings consistent

* fix: error when no previously selected font pair

* fix: pro notice update, translation, renaming default theme

* fix: move editingMode to pro code

* fix: error when resetting

* fix: reset display bug

* Revert "Merge branch 'feat/3448-global-font-pairs' of https://github.com/gambitph/Stackable into feat/3448-global-font-pairs"

This reverts commit 52ca1c1, reversing
changes made to 889ed65.

* fix: pro notice button

* separate into spacing and borders, buttons and icons

* fix code

* rename functions

* fix four range control initial position

* border width in block editor override default

* include defaults.json

* add script for animation if block layout has hover

* fix bug (border width and border type)

* add import

* tweaks to the reset all button

* fix borderWidth override

* fix breakpoints

- use only 1 hook
- fix typography breakpoint issue

* fix hover animations, use stackable_frontend_css

* add desc and tooltips

* fix bug with shadow colors that uses rgba

* tweaked and rearranged settings. added correct docs. updated text

* use block-design-system.json

* remove defaults.json from buildInclude in gulp

* add documentation

* custom icons

* update block-design-system files

* create array/object for four-range values

* default color schemes

- add color scheme attributes
- save default color schemes to database

* add presets, proControl, filters for premium

* fix missing cssvar

* add reset and delete func, rearranged stuff

* fix block color scheme selector

* update pro notice

* init apply color scheme styles

* apply color schemes to editor and frontend

* remove bg color for :root

* fix typo

* fix color schemes if empty

* update comment

* update preset picker, add duplicate fx

* show color scheme colors in picker

* fix add function, fix frontend if default is empty

* only add colors that have value in the picker

* move toggle to color palette, rearrange settings

* update global colors test

* update global-settings test

* hover state

* update toggle in color palette

* update color scheme preview and color picker

* fix preview in edit

* fix color palette controls

* update editor loader

* apply parent-hover styles on frontend, add theme compatibility

* hover states

* fix array_map function

* fix other array_map functions

* fix theme compatibility

* add more presets, move theme compatibility code

* add documentation

* Update src/components/pro-control/index.js [skip ci]

* fix for moving background image on hover

* remove static from function

* minor fixes

translatable text,
use lodash's kebabCase,
add prefix,
use array_column,
rename namespace

* cache color scheme css

---------

Co-authored-by: Alquen Sarmiento <[email protected]>
Co-authored-by: Gambit <[email protected]>
Co-authored-by: [email protected] <>
Co-authored-by: Benjamin Intal <[email protected]>

Author: 4 people

.vscode/settings.json

@@ -11,4 +11,4 @@
 		"css",
 		"scss"
 	]
-}
+}

e2e/tests/global-settings.spec.ts

@@ -139,7 +139,7 @@ test.describe( 'Global Settings', () => {
 		await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
 		// The default timeout is 30s, extend it to 90s
-		const updateRequest = defaultBlockPage.waitForResponse( response => response.url().includes( 'update_block_style' ) && response.request().method() === 'POST', { timeout: 90_000 } )
+		const updateRequest = defaultBlockPage.waitForRequest( request => request.url().includes( 'update_block_style' ) && request.method() === 'POST', { timeout: 90_000 } )
 
 		// In older WP versions, the button text is 'Update' instead of 'Save'
 		if ( await defaultBlockPage.getByRole( 'button', {

plugin.php

@@ -233,6 +233,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

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

@@ -19,6 +19,10 @@ export const addAttributes = attrObject => {
 				type: 'boolean',
 				default: false,
 			},
+			backgroundColorScheme: {
+				type: 'string',
+				default: '',
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',

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

@@ -15,9 +15,11 @@ import {
 	InspectorBlockControls,
 	InspectorStyleControls,
 	PanelAdvancedSettings,
+	AdvancedSelectControl,
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
+	useBlockColorSchemes,
 	useBlockLayoutDefaults,
 	useBlockSetAttributesContext,
 } from '~stackable/hooks'
@@ -34,10 +36,23 @@ export const Edit = memo( props => {
 		initialOpen,
 		backgroundMediaAllowVideo,
 	} = props
-	const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
+
+	const {
+		hasBackground,
+		backgroundColorScheme,
+	} = useBlockAttributesContext( attributes => ( {
+		hasBackground: attributes.hasBackground,
+		backgroundColorScheme: attributes.backgroundColorScheme,
+	} ) )
 	const setAttributes = useBlockSetAttributesContext()
 	const { getPlaceholder } = useBlockLayoutDefaults()
 
+	const {
+		getScheme,
+		COLOR_SCHEME_OPTIONS,
+		backgroundModeColorScheme,
+	} = useBlockColorSchemes()
+
 	return (
 		<>
 			<InspectorBlockControls>
@@ -75,6 +90,17 @@ export const Edit = memo( props => {
 					onChange={ hasBackground => setAttributes( { hasBackground } ) }
 					initialOpen={ initialOpen === 'background' }
 				>
+					<AdvancedSelectControl
+						label={ __( 'Color Scheme', i18n ) }
+						value={ getScheme( backgroundColorScheme || backgroundModeColorScheme, { mode: 'background', returnFallback: false } ) }
+						options={ COLOR_SCHEME_OPTIONS }
+						attribute="backgroundColorScheme"
+						changeCallback={ newScheme => {
+							const colorScheme = newScheme === backgroundModeColorScheme ? '' : newScheme
+							return colorScheme
+						} }
+						default={ backgroundModeColorScheme }
+					/>
 					<BackgroundControls
 						attrNameTemplate="block%s"
 						onBackgroundEnableAttribute="hasBackground"

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

@@ -57,6 +57,7 @@ export const BlockDiv = memo( props => {
 			{
 				[ uniqueBlockClass ]: withUniqueClass,
 				'stk-block-background': attributes.hasBackground,
+				[ `stk--background-scheme--${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,
 				// When the block has auto margins, we need to "add" those margins to
 				// the main block div so we can simulate the effect inside the editor.
 				// This works in conjunction with the styles in
@@ -132,6 +133,7 @@ BlockDiv.Content = props => {
 			uniqueBlockClass,
 			{
 				'stk-block-background': attributes.hasBackground,
+				[ `stk--background-scheme--${ 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/attributes.js

@@ -15,6 +15,10 @@ export const addAttributes = attrObject => {
 				type: 'boolean',
 				default: true,
 			},
+			containerColorScheme: {
+				type: 'string',
+				default: '',
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',

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

@@ -16,9 +16,11 @@ import {
 	PanelAdvancedSettings,
 	AdvancedToggleControl,
 	InspectorBlockControls,
+	AdvancedSelectControl,
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
+	useBlockColorSchemes,
 	useBlockLayoutDefaults,
 	useBlockSetAttributesContext,
 } from '~stackable/hooks'
@@ -33,10 +35,22 @@ export const Edit = props => {
 		hasContentVerticalAlign = false,
 	} = props
 
-	const hasContainer = useBlockAttributesContext( attributes => attributes.hasContainer )
+	const {
+		hasContainer,
+		containerColorScheme,
+	} = useBlockAttributesContext( attributes => ( {
+		hasContainer: attributes.hasContainer,
+		containerColorScheme: attributes.containerColorScheme,
+	} ) )
 	const setAttributes = useBlockSetAttributesContext()
 	const { getPlaceholder } = useBlockLayoutDefaults()
 
+	const {
+		getScheme,
+		COLOR_SCHEME_OPTIONS,
+		containerModeColorScheme,
+	} = useBlockColorSchemes()
+
 	return (
 		<>
 			<InspectorBlockControls>
@@ -46,8 +60,18 @@ export const Edit = props => {
 					hasToggle={ true }
 					checked={ hasContainer }
 					onChange={ hasContainer => setAttributes( { hasContainer } ) }
-
 				>
+					<AdvancedSelectControl
+						label={ __( 'Color Scheme', i18n ) }
+						value={ getScheme( containerColorScheme || containerModeColorScheme, { returnFallback: false } ) }
+						options={ COLOR_SCHEME_OPTIONS }
+						attribute="containerColorScheme"
+						changeCallback={ newScheme => {
+							const colorScheme = newScheme === containerModeColorScheme ? '' : newScheme
+							return colorScheme
+						} }
+						default={ containerModeColorScheme }
+					/>
 					<SizeControls.Layout
 						attrNameTemplate="container%s"
 						enableMargin={ false }

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

@@ -23,6 +23,7 @@ export const ContainerDiv = props => {
 			containerBackgroundMediaExternalUrlTablet: attributes.containerBackgroundMediaExternalUrlTablet,
 			containerBackgroundMediaExternalUrlMobile: attributes.containerBackgroundMediaExternalUrlMobile,
 			containerBackgroundColorType: attributes.containerBackgroundColorType,
+			containerColorScheme: attributes.containerColorScheme,
 		}
 	} )
 	const instanceId = useQueryLoopInstanceId( attributes.uniqueId )
@@ -38,6 +39,7 @@ export const ContainerDiv = 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,
+		[ `stk--container-scheme--${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
 	} )
 
 	return <Div
@@ -71,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,
+		[ `stk--container-scheme--${ attributes.containerColorScheme }` ]: attributes.hasContainer && attributes.containerColorScheme,
 	} )
 
 	return <Div.Content

src/block/countdown/style.scss

@@ -27,6 +27,10 @@
 .stk-block-countdown__digit {
 	font-size: 40px;
 	height: 50%;
+	color: var(--stk-accent-color);
+	&:where(:hover) {
+		#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
+	}
 }
 
 .stk-block-countdown__label,
@@ -39,13 +43,16 @@
 	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;
 		line-height: 1;
 		font-size: 45px;
 		top: -12px;
+		&:where(:hover) {
+			#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
+		}
 	}
 
 	.stk-block-countdown__divider-line {