From 3ffbf7b0cdd50157474a6529fd1da94783617716 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 16 Jan 2024 20:30:26 +0530 Subject: [PATCH 1/3] Add Customize Sidebar --- includes/RestApi/SiteGenController.php | 20 + .../Header/components/SiteGenHeader/index.js | 11 +- .../ColorPaletteIcon/index.js | 41 ++ .../ColorPaletteIcon/stylesheet.scss | 30 ++ .../CustomColorPalette/index.js | 41 ++ .../CustomColorPalette/stylesheet.scss | 14 + .../Customize/DesignColorsPanel/index.js | 311 +++++++++++++ .../DesignColorsPanel/stylesheet.scss | 83 ++++ .../Customize/DesignFontsPanel/index.js | 433 ++++++++++++++++++ .../DesignFontsPanel/stylesheet.scss | 104 +++++ .../Sidebar/components/Customize/Menu.js | 60 +++ .../Sidebar/components/Customize/Sidebar.js | 60 +++ .../Customize/Skeleton/SidebarSkeleton.js | 95 ++++ .../Customize/Skeleton/stylesheet.scss | 146 ++++++ .../Sidebar/components/Customize/data.js | 128 ++++++ .../components/Customize/stylesheet.scss | 37 ++ .../components/Sidebar/stylesheet.scss | 1 + src/OnboardingSPA/data/sidebars/index.js | 14 + .../steps/SiteGen/Editor/Header/index.js | 17 +- .../Editor/Sidebar/Customize/contents.js | 11 + .../SiteGen/Editor/Sidebar/Customize/index.js | 47 ++ .../steps/SiteGen/Editor/step.js | 5 +- src/OnboardingSPA/store/actions.js | 7 + src/OnboardingSPA/store/reducer.js | 5 + src/OnboardingSPA/store/selectors.js | 4 + src/OnboardingSPA/styles/_branding.scss | 10 + src/OnboardingSPA/utils/api/siteGen.js | 8 + src/constants.js | 1 + 28 files changed, 1734 insertions(+), 10 deletions(-) create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/Menu.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/SidebarSkeleton.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/data.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/Customize/stylesheet.scss create mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/contents.js create mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/index.js diff --git a/includes/RestApi/SiteGenController.php b/includes/RestApi/SiteGenController.php index b163e6887..5cf70d498 100644 --- a/includes/RestApi/SiteGenController.php +++ b/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(); + } } diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index df5b3e2ee..f75b24f4a 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -48,13 +48,10 @@ const SiteGenHeader = () => { - { currentStep?.header?.component - ? isHeaderNavigationEnabled && - : isHeaderNavigationEnabled && ( - - - - ) } + + <>{ isHeaderNavigationEnabled && } + + { currentStep?.header && } ); }; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js new file mode 100644 index 000000000..b0ddd0d95 --- /dev/null +++ b/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 ( +
+
+

{ label }

+
+ ); +}; + +export default ColorPaletteIcon; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/stylesheet.scss new file mode 100644 index 000000000..9cc884930 --- /dev/null +++ b/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); + } + } + +} diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js new file mode 100644 index 000000000..1e5c72220 --- /dev/null +++ b/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 ( + +
+ +
+ + ); +}; + +export default CustomColorPalette; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/stylesheet.scss new file mode 100644 index 000000000..2a55d3621 --- /dev/null +++ b/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; + } + } + } + +} diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js new file mode 100644 index 000000000..530bd45f2 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -0,0 +1,311 @@ +import { useState, useEffect } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { PanelBody, PanelRow, Button } from '@wordpress/components'; +import ColorPickerButton from '../../../../ColorPickerButton'; +import ColorPaletteIcon from './ColorPaletteIcon'; +import CustomColorPalette from './CustomColorPalette'; +import './stylesheet.scss'; +import { store as nfdOnboardingStore } from '../../../../../store'; +import { __ } from '@wordpress/i18n'; + +const DesignColorsPanel = ( { + baseClassName = 'nfd-onboarding-sidebar--customize__design-colors-panel', + heading, +} ) => { + const { customizeSidebarData } = useSelect( ( select ) => { + return { + customizeSidebarData: + select( nfdOnboardingStore ).getCustomizeSidebarData(), + }; + }, [] ); + + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + + const design = customizeSidebarData?.design; + const colorPalettes = customizeSidebarData?.colorPalettes; + const palettePrimaryColors = Object.entries( design?.color_palette ).map( + ( [ , color ] ) => ( { + name: __( 'Custom', 'wp-module-onboarding' ), + color, + } ) + ); + + const defaultColors = { + primary: design?.color_palette.primary, + secondary: + design?.color_palette.secondary || design?.color_palette.primary, + tertiary: + design?.color_palette.tertiary || design?.color_palette.primary, + }; + + const palettes = []; + + colorPalettes.slice( 1, 5 ).forEach( ( palette ) => { + palettes.push( { + primary: palette?.primary, + secondary: palette?.secondary || palette?.primary, + tertiary: palette?.tertiary || palette?.primary, + } ); + } ); + + const [ colors ] = useState( [ defaultColors, ...palettes ] ); + const [ selectedColor, setSelectedColor ] = useState( null ); + const [ showCustomColors, setShowCustomColors ] = useState( false ); + const [ isEditingCustomColors, setIsEditingCustomColors ] = + useState( false ); + const [ selectedCustomColors, setSelectedCustomColors ] = useState( false ); + const [ selectedPalette, setSelectedPalette ] = useState( null ); + const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' ); + const [ showColorPicker, setShowColorPicker ] = useState( false ); + const customPaletteId = colors.length - 1; + + const paletteSecondaryColors = Object.entries( colorPalettes[ 1 ] ) + .map( ( [ name, color ] ) => { + if ( name !== 'name' ) { + return { + name: __( 'Custom', 'wp-module-onboarding' ), + color, + }; + } + return null; + } ) + .filter( Boolean ); + + const handleApplyCustomColors = () => { + setSelectedCustomColors( true ); + setIsEditingCustomColors( false ); + setSelectedPalette( customPaletteId ); + colors[ selectedPalette ] = selectedColor; + }; + + const handleEditCustomColors = () => { + setSelectedPalette( customPaletteId ); + setSelectedColor( colors[ customPaletteId ] ); + setIsEditingCustomColors( true ); + }; + + const handleColorPickerButton = ( colorType ) => { + setShowColorPicker( ! showColorPicker ); + setColorPickerCalledBy( ! showColorPicker ? colorType : '' ); + }; + + const handleColorPicker = ( color ) => { + const updatedColor = { ...selectedColor }; + updatedColor[ colorPickerCalledBy ] = color; + setSelectedColor( updatedColor ); + }; + + const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const convertColorSchema = ( inputObject ) => { + const outputArray = []; + + for ( const key in inputObject ) { + if ( Object.prototype.hasOwnProperty.call( inputObject, key ) ) { + const slug = key.replace( /_/g, '-' ); + const color = inputObject[ key ]; + const name = key + .split( '_' ) + .map( + ( word ) => + word.charAt( 0 ).toUpperCase() + word.slice( 1 ) + ) + .join( ' ' ); + + outputArray.push( { + slug, + color, + name, + } ); + } + } + return outputArray; + }; + + const handleUpdatePreviewSettings = () => { + colorPalettes[ selectedPalette ].primary = selectedColor.primary; + colorPalettes[ selectedPalette ].secondary = selectedColor.secondary; + colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary; + const slug = currentData.sitegen?.homepages?.active?.slug; + if (slug) { + currentData.sitegen.homepages.data[ slug ].color.palette = + convertColorSchema( colorPalettes[ selectedPalette ] ); + currentData.sitegen.homepages.active.color.palette = convertColorSchema( + colorPalettes[ selectedPalette ] + ); + setCurrentOnboardingData( currentData ); + } + }; + + useEffect( () => { + if ( selectedColor && selectedPalette ) { + handleUpdatePreviewSettings(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ selectedColor, selectedPalette ] ); + + const renderCustomColorsPalette = () => { + return ( +
+
+
+ + { __( 'CUSTOM COLORS', 'wp-module-onboarding' ) } + +
+ +
+ +
+ +
+
+ ); + }; + + const renderCustomColorPicker = () => { + return ( +
+
+ { __( 'CUSTOM COLORS', 'wp-module-onboarding' ) } +
+
+ { [ 'primary', 'secondary', 'tertiary' ].map( + ( colorType, index ) => ( + + ) + ) } +
+
+ + +
+ + { showColorPicker && ( + + ) } +
+ ); + }; + + const handlePickYourOwnColors = () => { + setSelectedPalette( customPaletteId ); + setSelectedColor( colors[ customPaletteId ] ); + setShowCustomColors( true ); + if ( ! selectedCustomColors ) { + setIsEditingCustomColors( true ); + } + }; + + const handleCancelCustomColors = () => { + if ( ! selectedCustomColors ) { + setShowCustomColors( false ); + } else { + setIsEditingCustomColors( false ); + } + }; + + return ( + + +
+
+

+ { heading } +

+
+ { colors.slice( 0, 4 ).map( ( elem, idx ) => ( + + ) ) } +
+
+
+ + + { ! showCustomColors && ( +
+ +
+ ) } + { showCustomColors && + isEditingCustomColors && + renderCustomColorPicker() } + { showCustomColors && + ! isEditingCustomColors && + renderCustomColorsPalette() } + + + ); +}; + +export default DesignColorsPanel; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss new file mode 100644 index 000000000..38f0eb88a --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss @@ -0,0 +1,83 @@ +.nfd-onboarding-sidebar--customize { + + &__design-colors-panel { + border: none; + + &__container { + display: flex; + + &__text { + align-items: center; + + &__heading, + &__subheading { + margin-top: 2px; + line-height: 16px; + } + } + + &__color__palette__icon { + display: flex; + justify-content: space-around; + gap: 20px; + } + + &__icon { + margin-right: 5%; + } + + } + + &__custom__colors__container { + width: 100%; + + &__buttons { + margin-top: 20px; + display: flex; + justify-content: flex-end; + + .cancel { + color: var(--nfd-onboarding-sitegen-customize-primary-button-color); + } + + .is-primary { + background-color: var(--nfd-onboarding-sitegen-customize-primary-button-color); + border-radius: 5px; + } + } + } + + &__custom__colors__button__container { + width: 100%; + text-align: center; + + button { + border: 1px solid var(--nfd-onboarding-sitegen-customize-grey-1); + border-radius: 8px; + width: 100%; + display: block; + margin: 0 auto; + } + } + + &__custom-color-palette__container { + width: 100%; + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + + button { + background: none; + border: none; + padding: 0; + text-decoration: underline; + cursor: pointer; + color: var(--nfd-onboarding-sitegen-customize-link-text-color); + } + } + } + } + +} diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js new file mode 100644 index 000000000..e1719c416 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -0,0 +1,433 @@ +import { useState, useEffect } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { PanelBody, PanelRow, Button, Dashicon } from '@wordpress/components'; +import './stylesheet.scss'; +import { store as nfdOnboardingStore } from '../../../../../store'; +import { __ } from '@wordpress/i18n'; + +const FontGroup = ( { + baseClassName, + group, + selectedGroup, + handleGroupSelect, +} ) => ( +
+
handleGroupSelect( group.id ) } + > + +
+ + { group.headings } + +
+ + { group.body } + +
+ { group.id === 0 && ( + + { __( 'Default', 'wp-module-onboarding' ) } + + ) } +
+
+); + +const CustomFontsForm = ( { + baseClassName, + customFont, + setCustomFont, + handleCancelCustomFonts, + handleApplyCustomFonts, + renderFontOptions, +} ) => ( +
+
+ { __( 'CUSTOM FONTS', 'wp-module-onboarding' ) } +
+
+
+
+ + { __( 'Headings', 'wp-module-onboarding' ) } + +
+ +
+
+ + { __( 'Body', 'wp-module-onboarding' ) } + +
+ +
+
+
+ + +
+
+
+); + +const CustomFontsDisplay = ( { + baseClassName, + selectedGroup, + selectedCustomFont, + handleGroupSelect, + handleEditCustomFont, +} ) => ( +
+
+
+ { __( 'CUSTOM FONTS', 'wp-module-onboarding' ) } +
+ +
+ +
+
handleGroupSelect( 'custom' ) } + > + +
+ + { selectedCustomFont.headings } + +
+ + { selectedCustomFont.body } + +
+
+
+
+); + +const DesignFontsPanel = ( { + baseClassName = 'nfd-onboarding-sidebar--customize__design-fonts-panel', +} ) => { + const { customizeSidebarData } = useSelect( ( select ) => { + return { + customizeSidebarData: + select( nfdOnboardingStore ).getCustomizeSidebarData(), + }; + }, [] ); + + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + + const design = customizeSidebarData?.design; + const designStyles = customizeSidebarData?.designStyles; + const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + + const fontGroups = [ + { + id: 0, + headings: design?.style?.fonts_heading, + body: design?.style?.fonts_content, + }, + { + id: 1, + headings: designStyles[ 1 ]?.fonts_heading, + body: designStyles[ 1 ]?.fonts_content, + }, + { + id: 2, + headings: designStyles[ 2 ]?.fonts_heading, + body: designStyles[ 2 ]?.fonts_content, + }, + { + id: 3, + headings: designStyles[ 3 ]?.fonts_heading, + body: designStyles[ 3 ]?.fonts_content, + }, + ]; + + const [ selectedGroup, setSelectedGroup ] = useState( null ); + const [ showCustomFonts, setShowCustomFonts ] = useState( false ); + const [ customFont, setCustomFont ] = useState( { + headings: '', + body: '', + } ); + const [ selectedCustomFont, setSelectedCustomFont ] = useState( null ); + const [ isEditingCustomFont, setIsEditingCustomFont ] = useState( false ); + + const fontsHeading = designStyles?.map( ( style ) => style.fonts_heading ); + const fontsContent = designStyles?.map( ( style ) => style.fonts_content ); + + const handleUpdatePreviewSettings = () => { + let headings; + let body; + if ( selectedGroup === 'custom' ) { + headings = customFont.headings; + body = customFont.body; + } else { + headings = fontGroups[ selectedGroup ].headings; + body = fontGroups[ selectedGroup ].body; + } + const slug = currentData.sitegen?.homepages?.active?.slug; + + if (slug) { + currentData.sitegen.homepages.data[ slug ] = { + ...currentData.sitegen.homepages.data[ slug ], + styles: { + blocks: [ + { + 'core/heading': { + typography: { + fontFamily: headings, + }, + }, + 'core/body': { + typography: { + fontFamily: body, + }, + }, + }, + ], + }, + }; + currentData.sitegen.homepages.active = { + ...currentData.sitegen.homepages.active, + styles: { + blocks: [ + { + 'core/heading': { + typography: { + fontFamily: headings, + }, + }, + 'core/body': { + typography: { + fontFamily: body, + }, + }, + }, + ], + }, + }; + setCurrentOnboardingData( currentData ); + } + }; + + useEffect( () => { + if ( selectedGroup !== null && selectedGroup !== undefined ) { + handleUpdatePreviewSettings(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ selectedGroup, customFont ] ); + + const fontOptions = [ ...new Set( [ ...fontsHeading, ...fontsContent ] ) ]; + + const handleGroupSelect = ( groupId ) => { + if ( groupId !== 'custom' && selectedCustomFont ) { + setShowCustomFonts( false ); + } + setSelectedGroup( groupId ); + }; + + const handleSelectYourOwnFonts = () => { + setShowCustomFonts( true ); + if ( ! selectedCustomFont ) { + setIsEditingCustomFont( true ); + } + }; + + const handleEditCustomFont = () => { + setIsEditingCustomFont( true ); + }; + + const handleCancelCustomFonts = () => { + if ( ! selectedCustomFont ) { + setShowCustomFonts( false ); + } else { + setIsEditingCustomFont( false ); + } + }; + + const handleApplyCustomFonts = () => { + setSelectedGroup( null ); + setSelectedCustomFont( customFont ); + setIsEditingCustomFont( false ); + setSelectedGroup( 'custom' ); + }; + + const renderFontOptions = () => { + return fontOptions.map( ( font ) => ( + + ) ); + }; + + const renderFontGroups = () => { + return fontGroups.map( ( group ) => ( + + ) ); + }; + + const renderCustomFontsForm = () => { + return ( + + ); + }; + + const renderCustomFontsDisplay = () => { + return ( + + ); + }; + + return ( + + +
+
+

+ + { __( 'Fonts', 'wp-module-onboarding' ) } + +

+
+
{ renderFontGroups() }
+
+ + + + { ! showCustomFonts && ( +
+ +
+ ) } + { showCustomFonts && + isEditingCustomFont && + renderCustomFontsForm() } + { showCustomFonts && + ! isEditingCustomFont && + renderCustomFontsDisplay() } + + + ); +}; + +export default DesignFontsPanel; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss new file mode 100644 index 000000000..5a0d779d4 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss @@ -0,0 +1,104 @@ +.nfd-onboarding-sidebar--customize { + + &__design-fonts-panel { + border-bottom: none; + + &__container { + width: 100%; + + button { + border: 1px solid var(--nfd-onboarding-sitegen-customize-grey-1); + border-radius: 8px; + width: 100%; + display: block; + margin: 0 auto; + } + } + + &__custom-fonts__container { + width: 100%; + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + + button { + background: none; + border: none; + padding: 0; + text-decoration: underline; + cursor: pointer; + color: var(--nfd-onboarding-sitegen-customize-link-text-color); + } + } + } + + &__font-group__container { + margin-bottom: 20px; + display: flex; + align-items: flex-start; + width: 100%; + + &__button { + cursor: pointer; + display: flex; + align-items: flex-start; + margin-left: 0; + width: 100%; + + .default { + margin-left: auto; + text-align: right; + } + + &__icon { + margin-right: 10px; + } + + &__font-name__container { + margin-left: 10px; + flex: 1; + + &__heading { + font-size: 18px; + margin-bottom: 5px; + } + + &__body { + margin-bottom: 5px; + } + } + } + } + + &__fonts-form__container { + width: 100%; + + span { + margin: 10px 0; + } + + select { + margin: 5px 0; + width: 100%; + } + + &__button__container { + margin-top: 20px; + display: flex; + justify-content: flex-end; + + .cancel { + color: var(--nfd-onboarding-sitegen-customize-primary-button-color); + } + + .apply { + background-color: var(--nfd-onboarding-sitegen-customize-primary-button-color); + border-radius: 5px; + } + } + } + } + +} diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/Menu.js b/src/OnboardingSPA/components/Sidebar/components/Customize/Menu.js new file mode 100644 index 000000000..880754584 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/Menu.js @@ -0,0 +1,60 @@ +import { Fill, Button } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { settings } from '@wordpress/icons'; +import { store as nfdOnboardingStore } from '../../../../store'; +import { SIDEBAR_MENU_SLOTFILL_PREFIX } from '../../../../../constants'; +import classNames from 'classnames'; +import { __ } from '@wordpress/i18n'; + +const CustomizeMenu = () => { + const { isSidebarOpened, sideBarView, currentStep } = useSelect( + ( select ) => { + return { + isSidebarOpened: select( nfdOnboardingStore ).isSidebarOpened(), + sideBarView: select( nfdOnboardingStore ).getSidebarView(), + currentStep: select( nfdOnboardingStore ).getCurrentStep(), + }; + } + ); + + const { setIsSidebarOpened, setSidebarActiveView } = + useDispatch( nfdOnboardingStore ); + const toggleSidebar = () => { + const isSidebarOpenedNew = + sideBarView === 'Customize' ? ! isSidebarOpened : isSidebarOpened; + setSidebarActiveView( 'Customize' ); + setIsSidebarOpened( isSidebarOpenedNew ); + }; + const buttonStyle = { + backgroundColor: 'var(--nfd-onboarding-navigation-back-background)', + color: 'var(--nfd-onboarding-primary)', + borderRadius: '8px', + height: '36px', + }; + return ( + <> + { sideBarView && currentStep?.sidebars?.Customize && ( + + + + ) } + + ); +}; + +export default CustomizeMenu; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js new file mode 100644 index 000000000..beb46f5e9 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js @@ -0,0 +1,60 @@ +import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components'; +import { Fragment, memo, Suspense } from '@wordpress/element'; +import { closeSmall } from '@wordpress/icons'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +import { store as nfdOnboardingStore } from '../../../../store'; +import { SIDEBAR_SLOTFILL_PREFIX } from '../../../../../constants'; +import SidebarSkeleton from './Skeleton/SidebarSkeleton'; + +const CustomizeSidebar = () => { + const { currentStep } = useSelect( ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getCurrentStep(), + }; + } ); + + const { setIsSidebarOpened } = useDispatch( nfdOnboardingStore ); + + const closeSideBar = () => { + setIsSidebarOpened( false ); + }; + return ( + + + }> + +
+ +
+ + { currentStep?.sidebars?.Customize && + currentStep?.sidebars?.Customize.SidebarComponents.map( + ( SidebarComponent, index ) => { + return ( + + + + ); + } + ) } + + + + ); +}; + +export default memo( CustomizeSidebar ); diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/SidebarSkeleton.js b/src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/SidebarSkeleton.js new file mode 100644 index 000000000..75c69addb --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/SidebarSkeleton.js @@ -0,0 +1,95 @@ +import { useSelect } from '@wordpress/data'; +import { Fragment } from '@wordpress/element'; + +import Animate from '../../../../Animate'; +import { store as nfdOnboardingStore } from '../../../../../store'; + +/** Skeleton Structure for the SideBar */ +const SidebarSkeleton = () => { + const { brandConfig } = useSelect( ( select ) => { + return { + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); + + return ( +
+
+
+ + +
+
+ + +
+
+
+ { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + +
+ +
+
+ + ) } +
+ + + + + + +
+ { ( brandConfig?.views?.sidebar?.fullService?.shown !== + false || + brandConfig?.views?.sidebar?.experts?.shown !== + false ) && ( +
+ +
+ ) } + +
+
+
+ ); +}; + +export default SidebarSkeleton; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/stylesheet.scss new file mode 100644 index 000000000..3525cf234 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/Skeleton/stylesheet.scss @@ -0,0 +1,146 @@ +.sidebar-skeleton { + width: 100%; + + &-divider { + width: 100%; + margin: 20px 0; + border-top: 1px solid #bbb; + } + + &-header { + width: 95%; + padding: 16px; + + &-top { + width: 80%; + margin: 8px; + display: flex; + align-items: center; + + &-profile { + width: 25px; + height: 25px; + margin-right: 15px; + } + + &-header { + width: 40%; + height: 15px; + } + } + + &-below { + width: 100%; + margin: 8px; + margin-left: 45px; + + &-subheading-1 { + width: 70%; + margin: 4px; + height: 15px; + } + + &-subheading-2 { + margin: 4px; + width: 50%; + height: 15px; + } + } + } + + &-body { + width: 90%; + height: 250px; + display: flex; + padding: 16px; + margin-top: 20px; + margin-bottom: 20px; + align-items: center; + justify-content: center; + + &-image { + width: 95%; + height: 100%; + } + } + + &-footer { + width: 85%; + margin: 8px; + padding: 16px; + + &-line-1 { + width: 45%; + height: 15px; + margin-bottom: 15px; + } + + &-line-2 { + width: 70%; + height: 15px; + margin-bottom: 5px; + } + + &-line-3 { + width: 90%; + height: 15px; + margin-bottom: 5px; + } + + &-line-4 { + width: 80%; + height: 15px; + margin-bottom: 5px; + } + + &-line-5 { + width: 30%; + height: 15px; + margin-bottom: 5px; + } + + &-buttons { + width: 100%; + display: flex; + margin-top: 50px; + align-items: center; + flex-direction: column; + justify-content: center; + + &-button-1 { + width: 100%; + margin: 8px; + height: 40px; + display: flex; + align-items: center; + margin-bottom: 20px; + justify-content: center; + border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.4) !important; + } + + &-button-2 { + width: 70%; + height: 15px; + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.4) !important; + } + + &-button-3 { + width: 30%; + height: 15px; + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.4) !important; + } + } + } +} + +.shimmer { + background: var(--nfd-onboarding-light-gray-7); + background-repeat: no-repeat; + background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%); +} + +.shimmer-1 { + background: rgba(var(--wp-admin-theme-color--rgb), 0.4); + background-repeat: no-repeat; + background-image: linear-gradient(to right, rgba(var(--wp-admin-theme-color--rgb), 0.4) 0%, rgba(var(--wp-admin-theme-color--rgb), 0.6) 20%, rgba(var(--wp-admin-theme-color--rgb), 0.4) 40%, rgba(var(--wp-admin-theme-color--rgb), 0.4) 100%); +} diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/data.js b/src/OnboardingSPA/components/Sidebar/components/Customize/data.js new file mode 100644 index 000000000..b547463ee --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/data.js @@ -0,0 +1,128 @@ +export const design = { + name: 'Modern Foodie', + style: { + aesthetics: 'modern', + fonts_heading: 'Arial', + fonts_content: 'Times New Roman', + spacing: 6, + radius: 4, + }, + color_palette: { + base: '#F0F0F0', + contrast: '#333333', + primary: '#09728C', + secondary: '#C79E10', + tertiary: '#F5EBB8', + header_background: '#09728C', + header_foreground: '#F5EBB8', + header_titles: '#F5EBB8', + secondary_background: '#09728C', + secondary_foreground: '#F5EBB8', + }, +}; + +export const colorPalettes = [ + { + name: 'Tropical Dawn', + base: '#F0F0F0', + contrast: '#333333', + primary: '#09728C', + secondary: '#C79E10', + tertiary: '#F5EBB8', + header_background: '#09728C', + header_foreground: '#F5EBB8', + header_titles: '#F5EBB8', + secondary_background: '#09728C', + secondary_foreground: '#F5EBB8', + }, + { + name: 'Earthy Delight', + base: '#EAE2D6', + contrast: '#2E2E2E', + primary: '#D19858', + secondary: '#A1623B', + tertiary: '#704238', + header_background: '#D19858', + header_foreground: '#EAE2D6', + header_titles: '#EAE2D6', + secondary_background: '#A1623B', + secondary_foreground: '#EAE2D6', + }, + { + name: 'Cool Breeze', + base: '#D9E4E7', + contrast: '#1B1B1B', + primary: '#3C7A89', + secondary: '#5E9EA4', + tertiary: '#81BFC5', + header_background: '#3C7A89', + header_foreground: '#D9E4E7', + header_titles: '#D9E4E7', + secondary_background: '#5E9EA4', + secondary_foreground: '#D9E4E7', + }, + { + name: 'Warm Comfort', + base: '#F4E1D2', + contrast: '#272727', + primary: '#D83367', + secondary: '#F364A2', + tertiary: '#FEA5E2', + header_background: '#D83367', + header_foreground: '#F4E1D2', + header_titles: '#F4E1D2', + secondary_background: '#F364A2', + secondary_foreground: '#F4E1D2', + }, + { + name: 'Classic Elegance', + base: '#EDEDED', + contrast: '#1C1C1C', + primary: '#A239CA', + secondary: '#4717F6', + tertiary: '#E7DFDD', + header_background: '#A239CA', + header_foreground: '#EDEDED', + header_titles: '#EDEDED', + secondary_background: '#4717F6', + secondary_foreground: '#EDEDED', + }, +]; + +export const designStyles = [ + { + aesthetics: 'modern', + fonts_heading: 'Arial', + fonts_content: 'Times New Roman', + spacing: 6, + radius: 4, + }, + { + aesthetics: 'vintage', + fonts_heading: 'Courier New', + fonts_content: 'Georgia', + spacing: 5, + radius: 3, + }, + { + aesthetics: 'minimalist', + fonts_heading: 'Verdana', + fonts_content: 'Tahoma', + spacing: 7, + radius: 2, + }, + { + aesthetics: 'retro', + fonts_heading: 'Lucida Console', + fonts_content: 'Palatino Linotype', + spacing: 6, + radius: 5, + }, + { + aesthetics: 'typographic', + fonts_heading: 'Impact', + fonts_content: 'Comic Sans MS', + spacing: 5, + radius: 3, + }, +]; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/stylesheet.scss new file mode 100644 index 000000000..c7292eb5b --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/stylesheet.scss @@ -0,0 +1,37 @@ +@import "./HeadingWithDescription/stylesheet"; +@import "./StepIntroPanel/stylesheet"; +@import "./IllustrationPanel/stylesheet"; +@import "./InfoPanel/stylesheet"; +@import "./HelpPanel/stylesheet"; +@import "./SupportLink/stylesheet"; + +.components-button:focus:not(:disabled), +.components-button.is-pressed:focus:not(:disabled) { + box-shadow: none; +} + +.nfd-onboarding-sidebar-learn-more { + background: #fff; + padding: 0 !important; + border: none; + overflow-y: auto; + width: 100%; + height: 100%; + + &__header { + + &__icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + } + } + + &__menu-button { + margin: 0 5px; + min-height: 40px; + } +} + diff --git a/src/OnboardingSPA/components/Sidebar/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/stylesheet.scss index 42e7149d3..177c433bc 100644 --- a/src/OnboardingSPA/components/Sidebar/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/stylesheet.scss @@ -5,6 +5,7 @@ } .nfd-onboarding-sidebar__panel { + background: var(--nfd-onboarding-base); height: 100%; position: relative; width: 0; diff --git a/src/OnboardingSPA/data/sidebars/index.js b/src/OnboardingSPA/data/sidebars/index.js index 49fca537f..fbab23630 100644 --- a/src/OnboardingSPA/data/sidebars/index.js +++ b/src/OnboardingSPA/data/sidebars/index.js @@ -3,6 +3,7 @@ import { lazy } from '@wordpress/element'; import { SIDEBAR_LEARN_MORE, SIDEBAR_SITEGEN_EDITOR_PATTERNS, + SIDEBAR_CUSTOMIZE, } from '../../../constants'; const LearnMoreMenu = lazy( () => @@ -18,6 +19,13 @@ const SitegenEditorPatternsSidebar = lazy( () => ) ); +const CustomizeMenu = lazy( () => + import( '../../components/Sidebar/components/Customize/Menu' ) +); +const CustomizeSidebar = lazy( () => + import( '../../components/Sidebar/components/Customize/Sidebar' ) +); + export const sidebars = [ { id: SIDEBAR_LEARN_MORE, @@ -30,4 +38,10 @@ export const sidebars = [ sidebar: SitegenEditorPatternsSidebar, enabled: true, }, + { + id: SIDEBAR_CUSTOMIZE, + menu: CustomizeMenu, + sidebar: CustomizeSidebar, + enabled: true, + }, ]; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 5d7da8b09..a4e045167 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -27,10 +27,12 @@ const StepSiteGenEditorHeader = () => { setSidebarActiveView, setIsSidebarOpened, } = useDispatch( nfdOnboardingStore ); - const { currentData } = useSelect( ( select ) => { + const { currentData, sideBarView, isSidebarOpened } = useSelect( ( select ) => { return { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), + sideBarView: select( nfdOnboardingStore ).getSidebarView(), + isSidebarOpened: select( nfdOnboardingStore ).isSidebarOpened(), }; } ); @@ -65,6 +67,18 @@ const StepSiteGenEditorHeader = () => { setIsSidebarOpened( true ); }; + const handleCustomize = () => { + const isSidebarOpenedNew = + sideBarView === 'Customize' ? ! isSidebarOpened : isSidebarOpened; + setSidebarActiveView( 'Customize' ); + setIsSidebarOpened( isSidebarOpenedNew ); + }; + + useEffect( () => { + handleCustomize(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); + useEffect( () => { if ( currentData?.sitegen?.homepages?.active ) { setHomepage( currentData.sitegen.homepages.active ); @@ -170,6 +184,7 @@ const StepSiteGenEditorHeader = () => { isSaving && 'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled' }` } + onClick={ handleCustomize } >
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/contents.js b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/contents.js new file mode 100644 index 000000000..604e367d7 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/contents.js @@ -0,0 +1,11 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + introduction: { + heading: __( 'Colors', 'wp-module-onboarding' ), + }, + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/index.js new file mode 100644 index 000000000..032cc052f --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Customize/index.js @@ -0,0 +1,47 @@ +import { useDispatch } from '@wordpress/data'; +import { lazy, useEffect, useState } from '@wordpress/element'; + +import { store as nfdOnboardingStore } from '../../../../../store'; +import getContents from './contents'; +import { getCustomizeSidebarData } from '../../../../../utils/api/siteGen'; + +const DesignFontsPanel = lazy( () => + import( + '../../../../../components/Sidebar/components/Customize/DesignFontsPanel' + ) +); +const DesignColorsPanel = lazy( () => + import( + '../../../../../components/Sidebar/components/Customize/DesignColorsPanel' + ) +); + +const Customize = () => { + const [ loading, setLoading ] = useState( true ); + const { updateCustomizeSidebarData } = useDispatch( nfdOnboardingStore ); + + const loadData = async () => { + const customizeSidebarData = await getCustomizeSidebarData(); + updateCustomizeSidebarData( customizeSidebarData?.body ); + setLoading( false ); + }; + + useEffect( () => { + loadData(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); + + if ( loading ) { + return
...
; + } + + const content = getContents(); + return ( +
+ + +
+ ); +}; + +export default Customize; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/step.js b/src/OnboardingSPA/steps/SiteGen/Editor/step.js index b1c66f6d2..09b674008 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/step.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/step.js @@ -3,6 +3,7 @@ import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Step } from '../../../data/models/Step'; import StepSiteGenEditorHeader from './Header'; +import Customize from './Sidebar/Customize'; const StepSiteGenEditor = lazy( () => import( './index' ) ); @@ -12,8 +13,8 @@ export const stepSiteGenEditor = new Step( { Component: StepSiteGenEditor, icon: copy, sidebars: { - LearnMore: { - SidebarComponents: [], + Customize: { + SidebarComponents: [ Customize ], }, }, header: StepSiteGenEditorHeader, diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index be52c9924..bd2ee6744 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -305,3 +305,10 @@ export const toggleFavorite = ( slug ) => { slug, }; }; + +export function updateCustomizeSidebarData( customizeSidebarData ) { + return { + type: 'CUSTOMIZE_SIDEBAR_DATA', + customizeSidebarData, + }; +}; diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index de6067be4..13f720e53 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -272,6 +272,11 @@ export function runtime( state = {}, action ) { settings: action.previewSettings, }, }; + case 'CUSTOMIZE_SIDEBAR_DATA': + return { + ...state, + customizeSidebarData: action.customizeSidebarData, + }; } return state; diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 6b1877429..697e2d382 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -458,3 +458,7 @@ export const getActiveHomepage = ( state ) => { export const getAllHomepages = ( state ) => { return state.data.flowData.sitegen.homepages.data; }; + +export function getCustomizeSidebarData( state ) { + return state.runtime.customizeSidebarData; +} diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index b28787025..0677b95f7 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -45,6 +45,11 @@ body { --nfd-onboarding-step-what-next-img-1: url(../../Brands/wordpress/wp-admin.png); --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); --nfd-onboarding-header-border: #e0e0e0; + --nfd-onboarding-sitegen-customize-primary-button-color: #44494d; + --nfd-onboarding-sitegen-customize-grey-1: #9ca2a7; + --nfd-onboarding-sitegen-customize-link-text-color: #007cba; + --nfd-onboarding-sitegen-customize-icon-selected: #035fef; + --nfd-onboarding-sitegen-customize-default-text-color: #808080; } &.nfd-brand-bluehost, @@ -107,6 +112,11 @@ body { --nfd-onboarding-sidebar-learn-more-site-features-illustration: url(../../Brands/bluehost/learn-more-site-features.svg); --nfd-onboarding-sidebar-learn-more-what-next-illustration: url(../../Brands/bluehost/learn-more-what-next.svg); --nfd-onboarding-header-border: #e0e0e0; + --nfd-onboarding-sitegen-customize-primary-button-color: #44494d; + --nfd-onboarding-sitegen-customize-grey-1: #9ca2a7; + --nfd-onboarding-sitegen-customize-link-text-color: #007cba; + --nfd-onboarding-sitegen-customize-icon-selected: #035fef; + --nfd-onboarding-sitegen-customize-default-text-color: #808080; } &.nfd-brand-hostgator-br, diff --git a/src/OnboardingSPA/utils/api/siteGen.js b/src/OnboardingSPA/utils/api/siteGen.js index 3f43c83d7..dc54c8897 100644 --- a/src/OnboardingSPA/utils/api/siteGen.js +++ b/src/OnboardingSPA/utils/api/siteGen.js @@ -86,3 +86,11 @@ export async function getSiteDetailsQuestionare() { } ).then() ); } + +export async function getCustomizeSidebarData() { + return await resolve( + apiFetch( { + url: onboardingRestURL( 'sitegen/customize-data' ), + } ).then() + ); +} diff --git a/src/constants.js b/src/constants.js index 5d0831e2e..98d020239 100644 --- a/src/constants.js +++ b/src/constants.js @@ -40,6 +40,7 @@ export const SIDEBAR_SLOTFILL_PREFIX = 'Sidebar'; export const SIDEBAR_MENU_SLOTFILL_PREFIX = 'HeaderMenu'; export const SIDEBAR_SITEGEN_EDITOR_PATTERNS = 'SitegenEditorPatterns'; export const SIDEBAR_LEARN_MORE = 'LearnMore'; +export const SIDEBAR_CUSTOMIZE = 'Customize'; export const HEADER_SITEBUILD = 'HeaderSiteBuild'; export const HEADER_SITEGEN = 'HeaderSiteGen'; export const FOOTER_SITEBUILD = 'FooterSiteBuild'; From 50cd985afd68c54ce04c2363a23ca164ff263b97 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 16 Jan 2024 20:43:59 +0530 Subject: [PATCH 2/3] Fix lint issues --- .../Customize/DesignColorsPanel/index.js | 9 ++++----- .../Customize/DesignFontsPanel/index.js | 2 +- .../steps/SiteGen/Editor/Header/index.js | 20 +++++++++++-------- src/OnboardingSPA/store/actions.js | 2 +- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 530bd45f2..06d592fe5 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -131,12 +131,11 @@ const DesignColorsPanel = ( { colorPalettes[ selectedPalette ].secondary = selectedColor.secondary; colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary; const slug = currentData.sitegen?.homepages?.active?.slug; - if (slug) { + if ( slug ) { currentData.sitegen.homepages.data[ slug ].color.palette = - convertColorSchema( colorPalettes[ selectedPalette ] ); - currentData.sitegen.homepages.active.color.palette = convertColorSchema( - colorPalettes[ selectedPalette ] - ); + convertColorSchema( colorPalettes[ selectedPalette ] ); + currentData.sitegen.homepages.active.color.palette = + convertColorSchema( colorPalettes[ selectedPalette ] ); setCurrentOnboardingData( currentData ); } }; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index e1719c416..79fccbd0e 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -257,7 +257,7 @@ const DesignFontsPanel = ( { } const slug = currentData.sitegen?.homepages?.active?.slug; - if (slug) { + if ( slug ) { currentData.sitegen.homepages.data[ slug ] = { ...currentData.sitegen.homepages.data[ slug ], styles: { diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index a4e045167..c75f21f07 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -27,14 +27,16 @@ const StepSiteGenEditorHeader = () => { setSidebarActiveView, setIsSidebarOpened, } = useDispatch( nfdOnboardingStore ); - const { currentData, sideBarView, isSidebarOpened } = useSelect( ( select ) => { - return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - sideBarView: select( nfdOnboardingStore ).getSidebarView(), - isSidebarOpened: select( nfdOnboardingStore ).isSidebarOpened(), - }; - } ); + const { currentData, sideBarView, isSidebarOpened } = useSelect( + ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + sideBarView: select( nfdOnboardingStore ).getSidebarView(), + isSidebarOpened: select( nfdOnboardingStore ).isSidebarOpened(), + }; + } + ); const handleFavorite = () => { if ( isSaving ) { @@ -185,6 +187,8 @@ const StepSiteGenEditorHeader = () => { 'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled' }` } onClick={ handleCustomize } + onKeyDown={ handleCustomize } + role="presentation" >
diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index bd2ee6744..db55e4fa8 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -311,4 +311,4 @@ export function updateCustomizeSidebarData( customizeSidebarData ) { type: 'CUSTOMIZE_SIDEBAR_DATA', customizeSidebarData, }; -}; +} From 1b71d1305fa2e4343e324b6c104108a1dcb2b652 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 17 Jan 2024 10:02:25 +0530 Subject: [PATCH 3/3] Fix apply to preview issue --- .../LivePreview/BlockPreview/index.js | 2 +- .../steps/SiteGen/Editor/index.js | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 966560070..fa88751b8 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -54,7 +54,7 @@ const BlockPreview = ( { } else { setSettings( storedPreviewSettings ); } - }, [] ); + }, [ previewSettings, storedPreviewSettings ] ); useEffect( () => { if ( blockGrammer ) { diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index 395df83d2..309633f33 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -53,6 +53,26 @@ const StepSiteGenEditor = () => { const newPreviewSettings = cloneDeep( globalStyles[ 0 ] ); newPreviewSettings.settings.color.palette = activeHomepage.color.palette; + + if ( activeHomepage && activeHomepage.styles ) { + if ( + activeHomepage.styles.blocks && + activeHomepage.styles.blocks.length > 0 + ) { + const firstBlock = activeHomepage.styles.blocks[ 0 ]; + if ( firstBlock[ 'core/heading' ] ) { + newPreviewSettings.styles.blocks[ + 'core/heading' + ].typography.fontFamily = + firstBlock[ 'core/heading' ].typography.fontFamily; + } + if ( firstBlock[ 'core/body' ] ) { + newPreviewSettings.styles.typography.fontFamily = + firstBlock[ 'core/body' ].typography.fontFamily; + } + } + } + return (