Add SiteGen Customize Sidebar

includes/RestApi/SiteGenController.php

@@ -90,6 +90,15 @@ public function register_routes() {
 				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 			)
 		);
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/customize-data',
+			array(
+				'methods'  => \WP_REST_Server::READABLE,
+				'callback' => array( $this, 'get_customize_sidebar_data' ),
+				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+			)
+		);
 	}
 
 	/**
@@ -326,4 +335,15 @@ public function toggle_favourite_homepage( \WP_REST_Request $request ) {
 	public function get_site_details_meta( \WP_REST_Request $request ) {
 		return SiteGenData::get_site_details_questionnaire();
 	}
+
+	/**
+	 * Get Sitegen Customize sidebar data.
+	 *
+	 * @param \WP_REST_Request $request Request model.
+	 *
+	 * @return array|WP_Error
+	 */
+	public function get_customize_sidebar_data( \WP_REST_Request $request ) {
+		return SiteGenService::get_customize_sidebar_data();
+	}
 }

src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js

@@ -50,13 +50,10 @@ const SiteGenHeader = () => {
 				</>
 			</Fill>
 
-			{ currentStep?.header?.component
-				? isHeaderNavigationEnabled && <currentStep.header.component />
-				: isHeaderNavigationEnabled && (
-						<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
-							<StepNavigation />
-						</Fill>
-				  ) }
+			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
+				<>{ isHeaderNavigationEnabled && <StepNavigation /> }</>
+			</Fill>
+			{ currentStep?.header && <currentStep.header /> }
 		</>
 	);
 };

src/OnboardingSPA/components/LivePreview/BlockPreview/index.js

@@ -34,7 +34,7 @@
 		if ( setIsLoadingParent ) {
 			setIsLoadingParent( false );
 		}
 	}, [ skeletonLoadingTime ] );
 
 	const { currentData, storedPreviewSettings } = useSelect( ( select ) => {
 		return {
@@ -54,7 +54,7 @@
 		} else {
 			setSettings( storedPreviewSettings );
 		}
-	}, [] );
+	}, [ previewSettings, storedPreviewSettings ] );
 
 	useEffect( () => {
 		if ( blockGrammer ) {
@@ -66,7 +66,7 @@
 		if ( ! previewSettings ) {
 			setSettings( storedPreviewSettings );
 		}
 	}, [ storedPreviewSettings, currentData ] );
 
 	const SkeletonLivePreview = memo( () => {
 		return (

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js

@@ -0,0 +1,41 @@
+import './stylesheet.scss';
+
+const ColorPaletteIcon = ( {
+	idx,
+	label,
+	selectedPalette,
+	setSelectedPalette,
+	setSelectedColor,
+	colors,
+	setShowCustomColors = null,
+} ) => {
+	const conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`;
+	const baseClassName =
+		'nfd-onboarding-sidebar--customize__color-palette-icon';
+	const handleClick = () => {
+		setSelectedPalette( idx );
+		setSelectedColor( colors[ idx ] );
+		if ( setShowCustomColors ) {
+			setShowCustomColors( false );
+		}
+	};
+	return (
+		<div className={ `${ baseClassName }__container` }>
+			<div
+				role="presentation"
+				className={ `${
+					selectedPalette === idx
+						? `${ baseClassName }__container__icon__selected`
+						: `${ baseClassName }__container__icon`
+				}` }
+				style={ {
+					background: conicGradient,
+				} }
+				onClick={ handleClick }
+			></div>
+			<p>{ label }</p>
+		</div>
+	);
+};
+
+export default ColorPaletteIcon;

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/stylesheet.scss

@@ -0,0 +1,30 @@
+.nfd-onboarding-sidebar--customize__color-palette-icon {
+
+	&__container {
+		text-align: center;
+
+		&__icon {
+			box-sizing: border-box;
+			width: 45px;
+			height: 45px;
+			border-radius: 50%;
+			cursor: pointer;
+			box-shadow: "none";
+		}
+
+		&__icon__selected {
+			box-sizing: border-box;
+			width: 45px;
+			height: 45px;
+			border-radius: 50%;
+			cursor: pointer;
+			box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nfd-onboarding-sitegen-customize-icon-selected);
+		}
+
+		p {
+			margin-top: 8px;
+			color: var(--nfd-onboarding-sitegen-customize-default-text-color);
+		}
+	}
+
+}

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js

@@ -0,0 +1,41 @@
+import { useState } from '@wordpress/element';
+import { ColorPalette, Popover } from '@wordpress/components';
+import './stylesheet.scss';
+import { __ } from '@wordpress/i18n';
+
+const CustomColorPalette = ( {
+	onChange,
+	paletteSecondaryColors,
+	palettePrimaryColors,
+} ) => {
+	const [ color, setColor ] = useState( palettePrimaryColors[ 0 ].color );
+	const baseClassName =
+		'nfd-onboarding-sidebar--customize__custom-color-palette';
+	const colors = [
+		{
+			colors: palettePrimaryColors,
+			name: __( 'Primary colors', 'wp-module-onboarding' ),
+		},
+		{
+			colors: paletteSecondaryColors,
+			name: __( 'Secondary colors', 'wp-module-onboarding' ),
+		},
+	];
+	const handleColorChange = ( newColor ) => {
+		setColor( newColor );
+		onChange( newColor );
+	};
+	return (
+		<Popover placement="left">
+			<div className={ `${ baseClassName }__container` }>
+				<ColorPalette
+					colors={ colors }
+					value={ color }
+					onChange={ handleColorChange }
+				/>
+			</div>
+		</Popover>
+	);
+};
+
+export default CustomColorPalette;

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/stylesheet.scss

@@ -0,0 +1,14 @@
+.nfd-onboarding-sidebar {
+
+	&--customize {
+
+		&__custom-color-palette {
+
+			&__container {
+				padding: 16px;
+				width: 260px;
+			}
+		}
+	}
+
+}