diff --git a/includes/Application.php b/includes/Application.php index 5982f65be..2c59a50b3 100644 --- a/includes/Application.php +++ b/includes/Application.php @@ -13,10 +13,17 @@ final class Application { /** + * Newfold Labs Module Container + * * @var Container */ protected $container; + /** + * Arguments for the container + * + * @var agrs + */ protected $args; /** @@ -65,4 +72,4 @@ public function __construct( Container $container ) { \do_action( 'nfd_module_onboarding_post_init' ); } } -// END \NewfoldLabs\WP\Module\Onboarding\Application +// END /NewfoldLabs/WP/Module/Onboarding/Application diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 6196a4cf5..ae012c05e 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -6,6 +6,22 @@ */ final class Patterns { + /** + * List of dummy menu page titles. + * + * @return array + */ + public static function get_dummy_menu_items() { + return array( + __( 'Home', 'wp-module-onboarding' ), + __( 'About', 'wp-module-onboarding' ), + __( 'Contact', 'wp-module-onboarding' ), + __( 'News', 'wp-module-onboarding' ), + __( 'Privacy', 'wp-module-onboarding' ), + __( 'Careers', 'wp-module-onboarding' ), + ); + } + /** * Retrieve Patterns for Theme Step. * @@ -16,7 +32,8 @@ protected static function get_theme_step_patterns() { 'yith-wonder' => array( 'theme-styles' => array( 'site-header-left-logo-navigation-inline' => array( - 'active' => true, + 'active' => true, + 'replace' => true, ), 'homepage-1' => array( 'active' => true, @@ -29,7 +46,8 @@ protected static function get_theme_step_patterns() { ), 'homepage-styles' => array( 'site-header-left-logo-navigation-inline' => array( - 'active' => true, + 'active' => true, + 'replace' => true, ), 'homepage-1' => array( 'active' => true, @@ -148,6 +166,47 @@ public static function get_pattern_from_slug( $pattern_slug ) { return false; } + /** + * Replace the header menu slug in the patterns array + * + * @param array $patterns Patterns for the specific step + * @param string $header_menu_slug header menu slug choosen by the user + * + * @return array + */ + private static function replace_header_menu_slug( $patterns, $header_menu_slug ) { + foreach ( $patterns as $slug => $slug_details ) { + if ( true === $slug_details['replace'] ) { + unset( $patterns[ $slug ] ); + $patterns = array_merge( array( $header_menu_slug => $slug_details ), $patterns ); + } + } + return $patterns; + } + + /** + * Replace the header menu slug in the patterns array + * + * @param array $pattern_content pattern grammar that is to be modified + * + * @return array + */ + private static function replace_split_menu_items( $pattern_content ) { + $dummy_menu_grammar = ''; + $menu_navigation_grammar = ''; + + foreach ( self::get_dummy_menu_items() as $item ) { + $dummy_menu_grammar = ''; + $pattern_content = preg_replace( $menu_navigation_grammar, $dummy_menu_grammar, $pattern_content, 1 ); + } + return $pattern_content; + } + /** * Retrieve Theme Step Patterns from chosen Theme in Previous Step * @@ -163,15 +222,29 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false return false; } - $pattern_slugs = self::get_theme_step_patterns()[ $active_theme ][ $step ]; - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - $block_patterns = array(); - $block_patterns_squashed = ''; + $styles_to_check_for_header_menu = self::get_theme_step_patterns()[ $active_theme ]['styles-for-header-menu-check']; + $pattern_slugs = self::get_theme_step_patterns()[ $active_theme ][ $step ]; + $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); + $block_patterns = array(); + $block_patterns_squashed = ''; + + // fetch the selected header menu slug from DB + $flow_data = \get_option( Options::get_option_name( 'flow' ) ); + $header_menu_slug = explode( '/', $flow_data['data']['partHeader'] )[1]; + if ( ! empty( $header_menu_slug ) ) { + $pattern_slugs = self::replace_header_menu_slug( $pattern_slugs, $header_menu_slug ); + } + foreach ( array_keys( $pattern_slugs ) as $pattern_slug ) { if ( true === $pattern_slugs[ $pattern_slug ]['active'] ) { $pattern_name = $active_theme . '/' . $pattern_slug; if ( $block_patterns_registry->is_registered( $pattern_name ) ) { $pattern = $block_patterns_registry->get_registered( $pattern_name ); + // if header menu slug contains "split" replace the menu links with dummy links + if ( false !== stripos( $pattern_slug, 'split' ) ) { + $pattern['content'] = self::replace_split_menu_items( $pattern['content'] ); + } + if ( ! $squash ) { $block_patterns[] = array_merge( array( diff --git a/includes/RestApi/RestApi.php b/includes/RestApi/RestApi.php index 905be7048..2b1c620e7 100644 --- a/includes/RestApi/RestApi.php +++ b/includes/RestApi/RestApi.php @@ -2,11 +2,18 @@ namespace NewfoldLabs\WP\Module\Onboarding\RestApi; +use NewfoldLabs\WP\Module\Onboarding\RestApi\RestApiFilter; + /** * Instantiate controllers and register routes. */ final class RestApi { + /** + * List of custom REST API controllers + * + * @var array + */ protected $controllers = array( 'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\SiteImagesController', 'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeGeneratorController', @@ -20,13 +27,21 @@ final class RestApi { 'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\SitePagesController', 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeInstallerController', 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeFontsController', - 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeColorsController' + 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeColorsController', ); + /** + * Setup the custom REST API + */ public function __construct() { add_action( 'rest_api_init', array( $this, 'register_routes' ) ); + // create an instance of the RestApiFilter to filter the responses for header menu navigation + new RestApiFilter(); } + /** + * Register the custom REST API routes + */ public function register_routes() { foreach ( $this->controllers as $controller ) { /** @@ -38,4 +53,4 @@ public function register_routes() { $instance->register_routes(); } } -} // END \NewfoldLabs\WP\Module\Onboarding\RestApi() +} // END /NewfoldLabs/WP/Module/Onboarding/RestApi() diff --git a/includes/RestApi/RestApiFilter.php b/includes/RestApi/RestApiFilter.php new file mode 100644 index 000000000..7a2b8d3ff --- /dev/null +++ b/includes/RestApi/RestApiFilter.php @@ -0,0 +1,185 @@ +get_method(); + switch ( $request_method ) { + case 'GET': + self::get_method_filters( $request ); + break; + } + return $response; + } + + /** + * Apply the appropriate filters based on the route + * + * @param object $request REST API object + * @return void + */ + private static function get_method_filters( $request ) { + $request_route = $request->get_route(); + switch ( $request_route ) { + case '/wp/v2/pages': + \add_filter( 'rest_page_query', array( __CLASS__, 'header_menu_limit_pages' ) ); + \add_filter( 'rest_request_after_callbacks', array( __CLASS__, 'header_menu_rename_pages' ), 10, 3 ); + break; + case '/wp/v2/navigation': + \add_filter( 'rest_request_after_callbacks', array( __CLASS__, 'wp_onboarding_nav_menu_filter' ), 10, 2 ); + break; + } + } + + /** + * Function for modifying the navigation menu grammar. + * + * @param object $response - WP_REST_Response object + * @param array $args - An array containing arguments. + * + * @return object + */ + public static function wp_onboarding_nav_menu_filter( $response, $args ) { + $modified_data = array_map( + array( __CLASS__, 'prepare_raw_html_menu' ), + $response->get_data(), + array_keys( $response->get_data() ) + ); + $response->set_data( $modified_data ); + return $response; + } + + /** + * Modify the reponse to make sure it has the dummy pages. + * + * @param array $data - array containing navigation menu data + * @param integer $index - array index from the pages list + * + * @return array + */ + public static function prepare_raw_html_menu( $data, $index ) { + // create dummy menu links + $menu_navigation_grammar = ''; + foreach ( Patterns::get_dummy_menu_items() as $page_title ) { + $menu_navigation_grammar .= ''; + } + // need to reset ID else the data saved in the DB gets used + $data['id'] = $index; + $data['content']['rendered'] = $menu_navigation_grammar; + return $data; + } + + /** + * Custom filter to check for pages API call, if true then add more filters for the onboarding flow only. + * + * @param array $args - the arguments used by the WP_QUERY + * + * @return array + */ + public static function header_menu_limit_pages( $args ) { + $args['posts_per_page'] = 6; + $args['orderby'] = 'id'; + $args['no_found_rows'] = true; + return $args; + } + + /** + * Custom filter to rename the info for the pages API call. + * + * @param array $response - the api response + * @param array $handler - handler + * @param \WP_REST_Request $request - WP_REST_Request object + * + * @return array + */ + public static function header_menu_rename_pages( $response, array $handler, \WP_REST_Request $request ) { + self::modify_get_pages_response( $response ); + return $response; + } + + /** + * Check if the API call is being made from the onboarding flow. + * + * @param \WP_REST_Request $request - WP_REST_Request object + * + * @return boolean + */ + public static function is_request_from_onboarding_flow( \WP_REST_Request $request ) { + return false !== stripos( $request->get_header( 'referer' ), 'page=nfd-onboarding' ); + } + + /** + * Modify the reponse to make sure it has the dummy pages. + * + * @param array $response - response array + * + * @return null + */ + public static function modify_get_pages_response( $response ) { + if ( ! ( $response instanceof \WP_REST_Response ) ) { + return; + } + + // make sure we have the number of dummy pages required + $pages = $response->get_data(); + if ( count( $pages ) < count( Patterns::get_dummy_menu_items() ) ) { + $pages = array_pad( + $pages, + count( Patterns::get_dummy_menu_items() ), + array_pop( $pages ) + ); + } + + $data = array_map( + array( __CLASS__, 'rename_page' ), + $pages, + array_keys( $pages ) + ); + $response->set_data( $data ); + } + + /** + * Modify the reponse to make sure it has the dummy pages. + * + * @param array $page - array containing page attibutes + * @param integer $index - array index from the pages list + * + * @return array + */ + public static function rename_page( array $page, $index ) { + if ( isset( $page['title']['rendered'] ) ) { + // changed id so that while rendering the menu link and name are proper + $page['id'] = $page['id'] + $index; + $page['title']['rendered'] = Patterns::get_dummy_menu_items()[ $index ]; + $page['menu_order'] = $index; + } + return $page; + } + +} // END /NewfoldLabs/WP/Module/Onboarding/RestApiFilter() diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index 188f1242a..5aac5f85c 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -11,23 +11,23 @@ class PatternsController extends \WP_REST_Controller { - /** - * The namespace of this controller's route. - * - * @var string - */ - protected $namespace = 'newfold-onboarding/v1'; + /** + * The namespace of this controller's route. + * + * @var string + */ + protected $namespace = 'newfold-onboarding/v1'; - /** - * The base of this controller's route. - * - * @var string - */ - protected $rest_base = '/patterns'; + /** + * The base of this controller's route. + * + * @var string + */ + protected $rest_base = '/patterns'; - /** - * Registers REST routes for this controller class. - */ + /** + * Registers REST routes for this controller class. + */ public function register_routes() { register_rest_route( @@ -44,30 +44,35 @@ public function register_routes() { ); } + /** + * + * Checks the type of the patterns. + */ public function get_pattern_args() { - return array( - 'slug' => array( - 'type' => 'string', - ), - 'step' => array( - 'type' => 'string', - ), - 'squash' => array( - 'type' => 'boolean', - 'default' => false, - ), - ); + return array( + 'slug' => array( + 'type' => 'string', + ), + 'step' => array( + 'type' => 'string', + ), + 'squash' => array( + 'type' => 'boolean', + 'default' => false, + ), + ); } - /** - * Retrieves the patterns approved by the Onboarding Module. - * - * @return \WP_Rest_Response|\WP_Error - */ + /** + * Retrieves the patterns approved by the Onboarding Module. + * + * @param \WP_REST_Request $request WP Rest Response object + * @return \WP_Rest_Response|\WP_Error + */ public function get_pattern( \WP_REST_Request $request ) { - $step = $request->get_param( 'step' ); - $squash = $request->get_param( 'squash' ); - $slug = $request->get_param( 'slug' ); + $step = $request->get_param( 'step' ); + $squash = $request->get_param( 'squash' ); + $slug = $request->get_param( 'slug' ); if ( ! $step && ! $slug ) { return new \WP_Error( @@ -78,7 +83,7 @@ public function get_pattern( \WP_REST_Request $request ) { } if ( $step ) { - $step_patterns = Patterns::get_theme_step_patterns_from_step( $step, $squash ); + $step_patterns = Patterns::get_theme_step_patterns_from_step( $step, $squash ); if ( ! $step_patterns ) { return new \WP_Error( 'no_patterns_found', @@ -92,7 +97,7 @@ public function get_pattern( \WP_REST_Request $request ) { ); } - $pattern = Patterns::get_pattern_from_slug( $slug ); + $pattern = Patterns::get_pattern_from_slug( $slug ); if ( ! $pattern ) { return new \WP_Error( 'no_pattern_found', diff --git a/includes/WP_Admin.php b/includes/WP_Admin.php index 62946b791..d0d43764f 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -26,7 +26,6 @@ final class WP_Admin { public function __construct() { \add_action( 'admin_menu', array( __CLASS__, 'register_page' ) ); \add_action( 'load-dashboard_page_' . self::$slug, array( __CLASS__, 'initialize' ) ); - // \add_action( 'wp_dashboard_setup', array( __CLASS__, 'register_widget' ) ); } /** @@ -100,26 +99,31 @@ public static function register_assets() { $asset['version'] ); - wp_add_inline_script( - 'wp-blocks', - 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');' - ); + wp_add_inline_script( + 'wp-blocks', + 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');' + ); \wp_enqueue_script( self::$slug ); \wp_enqueue_style( self::$slug ); } } + /** + * Initialise Plugins and Themes if necessary. + * + * @return void + */ public static function initialize() { - if ( isset( $_GET['nfd_plugins'] ) && $_GET['nfd_plugins'] === 'true' ) { + if ( ! empty( sanitize_text_field( $_GET['nfd_plugins'] ) ) && 'true' === sanitize_text_field( $_GET['nfd_plugins'] ) ) { PluginInstallTaskManager::queue_initial_installs(); } - if ( isset( $_GET['nfd_themes'] ) && $_GET['nfd_themes'] === 'true' ) { + if ( ! empty( sanitize_text_field( $_GET['nfd_themes'] ) ) && 'true' === sanitize_text_field( $_GET['nfd_themes'] ) ) { ThemeInstallTaskManager::queue_initial_installs(); } self::register_assets(); } -} // END \NewfoldLabs\WP\Module\Onboarding\Admin() +} // END /NewfoldLabs/WP/Module/Onboarding/Admin() diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 718294429..821655848 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -1,10 +1,10 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; -import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; -import { GlobalStylesProvider } from '../../../components/LivePreview'; +import { LivePreviewSkeleton, LivePreviewSelectableCard } from '../../../components/LivePreview'; +import { setFlow } from '../../../utils/api/flow'; import { THEME_STATUS_ACTIVE, @@ -23,13 +23,12 @@ const DesignHeaderMenu = () => { 'yith-wonder/site-footer', ]; - const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); - const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { + const { currentStep, currentData, themeStatus, storedPreviewSettings } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname @@ -37,11 +36,11 @@ const DesignHeaderMenu = () => { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + storedPreviewSettings: select( nfdOnboardingStore ).getStepPreviewData(), }; }, [] ); - const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = - useDispatch( nfdOnboardingStore ); + const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); const getPatternsData = async () => { const headerMenuPreviewResponse = await getPatterns( @@ -53,7 +52,7 @@ const DesignHeaderMenu = () => { setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); const headerMenuPatterns = []; - headerMenuPreviewResponse.body.forEach( ( pageParts ) => { + headerMenuPreviewResponse?.body.forEach( ( pageParts ) => { if ( headerMenuSlugs.includes( pageParts.slug ) ) { headerMenuPatterns.push( pageParts ); } @@ -80,38 +79,48 @@ const DesignHeaderMenu = () => { } ); pagePreview = headerContent + pageContent; setHeaderMenuData( pagePreview ); - setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + if ( themeStatus === THEME_STATUS_ACTIVE ) { getPatternsData(); - }, [ isLoaded, themeStatus ] ); + } + }, [ themeStatus ] ); + + const handleClick = async ( idx ) => { + if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { + document.getElementsByClassName( 'nfd-onboard-content' )[ 0 ] + .scrollIntoView( { + behavior: 'smooth', + } ); + } - const handleClick = ( idx ) => { - const selectedPattern = patterns[ idx ]; + const chosenPattern = patterns[ idx ]; - setSelectedPattern( selectedPattern.slug ); - currentData.data.partHeader = selectedPattern.slug; + setSelectedPattern( chosenPattern.slug ); + currentData.data.partHeader = chosenPattern.slug; setCurrentOnboardingData( currentData ); - let newPagePattern = selectedPattern.content; + let newPagePattern = chosenPattern.content; headerMenuPreviewData.forEach( ( pageParts ) => { if ( headerMenuBodySlugs.includes( pageParts.slug ) ) { newPagePattern += pageParts.content; } } ); setHeaderMenuData( newPagePattern ); + // API call to make sure the DB is in sync with the store for the selected header menu + const result = await setFlow( currentData ); + if ( result?.error === null ) { + setCurrentOnboardingData( currentData ); + } }; const buildPreviews = () => { return patterns?.map( ( pattern, idx ) => { return ( - { }; return ( - -
-
- { buildPreviews() } - { /* */ } -
-
- + ); }; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 87290e71e..f8e2e11a9 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -15,7 +15,6 @@ import { } from '../../LivePreview'; const DesignThemeStylesPreview = () => { - const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); const [ globalStyles, setGlobalStyles ] = useState(); const [ selectedStyle, setSelectedStyle ] = useState( '' ); @@ -81,17 +80,18 @@ const DesignThemeStylesPreview = () => { block: 'center', } ); } - setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + if ( themeStatus === THEME_STATUS_ACTIVE ) { getStylesAndPatterns(); - }, [ isLoaded, themeStatus ] ); + } + }, [ themeStatus ] ); const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index db5aecf45..cb17979a0 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -131,6 +131,45 @@ } } + &-menu-link { + display: flex; + padding: $grid-unit-10 $grid-unit-20; + text-decoration: none; + color: var(--nfd-onboarding-light); + align-items: center; + border-radius: 2px; + transition: background-color 100ms linear; + + @include reduce-motion("transition"); + + svg { + fill: var(--nfd-onboarding-drawer-icon-fill); + transition: fill 100ms linear; + + @include reduce-motion("transition"); + margin-right: $grid-unit-10; + } + + &:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline: 3px solid transparent; + color: var(--nfd-onboarding-drawer-fg); + } + + &:hover { + color: var(--nfd-onboarding-drawer-fg); + } + + &.active { + background-color: var(--nfd-onboarding-primary); + color: var(--nfd-onboarding-light); + + svg { + fill: var(--nfd-onboarding-drawer-icon-active-fill); + } + } + } + .components-button.nfd-onboarding-drawer__panel-back.is-tertiary { color: var(--nfd-onboarding-drawer-fg); opacity: 0.7; @@ -142,15 +181,15 @@ margin-right: 0; } + &:active { + background-color: transparent; + } + &:hover:not(:disabled), &:focus:not(:disabled) { opacity: 1; box-shadow: none; } - - &:active { - background-color: transparent; - } } &-menu { @@ -177,45 +216,6 @@ font-size: 14px; line-height: 20px; } - - &-menu-link { - display: flex; - padding: $grid-unit-10 $grid-unit-20; - text-decoration: none; - color: var(--nfd-onboarding-light); - align-items: center; - border-radius: 2px; - transition: background-color 100ms linear; - - @include reduce-motion("transition"); - - svg { - fill: var(--nfd-onboarding-drawer-icon-fill); - transition: fill 100ms linear; - - @include reduce-motion("transition"); - margin-right: $grid-unit-10; - } - - &:focus { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - outline: 3px solid transparent; - color: var(--nfd-onboarding-drawer-fg); - } - - &:hover { - color: var(--nfd-onboarding-drawer-fg); - } - - &.active { - background-color: var(--nfd-onboarding-primary); - color: var(--nfd-onboarding-light); - - svg { - fill: var(--nfd-onboarding-drawer-icon-active-fill); - } - } - } } .nfd-onboarding-drawer__panel.is-open { @@ -233,6 +233,26 @@ $main-border-light: var(--nfd-onboarding-border); $main-border-main: var(--nfd-onboarding-primary-alt); $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); +.theme-styles-preview--drawer__list__item__live-preview-container .live-preview__container-custom { + width: 100%; + overflow: hidden; + height: 250px; +} + +.theme-header-menu-preview--drawer__list__item__live-preview-container .live-preview__container-custom { + width: 100%; + overflow: hidden; + min-height: 50px; +} + +.theme-styles-preview--drawer__list__item__live-preview-container .live-preview__container-custom:hover { + cursor: pointer; +} + +.theme-header-menu-preview--drawer__list__item__live-preview-container .live-preview__container-custom:hover { + cursor: pointer; +} + .theme-styles-preview { &--drawer { @@ -314,23 +334,6 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); overflow: hidden; align-items: center; border: 1px solid #b7b7b7; - - .live-preview { - - &__container { - - &-custom { - width: 100%; - overflow: hidden; - height: 250px; - - &:hover { - cursor: pointer; - } - } - - } - } } } } @@ -351,7 +354,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); text-align: center; align-items: center; justify-content: center; - background-color: white; + background-color: $main-color-light; color: var(--nfd-onboarding-primary); &:hover { @@ -415,6 +418,13 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); background-color: var(--nfd-onboarding-tertiary); } + &__text { + color: $main-color-dark; + font-size: 12px; + font-weight: 700; + line-height: 16px; + } + &--selected { background-color: var(--nfd-onboarding-primary-alt); @@ -422,13 +432,6 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); color: var(--nfd-onboarding-white); } } - - &__text { - color: black; - font-size: 12px; - font-weight: 700; - line-height: 16px; - } } } @@ -463,11 +466,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &-row { height: 50px; - color: black; + color: $main-color-dark; display: flex; cursor: pointer; align-items: center; - background-color: white; + background-color: $main-color-light; justify-content: flex-start; border: 0.5px solid rgba(0, 0, 0, 0.3); @@ -492,14 +495,14 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 25px; height: 25px; display: flex; - color: black; + color: $main-color-dark; cursor: pointer; font-weight: 900; border-radius: 50%; align-items: center; justify-content: center; - border: 1px solid black; - background-color: white; + border: 1px solid $main-color-dark; + background-color: $main-color-light; } } @@ -512,13 +515,13 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 40%; height: 30px; display: flex; - color: black; + color: $main-color-dark; cursor: pointer; margin-left: 4px; text-align: center; align-items: center; justify-content: center; - background-color: white; + background-color: $main-color-light; &:hover { background-color: var(--nfd-onboarding-drawer-icon-fill); @@ -529,7 +532,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); .font-palette { &__icon { - color: black; + color: $main-color-dark; font-weight: 700; margin-right: 16px; } @@ -599,8 +602,10 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &__title-bar { width: 90%; - height: 20px; + height: 0; display: flex; + align-items: center; + background-color: #ccc; justify-content: space-between; &--selected { @@ -608,7 +613,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 40px; height: 40px; display: flex; - margin-right: -12px; + margin-right: -15px; border-radius: 50%; align-items: center; justify-content: center; @@ -631,21 +636,6 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 95%; overflow: hidden; align-items: center; - - .live-preview { - - &__container { - - &-custom { - overflow: hidden; - - &:hover { - cursor: pointer; - } - } - - } - } } } } diff --git a/src/OnboardingSPA/components/HeaderMenuPreview/index.js b/src/OnboardingSPA/components/HeaderMenuPreview/index.js deleted file mode 100644 index 3a88aaf85..000000000 --- a/src/OnboardingSPA/components/HeaderMenuPreview/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import { useState } from '@wordpress/element'; -import { check, Icon } from '@wordpress/icons'; - -import { LivePreview } from '../LivePreview'; - -const HeaderMenuPreview = ( { - className = 'live-preview--selectable-card', - selected = false, - blockGrammer, - viewportWidth = 1500, - styling = 'large', - previewSettings, - onClick = false, - skeletonLoadingTime = 2500, -} ) => { - const [ loadingParent, setIsLoadingParent ] = useState( true ); - - return ( -
{ - if ( ! loadingParent ) { - onClick(); - } - } ) - } - > -
-
-
- -
-
-
- -
-
- ); -}; - -export default HeaderMenuPreview; diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index ecad84ed0..3230f985b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -1,5 +1,5 @@ import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useEffect } from '@wordpress/element'; +import { useState, useEffect, useLayoutEffect } from '@wordpress/element'; import CommonLayout from '../../../components/Layouts/Common'; import { DesignStateHandler } from '../../../components/StateHandlers'; @@ -26,7 +26,7 @@ const StepDesignHeaderMenu = () => { const { setDrawerActiveView, setSidebarActiveView } = useDispatch( nfdOnboardingStore ); - useEffect( () => { + useLayoutEffect( () => { setPattern( headerMenu ); }, [ headerMenu ] ); diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index fce5a436d..847aee2a8 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -85,6 +85,14 @@ const StepDesignHomepageMenu = () => { for ( const key in homepagesList ) { const homepagePatterns = homepagesList[ key ]; + // update the header menu pattern if already selected + if ( + currentData.data.partHeader || + currentData.data.partHeader !== '' + ) { + homepagePatterns[ 0 ] = currentData.data.partHeader; + } + let patternData = ''; homepagePatterns.forEach( ( patternName ) => { homepagePatternDataResp?.body.forEach( @@ -103,7 +111,7 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternDataTemp = await getPatterns( - currentStep.patternId + currentStep.patternId, ); if ( homepagePatternDataTemp?.error ) { return updateThemeStatus( THEME_STATUS_INIT );