Add background gradient support

themes/wds_headless/functions.php

@@ -50,9 +50,6 @@ function wds_theme_setup() {
 		]
 	);
 
-	// Disable background color gradient presets.
-	add_theme_support( 'editor-gradient-presets', [] );
-
 	// Reset available font size presets to only "normal" (16px).
 	add_theme_support(
 		'editor-font-sizes',

themes/wds_headless/js/blocks.js

@@ -1,4 +1,4 @@
-const { validateThemeColors } = wp.blockEditor;
+const { validateThemeColors, validateThemeGradients } = wp.blockEditor;
 const { useEffect } = wp.element;
 const { addFilter, applyFilters } = wp.hooks;
 
@@ -41,6 +41,14 @@ function wdsAddColorPaletteHexValues(settings) {
 		};
 	}
 
+	// Add gradient background hex attribute.
+	if (settings.attributes.hasOwnProperty("gradient")) {
+		settings.attributes.gradientHex = {
+			type: "string",
+			default: "",
+		};
+	}
+
 	// Add main color hex attribute.
 	if (settings.attributes.hasOwnProperty("mainColor")) {
 		settings.attributes.mainColorHex = {
@@ -61,14 +69,16 @@ function wdsAddColorPaletteHexValues(settings) {
 		...settings,
 		edit(props) {
 			const {
-				attributes: { backgroundColor, mainColor, textColor },
+				attributes: { backgroundColor, gradient, mainColor, textColor },
 			} = props;
 
 			useEffect(() => {
 				// Note: This may not work as expected if a custom theme palette has been set.
 				// In that case, this filter may need to be customized.
 				const defaultColors = validateThemeColors();
 
+				const defaultGradients = validateThemeGradients();
+
 				// Check for presence of background color attr.
 				if (backgroundColor) {
 					// Get color object by slug.
@@ -83,6 +93,20 @@ function wdsAddColorPaletteHexValues(settings) {
 					delete props.attributes.backgroundColorHex;
 				}
 
+				// Check for presence of gradient color attr.
+				if (gradient) {
+					// Get color object by slug.
+					const gradientObj = defaultGradients.filter(
+						(color) => color.slug === gradient
+					);
+
+					// Retrieve color hex value.
+					props.attributes.gradientHex =
+						gradientObj?.[0]?.gradient || null;
+				} else {
+					delete props.attributes.gradientHex;
+				}
+
 				// Check for presence of main color attr.
 				if (mainColor) {
 					// Get color object by slug.