From b8a25df35dae020587585eb5f3ed9023cc6d378a Mon Sep 17 00:00:00 2001 From: abhijitb Date: Mon, 19 Dec 2022 20:02:34 +0530 Subject: [PATCH 01/32] added scroll to top and useLayoutEffect for faster rerender --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 26 +++++++++++++------ .../pages/Steps/DesignHeaderMenu/index.js | 4 +-- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index f8fc81a21..3d4ccad42 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -4,7 +4,7 @@ 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 { GlobalStylesProvider, LivePreviewSkeleton } from '../../../components/LivePreview'; import { THEME_STATUS_ACTIVE, @@ -89,6 +89,14 @@ const DesignHeaderMenu = () => { }, [ isLoaded, themeStatus ] ); const handleClick = ( idx ) => { + + if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { + document.getElementsByClassName( 'nfd-onboard-content' )[0] + .scrollIntoView( { + behavior: 'smooth', + } ); + } + const selectedPattern = patterns[ idx ]; setSelectedPattern( selectedPattern.slug ); @@ -105,13 +113,13 @@ const DesignHeaderMenu = () => { }; const buildPreviews = () => { - return patterns?.map( ( pattern, idx ) => { - return ( + const headerMenuPreviews = []; + + patterns?.map( ( pattern, idx ) => { + headerMenuPreviews.push( { /> ); } ); + + return headerMenuPreviews; }; return ( @@ -128,13 +138,13 @@ const DesignHeaderMenu = () => {
{ buildPreviews() } - { /* */ } + /> } */}
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index 5542b2b18..26b763a81 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 { useViewportMatch } from '@wordpress/compose'; import CommonLayout from '../../../components/Layouts/Common'; @@ -30,7 +30,7 @@ const StepDesignHeaderMenu = () => { setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); - useEffect( () => { + useLayoutEffect( () => { setPattern( headerMenu ); }, [ headerMenu ] ); From 3aead27288edf27e930c46ee86f7d953de91e76e Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 20 Dec 2022 23:06:09 +0530 Subject: [PATCH 02/32] added entity edit functionality WIP --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 3d4ccad42..9d77392b4 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -5,6 +5,7 @@ import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { GlobalStylesProvider, LivePreviewSkeleton } from '../../../components/LivePreview'; +import { store as coreStore } from '@wordpress/core-data'; import { THEME_STATUS_ACTIVE, @@ -23,12 +24,19 @@ const DesignHeaderMenu = () => { 'yith-wonder/site-footer', ]; + const defaultMenuItems = [ 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ]; + const { editEntityRecord } = useDispatch( coreStore ); + const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); + const { getEditedEntityRecord } = useSelect( ( select ) => { + return select( coreStore ); + }, [] ); + const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -86,10 +94,26 @@ const DesignHeaderMenu = () => { useEffect( () => { if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) getPatternsData(); + getEditedEntityRecord( 'root', 'menuItem' ); }, [ isLoaded, themeStatus ] ); + const updateCoreData = ( ) => { + defaultMenuItems.map( ( item, idx ) => { + editEntityRecord( 'root', 'menuItem', { + id: idx + 1, + title: { "rendered": item }, + status: 'publish', + url: '#', + parent: 0, + menu_order: idx + 1, + } ); + }); + }; + const handleClick = ( idx ) => { + updateCoreData(); + if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { document.getElementsByClassName( 'nfd-onboard-content' )[0] .scrollIntoView( { From 8f4d9d2e57712c4a416b25b98475f594a8de4491 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 24 Jan 2023 02:14:56 +0530 Subject: [PATCH 03/32] split menu item update done --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 56 +++++++++++++------ 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 9d77392b4..891db646c 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -6,6 +6,8 @@ import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { GlobalStylesProvider, LivePreviewSkeleton } from '../../../components/LivePreview'; import { store as coreStore } from '@wordpress/core-data'; +import { wpSiteUrl } from '../../../../constants'; +import { filter } from 'lodash'; import { THEME_STATUS_ACTIVE, @@ -25,7 +27,7 @@ const DesignHeaderMenu = () => { ]; const defaultMenuItems = [ 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ]; - const { editEntityRecord } = useDispatch( coreStore ); + let pageList = []; const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); @@ -33,7 +35,7 @@ const DesignHeaderMenu = () => { const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); - const { getEditedEntityRecord } = useSelect( ( select ) => { + const { editEntityRecord, getEntityRecords } = useSelect( ( select ) => { return select( coreStore ); }, [] ); @@ -48,10 +50,19 @@ const DesignHeaderMenu = () => { }; }, [] ); - const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = - useDispatch( nfdOnboardingStore ); + const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); + + const filteredPageList = () => { + return filter( + getEntityRecords( 'postType', 'page' ), + ( page, idx ) => idx < 6 + ); + }; const getPatternsData = async () => { + pageList = filteredPageList(); + console.log('pagelist = ' + pageList.length); + const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); @@ -63,6 +74,7 @@ const DesignHeaderMenu = () => { const headerMenuPatterns = []; headerMenuPreviewResponse.body.forEach( ( pageParts ) => { if ( headerMenuSlugs.includes( pageParts.slug ) ) { + pageParts.content = replaceNavigationGrammar( pageParts.content, pageParts.slug ); headerMenuPatterns.push( pageParts ); } } ); @@ -93,26 +105,34 @@ const DesignHeaderMenu = () => { useEffect( () => { if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + // pageList = getEntityRecords( 'postType', 'page' ); getPatternsData(); - getEditedEntityRecord( 'root', 'menuItem' ); - }, [ isLoaded, themeStatus ] ); - - const updateCoreData = ( ) => { - defaultMenuItems.map( ( item, idx ) => { - editEntityRecord( 'root', 'menuItem', { - id: idx + 1, - title: { "rendered": item }, - status: 'publish', - url: '#', - parent: 0, - menu_order: idx + 1, - } ); + }, [ isLoaded, themeStatus ] ); + + const updatePageEntityData = ( ) => { + pageList.map( ( page, idx ) => { + editEntityRecord( 'postType', 'page', + page.id, + { title: defaultMenuItems[idx] } + ); }); }; + const replaceNavigationGrammar = ( pageGrammar, headerSlug ) => { + if( headerSlug.includes('split') ) { + let menuGrammarDummy = '', + menuNavigationGrammar = ''; + defaultMenuItems.map( ( item, idx ) => { + menuGrammarDummy = ''; + pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy); + }); + } + return pageGrammar; + } + const handleClick = ( idx ) => { - updateCoreData(); + updatePageEntityData(); if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { document.getElementsByClassName( 'nfd-onboard-content' )[0] From b6486d9f4da6cdd7a9403ad21ced9e1638a28187 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 24 Jan 2023 10:07:17 +0530 Subject: [PATCH 04/32] added dummy menu links for non split menus --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 891db646c..cf3fca211 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -35,7 +35,8 @@ const DesignHeaderMenu = () => { const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); - const { editEntityRecord, getEntityRecords } = useSelect( ( select ) => { + const { editEntityRecord } = useDispatch( coreStore ); + const { getEntityRecords, getEditedEntityRecord } = useSelect( ( select ) => { return select( coreStore ); }, [] ); @@ -60,8 +61,6 @@ const DesignHeaderMenu = () => { }; const getPatternsData = async () => { - pageList = filteredPageList(); - console.log('pagelist = ' + pageList.length); const headerMenuPreviewResponse = await getPatterns( currentStep.patternId @@ -104,10 +103,16 @@ const DesignHeaderMenu = () => { }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) - // pageList = getEntityRecords( 'postType', 'page' ); + if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { getPatternsData(); - }, [ isLoaded, themeStatus ] ); + } + }, [ isLoaded, themeStatus ] ); + + useEffect( () => { + pageList = filteredPageList(); + updatePageEntityData(); + getEditedEntityRecord( 'postType', 'page' ); + }, [] ); const updatePageEntityData = ( ) => { pageList.map( ( page, idx ) => { @@ -122,16 +127,27 @@ const DesignHeaderMenu = () => { if( headerSlug.includes('split') ) { let menuGrammarDummy = '', menuNavigationGrammar = ''; - defaultMenuItems.map( ( item, idx ) => { + defaultMenuItems.map( ( item ) => { menuGrammarDummy = ''; pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy); }); + } else { + let menuNavigationRegex = //ig, + menuNavigationGrammar = "", + menuDummyLinks = ''; + defaultMenuItems.map( ( item ) => { + menuDummyLinks = ''; + menuNavigationGrammar += menuDummyLinks; + }); + menuNavigationGrammar += ''; + pageGrammar = pageGrammar.replace( menuNavigationRegex, menuNavigationGrammar); } return pageGrammar; } const handleClick = ( idx ) => { + pageList = filteredPageList(); updatePageEntityData(); if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { From f7748611a02359750cc04652be2ac19a67e2983e Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 14 Feb 2023 18:03:16 +0530 Subject: [PATCH 05/32] WIP : editing pages entities --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 68 +++++++++++-------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index cf3fca211..4f589ef4a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -31,6 +31,7 @@ const DesignHeaderMenu = () => { const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); + const [ pagesRender, setPagesRender ] = useState( false ); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); @@ -40,6 +41,12 @@ const DesignHeaderMenu = () => { return select( coreStore ); }, [] ); + const pages = useSelect( + select => + select( coreStore ).getEntityRecords( 'postType', 'page' ), + [] + ); + const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -53,13 +60,6 @@ const DesignHeaderMenu = () => { const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); - const filteredPageList = () => { - return filter( - getEntityRecords( 'postType', 'page' ), - ( page, idx ) => idx < 6 - ); - }; - const getPatternsData = async () => { const headerMenuPreviewResponse = await getPatterns( @@ -102,27 +102,39 @@ const DesignHeaderMenu = () => { setIsLoaded( true ); }; + useEffect( () => { + console.log(pages); + if( pages != null) { + pageList = filteredPageList( pages ); + updatePageEntityData( pageList ); + setPagesRender( true ); + } + }, [ pages ] ); + useEffect( () => { if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { getPatternsData(); } }, [ isLoaded, themeStatus ] ); - useEffect( () => { - pageList = filteredPageList(); - updatePageEntityData(); - getEditedEntityRecord( 'postType', 'page' ); - }, [] ); - - const updatePageEntityData = ( ) => { - pageList.map( ( page, idx ) => { + const updatePageEntityData = ( pages ) => { + pages?.map( ( page, idx ) => { + console.log( page.id + ' = ' + JSON.stringify(page.title) ); editEntityRecord( 'postType', 'page', page.id, { title: defaultMenuItems[idx] } ); + getEditedEntityRecord( 'postType', 'page', page.id); }); }; + const filteredPageList = ( pages ) => { + return filter( + pages, + ( page, idx ) => idx < 6 + ); + }; + const replaceNavigationGrammar = ( pageGrammar, headerSlug ) => { if( headerSlug.includes('split') ) { let menuGrammarDummy = '', @@ -131,25 +143,23 @@ const DesignHeaderMenu = () => { menuGrammarDummy = ''; pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy); }); - } else { - let menuNavigationRegex = //ig, - menuNavigationGrammar = "", - menuDummyLinks = ''; - defaultMenuItems.map( ( item ) => { - menuDummyLinks = ''; - menuNavigationGrammar += menuDummyLinks; - }); - menuNavigationGrammar += ''; - pageGrammar = pageGrammar.replace( menuNavigationRegex, menuNavigationGrammar); } + // else { + // let menuNavigationRegex = //ig, + // menuNavigationGrammar = "", + // menuDummyLinks = ''; + // defaultMenuItems.map( ( item ) => { + // menuDummyLinks = ''; + // menuNavigationGrammar += menuDummyLinks; + // }); + // menuNavigationGrammar += ''; + // pageGrammar = pageGrammar.replace( menuNavigationRegex, menuNavigationGrammar); + // } return pageGrammar; } const handleClick = ( idx ) => { - pageList = filteredPageList(); - updatePageEntityData(); - if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { document.getElementsByClassName( 'nfd-onboard-content' )[0] .scrollIntoView( { @@ -197,7 +207,7 @@ const DesignHeaderMenu = () => {
- { buildPreviews() } + { pagesRender && buildPreviews() } {/* { Date: Tue, 28 Feb 2023 00:40:05 +0530 Subject: [PATCH 06/32] added filters to modify the w2/json/pages API call --- includes/Application.php | 11 ++- includes/WP_Admin.php | 144 ++++++++++++++++++++++++++++++++++++--- 2 files changed, 145 insertions(+), 10 deletions(-) diff --git a/includes/Application.php b/includes/Application.php index 5982f65be..e286ae508 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; /** @@ -58,11 +65,11 @@ public function __construct( Container $container ) { new WP_CLI(); } - if ( Permissions::is_authorized_admin() ) { + if ( Permissions::is_authorized_admin() || Permissions::rest_is_authorized_admin() ) { new WP_Admin(); } \do_action( 'nfd_module_onboarding_post_init' ); } } -// END \NewfoldLabs\WP\Module\Onboarding\Application +// END /NewfoldLabs/WP/Module/Onboarding/Application diff --git a/includes/WP_Admin.php b/includes/WP_Admin.php index 62946b791..148ec860a 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -18,6 +18,13 @@ final class WP_Admin { */ public static $slug = 'nfd-onboarding'; + /** + * Default set of dummy pages. + * + * @var array + */ + public static $dummy_pages = array( 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ); + /** * Tap WordPress Hooks * @@ -26,7 +33,7 @@ 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' ) ); + \add_filter( 'rest_request_before_callbacks', array( __CLASS__, 'check_for_pages_api_call_from_onboarding_flow' ), 10, 3 ); } /** @@ -100,26 +107,147 @@ 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( get_query_var( 'nfd_plugins' ) ) && 'true' === get_query_var( 'nfd_plugins' ) ) { PluginInstallTaskManager::queue_initial_installs(); } - if ( isset( $_GET['nfd_themes'] ) && $_GET['nfd_themes'] === 'true' ) { + if ( ! empty( get_query_var( 'nfd_themes' ) ) && 'true' === get_query_var( 'nfd_themes' ) ) { ThemeInstallTaskManager::queue_initial_installs(); } self::register_assets(); } -} // END \NewfoldLabs\WP\Module\Onboarding\Admin() + /** + * Custom filter to check for pages API call, if true then add more filters for the onboarding flow only. + * + * @param array $response - the api response + * @param array $handler - handler + * @param \WP_REST_Request $request - WP_REST_Request object + * + * @return array + */ + public static function check_for_pages_api_call_from_onboarding_flow( $response, array $handler, \WP_REST_Request $request ) { + if ( self::is_wp_pages_request( $request ) && self::is_request_from_onboarding_flow( $request ) ) { + \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 ); + } + return $response; + } + + /** + * 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 ) { + if ( self::is_wp_pages_request( $request ) && self::is_request_from_onboarding_flow( $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' ); + } + + /** + * Check if the CORE pages API call is being made. + * + * @param \WP_REST_Request $request - WP_REST_Request object + * + * @return boolean + */ + public static function is_wp_pages_request( \WP_REST_Request $request ) { + return '/wp/v2/pages' === $request->get_route() && 'GET' === $request->get_method(); + } + + /** + * 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( self::$dummy_pages ) ) { + $pages = array_pad( + $pages, + count( self::$dummy_pages ), + 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'] = self::$dummy_pages[ $index ]; + $page['menu_order'] = $index; + } + return $page; + } +} // END /NewfoldLabs/WP/Module/Onboarding/Admin() From 4c48606373a3586da1ec58d52d755289cabf7f02 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 28 Feb 2023 00:41:57 +0530 Subject: [PATCH 07/32] removed the entity framework code --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 44 +------------------ 1 file changed, 1 insertion(+), 43 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 4f589ef4a..1fa4cfcc5 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -5,9 +5,7 @@ import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { GlobalStylesProvider, LivePreviewSkeleton } from '../../../components/LivePreview'; -import { store as coreStore } from '@wordpress/core-data'; import { wpSiteUrl } from '../../../../constants'; -import { filter } from 'lodash'; import { THEME_STATUS_ACTIVE, @@ -27,26 +25,13 @@ const DesignHeaderMenu = () => { ]; const defaultMenuItems = [ 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ]; - let pageList = []; const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); - const [ pagesRender, setPagesRender ] = useState( false ); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); - const { editEntityRecord } = useDispatch( coreStore ); - const { getEntityRecords, getEditedEntityRecord } = useSelect( ( select ) => { - return select( coreStore ); - }, [] ); - - const pages = useSelect( - select => - select( coreStore ).getEntityRecords( 'postType', 'page' ), - [] - ); - const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -102,39 +87,12 @@ const DesignHeaderMenu = () => { setIsLoaded( true ); }; - useEffect( () => { - console.log(pages); - if( pages != null) { - pageList = filteredPageList( pages ); - updatePageEntityData( pageList ); - setPagesRender( true ); - } - }, [ pages ] ); - useEffect( () => { if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { getPatternsData(); } }, [ isLoaded, themeStatus ] ); - const updatePageEntityData = ( pages ) => { - pages?.map( ( page, idx ) => { - console.log( page.id + ' = ' + JSON.stringify(page.title) ); - editEntityRecord( 'postType', 'page', - page.id, - { title: defaultMenuItems[idx] } - ); - getEditedEntityRecord( 'postType', 'page', page.id); - }); - }; - - const filteredPageList = ( pages ) => { - return filter( - pages, - ( page, idx ) => idx < 6 - ); - }; - const replaceNavigationGrammar = ( pageGrammar, headerSlug ) => { if( headerSlug.includes('split') ) { let menuGrammarDummy = '', @@ -207,7 +165,7 @@ const DesignHeaderMenu = () => {
- { pagesRender && buildPreviews() } + { buildPreviews() } {/* { Date: Tue, 28 Feb 2023 17:46:44 +0530 Subject: [PATCH 08/32] handled the last edge case --- includes/WP_Admin.php | 51 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/includes/WP_Admin.php b/includes/WP_Admin.php index 148ec860a..2676ab920 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -147,10 +147,61 @@ public static function check_for_pages_api_call_from_onboarding_flow( $response, if ( self::is_wp_pages_request( $request ) && self::is_request_from_onboarding_flow( $request ) ) { \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 ); + } elseif ( self::is_nav_menu_request( $request ) && self::is_request_from_onboarding_flow( $request ) ) { + \add_filter( 'rest_request_after_callbacks', array( __CLASS__, 'wp_onboarding_nav_menu_filter' ), 10, 2 ); } return $response; } + /** + * 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 ( self::$dummy_pages 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; + } + + /** + * Check if the CORE navigation API call is being made. + * + * @param \WP_REST_Request $request - WP_REST_Request object + * + * @return boolean + */ + public static function is_nav_menu_request( \WP_REST_Request $request ) { + return '/wp/v2/navigation' === $request->get_route() && 'GET' === $request->get_method(); + } + /** * Custom filter to check for pages API call, if true then add more filters for the onboarding flow only. * From 80ea624b5611773cab19611b75c09d0b0187f940 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 1 Mar 2023 09:09:26 +0530 Subject: [PATCH 09/32] using LivePreviewSkeleton for showing header menu patterns --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 73 ++++++------------- .../components/Drawer/stylesheet.scss | 8 +- .../components/HeaderMenuPreview/index.js | 60 --------------- 3 files changed, 30 insertions(+), 111 deletions(-) delete mode 100644 src/OnboardingSPA/components/HeaderMenuPreview/index.js diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 1fa4cfcc5..da7affca4 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -1,10 +1,9 @@ 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, LivePreviewSkeleton } from '../../../components/LivePreview'; +import { LivePreviewSkeleton, LivePreviewSelectableCard } from '../../../components/LivePreview'; import { wpSiteUrl } from '../../../../constants'; import { @@ -26,7 +25,6 @@ const DesignHeaderMenu = () => { const defaultMenuItems = [ 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ]; - const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); @@ -58,7 +56,9 @@ const DesignHeaderMenu = () => { const headerMenuPatterns = []; headerMenuPreviewResponse.body.forEach( ( pageParts ) => { if ( headerMenuSlugs.includes( pageParts.slug ) ) { - pageParts.content = replaceNavigationGrammar( pageParts.content, pageParts.slug ); + if( pageParts.slug.includes('split') ) { + pageParts.content = replaceNavigationGrammar( pageParts.content ); + } headerMenuPatterns.push( pageParts ); } } ); @@ -84,35 +84,21 @@ const DesignHeaderMenu = () => { } ); pagePreview = headerContent + pageContent; setHeaderMenuData( pagePreview ); - setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { + if ( themeStatus === THEME_STATUS_ACTIVE ) { getPatternsData(); } - }, [ isLoaded, themeStatus ] ); - - const replaceNavigationGrammar = ( pageGrammar, headerSlug ) => { - if( headerSlug.includes('split') ) { - let menuGrammarDummy = '', - menuNavigationGrammar = ''; - defaultMenuItems.map( ( item ) => { - menuGrammarDummy = ''; - pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy); - }); - } - // else { - // let menuNavigationRegex = //ig, - // menuNavigationGrammar = "", - // menuDummyLinks = ''; - // defaultMenuItems.map( ( item ) => { - // menuDummyLinks = ''; - // menuNavigationGrammar += menuDummyLinks; - // }); - // menuNavigationGrammar += ''; - // pageGrammar = pageGrammar.replace( menuNavigationRegex, menuNavigationGrammar); - // } + }, [ themeStatus ] ); + + const replaceNavigationGrammar = ( pageGrammar ) => { + let menuGrammarDummy = '', + menuNavigationGrammar = ''; + defaultMenuItems.map( ( item ) => { + menuGrammarDummy = ''; + pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy); + }); return pageGrammar; } @@ -141,11 +127,9 @@ const DesignHeaderMenu = () => { }; const buildPreviews = () => { - const headerMenuPreviews = []; - - patterns?.map( ( pattern, idx ) => { - headerMenuPreviews.push( - { + return ( + { /> ); } ); - - return headerMenuPreviews; }; return ( - -
-
- { buildPreviews() } - {/* { } */} -
-
- + ); }; diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 0a0f41e8f..23c7de7f5 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -627,8 +627,10 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &__title-bar { width: 90%; - height: 20px; + height: 0px; display: flex; + align-items: center; + background-color: #ccc; justify-content: space-between; &--selected { @@ -636,7 +638,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; @@ -665,7 +667,9 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &__container { &-custom { + width: 100%; overflow: hidden; + min-height: 50px; &: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; From ecd76afe5f64007328a952e949590058b4a3d9cf Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 1 Mar 2023 10:03:03 +0530 Subject: [PATCH 10/32] made the headermenu preview count dynamic --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 85763d548..9f0960a15 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -30,7 +30,7 @@ const DesignHeaderMenu = () => { 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 @@ -38,6 +38,7 @@ const DesignHeaderMenu = () => { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + storedPreviewSettings: select( nfdOnboardingStore ).getStepPreviewData(), }; }, [] ); @@ -145,7 +146,7 @@ const DesignHeaderMenu = () => { return ( Date: Wed, 1 Mar 2023 23:16:48 +0530 Subject: [PATCH 11/32] added selected headermenu to the homepages step --- includes/Data/Patterns.php | 20 ++- .../pages/Steps/DesignHomepageMenu/index.js | 122 +++++++++--------- 2 files changed, 80 insertions(+), 62 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 6196a4cf5..1a4418ab7 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -31,20 +31,32 @@ protected static function get_theme_step_patterns() { 'site-header-left-logo-navigation-inline' => array( 'active' => true, ), - 'homepage-1' => array( + 'homepage-1' => array( 'active' => true, 'shown' => true, ), - 'homepage-2' => array( + 'homepage-2' => array( 'active' => true, 'shown' => true, ), - 'homepage-3' => array( + 'homepage-3' => array( 'active' => true, 'shown' => true, ), - 'site-footer' => array( + 'site-footer' => array( + 'active' => true, + ), + 'site-header-left-logo-navigation-below' => array( + 'active' => true, + 'shown' => false, + ), + 'site-header-centered' => array( + 'active' => true, + 'shown' => false, + ), + 'site-header-splitted-menu' => array( 'active' => true, + 'shown' => false, ), ), 'site-pages' => array( diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 6fe54eb25..9cd48f0be 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -45,8 +45,8 @@ const StepDesignHomepageMenu = () => { }; const location = useLocation(); - const [ homepagePattern, setHomepagePattern ] = useState(); - const [ selectedHomepage, setSelectedHomepage ] = useState( 0 ); + const [homepagePattern, setHomepagePattern] = useState(); + const [selectedHomepage, setSelectedHomepage] = useState(0); const { currentStep, @@ -54,60 +54,66 @@ const StepDesignHomepageMenu = () => { storedPreviewSettings, themeStatus, themeVariations, - } = useSelect( ( select ) => { + } = useSelect((select) => { return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( + currentStep: select(nfdOnboardingStore).getStepFromPath( location.pathname ), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), + currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), storedPreviewSettings: - select( nfdOnboardingStore ).getPreviewSettings(), - themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - themeVariations: select( nfdOnboardingStore ).getStepPreviewData(), + select(nfdOnboardingStore).getPreviewSettings(), + themeStatus: select(nfdOnboardingStore).getThemeStatus(), + themeVariations: select(nfdOnboardingStore).getStepPreviewData(), }; - }, [] ); + }, []); const { setDrawerActiveView, setSidebarActiveView, setCurrentOnboardingData, updateThemeStatus, - } = useDispatch( nfdOnboardingStore ); + } = useDispatch(nfdOnboardingStore); - useEffect( () => { - setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setDrawerActiveView( VIEW_NAV_DESIGN ); - }, [] ); + useEffect(() => { + setSidebarActiveView(SIDEBAR_LEARN_MORE); + setDrawerActiveView(VIEW_NAV_DESIGN); + }, []); - function refactorPatterns( homepagePatternData ) { + function refactorPatterns(homepagePatternsData) { const makeHomepagePattern = []; - for ( const key in homepagesList ) { - const homepagePatterns = homepagesList[ key ]; + 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 ) => { - homepagePatternData?.body.forEach( ( homepagePatternData ) => { - if ( homepagePatternData.slug === patternName ) { - patternData += homepagePatternData.content; + homepagePatterns.forEach((patternName) => { + homepagePatternsData?.body.forEach((patternsData) => { + if (patternsData.slug === patternName) { + patternData += patternsData.content; } - } ); - } ); - makeHomepagePattern.push( patternData ); + }); + }); + makeHomepagePattern.push(patternData); } return makeHomepagePattern; } async function getHomepagePatternsData() { - const homepagePatternData = await getPatterns( currentStep.patternId ); - if ( homepagePatternData?.error ) { - return updateThemeStatus( THEME_STATUS_INIT ); + const homepagePatternData = await getPatterns(currentStep.patternId); + if (homepagePatternData?.error) { + return updateThemeStatus(THEME_STATUS_INIT); } - setHomepagePattern( refactorPatterns( homepagePatternData ) ); + setHomepagePattern(refactorPatterns(homepagePatternData)); - if ( currentData?.data.sitePages.length !== 0 ) { + if (currentData?.data.sitePages.length !== 0) { setSelectedHomepage( homepagePatternList?.indexOf( currentData?.data.sitePages.homepage @@ -116,46 +122,46 @@ const StepDesignHomepageMenu = () => { } else { currentData.data.sitePages = { ...currentData.data.sitePages, - homepage: homepagePatternList[ 0 ], + homepage: homepagePatternList[0], }; - setCurrentOnboardingData( currentData ); + setCurrentOnboardingData(currentData); } } - function saveDataForHomepage( idx ) { - setSelectedHomepage( idx ); + function saveDataForHomepage(idx) { + setSelectedHomepage(idx); currentData.data.sitePages = { ...currentData.data.sitePages, - homepage: homepagePatternList[ idx ], + homepage: homepagePatternList[idx], }; - setCurrentOnboardingData( currentData ); + setCurrentOnboardingData(currentData); } - useEffect( () => { - if ( themeStatus === THEME_STATUS_ACTIVE ) { + useEffect(() => { + if (themeStatus === THEME_STATUS_ACTIVE) { getHomepagePatternsData(); } - }, [ themeStatus ] ); + }, [themeStatus]); function buildHomepagePreviews() { - return homepagePattern?.map( ( homepage, idx ) => { - if ( homepage ) { + return homepagePattern?.map((homepage, idx) => { + if (homepage) { return ( saveDataForHomepage( idx ) } + key={idx} + className={'homepage_preview__list__item'} + selected={idx === selectedHomepage} + blockGrammer={homepage} + viewportWidth={1200} + styling={'custom'} + previewSettings={storedPreviewSettings} + overlay={false} + onClick={() => saveDataForHomepage(idx)} /> ); } return null; - } ); + }); } return ( @@ -164,19 +170,19 @@ const StepDesignHomepageMenu = () => {
From 51a1efa14222f968f5deb39b0b53137b8d62024c Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 1 Mar 2023 23:22:45 +0530 Subject: [PATCH 12/32] fixed Js linting issues --- .../pages/Steps/DesignHomepageMenu/index.js | 123 +++++++++--------- 1 file changed, 62 insertions(+), 61 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 9cd48f0be..54f2ec8de 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -45,8 +45,8 @@ const StepDesignHomepageMenu = () => { }; const location = useLocation(); - const [homepagePattern, setHomepagePattern] = useState(); - const [selectedHomepage, setSelectedHomepage] = useState(0); + const [ homepagePattern, setHomepagePattern ] = useState(); + const [ selectedHomepage, setSelectedHomepage ] = useState( 0 ); const { currentStep, @@ -54,66 +54,67 @@ const StepDesignHomepageMenu = () => { storedPreviewSettings, themeStatus, themeVariations, - } = useSelect((select) => { + } = useSelect( ( select ) => { return { - currentStep: select(nfdOnboardingStore).getStepFromPath( + currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), storedPreviewSettings: - select(nfdOnboardingStore).getPreviewSettings(), - themeStatus: select(nfdOnboardingStore).getThemeStatus(), - themeVariations: select(nfdOnboardingStore).getStepPreviewData(), + select( nfdOnboardingStore ).getPreviewSettings(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: select( nfdOnboardingStore ).getStepPreviewData(), }; - }, []); + }, [] ); const { setDrawerActiveView, setSidebarActiveView, setCurrentOnboardingData, updateThemeStatus, - } = useDispatch(nfdOnboardingStore); + } = useDispatch( nfdOnboardingStore ); - useEffect(() => { - setSidebarActiveView(SIDEBAR_LEARN_MORE); - setDrawerActiveView(VIEW_NAV_DESIGN); - }, []); + useEffect( () => { + setSidebarActiveView( SIDEBAR_LEARN_MORE ); + setDrawerActiveView( VIEW_NAV_DESIGN ); + }, [] ); - function refactorPatterns(homepagePatternsData) { + function refactorPatterns( homepagePatternData ) { const makeHomepagePattern = []; - for (const key in homepagesList) { - const homepagePatterns = homepagesList[key]; + for ( const key in homepagesList ) { + const homepagePatterns = homepagesList[ key ]; // update the header menu pattern if already selected - if ( - currentData.data.partHeader || - currentData.data.partHeader !== '' + if ( + currentData.data.partHeader || + currentData.data.partHeader !== '' ) { - homepagePatterns[0] = currentData.data.partHeader; + homepagePatterns[ 0 ] = currentData.data.partHeader; } let patternData = ''; - homepagePatterns.forEach((patternName) => { - homepagePatternsData?.body.forEach((patternsData) => { - if (patternsData.slug === patternName) { - patternData += patternsData.content; + homepagePatterns.forEach( ( patternName ) => { + homepagePatternData?.body.forEach( ( homepagePatternData ) => { + if ( homepagePatternData.slug === patternName ) { + patternData += homepagePatternData.content; } - }); - }); - makeHomepagePattern.push(patternData); + } ); + } ); + makeHomepagePattern.push( patternData ); } return makeHomepagePattern; } async function getHomepagePatternsData() { - const homepagePatternData = await getPatterns(currentStep.patternId); - if (homepagePatternData?.error) { - return updateThemeStatus(THEME_STATUS_INIT); + const homepagePatternData = await getPatterns( currentStep.patternId ); + if ( homepagePatternData?.error ) { + return updateThemeStatus( THEME_STATUS_INIT ); } - setHomepagePattern(refactorPatterns(homepagePatternData)); + setHomepagePattern( refactorPatterns( homepagePatternData ) ); - if (currentData?.data.sitePages.length !== 0) { + if ( currentData?.data.sitePages.length !== 0 ) { setSelectedHomepage( homepagePatternList?.indexOf( currentData?.data.sitePages.homepage @@ -122,46 +123,46 @@ const StepDesignHomepageMenu = () => { } else { currentData.data.sitePages = { ...currentData.data.sitePages, - homepage: homepagePatternList[0], + homepage: homepagePatternList[ 0 ], }; - setCurrentOnboardingData(currentData); + setCurrentOnboardingData( currentData ); } } - function saveDataForHomepage(idx) { - setSelectedHomepage(idx); + function saveDataForHomepage( idx ) { + setSelectedHomepage( idx ); currentData.data.sitePages = { ...currentData.data.sitePages, - homepage: homepagePatternList[idx], + homepage: homepagePatternList[ idx ], }; - setCurrentOnboardingData(currentData); + setCurrentOnboardingData( currentData ); } - useEffect(() => { - if (themeStatus === THEME_STATUS_ACTIVE) { + useEffect( () => { + if ( themeStatus === THEME_STATUS_ACTIVE ) { getHomepagePatternsData(); } - }, [themeStatus]); + }, [ themeStatus ] ); function buildHomepagePreviews() { - return homepagePattern?.map((homepage, idx) => { - if (homepage) { + return homepagePattern?.map( ( homepage, idx ) => { + if ( homepage ) { return ( saveDataForHomepage(idx)} + key={ idx } + className={ 'homepage_preview__list__item' } + selected={ idx === selectedHomepage } + blockGrammer={ homepage } + viewportWidth={ 1200 } + styling={ 'custom' } + previewSettings={ storedPreviewSettings } + overlay={ false } + onClick={ () => saveDataForHomepage( idx ) } /> ); } return null; - }); + } ); } return ( @@ -170,19 +171,19 @@ const StepDesignHomepageMenu = () => {
From ba36c3eef2e9e5ae30a1505ea4527f4f0cf9cb8f Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 1 Mar 2023 23:32:19 +0530 Subject: [PATCH 13/32] fixed JS linting issues again --- .../pages/Steps/DesignHomepageMenu/index.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 54f2ec8de..6c632f343 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -80,23 +80,24 @@ const StepDesignHomepageMenu = () => { setDrawerActiveView( VIEW_NAV_DESIGN ); }, [] ); - function refactorPatterns( homepagePatternData ) { + function refactorPatterns( homepagePatternsData ) { const makeHomepagePattern = []; for ( const key in homepagesList ) { const homepagePatterns = homepagesList[ key ]; // update the header menu pattern if already selected - if ( - currentData.data.partHeader || - currentData.data.partHeader !== '' + if ( + currentData.data.partHeader || + currentData.data.partHeader !== '' ) { homepagePatterns[ 0 ] = currentData.data.partHeader; } + let patternData = ''; homepagePatterns.forEach( ( patternName ) => { - homepagePatternData?.body.forEach( ( homepagePatternData ) => { - if ( homepagePatternData.slug === patternName ) { - patternData += homepagePatternData.content; + homepagePatternsData?.body.forEach( ( patternsData ) => { + if ( patternsData.slug === patternName ) { + patternData += patternsData.content; } } ); } ); From 160b2367a7b7c2e30953745c4870df9f3d8cb32d Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 2 Mar 2023 15:36:22 +0530 Subject: [PATCH 14/32] fixing JS lint issues --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 9f0960a15..3d1b3ccd2 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -4,11 +4,11 @@ import { useLocation } from 'react-router-dom'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { LivePreviewSkeleton, LivePreviewSelectableCard } from '../../../components/LivePreview'; -import { wpSiteUrl } from '../../../../constants'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT, + wpSiteUrl, } from '../../../../constants'; const DesignHeaderMenu = () => { @@ -45,7 +45,6 @@ const DesignHeaderMenu = () => { const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); const getPatternsData = async () => { - const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); @@ -57,7 +56,7 @@ const DesignHeaderMenu = () => { const headerMenuPatterns = []; headerMenuPreviewResponse.body.forEach( ( pageParts ) => { if ( headerMenuSlugs.includes( pageParts.slug ) ) { - if( pageParts.slug.includes('split') ) { + if ( pageParts.slug.includes( 'split' ) ) { pageParts.content = replaceNavigationGrammar( pageParts.content ); } headerMenuPatterns.push( pageParts ); @@ -94,31 +93,30 @@ const DesignHeaderMenu = () => { }, [ themeStatus ] ); const replaceNavigationGrammar = ( pageGrammar ) => { - let menuGrammarDummy = '', - menuNavigationGrammar = ''; - defaultMenuItems.map( ( item ) => { + let menuGrammarDummy = ''; + const menuNavigationGrammar = ''; + defaultMenuItems.forEach( ( item ) => { menuGrammarDummy = ''; - pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy); - }); + pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy ); + } ); return pageGrammar; - } + }; const handleClick = ( idx ) => { - if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { - document.getElementsByClassName( 'nfd-onboard-content' )[0] + document.getElementsByClassName( 'nfd-onboard-content' )[ 0 ] .scrollIntoView( { behavior: 'smooth', } ); } - 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; @@ -146,9 +144,9 @@ const DesignHeaderMenu = () => { return ( From 1f3f06a6e96d00c289fda4d5cc305c9d4a72d4c6 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 2 Mar 2023 16:47:06 +0530 Subject: [PATCH 15/32] fixed SCSS linting --- .../components/Drawer/stylesheet.scss | 174 ++++++++---------- 1 file changed, 80 insertions(+), 94 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index fbf92b21e..31fd233d4 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: #fff; 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: #000; + 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: #000; display: flex; cursor: pointer; align-items: center; - background-color: white; + background-color: #fff; 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: #000; cursor: pointer; font-weight: 900; border-radius: 50%; align-items: center; justify-content: center; - border: 1px solid black; - background-color: white; + border: 1px solid #000; + background-color: #fff; } } @@ -512,13 +515,13 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 40%; height: 30px; display: flex; - color: black; + color: #000; cursor: pointer; margin-left: 4px; text-align: center; align-items: center; justify-content: center; - background-color: white; + background-color: #fff; &: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: #000; font-weight: 700; margin-right: 16px; } @@ -599,7 +602,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &__title-bar { width: 90%; - height: 0px; + height: 0; display: flex; align-items: center; background-color: #ccc; @@ -633,23 +636,6 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 95%; overflow: hidden; align-items: center; - - .live-preview { - - &__container { - - &-custom { - width: 100%; - overflow: hidden; - min-height: 50px; - - &:hover { - cursor: pointer; - } - } - - } - } } } } From 3e39e374f596718f32529258e0d7767bac3f0e8b Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 9 Mar 2023 23:44:31 +0530 Subject: [PATCH 16/32] added error handling for header menu response --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 3d1b3ccd2..f10ebe819 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -54,7 +54,7 @@ const DesignHeaderMenu = () => { setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); const headerMenuPatterns = []; - headerMenuPreviewResponse.body.forEach( ( pageParts ) => { + headerMenuPreviewResponse?.body.forEach( ( pageParts ) => { if ( headerMenuSlugs.includes( pageParts.slug ) ) { if ( pageParts.slug.includes( 'split' ) ) { pageParts.content = replaceNavigationGrammar( pageParts.content ); From 7f053bcff39f18d0cb26e660d03524933ea06025 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 15 Mar 2023 16:18:46 +0530 Subject: [PATCH 17/32] code review fixes and code refactoring --- includes/Data/Patterns.php | 81 +++++-- includes/RestApi/RestApi.php | 12 +- includes/RestApi/RestApiFilter.php | 199 ++++++++++++++++++ .../RestApi/Themes/PatternsController.php | 6 +- includes/WP_Admin.php | 179 +--------------- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 15 -- .../DrawerPanel/DesignThemeStylesPreview.js | 3 +- .../components/Drawer/stylesheet.scss | 20 +- .../pages/Steps/DesignColors/index.js | 6 +- .../pages/Steps/DesignHomepageMenu/index.js | 4 +- .../Steps/DesignThemeStyles/Menu/index.js | 3 +- .../Steps/DesignThemeStyles/Preview/index.js | 3 +- .../pages/Steps/DesignTypography/index.js | 6 +- src/OnboardingSPA/utils/api/patterns.js | 4 +- 14 files changed, 315 insertions(+), 226 deletions(-) create mode 100644 includes/RestApi/RestApiFilter.php diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 1a4418ab7..8c615ec8a 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -6,6 +6,30 @@ */ final class Patterns { + /** + * List of styles to check for header menu slugs and replace with user selected header menu slug. + */ + private static $styles_to_check_for_header_menu = array( + 'theme-styles', + 'homepage-styles', + ); + + /** + * List of dummy menu page titles. + * + * @return array + */ + protected static function default_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. * @@ -46,18 +70,6 @@ protected static function get_theme_step_patterns() { 'site-footer' => array( 'active' => true, ), - 'site-header-left-logo-navigation-below' => array( - 'active' => true, - 'shown' => false, - ), - 'site-header-centered' => array( - 'active' => true, - 'shown' => false, - ), - 'site-header-splitted-menu' => array( - 'active' => true, - 'shown' => false, - ), ), 'site-pages' => array( 'company-page' => array( @@ -160,6 +172,39 @@ 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 $headerMenuSlug header menu slug choosen by the user + * + * @return array + */ + private static function replace_header_menu_slug( $patterns, $headerMenuSlug ) { + foreach( $patterns as $slug => $slug_details) { + if( false !== stripos( $slug, '-header-' ) ) { + unset( $patterns[ $slug ] ); + $patterns = array_merge( array( $headerMenuSlug => $slug_details ), $patterns ); + } + } + return $patterns; + } + + private static function replace_split_menu_items( $pattern_content ) { + $dummy_menu_grammar = ''; + $menu_navigation_grammar = ''; + foreach( self::default_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 * @@ -168,7 +213,7 @@ public static function get_pattern_from_slug( $pattern_slug ) { * * @return array|string */ - public static function get_theme_step_patterns_from_step( $step, $squash = false ) { + public static function get_theme_step_patterns_from_step( $step, $squash = false, $headerMenuSlug = '' ) { $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); if ( ! isset( self::get_theme_step_patterns()[ $active_theme ][ $step ] ) ) { @@ -179,11 +224,21 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); $block_patterns = array(); $block_patterns_squashed = ''; + + if ( ! empty( $headerMenuSlug ) && in_array( $step, self::$styles_to_check_for_header_menu ) ) { + $pattern_slugs = self::replace_header_menu_slug( $pattern_slugs, $headerMenuSlug ); + } + 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..589da94df 100644 --- a/includes/RestApi/RestApi.php +++ b/includes/RestApi/RestApi.php @@ -2,6 +2,8 @@ namespace NewfoldLabs\WP\Module\Onboarding\RestApi; +use NewfoldLabs\WP\Module\Onboarding\RestApi\RestApiFilter; + /** * Instantiate controllers and register routes. */ @@ -23,10 +25,18 @@ final class RestApi { '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 +48,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..da9fb9a8d --- /dev/null +++ b/includes/RestApi/RestApiFilter.php @@ -0,0 +1,199 @@ +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 ( self::dummy_pages() 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( self::dummy_pages() ) ) { + $pages = array_pad( + $pages, + count( self::dummy_pages() ), + 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'] = self::dummy_pages()[ $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..c4109a4d1 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -56,6 +56,9 @@ public function get_pattern_args() { 'type' => 'boolean', 'default' => false, ), + 'headerMenuSlug' => array( + 'type' => 'string', + ), ); } @@ -68,6 +71,7 @@ public function get_pattern( \WP_REST_Request $request ) { $step = $request->get_param( 'step' ); $squash = $request->get_param( 'squash' ); $slug = $request->get_param( 'slug' ); + $headerMenuSlug = $request->get_param( 'headerMenuSlug' ); if ( ! $step && ! $slug ) { return new \WP_Error( @@ -78,7 +82,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, $headerMenuSlug ); if ( ! $step_patterns ) { return new \WP_Error( 'no_patterns_found', diff --git a/includes/WP_Admin.php b/includes/WP_Admin.php index 2676ab920..a1600b4ff 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -18,13 +18,6 @@ final class WP_Admin { */ public static $slug = 'nfd-onboarding'; - /** - * Default set of dummy pages. - * - * @var array - */ - public static $dummy_pages = array( 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ); - /** * Tap WordPress Hooks * @@ -33,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_filter( 'rest_request_before_callbacks', array( __CLASS__, 'check_for_pages_api_call_from_onboarding_flow' ), 10, 3 ); } /** @@ -123,182 +115,15 @@ public static function register_assets() { * @return void */ public static function initialize() { - if ( ! empty( get_query_var( 'nfd_plugins' ) ) && 'true' === get_query_var( 'nfd_plugins' ) ) { + if ( ! empty( sanitize_text_field( $_GET['nfd_plugins'] ) ) && 'true' === sanitize_text_field( $_GET['nfd_plugins'] ) ) { PluginInstallTaskManager::queue_initial_installs(); } - if ( ! empty( get_query_var( 'nfd_themes' ) ) && 'true' === get_query_var( 'nfd_themes' ) ) { + if ( ! empty( sanitize_text_field( $_GET[ 'nfd_themes' ] ) ) && 'true' === sanitize_text_field( $_GET[ 'nfd_themes' ] ) ) { ThemeInstallTaskManager::queue_initial_installs(); } self::register_assets(); } - /** - * Custom filter to check for pages API call, if true then add more filters for the onboarding flow only. - * - * @param array $response - the api response - * @param array $handler - handler - * @param \WP_REST_Request $request - WP_REST_Request object - * - * @return array - */ - public static function check_for_pages_api_call_from_onboarding_flow( $response, array $handler, \WP_REST_Request $request ) { - if ( self::is_wp_pages_request( $request ) && self::is_request_from_onboarding_flow( $request ) ) { - \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 ); - } elseif ( self::is_nav_menu_request( $request ) && self::is_request_from_onboarding_flow( $request ) ) { - \add_filter( 'rest_request_after_callbacks', array( __CLASS__, 'wp_onboarding_nav_menu_filter' ), 10, 2 ); - } - return $response; - } - - /** - * 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 ( self::$dummy_pages 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; - } - - /** - * Check if the CORE navigation API call is being made. - * - * @param \WP_REST_Request $request - WP_REST_Request object - * - * @return boolean - */ - public static function is_nav_menu_request( \WP_REST_Request $request ) { - return '/wp/v2/navigation' === $request->get_route() && 'GET' === $request->get_method(); - } - - /** - * 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 ) { - if ( self::is_wp_pages_request( $request ) && self::is_request_from_onboarding_flow( $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' ); - } - - /** - * Check if the CORE pages API call is being made. - * - * @param \WP_REST_Request $request - WP_REST_Request object - * - * @return boolean - */ - public static function is_wp_pages_request( \WP_REST_Request $request ) { - return '/wp/v2/pages' === $request->get_route() && 'GET' === $request->get_method(); - } - - /** - * 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( self::$dummy_pages ) ) { - $pages = array_pad( - $pages, - count( self::$dummy_pages ), - 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'] = self::$dummy_pages[ $index ]; - $page['menu_order'] = $index; - } - return $page; - } } // 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 f10ebe819..8460446f8 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -23,8 +23,6 @@ const DesignHeaderMenu = () => { 'yith-wonder/site-footer', ]; - const defaultMenuItems = [ 'Home', 'About', 'Contact', 'News', 'Privacy', 'Careers' ]; - const [ patterns, setPatterns ] = useState(); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); @@ -56,9 +54,6 @@ const DesignHeaderMenu = () => { const headerMenuPatterns = []; headerMenuPreviewResponse?.body.forEach( ( pageParts ) => { if ( headerMenuSlugs.includes( pageParts.slug ) ) { - if ( pageParts.slug.includes( 'split' ) ) { - pageParts.content = replaceNavigationGrammar( pageParts.content ); - } headerMenuPatterns.push( pageParts ); } } ); @@ -92,16 +87,6 @@ const DesignHeaderMenu = () => { } }, [ themeStatus ] ); - const replaceNavigationGrammar = ( pageGrammar ) => { - let menuGrammarDummy = ''; - const menuNavigationGrammar = ''; - defaultMenuItems.forEach( ( item ) => { - menuGrammarDummy = ''; - pageGrammar = pageGrammar.replace( menuNavigationGrammar, menuGrammarDummy ); - } ); - return pageGrammar; - }; - const handleClick = ( idx ) => { if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { document.getElementsByClassName( 'nfd-onboard-content' )[ 0 ] diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 87290e71e..b0117efcd 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -47,7 +47,8 @@ const DesignThemeStylesPreview = () => { const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, - true + true, + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 31fd233d4..cb17979a0 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -354,7 +354,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); text-align: center; align-items: center; justify-content: center; - background-color: #fff; + background-color: $main-color-light; color: var(--nfd-onboarding-primary); &:hover { @@ -419,7 +419,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); } &__text { - color: #000; + color: $main-color-dark; font-size: 12px; font-weight: 700; line-height: 16px; @@ -466,11 +466,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &-row { height: 50px; - color: #000; + color: $main-color-dark; display: flex; cursor: pointer; align-items: center; - background-color: #fff; + background-color: $main-color-light; justify-content: flex-start; border: 0.5px solid rgba(0, 0, 0, 0.3); @@ -495,14 +495,14 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 25px; height: 25px; display: flex; - color: #000; + color: $main-color-dark; cursor: pointer; font-weight: 900; border-radius: 50%; align-items: center; justify-content: center; - border: 1px solid #000; - background-color: #fff; + border: 1px solid $main-color-dark; + background-color: $main-color-light; } } @@ -515,13 +515,13 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 40%; height: 30px; display: flex; - color: #000; + color: $main-color-dark; cursor: pointer; margin-left: 4px; text-align: center; align-items: center; justify-content: center; - background-color: #fff; + background-color: $main-color-light; &:hover { background-color: var(--nfd-onboarding-drawer-icon-fill); @@ -532,7 +532,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); .font-palette { &__icon { - color: #000; + color: $main-color-dark; font-weight: 700; margin-right: 16px; } diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 9f2f62c72..f4be7c50a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -41,7 +41,11 @@ const StepDesignColors = () => { }, [] ); const getStylesAndPatterns = async () => { - const pattern = await getPatterns( currentStep.patternId, true ); + const pattern = await getPatterns( + currentStep.patternId, + true, + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', + ); if ( pattern?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index ab846df65..4d0f9f145 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -111,7 +111,9 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternDataTemp = await getPatterns( - currentStep.patternId + currentStep.patternId, + false, + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( homepagePatternDataTemp?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 3b63da683..bf24bc6c5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -65,7 +65,8 @@ const StepDesignThemeStylesMenu = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, - true + true, + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 9a9c2826f..043af1942 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -66,7 +66,8 @@ const StepDesignThemeStylesPreview = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, - true + true, + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 9170603ab..b80a90ab5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -21,12 +21,13 @@ const StepDesignTypography = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentStep, themeStatus } = useSelect( ( select ) => { + const { currentStep, themeStatus, currentData } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, [] ); @@ -41,7 +42,8 @@ const StepDesignTypography = () => { const getFontPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, - true + true, + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/utils/api/patterns.js b/src/OnboardingSPA/utils/api/patterns.js index 3d357570e..5765b1c94 100644 --- a/src/OnboardingSPA/utils/api/patterns.js +++ b/src/OnboardingSPA/utils/api/patterns.js @@ -3,12 +3,12 @@ import { onboardingRestURL } from './common'; import apiFetch from '@wordpress/api-fetch'; -export async function getPatterns( step = false, squash = false ) { +export async function getPatterns( step = false, squash = false, headerMenuSlug = '' ) { return await resolve( apiFetch( { url: onboardingRestURL( `patterns` + - ( step ? `&step=${ step }&squash=${ squash }` : '' ) + ( step ? `&step=${ step }&squash=${ squash }&headerMenuSlug=${ headerMenuSlug }` : '' ) ), } ).then() ); From 6e8e143f0f3a9dc253ed3801d7520ecf8102756a Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 15 Mar 2023 17:04:47 +0530 Subject: [PATCH 18/32] PHP lint and JS lint --- includes/Data/Patterns.php | 49 ++++++----- includes/RestApi/RestApi.php | 19 +++-- includes/RestApi/RestApiFilter.php | 38 ++++----- .../RestApi/Themes/PatternsController.php | 85 ++++++++++--------- includes/WP_Admin.php | 2 +- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 1 - 6 files changed, 107 insertions(+), 87 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 8c615ec8a..3215f8213 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -8,6 +8,8 @@ final class Patterns { /** * List of styles to check for header menu slugs and replace with user selected header menu slug. + * + * @var array */ private static $styles_to_check_for_header_menu = array( 'theme-styles', @@ -16,7 +18,7 @@ final class Patterns { /** * List of dummy menu page titles. - * + * * @return array */ protected static function default_menu_items() { @@ -55,19 +57,19 @@ protected static function get_theme_step_patterns() { 'site-header-left-logo-navigation-inline' => array( 'active' => true, ), - 'homepage-1' => array( + 'homepage-1' => array( 'active' => true, 'shown' => true, ), - 'homepage-2' => array( + 'homepage-2' => array( 'active' => true, 'shown' => true, ), - 'homepage-3' => array( + 'homepage-3' => array( 'active' => true, 'shown' => true, ), - 'site-footer' => array( + 'site-footer' => array( 'active' => true, ), ), @@ -176,31 +178,39 @@ public static function get_pattern_from_slug( $pattern_slug ) { * Replace the header menu slug in the patterns array * * @param array $patterns Patterns for the specific step - * @param string $headerMenuSlug header menu slug choosen by the user + * @param string $header_menu_slug header menu slug choosen by the user * * @return array */ - private static function replace_header_menu_slug( $patterns, $headerMenuSlug ) { - foreach( $patterns as $slug => $slug_details) { - if( false !== stripos( $slug, '-header-' ) ) { + private static function replace_header_menu_slug( $patterns, $header_menu_slug ) { + foreach ( $patterns as $slug => $slug_details ) { + if ( false !== stripos( $slug, '-header-' ) ) { unset( $patterns[ $slug ] ); - $patterns = array_merge( array( $headerMenuSlug => $slug_details ), $patterns ); + $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 = ''; + $dummy_menu_grammar = ''; $menu_navigation_grammar = ''; - foreach( self::default_menu_items() as $item ) { + + foreach ( self::default_menu_items() as $item ) { $dummy_menu_grammar = ''; - $pattern_content = preg_replace( $menu_navigation_grammar, $dummy_menu_grammar, $pattern_content, 1 ); + $pattern_content = preg_replace( $menu_navigation_grammar, $dummy_menu_grammar, $pattern_content, 1 ); } return $pattern_content; } @@ -210,10 +220,11 @@ private static function replace_split_menu_items( $pattern_content ) { * * @param string $step Step from which Theme Step Pattern is required * @param boolean $squash Flag set to retrieve the block pattern + * @param string $header_menu_slug header menu slug for user selected menu * * @return array|string */ - public static function get_theme_step_patterns_from_step( $step, $squash = false, $headerMenuSlug = '' ) { + public static function get_theme_step_patterns_from_step( $step, $squash = false, $header_menu_slug = '' ) { $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); if ( ! isset( self::get_theme_step_patterns()[ $active_theme ][ $step ] ) ) { @@ -225,8 +236,8 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false $block_patterns = array(); $block_patterns_squashed = ''; - if ( ! empty( $headerMenuSlug ) && in_array( $step, self::$styles_to_check_for_header_menu ) ) { - $pattern_slugs = self::replace_header_menu_slug( $pattern_slugs, $headerMenuSlug ); + if ( ! empty( $header_menu_slug ) && in_array( $step, self::$styles_to_check_for_header_menu, true ) ) { + $pattern_slugs = self::replace_header_menu_slug( $pattern_slugs, $header_menu_slug ); } foreach ( array_keys( $pattern_slugs ) as $pattern_slug ) { @@ -235,10 +246,10 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false 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' ) ) { + 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 589da94df..2b1c620e7 100644 --- a/includes/RestApi/RestApi.php +++ b/includes/RestApi/RestApi.php @@ -9,6 +9,11 @@ */ 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', @@ -22,21 +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 - */ + /** + * 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 - */ + /** + * Register the custom REST API routes + */ public function register_routes() { foreach ( $this->controllers as $controller ) { /** diff --git a/includes/RestApi/RestApiFilter.php b/includes/RestApi/RestApiFilter.php index da9fb9a8d..5f1fec706 100644 --- a/includes/RestApi/RestApiFilter.php +++ b/includes/RestApi/RestApiFilter.php @@ -7,13 +7,13 @@ */ class RestApiFilter { - /** + /** * Default set of dummy pages. * * @var array */ private static function dummy_pages() { - return array( + return array( __( 'Home', 'wp-module-onboarding' ), __( 'About', 'wp-module-onboarding' ), __( 'Contact', 'wp-module-onboarding' ), @@ -21,16 +21,16 @@ private static function dummy_pages() { __( 'Privacy', 'wp-module-onboarding' ), __( 'Careers', 'wp-module-onboarding' ), ); - } + } - /** - * Setup the custom REST API filters - */ + /** + * Setup the custom REST API filters + */ public function __construct() { - \add_filter( 'rest_request_before_callbacks', array( __CLASS__, 'add_appropriate_filters_for_onboarding' ), 10, 3 ); + \add_filter( 'rest_request_before_callbacks', array( __CLASS__, 'add_appropriate_filters_for_onboarding' ), 10, 3 ); } - /** + /** * Custom filter to check for pages API call, if true then add more filters for the onboarding flow only. * * @param array $response - the API response @@ -39,7 +39,7 @@ public function __construct() { * * @return array */ - public static function add_appropriate_filters_for_onboarding( $response, array $handler, \WP_REST_Request $request ) { + public static function add_appropriate_filters_for_onboarding( $response, array $handler, \WP_REST_Request $request ) { if ( ! self::is_request_from_onboarding_flow( $request ) ) { return $response; } @@ -52,13 +52,13 @@ public static function add_appropriate_filters_for_onboarding( $response, array 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 ) { + /** + * 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': @@ -70,7 +70,7 @@ private static function get_method_filters( $request ) { break; } } - + /** * Function for modifying the navigation menu grammar. * @@ -133,7 +133,7 @@ public static function header_menu_limit_pages( $args ) { * @return array */ public static function header_menu_rename_pages( $response, array $handler, \WP_REST_Request $request ) { - self::modify_get_pages_response( $response ); + self::modify_get_pages_response( $response ); return $response; } @@ -143,7 +143,7 @@ public static function header_menu_rename_pages( $response, array $handler, \WP_ * @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' ); } diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index c4109a4d1..069e40824 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,34 +44,39 @@ 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, - ), - 'headerMenuSlug' => array( + return array( + 'slug' => array( 'type' => 'string', - ), - ); + ), + 'step' => array( + 'type' => 'string', + ), + 'squash' => array( + 'type' => 'boolean', + 'default' => false, + ), + 'headerMenuSlug' => array( + 'type' => 'string', + ), + ); } - /** - * 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' ); - $headerMenuSlug = $request->get_param( 'headerMenuSlug' ); + $step = $request->get_param( 'step' ); + $squash = $request->get_param( 'squash' ); + $slug = $request->get_param( 'slug' ); + $header_menu_slug = $request->get_param( 'headerMenuSlug' ); if ( ! $step && ! $slug ) { return new \WP_Error( @@ -82,7 +87,7 @@ public function get_pattern( \WP_REST_Request $request ) { } if ( $step ) { - $step_patterns = Patterns::get_theme_step_patterns_from_step( $step, $squash, $headerMenuSlug ); + $step_patterns = Patterns::get_theme_step_patterns_from_step( $step, $squash, $header_menu_slug ); if ( ! $step_patterns ) { return new \WP_Error( 'no_patterns_found', @@ -96,7 +101,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 a1600b4ff..d0d43764f 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -119,7 +119,7 @@ public static function initialize() { PluginInstallTaskManager::queue_initial_installs(); } - if ( ! empty( sanitize_text_field( $_GET[ 'nfd_themes' ] ) ) && 'true' === sanitize_text_field( $_GET[ 'nfd_themes' ] ) ) { + if ( ! empty( sanitize_text_field( $_GET['nfd_themes'] ) ) && 'true' === sanitize_text_field( $_GET['nfd_themes'] ) ) { ThemeInstallTaskManager::queue_initial_installs(); } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 8460446f8..8da98edac 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -8,7 +8,6 @@ import { LivePreviewSkeleton, LivePreviewSelectableCard } from '../../../compone import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT, - wpSiteUrl, } from '../../../../constants'; const DesignHeaderMenu = () => { From c405cbe318430bb03866ba6c321a939741f8db56 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 15 Mar 2023 17:36:50 +0530 Subject: [PATCH 19/32] JS lint fixes --- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 3 ++- .../pages/Steps/DesignColors/index.js | 8 ++++---- .../pages/Steps/DesignThemeStyles/Menu/index.js | 4 +++- .../pages/Steps/DesignThemeStyles/Preview/index.js | 14 ++++++++------ .../pages/Steps/DesignTypography/index.js | 6 ++++-- 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index b0117efcd..e24cdb425 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -86,8 +86,9 @@ const DesignThemeStylesPreview = () => { }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { getStylesAndPatterns(); + } }, [ isLoaded, themeStatus ] ); const handleClick = ( idx ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index f4be7c50a..31931dfd5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -41,15 +41,15 @@ const StepDesignColors = () => { }, [] ); const getStylesAndPatterns = async () => { - const pattern = await getPatterns( - currentStep.patternId, + const designColorPatterns = await getPatterns( + currentStep.patternId, true, currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); - if ( pattern?.error ) { + if ( designColorPatterns?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setPattern( pattern?.body ); + setPattern( designColorPatterns?.body ); }; useEffect( () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index bf24bc6c5..8c6814c38 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -81,7 +81,9 @@ const StepDesignThemeStylesMenu = () => { }; useEffect( () => { - if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns(); + if ( themeStatus === THEME_STATUS_ACTIVE ) { + getStylesAndPatterns(); + } }, [ themeStatus ] ); const handleClick = ( idx ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 043af1942..0236d1cfd 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -67,7 +67,7 @@ const StepDesignThemeStylesPreview = () => { const patternsResponse = await getPatterns( currentStep.patternId, true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -135,10 +135,10 @@ const StepDesignThemeStylesPreview = () => { }; }; - const handleCheckbox = ( customize, updateOnboardingData = true ) => { + const handleCheckbox = ( customizationNeeded, updateOnboardingData = true ) => { let updates; - if ( customize ) { + if ( customizationNeeded ) { updates = addColorAndTypographyRoutes(); } else { updates = removeColorAndTypographyRoutes(); @@ -147,16 +147,18 @@ const StepDesignThemeStylesPreview = () => { updateRoutes( updates.routes ); updateDesignSteps( updates.designSteps ); updateAllSteps( updates.allSteps ); - setCustomize( customize ); + setCustomize( customizationNeeded ); if ( updateOnboardingData ) { - currentData.data.customDesign = customize; + currentData.data.customDesign = customizationNeeded; setCurrentOnboardingData( currentData ); } }; useEffect( () => { - if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns(); + if ( themeStatus === THEME_STATUS_ACTIVE ) { + getStylesAndPatterns(); + } }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index b80a90ab5..70cfde304 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -43,7 +43,7 @@ const StepDesignTypography = () => { const patternsResponse = await getPatterns( currentStep.patternId, true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', + currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -52,7 +52,9 @@ const StepDesignTypography = () => { }; useEffect( () => { - if ( THEME_STATUS_ACTIVE === themeStatus ) getFontPatterns(); + if ( THEME_STATUS_ACTIVE === themeStatus ) { + getFontPatterns(); + } }, [ themeStatus ] ); return ( From 1b5cbc895cdd3e41de85b525785dece7929583d7 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 15 Mar 2023 18:00:59 +0530 Subject: [PATCH 20/32] fixed JS lint again --- .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 4 ++-- src/OnboardingSPA/pages/Steps/DesignColors/index.js | 4 +++- src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js | 4 ++-- .../pages/Steps/DesignThemeStyles/Preview/index.js | 1 + 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index e24cdb425..f9f7a5ac3 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -4,7 +4,7 @@ import { useState, useEffect } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { getGlobalStyles } from '../../../utils/api/themes'; -import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { useGlobalStylesOutput as GlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT, @@ -94,7 +94,7 @@ const DesignThemeStylesPreview = () => { const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( - useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) + GlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); currentData.data.theme.variation = selectedGlobalStyle.title; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 31931dfd5..9b67cfd8f 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -53,7 +53,9 @@ const StepDesignColors = () => { }; useEffect( () => { - if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns(); + if ( THEME_STATUS_ACTIVE === themeStatus ) { + getStylesAndPatterns(); + } }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 8c6814c38..807215e92 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom'; import { store as nfdOnboardingStore } from '../../../../store'; import CommonLayout from '../../../../components/Layouts/Common'; import HeadingWithSubHeading from '../../../../components/HeadingWithSubHeading'; -import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; +import { useGlobalStylesOutput as GlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; import { getPatterns } from '../../../../utils/api/patterns'; import { getGlobalStyles } from '../../../../utils/api/themes'; import { @@ -89,7 +89,7 @@ const StepDesignThemeStylesMenu = () => { const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( - useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) + GlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); currentData.data.theme.variation = selectedGlobalStyle.title; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 0236d1cfd..df6d352ec 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -3,6 +3,7 @@ import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { CheckboxControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +// eslint-disable-next-line import/no-extraneous-dependencies import { orderBy, filter } from 'lodash'; import { From 1b2914e7e18c32122ef9759b3479355ebbb958a3 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 22 Mar 2023 10:59:08 +0530 Subject: [PATCH 21/32] refactored code to fetch data from DB --- includes/Application.php | 2 +- includes/Data/Patterns.php | 41 +++++++++---------- includes/RestApi/RestApiFilter.php | 26 +++--------- .../RestApi/Themes/PatternsController.php | 18 ++++---- 4 files changed, 33 insertions(+), 54 deletions(-) diff --git a/includes/Application.php b/includes/Application.php index e286ae508..2c59a50b3 100644 --- a/includes/Application.php +++ b/includes/Application.php @@ -65,7 +65,7 @@ public function __construct( Container $container ) { new WP_CLI(); } - if ( Permissions::is_authorized_admin() || Permissions::rest_is_authorized_admin() ) { + if ( Permissions::is_authorized_admin() ) { new WP_Admin(); } diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 3215f8213..3b731f300 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -6,22 +6,12 @@ */ final class Patterns { - /** - * List of styles to check for header menu slugs and replace with user selected header menu slug. - * - * @var array - */ - private static $styles_to_check_for_header_menu = array( - 'theme-styles', - 'homepage-styles', - ); - /** * List of dummy menu page titles. * * @return array */ - protected static function default_menu_items() { + public static function default_menu_items() { return array( __( 'Home', 'wp-module-onboarding' ), __( 'About', 'wp-module-onboarding' ), @@ -40,7 +30,11 @@ protected static function default_menu_items() { protected static function get_theme_step_patterns() { return array( 'yith-wonder' => array( - 'theme-styles' => array( + 'styles-for-header-menu-check' => array( + 'theme-styles', + 'homepage-styles', + ), + 'theme-styles' => array( 'site-header-left-logo-navigation-inline' => array( 'active' => true, ), @@ -53,7 +47,7 @@ protected static function get_theme_step_patterns() { 'active' => true, ), ), - 'homepage-styles' => array( + 'homepage-styles' => array( 'site-header-left-logo-navigation-inline' => array( 'active' => true, ), @@ -73,7 +67,7 @@ protected static function get_theme_step_patterns() { 'active' => true, ), ), - 'site-pages' => array( + 'site-pages' => array( 'company-page' => array( 'active' => true, 'title' => 'About', @@ -103,7 +97,7 @@ protected static function get_theme_step_patterns() { 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), ), ), - 'header-menu' => array( + 'header-menu' => array( 'site-header-left-logo-navigation-inline' => array( 'active' => true, 'shown' => true, @@ -220,23 +214,26 @@ private static function replace_split_menu_items( $pattern_content ) { * * @param string $step Step from which Theme Step Pattern is required * @param boolean $squash Flag set to retrieve the block pattern - * @param string $header_menu_slug header menu slug for user selected menu * * @return array|string */ - public static function get_theme_step_patterns_from_step( $step, $squash = false, $header_menu_slug = '' ) { + public static function get_theme_step_patterns_from_step( $step, $squash = false ) { $active_theme = ( \wp_get_theme() )->get( 'TextDomain' ); if ( ! isset( self::get_theme_step_patterns()[ $active_theme ][ $step ] ) ) { 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 = ''; - if ( ! empty( $header_menu_slug ) && in_array( $step, self::$styles_to_check_for_header_menu, true ) ) { + // 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 ) && in_array( $step, $styles_to_check_for_header_menu, true ) ) { $pattern_slugs = self::replace_header_menu_slug( $pattern_slugs, $header_menu_slug ); } diff --git a/includes/RestApi/RestApiFilter.php b/includes/RestApi/RestApiFilter.php index 5f1fec706..5291bccae 100644 --- a/includes/RestApi/RestApiFilter.php +++ b/includes/RestApi/RestApiFilter.php @@ -2,27 +2,13 @@ namespace NewfoldLabs\WP\Module\Onboarding\RestApi; +use NewfoldLabs\WP\Module\Onboarding\Data\Patterns; + /** * Instantiate controllers and register routes. */ class RestApiFilter { - /** - * Default set of dummy pages. - * - * @var array - */ - private static function dummy_pages() { - 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' ), - ); - } - /** * Setup the custom REST API filters */ @@ -100,7 +86,7 @@ public static function wp_onboarding_nav_menu_filter( $response, $args ) { public static function prepare_raw_html_menu( $data, $index ) { // create dummy menu links $menu_navigation_grammar = ''; - foreach ( self::dummy_pages() as $page_title ) { + foreach ( Patterns::default_menu_items() as $page_title ) { $menu_navigation_grammar .= ''; } // need to reset ID else the data saved in the DB gets used @@ -162,10 +148,10 @@ public static function modify_get_pages_response( $response ) { // make sure we have the number of dummy pages required $pages = $response->get_data(); - if ( count( $pages ) < count( self::dummy_pages() ) ) { + if ( count( $pages ) < count( Patterns::default_menu_items() ) ) { $pages = array_pad( $pages, - count( self::dummy_pages() ), + count( Patterns::default_menu_items() ), array_pop( $pages ) ); } @@ -190,7 +176,7 @@ 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'] = self::dummy_pages()[ $index ]; + $page['title']['rendered'] = Patterns::default_menu_items()[ $index ]; $page['menu_order'] = $index; } return $page; diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index 069e40824..5aac5f85c 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -50,19 +50,16 @@ public function register_routes() { */ public function get_pattern_args() { return array( - 'slug' => array( + 'slug' => array( 'type' => 'string', ), - 'step' => array( + 'step' => array( 'type' => 'string', ), - 'squash' => array( + 'squash' => array( 'type' => 'boolean', 'default' => false, ), - 'headerMenuSlug' => array( - 'type' => 'string', - ), ); } @@ -73,10 +70,9 @@ public function get_pattern_args() { * @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' ); - $header_menu_slug = $request->get_param( 'headerMenuSlug' ); + $step = $request->get_param( 'step' ); + $squash = $request->get_param( 'squash' ); + $slug = $request->get_param( 'slug' ); if ( ! $step && ! $slug ) { return new \WP_Error( @@ -87,7 +83,7 @@ public function get_pattern( \WP_REST_Request $request ) { } if ( $step ) { - $step_patterns = Patterns::get_theme_step_patterns_from_step( $step, $squash, $header_menu_slug ); + $step_patterns = Patterns::get_theme_step_patterns_from_step( $step, $squash ); if ( ! $step_patterns ) { return new \WP_Error( 'no_patterns_found', From 4bff9b83a7d18d2c2f2c9cf04b4aee62f0ea53e3 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 22 Mar 2023 11:10:31 +0530 Subject: [PATCH 22/32] reveted JS changes --- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 1 - src/OnboardingSPA/pages/Steps/DesignColors/index.js | 6 +----- src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js | 2 -- .../pages/Steps/DesignThemeStyles/Menu/index.js | 1 - .../pages/Steps/DesignThemeStyles/Preview/index.js | 1 - src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 4 +--- src/OnboardingSPA/utils/api/patterns.js | 4 ++-- 7 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index f9f7a5ac3..ba897a723 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -48,7 +48,6 @@ const DesignThemeStylesPreview = () => { const patternResponse = await getPatterns( currentStep.patternId, true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 9b67cfd8f..a331dc80a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -41,11 +41,7 @@ const StepDesignColors = () => { }, [] ); const getStylesAndPatterns = async () => { - const designColorPatterns = await getPatterns( - currentStep.patternId, - true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', - ); + const designColorPatterns = await getPatterns( currentStep.patternId, true ); if ( designColorPatterns?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 4d0f9f145..847aee2a8 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -112,8 +112,6 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternDataTemp = await getPatterns( currentStep.patternId, - false, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( homepagePatternDataTemp?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 807215e92..8d3b9994e 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -66,7 +66,6 @@ const StepDesignThemeStylesMenu = () => { const patternsResponse = await getPatterns( currentStep.patternId, true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index df6d352ec..6208ba375 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -68,7 +68,6 @@ const StepDesignThemeStylesPreview = () => { const patternsResponse = await getPatterns( currentStep.patternId, true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 70cfde304..77fc6e1c9 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -21,13 +21,12 @@ const StepDesignTypography = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentStep, themeStatus, currentData } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, [] ); @@ -43,7 +42,6 @@ const StepDesignTypography = () => { const patternsResponse = await getPatterns( currentStep.patternId, true, - currentData?.data?.partHeader ? currentData?.data?.partHeader.split( '/' )[ 1 ] : '', ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); diff --git a/src/OnboardingSPA/utils/api/patterns.js b/src/OnboardingSPA/utils/api/patterns.js index 5765b1c94..3d357570e 100644 --- a/src/OnboardingSPA/utils/api/patterns.js +++ b/src/OnboardingSPA/utils/api/patterns.js @@ -3,12 +3,12 @@ import { onboardingRestURL } from './common'; import apiFetch from '@wordpress/api-fetch'; -export async function getPatterns( step = false, squash = false, headerMenuSlug = '' ) { +export async function getPatterns( step = false, squash = false ) { return await resolve( apiFetch( { url: onboardingRestURL( `patterns` + - ( step ? `&step=${ step }&squash=${ squash }&headerMenuSlug=${ headerMenuSlug }` : '' ) + ( step ? `&step=${ step }&squash=${ squash }` : '' ) ), } ).then() ); From deb01c650ca1063ed4598c4afd7beb12d44ebe43 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 22 Mar 2023 11:18:08 +0530 Subject: [PATCH 23/32] fixing JS lint issues --- src/OnboardingSPA/pages/Steps/DesignColors/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index a331dc80a..b0a2fa99a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -21,10 +21,8 @@ const StepDesignColors = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentData, currentStep, themeStatus } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), From 02614550c871285a968b1f36a8435e66c47aea50 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 22 Mar 2023 12:14:20 +0530 Subject: [PATCH 24/32] syncing DB with the store --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 8da98edac..9206f8e13 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { LivePreviewSkeleton, LivePreviewSelectableCard } from '../../../components/LivePreview'; +import { setFlow } from '../../../utils/api/flow'; import { THEME_STATUS_ACTIVE, @@ -86,7 +87,7 @@ const DesignHeaderMenu = () => { } }, [ themeStatus ] ); - const handleClick = ( idx ) => { + const handleClick = async ( idx ) => { if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { document.getElementsByClassName( 'nfd-onboard-content' )[ 0 ] .scrollIntoView( { @@ -107,6 +108,11 @@ const DesignHeaderMenu = () => { } } ); 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 ) { + console.error('Unable to Save data!'); + } }; const buildPreviews = () => { From 169499041213f937c0f2ae0b62a3217215971030 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 22 Mar 2023 12:24:13 +0530 Subject: [PATCH 25/32] fixing JS lint --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 9206f8e13..9fc82c9df 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -110,9 +110,6 @@ const DesignHeaderMenu = () => { 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 ) { - console.error('Unable to Save data!'); - } }; const buildPreviews = () => { From 9ecbfb2d01dc68b809cd5d455fd3f51954b7de34 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 22 Mar 2023 13:15:38 +0530 Subject: [PATCH 26/32] error handling for the API call --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 9fc82c9df..821655848 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -110,6 +110,9 @@ const DesignHeaderMenu = () => { 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 = () => { From 1934e62a1a7ae05638a5bc23b7c583015c502a08 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 28 Mar 2023 21:08:15 +0530 Subject: [PATCH 27/32] reverted changes as no longer needed --- .../pages/Steps/DesignColors/index.js | 14 +++++++------- .../pages/Steps/DesignThemeStyles/Menu/index.js | 10 ++++------ .../Steps/DesignThemeStyles/Preview/index.js | 15 ++++++--------- .../pages/Steps/DesignTypography/index.js | 6 ++---- 4 files changed, 19 insertions(+), 26 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index b0a2fa99a..9f2f62c72 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -21,8 +21,10 @@ const StepDesignColors = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentStep, themeStatus } = useSelect( ( select ) => { + const { currentData, currentStep, themeStatus } = useSelect( ( select ) => { return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), @@ -39,17 +41,15 @@ const StepDesignColors = () => { }, [] ); const getStylesAndPatterns = async () => { - const designColorPatterns = await getPatterns( currentStep.patternId, true ); - if ( designColorPatterns?.error ) { + const pattern = await getPatterns( currentStep.patternId, true ); + if ( pattern?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setPattern( designColorPatterns?.body ); + setPattern( pattern?.body ); }; useEffect( () => { - if ( THEME_STATUS_ACTIVE === themeStatus ) { - getStylesAndPatterns(); - } + if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns(); }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 8d3b9994e..3b63da683 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom'; import { store as nfdOnboardingStore } from '../../../../store'; import CommonLayout from '../../../../components/Layouts/Common'; import HeadingWithSubHeading from '../../../../components/HeadingWithSubHeading'; -import { useGlobalStylesOutput as GlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; +import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; import { getPatterns } from '../../../../utils/api/patterns'; import { getGlobalStyles } from '../../../../utils/api/themes'; import { @@ -65,7 +65,7 @@ const StepDesignThemeStylesMenu = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, - true, + true ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -80,15 +80,13 @@ const StepDesignThemeStylesMenu = () => { }; useEffect( () => { - if ( themeStatus === THEME_STATUS_ACTIVE ) { - getStylesAndPatterns(); - } + if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns(); }, [ themeStatus ] ); const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( - GlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) + useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); currentData.data.theme.variation = selectedGlobalStyle.title; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 6208ba375..9a9c2826f 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -3,7 +3,6 @@ import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { CheckboxControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -// eslint-disable-next-line import/no-extraneous-dependencies import { orderBy, filter } from 'lodash'; import { @@ -67,7 +66,7 @@ const StepDesignThemeStylesPreview = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, - true, + true ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -135,10 +134,10 @@ const StepDesignThemeStylesPreview = () => { }; }; - const handleCheckbox = ( customizationNeeded, updateOnboardingData = true ) => { + const handleCheckbox = ( customize, updateOnboardingData = true ) => { let updates; - if ( customizationNeeded ) { + if ( customize ) { updates = addColorAndTypographyRoutes(); } else { updates = removeColorAndTypographyRoutes(); @@ -147,18 +146,16 @@ const StepDesignThemeStylesPreview = () => { updateRoutes( updates.routes ); updateDesignSteps( updates.designSteps ); updateAllSteps( updates.allSteps ); - setCustomize( customizationNeeded ); + setCustomize( customize ); if ( updateOnboardingData ) { - currentData.data.customDesign = customizationNeeded; + currentData.data.customDesign = customize; setCurrentOnboardingData( currentData ); } }; useEffect( () => { - if ( themeStatus === THEME_STATUS_ACTIVE ) { - getStylesAndPatterns(); - } + if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns(); }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 77fc6e1c9..9170603ab 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -41,7 +41,7 @@ const StepDesignTypography = () => { const getFontPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, - true, + true ); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -50,9 +50,7 @@ const StepDesignTypography = () => { }; useEffect( () => { - if ( THEME_STATUS_ACTIVE === themeStatus ) { - getFontPatterns(); - } + if ( THEME_STATUS_ACTIVE === themeStatus ) getFontPatterns(); }, [ themeStatus ] ); return ( From da188b6a53a157c66e1f432ebf3b3ed51fff7545 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 29 Mar 2023 12:44:34 +0530 Subject: [PATCH 28/32] refactored code as suggested --- includes/Data/Patterns.php | 26 +++++++++---------- includes/RestApi/RestApiFilter.php | 8 +++--- .../DrawerPanel/DesignThemeStylesPreview.js | 10 +++---- 3 files changed, 21 insertions(+), 23 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 3b731f300..ae012c05e 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -11,7 +11,7 @@ final class Patterns { * * @return array */ - public static function default_menu_items() { + public static function get_dummy_menu_items() { return array( __( 'Home', 'wp-module-onboarding' ), __( 'About', 'wp-module-onboarding' ), @@ -30,13 +30,10 @@ public static function default_menu_items() { protected static function get_theme_step_patterns() { return array( 'yith-wonder' => array( - 'styles-for-header-menu-check' => array( - 'theme-styles', - 'homepage-styles', - ), - 'theme-styles' => array( + 'theme-styles' => array( 'site-header-left-logo-navigation-inline' => array( - 'active' => true, + 'active' => true, + 'replace' => true, ), 'homepage-1' => array( 'active' => true, @@ -47,9 +44,10 @@ protected static function get_theme_step_patterns() { 'active' => true, ), ), - 'homepage-styles' => array( + 'homepage-styles' => array( 'site-header-left-logo-navigation-inline' => array( - 'active' => true, + 'active' => true, + 'replace' => true, ), 'homepage-1' => array( 'active' => true, @@ -67,7 +65,7 @@ protected static function get_theme_step_patterns() { 'active' => true, ), ), - 'site-pages' => array( + 'site-pages' => array( 'company-page' => array( 'active' => true, 'title' => 'About', @@ -97,7 +95,7 @@ protected static function get_theme_step_patterns() { 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), ), ), - 'header-menu' => array( + 'header-menu' => array( 'site-header-left-logo-navigation-inline' => array( 'active' => true, 'shown' => true, @@ -178,7 +176,7 @@ public static function get_pattern_from_slug( $pattern_slug ) { */ private static function replace_header_menu_slug( $patterns, $header_menu_slug ) { foreach ( $patterns as $slug => $slug_details ) { - if ( false !== stripos( $slug, '-header-' ) ) { + if ( true === $slug_details['replace'] ) { unset( $patterns[ $slug ] ); $patterns = array_merge( array( $header_menu_slug => $slug_details ), $patterns ); } @@ -197,7 +195,7 @@ private static function replace_split_menu_items( $pattern_content ) { $dummy_menu_grammar = ''; $menu_navigation_grammar = ''; - foreach ( self::default_menu_items() as $item ) { + foreach ( self::get_dummy_menu_items() as $item ) { $dummy_menu_grammar = ''; } // need to reset ID else the data saved in the DB gets used @@ -148,10 +148,10 @@ public static function modify_get_pages_response( $response ) { // make sure we have the number of dummy pages required $pages = $response->get_data(); - if ( count( $pages ) < count( Patterns::default_menu_items() ) ) { + if ( count( $pages ) < count( Patterns::get_dummy_menu_items() ) ) { $pages = array_pad( $pages, - count( Patterns::default_menu_items() ), + count( Patterns::get_dummy_menu_items() ), array_pop( $pages ) ); } @@ -176,7 +176,7 @@ 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::default_menu_items()[ $index ]; + $page['title']['rendered'] = Patterns::get_dummy_menu_items()[ $index ]; $page['menu_order'] = $index; } return $page; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index ba897a723..d3b3678e7 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -4,7 +4,7 @@ import { useState, useEffect } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; import { getGlobalStyles } from '../../../utils/api/themes'; -import { useGlobalStylesOutput as GlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT, @@ -47,7 +47,7 @@ const DesignThemeStylesPreview = () => { const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, - true, + true ); if ( patternResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -85,15 +85,15 @@ const DesignThemeStylesPreview = () => { }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { + if ( themeStatus === THEME_STATUS_ACTIVE ) { getStylesAndPatterns(); } - }, [ isLoaded, themeStatus ] ); + }, [ themeStatus ] ); const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( - GlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) + useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); currentData.data.theme.variation = selectedGlobalStyle.title; From 202ab987f758de79758e0af41e5cacbbae11ee03 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 29 Mar 2023 16:59:51 +0530 Subject: [PATCH 29/32] removed unused isLoaded --- .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index d3b3678e7..97300683f 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( '' ); From 72ebdd7f085f12f3a1193f635db3af49c1bf1a16 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Wed, 29 Mar 2023 17:02:23 +0530 Subject: [PATCH 30/32] forgot to remove function call --- .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 97300683f..12d69e7d9 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -80,7 +80,6 @@ const DesignThemeStylesPreview = () => { block: 'center', } ); } - setIsLoaded( true ); }; useEffect( () => { From 15d5be3b9c58aa9ef013fca7ce020d8b788e5088 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Mon, 3 Apr 2023 22:43:38 +0530 Subject: [PATCH 31/32] ignoring eslint for react-hooks --- .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 12d69e7d9..5b8984c33 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -91,6 +91,7 @@ const DesignThemeStylesPreview = () => { const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( + // eslint-disable-next-line react-hooks/exhaustive-deps useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); From 33ada8f8fcfb1df09730db37567aa2d59f3e39b3 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Mon, 3 Apr 2023 22:47:37 +0530 Subject: [PATCH 32/32] disabled eslint rule of hooks for our custom function --- .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 5b8984c33..f8e2e11a9 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -91,7 +91,7 @@ const DesignThemeStylesPreview = () => { const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title );