From 1572f30816c8a73e9fac8c588a10ad278b91f28c Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:11:43 +0530 Subject: [PATCH 01/16] added api to fetch header patterns and display them in the drawer --- includes/Data/Patterns.php | 24 ++++ .../RestApi/Themes/PatternsController.php | 35 +++++ .../Drawer/DrawerPanel/DesignHeaderMenu.js | 121 ++++++++++++++++-- .../components/Drawer/stylesheet.scss | 85 ++++++++++++ .../components/HeaderMenuPreview/index.js | 65 ++++++++++ .../HeaderMenuPreview/stylesheet.scss | 112 ++++++++++++++++ .../pages/Steps/DesignHeaderMenu/index.js | 80 ++++++++++-- .../Steps/DesignHeaderMenu/stylesheet.scss | 105 +++++++++++++++ src/OnboardingSPA/styles/app.scss | 1 + src/OnboardingSPA/utils/api/patterns.js | 10 ++ 10 files changed, 614 insertions(+), 24 deletions(-) create mode 100644 src/OnboardingSPA/components/HeaderMenuPreview/index.js create mode 100644 src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss create mode 100644 src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 9fb79f74e..82e651ff2 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -72,6 +72,12 @@ protected static function get_theme_step_patterns() { 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), ), ), + 'header-menu' => array( + 'site-header-centered-logo-split-menu', + 'site-header-centered', + 'site-header-left-logo-navigation-below', + 'site-header-left-logo-navigation-inline' + ) ), ); } @@ -252,4 +258,22 @@ public static function get_count_of_patterns() { } return $theme_pattern_count; } + + public static function get_all_patterns_for_slug($slug_keyword) + { + $active_theme = (\wp_get_theme())->get('TextDomain'); + + $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); + $all_patterns = $block_patterns_registry->get_all_registered(); + + $filtered_patterns = array(); + foreach($all_patterns as $pattern_info) { + if( strpos($pattern_info['slug'], $active_theme) === 0 // making sure the slug name starts with the theme name + && strpos($pattern_info['slug'], $slug_keyword) !== FALSE ) { + $filtered_patterns[] = $pattern_info; + } + } + return $filtered_patterns; + } + } diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index efdda210d..25130baa3 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -48,6 +48,17 @@ public function register_routes() { ), ) ); + register_rest_route( + $this->namespace, + $this->rest_base . '/header', + array( + array( + 'methods' => \WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_all_header_patterns' ), + 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), + ), + ) + ); } public function get_pattern_args() { @@ -143,4 +154,28 @@ public function set_pattern( \WP_REST_Request $request ) { return Patterns::set_theme_step_patterns( $step, $slug ); } + + /** + * Retrieves all the header patterns. + * + * @return \WP_Rest_Response|\WP_Error + */ + public function get_all_header_patterns() + { + $slug_keyword = 'header'; + + $header_patterns = Patterns::get_all_patterns_for_slug($slug_keyword); + if (!$header_patterns) { + return new \WP_Error( + 'no_patterns_found', + __('No Patterns Found.'), + array('status' => 404) + ); + } + + return new \WP_REST_Response( + $header_patterns + ); + } + } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index aabf4e246..f3bb59104 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -1,17 +1,116 @@ -import { __ } from '@wordpress/i18n'; +import { useSelect, useDispatch, select } from '@wordpress/data'; +import { useState, useEffect } from '@wordpress/element'; + +import HeaderMenuPreview from '../../HeaderMenuPreview'; +import { store as nfdOnboardingStore } from '../../../store'; +import { getHeaderMenuPatterns } from '../../../utils/api/patterns'; +import { getGlobalStyles } from '../../../utils/api/themes'; +import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { + THEME_STATUS_ACTIVE, + THEME_STATUS_NOT_ACTIVE, +} from '../../../../constants'; + +const DesignHomepageMenu = () => { + const [ isLoaded, setIsLoaded ] = useState( false ); + const [ patterns, setPatterns ] = useState(); + const [ globalStyles, setGlobalStyles ] = useState(); + const [ selectedPattern, setSelectedPattern ] = useState( '' ); + + const { currentStep, currentData, storedPreviewSettings, themeStatus } = + useSelect( ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getCurrentStep(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + storedPreviewSettings: + select( nfdOnboardingStore ).getPreviewSettings(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + }; + }, [] ); + + const { + updatePreviewSettings, + setCurrentOnboardingData, + updateThemeStatus, + } = useDispatch( nfdOnboardingStore ); + + const getPatterns = async () => { + const patternsResponse = await getHeaderMenuPatterns(); + if ( patternsResponse?.error ) { + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + setPatterns( patternsResponse?.body ); + + // const globalStylesResponse = await getGlobalStyles(); + // if ( globalStylesResponse?.error ) { + // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + // } + + // setGlobalStyles( globalStylesResponse?.body ); + // let selectedGlobalStyle; + if ( !currentData.data.partHeader ) { + // currentData.data.partHeader = patterns[0].slug; + currentData.data.partHeader = 'site-header-left-logo-navigation-inline'; + setCurrentOnboardingData( currentData ); + } + + // if ( + // document.getElementsByClassName( + // 'theme-header-menu-preview--drawer__list__item__title-bar--selected' + // ) + // ) { + // document.getElementsByClassName( + // 'theme-header-menu-preview--drawer__list__item__title-bar--selected' + // )[ 0 ] + // .scrollIntoView( { + // behavior: 'smooth', + // block: 'center', + // } ); + // } + setIsLoaded( true ); + }; + + useEffect( () => { + if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + getPatterns(); + }, [ isLoaded, themeStatus ] ); + + const handleClick = ( idx ) => { + const selectedPattern = patterns[ idx ]; + // updatePreviewSettings( + // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) + // ); + setSelectedPattern( selectedPattern.slug ); + currentData.data.partHeader = selectedPattern.title; + setCurrentOnboardingData( currentData ); + }; + + const buildPreviews = () => { + console.log(selectedPattern); + return patterns?.map( ( pattern, idx ) => { + return ( + handleClick( idx ) } + /> + ); + } ); + }; -const DesignHeaderMenu = () => { return ( -
-

{__('Pick a Header & Menu Style', 'wp-module-onboarding')}

-

- {__( - 'Panel will show a few Header Patterns to affect preview pane.', - 'wp-module-onboarding' - )} -

+
+
+ { patterns ? buildPreviews(): '' } +
); }; -export default DesignHeaderMenu; +export default DesignHomepageMenu; \ No newline at end of file diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 0e9e40367..365640880 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -594,3 +594,88 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); } } + +.theme-header-menu-preview { + + &--drawer { + overflow-y: auto; + overflow-x: hidden; + width: 100%; + + &__list { + width: 100%; + height: 100%; + + @media (max-width: #{ ($break-large) }) { + width: 100%; + align-items: center; + justify-content: center; + flex-direction: column; + } + + &__item { + flex: 1; + width: 100%; + margin: 24px 0; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + &__title-bar { + width: 90%; + height: 15px; + display: flex; + align-items: center; + background-color: #ccc; + justify-content: space-between; + border: 1px solid transparent; + + &--selected { + z-index: 2; + width: 40px; + height: 40px; + display: flex; + margin-right: -15px; + border-radius: 50%; + align-items: center; + justify-content: center; + background-clip: padding-box; + background-color: $main-border-main; + + &__path { + fill: $main-color-light; + // transform: scale(0.7); + } + } + + &--unselected { + display: none; + } + } + + &__live-preview-container { + position: relative; + width: 100%; + overflow: hidden; + align-items: center; + + .live-preview { + + &__container { + + &-custom { + overflow: hidden; + + &:hover { + cursor: pointer; + } + } + + } + } + } + } + } + } +} diff --git a/src/OnboardingSPA/components/HeaderMenuPreview/index.js b/src/OnboardingSPA/components/HeaderMenuPreview/index.js new file mode 100644 index 000000000..d55179038 --- /dev/null +++ b/src/OnboardingSPA/components/HeaderMenuPreview/index.js @@ -0,0 +1,65 @@ +import { check, search, Icon } from '@wordpress/icons'; +import { useState, useEffect } from '@wordpress/element'; + +import { LivePreview } from '../LivePreview'; + +const HeaderMenuPreview = ( { + className = 'live-preview--selectable-card', + selected = false, + blockGrammer, + viewportWidth = 1500, + styling = 'large', + previewSettings, + overlay = false, + onClick = false, + skeletonLoadingTime = 2500, +} ) => { + const [ loadingParent, setIsLoadingParent ] = useState( true ); + + return ( +
{ + if ( ! loadingParent ) { + onClick(); + } + } ) } + > +
+ +
+
+ + { overlay && ( +
+ +
+ ) } +
+
+ ); +}; + +export default HeaderMenuPreview; \ No newline at end of file diff --git a/src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss b/src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss new file mode 100644 index 000000000..1a636403b --- /dev/null +++ b/src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss @@ -0,0 +1,112 @@ +/*COLOR VARIABLES*/ +$main-color-dark: var(--nfd-onboarding-dark); +$main-color-light: var(--nfd-onboarding-white); +$main-border-light: var(--nfd-onboarding-border); +$main-border-main: var(--nfd-onboarding-primary-alt); + +.live-preview--selectable-card { + flex: 1; + width: 100%; + margin: 24px; + display: flex; + overflow: hidden; + align-items: center; + flex-direction: column; + justify-content: center; + + &__title-bar { + width: 90%; + height: 15px; + display: flex; + align-items: center; + background-color: #e4e4e4; + justify-content: space-between; + border: 1px solid transparent; + + &__browser { + display: flex; + align-items: center; + justify-content: center; + + &__dot { + background-color: #989EA7; + width: 8px; + margin: 3px; + height: 8px; + border-radius: 50%; + display: inline-block; + } + } + + &--selected { + z-index: 2; + width: 40px; + height: 40px; + display: flex; + margin-right: -15px; + border-radius: 50%; + align-items: center; + justify-content: center; + background-clip: padding-box; + background-color: $main-border-main; + + &__path { + fill: $main-color-light; + transform: scale(0.7); + } + } + + &--unselected { + display: none; + } + } + + &__live-preview-container { + position: relative; + width: 90%; + overflow: hidden; + align-items: center; + border: 1px solid #e3dfdf; + + .live-preview { + + &__container { + &-custom { + width: 100%; + overflow: hidden; + height: 300px; + } + } + } + + &__overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + opacity: 0; + transition: 0.5s ease; + background-color: rgba(28, 92, 186); + + &__icon { + fill: $main-color-light; + font-size: 20px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + } + + &:hover { + cursor: pointer; + opacity: 0.74; + } + } + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index 8ce0ea174..81d73a96b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -1,24 +1,78 @@ +import { useSelect, useDispatch } from '@wordpress/data'; +import { useState, useEffect } from '@wordpress/element'; +import { useLocation } from 'react-router-dom'; +import { useViewportMatch } from '@wordpress/compose'; + +import { LivePreview } from '../../../components/LivePreview'; import CommonLayout from '../../../components/Layouts/Common'; -import StepOverview from '../../../components/StepOverview'; -import { VIEW_DESIGN_HEADER_MENU } from '../../../../constants'; +import { DesignStateHandler } from '../../../components/StateHandlers'; + + +import { + VIEW_DESIGN_HEADER_MENU, + THEME_STATUS_ACTIVE, + THEME_STATUS_NOT_ACTIVE, +} from '../../../../constants'; import { store as nfdOnboardingStore } from '../../../store'; -import { useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; const StepDesignHeaderMenu = () => { - const { setDrawerActiveView, setIsDrawerOpened, setIsSidebarOpened } = - useDispatch( nfdOnboardingStore ); + const location = useLocation(); + const { currentStep, currentData, storedPreviewSettings } = useSelect( + ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), + storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), + }; + }, + [] + ); + + const isLargeViewport = useViewportMatch( 'medium' ); + + console.log(currentData); + const pattern = '
'; + + const { + setDrawerActiveView, + setIsDrawerOpened, + setIsDrawerSuppressed, + setIsSidebarOpened + } = useDispatch( nfdOnboardingStore ); useEffect( () => { + if ( isLargeViewport ) { + setIsDrawerOpened( true ); + } setIsSidebarOpened( false ); - setIsDrawerOpened( true ); + setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_DESIGN_HEADER_MENU ); }, [] ); + return ( - - - + + +
+
+ + + +
+
+
+ { pattern && ( + + ) } +
+ + ); -}; - -export default StepDesignHeaderMenu; +}; \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss new file mode 100644 index 000000000..d2361bc50 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -0,0 +1,105 @@ +.theme-header-menu-preview { + flex: 1; + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #eee; + + &__checkbox { + margin: 20px 0; + width: 70%; + display: inline; + + .components-checkbox-control { + + &__checked { + height: 32px; + width: 32px; + left: 0; + top: 0; + } + + &__input-container { + height: 32px; + width: 32px; + } + + &__input[type="checkbox"] { + height: 32px; + width: 32px; + + &:focus { + box-shadow: none; + } + } + } + + .components-base-control { + + &__field { + display: flex; + flex-direction: row; + } + } + + &__label { + + margin-left: 15px; + + &__hint { + color: #757575; + display: block; + font-style: italic; + margin-top: 5px; + } + } + + } + + &__title-bar { + width: 70%; + height: 15px; + display: flex; + align-items: center; + background-color: #ccc; + justify-content: space-between; + border: 1px solid transparent; + + &__browser { + display: flex; + align-items: center; + justify-content: center; + + &__dot { + background-color: #989ea7; + width: 8px; + margin: 3px; + height: 8px; + border-radius: 50%; + display: inline-block; + } + } + } + + &__live-preview-container { + width: 70%; + min-height: 80vh; + overflow: hidden; + position: relative; + align-items: center; + border: 1px solid #e3dfdf; + margin-bottom: 30px; + + .live-preview { + + &__container { + + &-custom { + width: 100%; + } + } + } + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index f43d4a388..2f55cbcac 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -47,6 +47,7 @@ @import "../pages/Steps/WhatNext/stylesheet"; @import "../pages/Steps/SitePages/stylesheet"; @import "../pages/Steps/DesignTypography/stylesheet"; +@import "../pages/Steps/DesignHeaderMenu/stylesheet"; .nfd-onboarding-container { display: flex; diff --git a/src/OnboardingSPA/utils/api/patterns.js b/src/OnboardingSPA/utils/api/patterns.js index 3d357570e..dc0ab177f 100644 --- a/src/OnboardingSPA/utils/api/patterns.js +++ b/src/OnboardingSPA/utils/api/patterns.js @@ -13,3 +13,13 @@ export async function getPatterns( step = false, squash = false ) { } ).then() ); } + +export async function getHeaderMenuPatterns() { + return await resolve( + apiFetch( { + url: onboardingRestURL( + `patterns/header` + ), + } ).then() + ); +} From b0b35ecdc69a9fc2cfe7d8cc5ca11c4602e25eef Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:21:34 +0530 Subject: [PATCH 02/16] selected menu, default menu and default preview states added --- includes/Data/Patterns.php | 16 ++++-- .../RestApi/Themes/PatternsController.php | 33 ++++++++++++- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 45 +++++++---------- .../components/Drawer/stylesheet.scss | 11 ++--- .../components/HeaderMenuPreview/index.js | 25 +++++----- src/OnboardingSPA/data/routes/default-flow.js | 1 + .../pages/Steps/DesignHeaderMenu/index.js | 49 +++++++++++++++++-- .../Steps/DesignHeaderMenu/stylesheet.scss | 1 + src/OnboardingSPA/utils/api/patterns.js | 10 ++++ 9 files changed, 137 insertions(+), 54 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 82e651ff2..f3920a871 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -73,10 +73,9 @@ protected static function get_theme_step_patterns() { ), ), 'header-menu' => array( - 'site-header-centered-logo-split-menu', - 'site-header-centered', - 'site-header-left-logo-navigation-below', - 'site-header-left-logo-navigation-inline' + 'site-header-left-logo-navigation-inline', + 'homepage-1', + 'site-footer', ) ), ); @@ -276,4 +275,13 @@ public static function get_all_patterns_for_slug($slug_keyword) return $filtered_patterns; } + public static function get_default_header() + { + $active_theme = (\wp_get_theme())->get('TextDomain'); + + $header_menu_page_pattern = self::$theme_step_patterns[$active_theme]['header-menu']; + $header_menu_pattern = preg_grep("/header/", $header_menu_page_pattern); + + return ($header_menu_pattern !== FALSE) ? $active_theme.'/'.$header_menu_pattern[0] : FALSE; + } } diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index 25130baa3..7ede47365 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -50,7 +50,7 @@ public function register_routes() { ); register_rest_route( $this->namespace, - $this->rest_base . '/header', + $this->rest_base . '/headers', array( array( 'methods' => \WP_REST_Server::READABLE, @@ -59,6 +59,17 @@ public function register_routes() { ), ) ); + register_rest_route( + $this->namespace, + $this->rest_base . '/header/default', + array( + array( + 'methods' => \WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_default_header_pattern' ), + 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), + ), + ) + ); } public function get_pattern_args() { @@ -178,4 +189,24 @@ public function get_all_header_patterns() ); } + /** + * Retrieves deafult the header pattern. + * + * @return \WP_Rest_Response|\WP_Error + */ + public function get_default_header_pattern() + { + $header_pattern = Patterns::get_default_header(); + if (!$header_pattern) { + return new \WP_Error( + 'no_default_pattern_found', + __('No Default Pattern Found.'), + array('status' => 404) + ); + } + + return new \WP_REST_Response( + $header_pattern + ); + } } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index f3bb59104..977ae5295 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -3,7 +3,7 @@ import { useState, useEffect } from '@wordpress/element'; import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; -import { getHeaderMenuPatterns } from '../../../utils/api/patterns'; +import { getHeaderMenuPatterns, getDefaultHeaderMenu } from '../../../utils/api/patterns'; import { getGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { @@ -42,32 +42,25 @@ const DesignHomepageMenu = () => { } setPatterns( patternsResponse?.body ); - // const globalStylesResponse = await getGlobalStyles(); - // if ( globalStylesResponse?.error ) { - // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - // } - - // setGlobalStyles( globalStylesResponse?.body ); - // let selectedGlobalStyle; - if ( !currentData.data.partHeader ) { - // currentData.data.partHeader = patterns[0].slug; - currentData.data.partHeader = 'site-header-left-logo-navigation-inline'; - setCurrentOnboardingData( currentData ); + const defaultHeaderMenu = await getDefaultHeaderMenu(); + if ( defaultHeaderMenu?.error ) { + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } + setSelectedPattern(defaultHeaderMenu.body); - // if ( - // document.getElementsByClassName( - // 'theme-header-menu-preview--drawer__list__item__title-bar--selected' - // ) - // ) { - // document.getElementsByClassName( - // 'theme-header-menu-preview--drawer__list__item__title-bar--selected' - // )[ 0 ] - // .scrollIntoView( { - // behavior: 'smooth', - // block: 'center', - // } ); - // } + if ( + document.getElementsByClassName( + 'theme-header-menu-preview--drawer__list__item__title-bar--selected' + ) + ) { + document.getElementsByClassName( + 'theme-header-menu-preview--drawer__list__item__title-bar--selected' + )[ 0 ] + .scrollIntoView( { + behavior: 'smooth', + block: 'center', + } ); + } setIsLoaded( true ); }; @@ -93,7 +86,7 @@ const DesignHomepageMenu = () => { -
- +
+
+
+ +
{ const location = useLocation(); - const { currentStep, currentData, storedPreviewSettings } = useSelect( + const { + currentStep, + currentData, + storedPreviewSettings, + themeStatus, + } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -26,16 +32,16 @@ const StepDesignHeaderMenu = () => { ), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), }; }, [] ); + const [ isLoaded, setIsLoaded ] = useState( false ); + const [ pattern, setPattern ] = useState(); const isLargeViewport = useViewportMatch( 'medium' ); - console.log(currentData); - const pattern = '
'; - const { setDrawerActiveView, setIsDrawerOpened, @@ -43,6 +49,35 @@ const StepDesignHeaderMenu = () => { setIsSidebarOpened } = useDispatch( nfdOnboardingStore ); + const getCurrentPattern = async () => { + const patternsResponse = await getPatterns( + currentStep.patternId, + true + ); + + // if ( patternsResponse?.error ) { + // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + // } + // const globalStylesResponse = await getGlobalStyles(); + // if ( globalStylesResponse?.error ) { + // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + // } + // let selectedGlobalStyle; + // if ( currentData.data.theme.variation ) { + // selectedGlobalStyle = globalStylesResponse.body.filter( + // ( globalStyle ) => + // globalStyle.title === currentData.data.theme.variation + // )[ 0 ]; + // } else { + // selectedGlobalStyle = globalStylesResponse.body[ 0 ]; + // } + // updatePreviewSettings( + // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) + // ); + setPattern( patternsResponse?.body ); + setIsLoaded( true ); + }; + useEffect( () => { if ( isLargeViewport ) { setIsDrawerOpened( true ); @@ -52,6 +87,11 @@ const StepDesignHeaderMenu = () => { setDrawerActiveView( VIEW_DESIGN_HEADER_MENU ); }, [] ); + useEffect( () => { + if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + getCurrentPattern(); + }, [ isLoaded, themeStatus ] ); + return ( @@ -68,7 +108,6 @@ const StepDesignHeaderMenu = () => { blockGrammer={ pattern } styling={ 'custom' } viewportWidth={ 1300 } - skeletonLoadingTime={ false } /> ) }
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss index d2361bc50..37d804ca5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -66,6 +66,7 @@ background-color: #ccc; justify-content: space-between; border: 1px solid transparent; + margin-top: 20px; &__browser { display: flex; diff --git a/src/OnboardingSPA/utils/api/patterns.js b/src/OnboardingSPA/utils/api/patterns.js index dc0ab177f..7683b8cd1 100644 --- a/src/OnboardingSPA/utils/api/patterns.js +++ b/src/OnboardingSPA/utils/api/patterns.js @@ -23,3 +23,13 @@ export async function getHeaderMenuPatterns() { } ).then() ); } + +export async function getDefaultHeaderMenu() { + return await resolve( + apiFetch( { + url: onboardingRestURL( + `patterns/header/default` + ), + } ).then() + ); +} \ No newline at end of file From dcf0bfd1a931e17dde12fae945db4f75dd5141eb Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:24:49 +0530 Subject: [PATCH 03/16] added API to generate page preview pattern for given header pattern --- includes/Data/Patterns.php | 37 ++++++++++++++++++- .../RestApi/Themes/PatternsController.php | 34 +++++++++++++++++ src/OnboardingSPA/utils/api/patterns.js | 11 ++++++ 3 files changed, 81 insertions(+), 1 deletion(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index f3920a871..a68e2f064 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -76,7 +76,11 @@ protected static function get_theme_step_patterns() { 'site-header-left-logo-navigation-inline', 'homepage-1', 'site-footer', - ) + ), + 'header-menu-body' => array( + 'homepage-1', + 'site-footer', + ), ), ); } @@ -103,6 +107,7 @@ public static function get_pattern_from_slug( $pattern_slug ) { if ( $block_patterns_registry->is_registered( $pattern_name ) ) { $pattern = $block_patterns_registry->get_registered( $pattern_name ); return array( + 'slug' => $pattern['slug'], 'title' => $pattern['title'], 'content' => self::cleanup_wp_grammar( $pattern['content'] ), 'name' => $pattern['name'], @@ -284,4 +289,34 @@ public static function get_default_header() return ($header_menu_pattern !== FALSE) ? $active_theme.'/'.$header_menu_pattern[0] : FALSE; } + + public static function get_header_pattern_preview($slug, $squash = true) + { + $active_theme = (\wp_get_theme())->get('TextDomain'); + + $pattern_slugs = self::$theme_step_patterns[$active_theme]['header-menu-body']; + $pattern_slugs = array_merge(array($slug), $pattern_slugs); + + $block_patterns = array(); + $block_patterns_squashed = ''; + $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); + + foreach($pattern_slugs as $pattern_slug) { + $pattern_name = (strpos($pattern_slug, $active_theme) === 0) ? $pattern_slug : $active_theme . '/' . $pattern_slug; + if ($block_patterns_registry->is_registered($pattern_name)) { + $pattern = $block_patterns_registry->get_registered($pattern_name); + if (!$squash) { + $block_patterns[] = array( + 'slug' => $slug, + 'title' => $pattern['title'], + 'content' => self::cleanup_wp_grammar($pattern['content']), + 'name' => $pattern['name'], + ); + continue; + } + $block_patterns_squashed .= self::cleanup_wp_grammar($pattern['content']); + } + } + return $squash ? $block_patterns_squashed : $block_patterns; + } } diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index 7ede47365..0202471f9 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -70,6 +70,17 @@ public function register_routes() { ), ) ); + register_rest_route( + $this->namespace, + $this->rest_base . '/header/preview', + array( + array( + 'methods' => \WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_header_pattern_preview' ), + 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), + ), + ) + ); } public function get_pattern_args() { @@ -209,4 +220,27 @@ public function get_default_header_pattern() $header_pattern ); } + + /** + * Retrieves pattern for specific header pattern. + * + * @return \WP_Rest_Response|\WP_Error + */ + public function get_header_pattern_preview(\WP_REST_Request $request) + { + $slug = $request->get_param('slug'); + + $header_pattern_preview = Patterns::get_header_pattern_preview($slug); + if (!$header_pattern_preview) { + return new \WP_Error( + 'no_header_preview', + __('Preview for the provided header pattern could not be generated.'), + array('status' => 404) + ); + } + + return new \WP_REST_Response( + $header_pattern_preview + ); + } } diff --git a/src/OnboardingSPA/utils/api/patterns.js b/src/OnboardingSPA/utils/api/patterns.js index 7683b8cd1..cd2e89afb 100644 --- a/src/OnboardingSPA/utils/api/patterns.js +++ b/src/OnboardingSPA/utils/api/patterns.js @@ -32,4 +32,15 @@ export async function getDefaultHeaderMenu() { ), } ).then() ); +} + +export async function getHeaderMenuPreview( slug ) { + return await resolve( + apiFetch( { + url: onboardingRestURL( + `patterns/header/preview` + + ( slug ? `&slug=${ slug }` : '' ) + ), + } ).then() + ); } \ No newline at end of file From d5935214e17c7a6910e482d6abf39484343a2055 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:26:00 +0530 Subject: [PATCH 04/16] added handling for default headermenu checkmark --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 977ae5295..06c98dac1 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -42,11 +42,14 @@ const DesignHomepageMenu = () => { } setPatterns( patternsResponse?.body ); - const defaultHeaderMenu = await getDefaultHeaderMenu(); - if ( defaultHeaderMenu?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + if(!currentData.data.partHeader) { + const defaultHeaderMenu = await getDefaultHeaderMenu(); + if ( defaultHeaderMenu?.error ) { + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + currentData.data.partHeader = defaultHeaderMenu.body; } - setSelectedPattern(defaultHeaderMenu.body); + setSelectedPattern(currentData.data.partHeader); if ( document.getElementsByClassName( @@ -75,7 +78,7 @@ const DesignHomepageMenu = () => { // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) // ); setSelectedPattern( selectedPattern.slug ); - currentData.data.partHeader = selectedPattern.title; + currentData.data.partHeader = selectedPattern.slug; setCurrentOnboardingData( currentData ); }; From 5b142ac4282c0194670939a4f9a29fddd1670c4a Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:35:23 +0530 Subject: [PATCH 05/16] update preview when header changes --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 3 ++- .../components/LivePreview/BlockPreview/index.js | 9 ++++++--- src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js | 8 ++++++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 06c98dac1..eecb17886 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -48,6 +48,7 @@ const DesignHomepageMenu = () => { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } currentData.data.partHeader = defaultHeaderMenu.body; + setCurrentOnboardingData( currentData ); } setSelectedPattern(currentData.data.partHeader); @@ -78,7 +79,7 @@ const DesignHomepageMenu = () => { // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) // ); setSelectedPattern( selectedPattern.slug ); - currentData.data.partHeader = selectedPattern.slug; + currentData.data.partHeader = selectedPattern.content; setCurrentOnboardingData( currentData ); }; diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 5300244dd..f9fdee0a2 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -63,9 +63,11 @@ const BlockPreview = ( { } else { setSettings( storedPreviewSettings ); } + }, [] ); + useEffect( () => { setBlocks( parse( blockGrammer ) ); - }, [] ); + }, [ blockGrammer ] ); useEffect( () => { if ( ! previewSettings ) { @@ -75,7 +77,7 @@ const BlockPreview = ( { return (
- { loading && + { loading && (
@@ -83,7 +85,8 @@ const BlockPreview = ( {
-
} +
+ )} { settings && ( { setDrawerActiveView, setIsDrawerOpened, setIsDrawerSuppressed, - setIsSidebarOpened + setIsSidebarOpened, } = useDispatch( nfdOnboardingStore ); const getCurrentPattern = async () => { @@ -78,6 +78,10 @@ const StepDesignHeaderMenu = () => { setIsLoaded( true ); }; + useEffect( () => { + setPattern( currentData.data.partHeader ); + }, [ currentData.data.partHeader ] ); + useEffect( () => { if ( isLargeViewport ) { setIsDrawerOpened( true ); @@ -89,7 +93,7 @@ const StepDesignHeaderMenu = () => { useEffect( () => { if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) - getCurrentPattern(); + getCurrentPattern(); }, [ isLoaded, themeStatus ] ); return ( From 024fe4a44feb076bde559bcada2662b1ca88b2a9 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:42:51 +0530 Subject: [PATCH 06/16] adding generated grammer to redux store --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 60 ++++++++++++------- .../pages/Steps/DesignHeaderMenu/index.js | 6 +- src/OnboardingSPA/store/actions.js | 7 +++ src/OnboardingSPA/store/reducer.js | 13 ++++ src/OnboardingSPA/store/selectors.js | 10 ++++ 5 files changed, 74 insertions(+), 22 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index eecb17886..c1d825f01 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -3,7 +3,7 @@ import { useState, useEffect } from '@wordpress/element'; import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; -import { getHeaderMenuPatterns, getDefaultHeaderMenu } from '../../../utils/api/patterns'; +import { getPatterns, getHeaderMenuPatterns, getDefaultHeaderMenu } from '../../../utils/api/patterns'; import { getGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { @@ -12,12 +12,21 @@ import { } from '../../../../constants'; const DesignHomepageMenu = () => { + const headerMenuSlugs = [ + 'site-header-left-logo-navigation-inline', + 'site-header-left-logo-navigation-below', + 'site-header-centered', + 'site-header-centered-logo-split-menu' + ]; + const headerMenuBodySlugs = [ 'homepage-1', 'site-footer']; + const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); + const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ globalStyles, setGlobalStyles ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); - const { currentStep, currentData, storedPreviewSettings, themeStatus } = + const { currentStep, currentData, storedPreviewSettings, themeStatus, headerMenu } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getCurrentStep(), @@ -26,6 +35,7 @@ const DesignHomepageMenu = () => { storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), }; }, [] ); @@ -33,16 +43,32 @@ const DesignHomepageMenu = () => { updatePreviewSettings, setCurrentOnboardingData, updateThemeStatus, + setHeaderMenuData, } = useDispatch( nfdOnboardingStore ); - const getPatterns = async () => { + const getPatternsData = async () => { + const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); + if ( headerMenuPreviewResponse?.error ) { + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + setHeaderMenuPreviewData(headerMenuPreviewResponse.body); + + // let headerMenuPatterns = []; + // headerMenuPreviewResponse.body.forEach( ( pageParts ) => { + // if(headerMenuSlugs.includes(pageParts.slug)){ + // console.log(pageParts.content); + // headerMenuPatterns.push(pageParts.content); + // } + // }); + // console.log(headerMenuPatterns); + const patternsResponse = await getHeaderMenuPatterns(); if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } setPatterns( patternsResponse?.body ); - if(!currentData.data.partHeader) { + if(!currentData.data.partHeader || currentData.data.partHeader == "") { const defaultHeaderMenu = await getDefaultHeaderMenu(); if ( defaultHeaderMenu?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); @@ -51,26 +77,12 @@ const DesignHomepageMenu = () => { setCurrentOnboardingData( currentData ); } setSelectedPattern(currentData.data.partHeader); - - if ( - document.getElementsByClassName( - 'theme-header-menu-preview--drawer__list__item__title-bar--selected' - ) - ) { - document.getElementsByClassName( - 'theme-header-menu-preview--drawer__list__item__title-bar--selected' - )[ 0 ] - .scrollIntoView( { - behavior: 'smooth', - block: 'center', - } ); - } setIsLoaded( true ); }; useEffect( () => { if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) - getPatterns(); + getPatternsData(); }, [ isLoaded, themeStatus ] ); const handleClick = ( idx ) => { @@ -79,8 +91,16 @@ const DesignHomepageMenu = () => { // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) // ); setSelectedPattern( selectedPattern.slug ); - currentData.data.partHeader = selectedPattern.content; + currentData.data.partHeader = selectedPattern.slug; setCurrentOnboardingData( currentData ); + + let newPagePattern = selectedPattern.content; + headerMenuPreviewData.forEach( ( pageParts ) => { + if(headerMenuBodySlugs.includes(pageParts.slug)){ + newPagePattern += pageParts.content; + } + }); + setHeaderMenuData( newPagePattern ); }; const buildPreviews = () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index c41f47166..00866339b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -24,6 +24,7 @@ const StepDesignHeaderMenu = () => { currentData, storedPreviewSettings, themeStatus, + headerMenu, } = useSelect( ( select ) => { return { @@ -33,6 +34,7 @@ const StepDesignHeaderMenu = () => { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), }; }, [] @@ -79,8 +81,8 @@ const StepDesignHeaderMenu = () => { }; useEffect( () => { - setPattern( currentData.data.partHeader ); - }, [ currentData.data.partHeader ] ); + setPattern( headerMenu ); + }, [ headerMenu ] ); useEffect( () => { if ( isLargeViewport ) { diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index 8713af4a9..2bca572ba 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -174,3 +174,10 @@ export function updateDesignSteps( designSteps ) { designSteps, }; } + +export function setHeaderMenuData( menu ) { + return { + type: 'UPDATE_HEADER_MENU_DATA', + menu, + }; +} \ No newline at end of file diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index d2a74e035..80d519258 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -184,6 +184,18 @@ export function settings( return state; } +export function header( state = { menu : "" }, action ) { + switch ( action.type ) { + case 'UPDATE_HEADER_MENU_DATA': + return { + ...state, + menu:action.menu, + }; + } + + return state; +} + export default combineReducers( { drawer, runtime, @@ -191,4 +203,5 @@ export default combineReducers( { settings, flow, sidebar, + header, } ); diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 2931d7b6a..2f896d401 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -248,3 +248,13 @@ export function getStoreInfoSteps( state ) { export function getStepPreviewData(state) { return state.runtime.previewSettings.stepPreviewData; } + +/** + * Gets the current header menu Data + * + * @param {*} state + * @return string + */ + export function getHeaderMenuData( state ) { + return state.header.menu; +} \ No newline at end of file From 0e284363cbeead1377ff7aaf39af047aab806787 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:46:11 +0530 Subject: [PATCH 07/16] fixed header menu page preview --- includes/Data/Patterns.php | 18 ++++++++++++------ .../Drawer/DrawerPanel/DesignHeaderMenu.js | 10 +++++----- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index a68e2f064..6ff2071b8 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -73,9 +73,15 @@ protected static function get_theme_step_patterns() { ), ), 'header-menu' => array( - 'site-header-left-logo-navigation-inline', - 'homepage-1', - 'site-footer', + 'site-header-left-logo-navigation-inline' => array( + 'active' => true, + ), + 'homepage-1' => array( + 'active' => true, + ), + 'site-footer' => array( + 'active' => true, + ), ), 'header-menu-body' => array( 'homepage-1', @@ -279,12 +285,12 @@ public static function get_all_patterns_for_slug($slug_keyword) } return $filtered_patterns; } - + public static function get_default_header() { $active_theme = (\wp_get_theme())->get('TextDomain'); - $header_menu_page_pattern = self::$theme_step_patterns[$active_theme]['header-menu']; + $header_menu_page_pattern = array_keys(self::get_theme_step_patterns()[$active_theme]['header-menu']); $header_menu_pattern = preg_grep("/header/", $header_menu_page_pattern); return ($header_menu_pattern !== FALSE) ? $active_theme.'/'.$header_menu_pattern[0] : FALSE; @@ -294,7 +300,7 @@ public static function get_header_pattern_preview($slug, $squash = true) { $active_theme = (\wp_get_theme())->get('TextDomain'); - $pattern_slugs = self::$theme_step_patterns[$active_theme]['header-menu-body']; + $pattern_slugs = self::get_theme_step_patterns()[$active_theme]['header-menu-body']; $pattern_slugs = array_merge(array($slug), $pattern_slugs); $block_patterns = array(); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index c1d825f01..9116ccd9b 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -13,12 +13,12 @@ import { const DesignHomepageMenu = () => { const headerMenuSlugs = [ - 'site-header-left-logo-navigation-inline', - 'site-header-left-logo-navigation-below', - 'site-header-centered', - 'site-header-centered-logo-split-menu' + 'yith-wonder/site-header-left-logo-navigation-inline', + 'yith-wonder/site-header-left-logo-navigation-below', + 'yith-wonder/site-header-centered', + 'yith-wonder/site-header-centered-logo-split-menu' ]; - const headerMenuBodySlugs = [ 'homepage-1', 'site-footer']; + const headerMenuBodySlugs = [ 'yith-wonder/homepage-1', 'yith-wonder/site-footer']; const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); From 00f686abfe37fb716941dc320277070b9341de09 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 15:52:46 +0530 Subject: [PATCH 08/16] fixed header menu api url --- includes/RestApi/Themes/PatternsController.php | 2 +- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 1 - src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js | 4 +++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index 0202471f9..9c8775716 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -50,7 +50,7 @@ public function register_routes() { ); register_rest_route( $this->namespace, - $this->rest_base . '/headers', + $this->rest_base . '/header', array( array( 'methods' => \WP_REST_Server::READABLE, diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 9116ccd9b..cdfbf7735 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -104,7 +104,6 @@ const DesignHomepageMenu = () => { }; const buildPreviews = () => { - console.log(selectedPattern); return patterns?.map( ( pattern, idx ) => { return ( { ); -}; \ No newline at end of file +}; + +export default StepDesignHeaderMenu; \ No newline at end of file From 4d7e5669cac9d4006c4f25797499a2018534ee52 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 17:48:21 +0530 Subject: [PATCH 09/16] added GlobalStylesProvider support --- includes/Data/Patterns.php | 9 ++++ .../Drawer/DrawerPanel/DesignHeaderMenu.js | 27 ++++++++--- .../pages/Steps/DesignHeaderMenu/index.js | 47 ++++++++++--------- 3 files changed, 54 insertions(+), 29 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 6ff2071b8..d028ce3ce 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -82,6 +82,15 @@ protected static function get_theme_step_patterns() { 'site-footer' => array( 'active' => true, ), + 'site-header-left-logo-navigation-below' => array( + 'active' => true, + ), + 'site-header-centered' => array( + 'active' => true, + ), + 'site-header-centered-logo-split-menu' => array( + 'active' => true, + ) ), 'header-menu-body' => array( 'homepage-1', diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index cdfbf7735..b3f05c422 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -4,6 +4,7 @@ import { useState, useEffect } from '@wordpress/element'; import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns, getHeaderMenuPatterns, getDefaultHeaderMenu } from '../../../utils/api/patterns'; +import { GlobalStylesProvider } from '../../../components/LivePreview'; import { getGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { @@ -77,6 +78,18 @@ const DesignHomepageMenu = () => { setCurrentOnboardingData( currentData ); } setSelectedPattern(currentData.data.partHeader); + + let [pageContent, headerContent, pagePreview] = ["", "", ""]; + headerMenuPreviewResponse.body.forEach( ( pageParts ) => { + if(headerMenuBodySlugs.includes(pageParts.slug)){ + pageContent += pageParts.content; + } + if(pageParts.slug === currentData.data.partHeader){ + headerContent += pageParts.content; + } + }); + pagePreview = headerContent + pageContent; + setHeaderMenuData( pagePreview ); setIsLoaded( true ); }; @@ -87,9 +100,7 @@ const DesignHomepageMenu = () => { const handleClick = ( idx ) => { const selectedPattern = patterns[ idx ]; - // updatePreviewSettings( - // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) - // ); + setSelectedPattern( selectedPattern.slug ); currentData.data.partHeader = selectedPattern.slug; setCurrentOnboardingData( currentData ); @@ -121,11 +132,13 @@ const DesignHomepageMenu = () => { }; return ( -
-
- { patterns ? buildPreviews(): '' } + +
+
+ { patterns ? buildPreviews(): '' } +
-
+ ); }; diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index aeb89cfca..453d25370 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -5,6 +5,7 @@ import { useViewportMatch } from '@wordpress/compose'; import { LivePreview } from '../../../components/LivePreview'; import CommonLayout from '../../../components/Layouts/Common'; +import { GlobalStylesProvider } from '../../../components/LivePreview'; import { DesignStateHandler } from '../../../components/StateHandlers'; @@ -52,10 +53,10 @@ const StepDesignHeaderMenu = () => { } = useDispatch( nfdOnboardingStore ); const getCurrentPattern = async () => { - const patternsResponse = await getPatterns( - currentStep.patternId, - true - ); + // const patternsResponse = await getPatterns( + // currentStep.patternId, + // true + // ); // if ( patternsResponse?.error ) { // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); @@ -76,7 +77,7 @@ const StepDesignHeaderMenu = () => { // updatePreviewSettings( // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) // ); - setPattern( patternsResponse?.body ); + // setPattern( patternsResponse?.body ); setIsLoaded( true ); }; @@ -100,24 +101,26 @@ const StepDesignHeaderMenu = () => { return ( - -
-
- - - + + +
+
+ + + +
+
+
+ { pattern && ( + + ) }
-
-
- { pattern && ( - - ) } -
- + + ); }; From e0a8889e135fcd2f98fdbc450f1169b3ee1e4606 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 1 Dec 2022 17:59:40 +0530 Subject: [PATCH 10/16] code cleanup --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 12 ++---- .../pages/Steps/DesignHeaderMenu/index.js | 38 ------------------- 2 files changed, 3 insertions(+), 47 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index b3f05c422..b41c3ae35 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -1,12 +1,11 @@ -import { useSelect, useDispatch, select } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns, getHeaderMenuPatterns, getDefaultHeaderMenu } from '../../../utils/api/patterns'; import { GlobalStylesProvider } from '../../../components/LivePreview'; -import { getGlobalStyles } from '../../../utils/api/themes'; -import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; + import { THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, @@ -24,24 +23,19 @@ const DesignHomepageMenu = () => { const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); - const [ globalStyles, setGlobalStyles ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); - const { currentStep, currentData, storedPreviewSettings, themeStatus, headerMenu } = + const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), - storedPreviewSettings: - select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), }; }, [] ); const { - updatePreviewSettings, setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData, diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index 453d25370..a58457cef 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -1,6 +1,5 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; -import { useLocation } from 'react-router-dom'; import { useViewportMatch } from '@wordpress/compose'; import { LivePreview } from '../../../components/LivePreview'; @@ -12,28 +11,16 @@ import { DesignStateHandler } from '../../../components/StateHandlers'; import { VIEW_DESIGN_HEADER_MENU, THEME_STATUS_ACTIVE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import { store as nfdOnboardingStore } from '../../../store'; -import { getPatterns } from '../../../utils/api/patterns'; -import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; const StepDesignHeaderMenu = () => { - const location = useLocation(); const { - currentStep, - currentData, - storedPreviewSettings, themeStatus, headerMenu, } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( - location.pathname - ), - currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), - storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), }; @@ -53,31 +40,6 @@ const StepDesignHeaderMenu = () => { } = useDispatch( nfdOnboardingStore ); const getCurrentPattern = async () => { - // const patternsResponse = await getPatterns( - // currentStep.patternId, - // true - // ); - - // if ( patternsResponse?.error ) { - // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - // } - // const globalStylesResponse = await getGlobalStyles(); - // if ( globalStylesResponse?.error ) { - // return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - // } - // let selectedGlobalStyle; - // if ( currentData.data.theme.variation ) { - // selectedGlobalStyle = globalStylesResponse.body.filter( - // ( globalStyle ) => - // globalStyle.title === currentData.data.theme.variation - // )[ 0 ]; - // } else { - // selectedGlobalStyle = globalStylesResponse.body[ 0 ]; - // } - // updatePreviewSettings( - // useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) - // ); - // setPattern( patternsResponse?.body ); setIsLoaded( true ); }; From 5a5c66c3be6dca5a4bb333d24f142ee1e9f3c45e Mon Sep 17 00:00:00 2001 From: abhijitb Date: Mon, 5 Dec 2022 20:15:38 +0530 Subject: [PATCH 11/16] removed unsed APIs and refactored code --- includes/Data/Patterns.php | 59 +---------- .../RestApi/Themes/PatternsController.php | 99 ------------------- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 35 +++---- .../pages/Steps/DesignHeaderMenu/index.js | 17 +--- src/OnboardingSPA/utils/api/patterns.js | 31 ------ 5 files changed, 14 insertions(+), 227 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index d028ce3ce..2a43d4fb9 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -88,7 +88,7 @@ protected static function get_theme_step_patterns() { 'site-header-centered' => array( 'active' => true, ), - 'site-header-centered-logo-split-menu' => array( + 'site-header-splitted-menu' => array( 'active' => true, ) ), @@ -122,7 +122,6 @@ public static function get_pattern_from_slug( $pattern_slug ) { if ( $block_patterns_registry->is_registered( $pattern_name ) ) { $pattern = $block_patterns_registry->get_registered( $pattern_name ); return array( - 'slug' => $pattern['slug'], 'title' => $pattern['title'], 'content' => self::cleanup_wp_grammar( $pattern['content'] ), 'name' => $pattern['name'], @@ -278,60 +277,4 @@ public static function get_count_of_patterns() { return $theme_pattern_count; } - public static function get_all_patterns_for_slug($slug_keyword) - { - $active_theme = (\wp_get_theme())->get('TextDomain'); - - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - $all_patterns = $block_patterns_registry->get_all_registered(); - - $filtered_patterns = array(); - foreach($all_patterns as $pattern_info) { - if( strpos($pattern_info['slug'], $active_theme) === 0 // making sure the slug name starts with the theme name - && strpos($pattern_info['slug'], $slug_keyword) !== FALSE ) { - $filtered_patterns[] = $pattern_info; - } - } - return $filtered_patterns; - } - - public static function get_default_header() - { - $active_theme = (\wp_get_theme())->get('TextDomain'); - - $header_menu_page_pattern = array_keys(self::get_theme_step_patterns()[$active_theme]['header-menu']); - $header_menu_pattern = preg_grep("/header/", $header_menu_page_pattern); - - return ($header_menu_pattern !== FALSE) ? $active_theme.'/'.$header_menu_pattern[0] : FALSE; - } - - public static function get_header_pattern_preview($slug, $squash = true) - { - $active_theme = (\wp_get_theme())->get('TextDomain'); - - $pattern_slugs = self::get_theme_step_patterns()[$active_theme]['header-menu-body']; - $pattern_slugs = array_merge(array($slug), $pattern_slugs); - - $block_patterns = array(); - $block_patterns_squashed = ''; - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - - foreach($pattern_slugs as $pattern_slug) { - $pattern_name = (strpos($pattern_slug, $active_theme) === 0) ? $pattern_slug : $active_theme . '/' . $pattern_slug; - if ($block_patterns_registry->is_registered($pattern_name)) { - $pattern = $block_patterns_registry->get_registered($pattern_name); - if (!$squash) { - $block_patterns[] = array( - 'slug' => $slug, - 'title' => $pattern['title'], - 'content' => self::cleanup_wp_grammar($pattern['content']), - 'name' => $pattern['name'], - ); - continue; - } - $block_patterns_squashed .= self::cleanup_wp_grammar($pattern['content']); - } - } - return $squash ? $block_patterns_squashed : $block_patterns; - } } diff --git a/includes/RestApi/Themes/PatternsController.php b/includes/RestApi/Themes/PatternsController.php index 9c8775716..39009418e 100644 --- a/includes/RestApi/Themes/PatternsController.php +++ b/includes/RestApi/Themes/PatternsController.php @@ -48,39 +48,6 @@ public function register_routes() { ), ) ); - register_rest_route( - $this->namespace, - $this->rest_base . '/header', - array( - array( - 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( $this, 'get_all_header_patterns' ), - 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), - ), - ) - ); - register_rest_route( - $this->namespace, - $this->rest_base . '/header/default', - array( - array( - 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( $this, 'get_default_header_pattern' ), - 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), - ), - ) - ); - register_rest_route( - $this->namespace, - $this->rest_base . '/header/preview', - array( - array( - 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( $this, 'get_header_pattern_preview' ), - 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), - ), - ) - ); } public function get_pattern_args() { @@ -177,70 +144,4 @@ public function set_pattern( \WP_REST_Request $request ) { return Patterns::set_theme_step_patterns( $step, $slug ); } - /** - * Retrieves all the header patterns. - * - * @return \WP_Rest_Response|\WP_Error - */ - public function get_all_header_patterns() - { - $slug_keyword = 'header'; - - $header_patterns = Patterns::get_all_patterns_for_slug($slug_keyword); - if (!$header_patterns) { - return new \WP_Error( - 'no_patterns_found', - __('No Patterns Found.'), - array('status' => 404) - ); - } - - return new \WP_REST_Response( - $header_patterns - ); - } - - /** - * Retrieves deafult the header pattern. - * - * @return \WP_Rest_Response|\WP_Error - */ - public function get_default_header_pattern() - { - $header_pattern = Patterns::get_default_header(); - if (!$header_pattern) { - return new \WP_Error( - 'no_default_pattern_found', - __('No Default Pattern Found.'), - array('status' => 404) - ); - } - - return new \WP_REST_Response( - $header_pattern - ); - } - - /** - * Retrieves pattern for specific header pattern. - * - * @return \WP_Rest_Response|\WP_Error - */ - public function get_header_pattern_preview(\WP_REST_Request $request) - { - $slug = $request->get_param('slug'); - - $header_pattern_preview = Patterns::get_header_pattern_preview($slug); - if (!$header_pattern_preview) { - return new \WP_Error( - 'no_header_preview', - __('Preview for the provided header pattern could not be generated.'), - array('status' => 404) - ); - } - - return new \WP_REST_Response( - $header_pattern_preview - ); - } } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index b41c3ae35..6230cbb77 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -3,7 +3,7 @@ import { useState, useEffect } from '@wordpress/element'; import HeaderMenuPreview from '../../HeaderMenuPreview'; import { store as nfdOnboardingStore } from '../../../store'; -import { getPatterns, getHeaderMenuPatterns, getDefaultHeaderMenu } from '../../../utils/api/patterns'; +import { getPatterns } from '../../../utils/api/patterns'; import { GlobalStylesProvider } from '../../../components/LivePreview'; import { @@ -11,12 +11,12 @@ import { THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; -const DesignHomepageMenu = () => { +const DesignHeaderMenu = () => { const headerMenuSlugs = [ 'yith-wonder/site-header-left-logo-navigation-inline', 'yith-wonder/site-header-left-logo-navigation-below', 'yith-wonder/site-header-centered', - 'yith-wonder/site-header-centered-logo-split-menu' + 'yith-wonder/site-header-splitted-menu' ]; const headerMenuBodySlugs = [ 'yith-wonder/homepage-1', 'yith-wonder/site-footer']; @@ -48,27 +48,16 @@ const DesignHomepageMenu = () => { } setHeaderMenuPreviewData(headerMenuPreviewResponse.body); - // let headerMenuPatterns = []; - // headerMenuPreviewResponse.body.forEach( ( pageParts ) => { - // if(headerMenuSlugs.includes(pageParts.slug)){ - // console.log(pageParts.content); - // headerMenuPatterns.push(pageParts.content); - // } - // }); - // console.log(headerMenuPatterns); - - const patternsResponse = await getHeaderMenuPatterns(); - if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - setPatterns( patternsResponse?.body ); + let headerMenuPatterns = []; + headerMenuPreviewResponse.body.forEach( ( pageParts ) => { + if(headerMenuSlugs.includes(pageParts.slug)){ + headerMenuPatterns.push(pageParts); + } + }); + setPatterns( headerMenuPatterns ); if(!currentData.data.partHeader || currentData.data.partHeader == "") { - const defaultHeaderMenu = await getDefaultHeaderMenu(); - if ( defaultHeaderMenu?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - currentData.data.partHeader = defaultHeaderMenu.body; + currentData.data.partHeader = headerMenuSlugs[0]; setCurrentOnboardingData( currentData ); } setSelectedPattern(currentData.data.partHeader); @@ -136,4 +125,4 @@ const DesignHomepageMenu = () => { ); }; -export default DesignHomepageMenu; \ No newline at end of file +export default DesignHeaderMenu; \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index a58457cef..78617adf0 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -8,27 +8,21 @@ import { GlobalStylesProvider } from '../../../components/LivePreview'; import { DesignStateHandler } from '../../../components/StateHandlers'; -import { - VIEW_DESIGN_HEADER_MENU, - THEME_STATUS_ACTIVE, -} from '../../../../constants'; +import { VIEW_DESIGN_HEADER_MENU } from '../../../../constants'; import { store as nfdOnboardingStore } from '../../../store'; const StepDesignHeaderMenu = () => { const { - themeStatus, headerMenu, } = useSelect( ( select ) => { return { - themeStatus: select( nfdOnboardingStore ).getThemeStatus(), headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), }; }, [] ); - const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); const isLargeViewport = useViewportMatch( 'medium' ); @@ -39,10 +33,6 @@ const StepDesignHeaderMenu = () => { setIsSidebarOpened, } = useDispatch( nfdOnboardingStore ); - const getCurrentPattern = async () => { - setIsLoaded( true ); - }; - useEffect( () => { setPattern( headerMenu ); }, [ headerMenu ] ); @@ -56,11 +46,6 @@ const StepDesignHeaderMenu = () => { setDrawerActiveView( VIEW_DESIGN_HEADER_MENU ); }, [] ); - useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) - getCurrentPattern(); - }, [ isLoaded, themeStatus ] ); - return ( diff --git a/src/OnboardingSPA/utils/api/patterns.js b/src/OnboardingSPA/utils/api/patterns.js index cd2e89afb..3d357570e 100644 --- a/src/OnboardingSPA/utils/api/patterns.js +++ b/src/OnboardingSPA/utils/api/patterns.js @@ -13,34 +13,3 @@ export async function getPatterns( step = false, squash = false ) { } ).then() ); } - -export async function getHeaderMenuPatterns() { - return await resolve( - apiFetch( { - url: onboardingRestURL( - `patterns/header` - ), - } ).then() - ); -} - -export async function getDefaultHeaderMenu() { - return await resolve( - apiFetch( { - url: onboardingRestURL( - `patterns/header/default` - ), - } ).then() - ); -} - -export async function getHeaderMenuPreview( slug ) { - return await resolve( - apiFetch( { - url: onboardingRestURL( - `patterns/header/preview` + - ( slug ? `&slug=${ slug }` : '' ) - ), - } ).then() - ); -} \ No newline at end of file From e454508bfd52a89b030df10c2f267e43f3bcddde Mon Sep 17 00:00:00 2001 From: abhijitb Date: Mon, 5 Dec 2022 20:18:39 +0530 Subject: [PATCH 12/16] removed extra mapping for header menu --- includes/Data/Patterns.php | 4 ---- 1 file changed, 4 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 2a43d4fb9..70ef04b05 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -91,10 +91,6 @@ protected static function get_theme_step_patterns() { 'site-header-splitted-menu' => array( 'active' => true, ) - ), - 'header-menu-body' => array( - 'homepage-1', - 'site-footer', ), ), ); From e668ccefa1501530d1e04a278f3376254860834d Mon Sep 17 00:00:00 2001 From: abhijitb Date: Mon, 5 Dec 2022 20:36:48 +0530 Subject: [PATCH 13/16] code refactoring part II --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 2 +- .../HeaderMenuPreview/stylesheet.scss | 112 ------------------ 2 files changed, 1 insertion(+), 113 deletions(-) delete mode 100644 src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 6230cbb77..c11c857af 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -118,7 +118,7 @@ const DesignHeaderMenu = () => {
- { patterns ? buildPreviews(): '' } + { buildPreviews() }
diff --git a/src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss b/src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss deleted file mode 100644 index 1a636403b..000000000 --- a/src/OnboardingSPA/components/HeaderMenuPreview/stylesheet.scss +++ /dev/null @@ -1,112 +0,0 @@ -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); - -.live-preview--selectable-card { - flex: 1; - width: 100%; - margin: 24px; - display: flex; - overflow: hidden; - align-items: center; - flex-direction: column; - justify-content: center; - - &__title-bar { - width: 90%; - height: 15px; - display: flex; - align-items: center; - background-color: #e4e4e4; - justify-content: space-between; - border: 1px solid transparent; - - &__browser { - display: flex; - align-items: center; - justify-content: center; - - &__dot { - background-color: #989EA7; - width: 8px; - margin: 3px; - height: 8px; - border-radius: 50%; - display: inline-block; - } - } - - &--selected { - z-index: 2; - width: 40px; - height: 40px; - display: flex; - margin-right: -15px; - border-radius: 50%; - align-items: center; - justify-content: center; - background-clip: padding-box; - background-color: $main-border-main; - - &__path { - fill: $main-color-light; - transform: scale(0.7); - } - } - - &--unselected { - display: none; - } - } - - &__live-preview-container { - position: relative; - width: 90%; - overflow: hidden; - align-items: center; - border: 1px solid #e3dfdf; - - .live-preview { - - &__container { - &-custom { - width: 100%; - overflow: hidden; - height: 300px; - } - } - } - - &__overlay { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 100%; - width: 100%; - opacity: 0; - transition: 0.5s ease; - background-color: rgba(28, 92, 186); - - &__icon { - fill: $main-color-light; - font-size: 20px; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - text-align: center; - } - - &:hover { - cursor: pointer; - opacity: 0.74; - } - } - } -} \ No newline at end of file From a864f5c064884b01947d221051bd03982f9e2a8f Mon Sep 17 00:00:00 2001 From: abhijitb Date: Tue, 6 Dec 2022 20:01:15 +0530 Subject: [PATCH 14/16] header store function fixed and bug fix in fetching current step data --- includes/Data/Patterns.php | 10 +++++++--- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 14 ++++++++++--- .../components/HeaderMenuPreview/index.js | 11 ---------- .../pages/Steps/DesignHeaderMenu/index.js | 1 + src/OnboardingSPA/store/reducer.js | 20 ++++++------------- 5 files changed, 25 insertions(+), 31 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 839f63497..d69879a7d 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -75,6 +75,7 @@ protected static function get_theme_step_patterns() { 'header-menu' => array( 'site-header-left-logo-navigation-inline' => array( 'active' => true, + 'shown' => true, ), 'homepage-1' => array( 'active' => true, @@ -83,13 +84,16 @@ protected static function get_theme_step_patterns() { 'active' => true, ), 'site-header-left-logo-navigation-below' => array( - 'active' => true, + 'active' => true, + 'shown' => true, ), 'site-header-centered' => array( - 'active' => true, + 'active' => true, + 'shown' => true, ), 'site-header-splitted-menu' => array( - 'active' => true, + 'active' => true, + 'shown' => true, ) ), ), diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index c11c857af..a4e72db3e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -1,10 +1,10 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; - +import { useNavigate, 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, @@ -24,11 +24,12 @@ const DesignHeaderMenu = () => { const [ patterns, setPatterns ] = useState(); const [ headerMenuPreviewData, setHeaderMenuPreviewData ] = useState(); const [ selectedPattern, setSelectedPattern ] = useState( '' ); + const location = useLocation(); const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), + currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), @@ -119,6 +120,13 @@ const DesignHeaderMenu = () => {
{ buildPreviews() } + {/* */}
diff --git a/src/OnboardingSPA/components/HeaderMenuPreview/index.js b/src/OnboardingSPA/components/HeaderMenuPreview/index.js index 160172f6a..51654756f 100644 --- a/src/OnboardingSPA/components/HeaderMenuPreview/index.js +++ b/src/OnboardingSPA/components/HeaderMenuPreview/index.js @@ -49,17 +49,6 @@ const HeaderMenuPreview = ( { setIsLoadingParent={ setIsLoadingParent } skeletonLoadingTime={ skeletonLoadingTime } /> - { overlay && ( -
- -
- ) }
); diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index 92a477c1a..7515415e0 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -31,6 +31,7 @@ const StepDesignHeaderMenu = () => { setIsDrawerOpened, setIsDrawerSuppressed, setIsSidebarOpened, + setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); useEffect( () => { diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index 92078114e..5590a0a40 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -136,15 +136,19 @@ export function sidebar( return state; } -export function header( state = { isNavigationEnabled: true }, action ) { +export function header( state = { isNavigationEnabled: true, menu : "" }, action ) { switch ( action.type ) { case 'SET_HEADER_NAVIGATION_ENABLED': return { ...state, isNavigationEnabled: action.isNavigationEnabled, }; + case 'UPDATE_HEADER_MENU_DATA': + return { + ...state, + menu:action.menu, + }; } - return state; } @@ -196,18 +200,6 @@ export function settings( return state; } -export function header( state = { menu : "" }, action ) { - switch ( action.type ) { - case 'UPDATE_HEADER_MENU_DATA': - return { - ...state, - menu:action.menu, - }; - } - - return state; -} - export default combineReducers( { drawer, runtime, From 2951e2e9b853d724d939215f28fd235f1b92e3d3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 7 Dec 2022 11:24:38 +0530 Subject: [PATCH 15/16] Added Linting --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 88 ++++++++++--------- .../components/HeaderMenuPreview/index.js | 27 +++--- .../pages/Steps/DesignHeaderMenu/index.js | 30 +++---- src/OnboardingSPA/store/actions.js | 2 +- src/OnboardingSPA/store/reducer.js | 7 +- src/OnboardingSPA/store/selectors.js | 4 +- 6 files changed, 84 insertions(+), 74 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index a4e72db3e..f8fc81a21 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -1,10 +1,10 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; -import { useNavigate, useLocation } from 'react-router-dom'; +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 { GlobalStylesProvider } from '../../../components/LivePreview'; import { THEME_STATUS_ACTIVE, @@ -12,13 +12,16 @@ import { } from '../../../../constants'; const DesignHeaderMenu = () => { - const headerMenuSlugs = [ - 'yith-wonder/site-header-left-logo-navigation-inline', + const headerMenuSlugs = [ + 'yith-wonder/site-header-left-logo-navigation-inline', 'yith-wonder/site-header-left-logo-navigation-below', 'yith-wonder/site-header-centered', - 'yith-wonder/site-header-splitted-menu' + 'yith-wonder/site-header-splitted-menu', + ]; + const headerMenuBodySlugs = [ + 'yith-wonder/homepage-1', + 'yith-wonder/site-footer', ]; - const headerMenuBodySlugs = [ 'yith-wonder/homepage-1', 'yith-wonder/site-footer']; const [ isLoaded, setIsLoaded ] = useState( false ); const [ patterns, setPatterns ] = useState(); @@ -26,52 +29,55 @@ const DesignHeaderMenu = () => { const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); - const { currentStep, currentData, themeStatus } = - useSelect( ( select ) => { - return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - }; - }, [] ); - - const { - setCurrentOnboardingData, - updateThemeStatus, - setHeaderMenuData, - } = useDispatch( nfdOnboardingStore ); + const { currentStep, currentData, themeStatus } = useSelect( ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + }; + }, [] ); + + const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = + useDispatch( nfdOnboardingStore ); const getPatternsData = async () => { - const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); + const headerMenuPreviewResponse = await getPatterns( + currentStep.patternId + ); if ( headerMenuPreviewResponse?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } - setHeaderMenuPreviewData(headerMenuPreviewResponse.body); + setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); - let headerMenuPatterns = []; + const headerMenuPatterns = []; headerMenuPreviewResponse.body.forEach( ( pageParts ) => { - if(headerMenuSlugs.includes(pageParts.slug)){ - headerMenuPatterns.push(pageParts); + if ( headerMenuSlugs.includes( pageParts.slug ) ) { + headerMenuPatterns.push( pageParts ); } - }); + } ); setPatterns( headerMenuPatterns ); - if(!currentData.data.partHeader || currentData.data.partHeader == "") { - currentData.data.partHeader = headerMenuSlugs[0]; + if ( + ! currentData.data.partHeader || + currentData.data.partHeader === '' + ) { + currentData.data.partHeader = headerMenuSlugs[ 0 ]; setCurrentOnboardingData( currentData ); } - setSelectedPattern(currentData.data.partHeader); + setSelectedPattern( currentData.data.partHeader ); - let [pageContent, headerContent, pagePreview] = ["", "", ""]; + let [ pageContent, headerContent, pagePreview ] = [ '', '', '' ]; headerMenuPreviewResponse.body.forEach( ( pageParts ) => { - if(headerMenuBodySlugs.includes(pageParts.slug)){ + if ( headerMenuBodySlugs.includes( pageParts.slug ) ) { pageContent += pageParts.content; } - if(pageParts.slug === currentData.data.partHeader){ + if ( pageParts.slug === currentData.data.partHeader ) { headerContent += pageParts.content; } - }); + } ); pagePreview = headerContent + pageContent; setHeaderMenuData( pagePreview ); setIsLoaded( true ); @@ -91,10 +97,10 @@ const DesignHeaderMenu = () => { let newPagePattern = selectedPattern.content; headerMenuPreviewData.forEach( ( pageParts ) => { - if(headerMenuBodySlugs.includes(pageParts.slug)){ + if ( headerMenuBodySlugs.includes( pageParts.slug ) ) { newPagePattern += pageParts.content; } - }); + } ); setHeaderMenuData( newPagePattern ); }; @@ -103,7 +109,9 @@ const DesignHeaderMenu = () => { return ( {
{ buildPreviews() } - {/* */} + /> */ }
); }; -export default DesignHeaderMenu; \ No newline at end of file +export default DesignHeaderMenu; diff --git a/src/OnboardingSPA/components/HeaderMenuPreview/index.js b/src/OnboardingSPA/components/HeaderMenuPreview/index.js index 51654756f..3a88aaf85 100644 --- a/src/OnboardingSPA/components/HeaderMenuPreview/index.js +++ b/src/OnboardingSPA/components/HeaderMenuPreview/index.js @@ -1,5 +1,5 @@ -import { check, search, Icon } from '@wordpress/icons'; -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; +import { check, Icon } from '@wordpress/icons'; import { LivePreview } from '../LivePreview'; @@ -10,7 +10,6 @@ const HeaderMenuPreview = ( { viewportWidth = 1500, styling = 'large', previewSettings, - overlay = false, onClick = false, skeletonLoadingTime = 2500, } ) => { @@ -19,18 +18,22 @@ const HeaderMenuPreview = ( { return (
{ - if ( ! loadingParent ) { - onClick(); - } - } ) } + onClick={ + typeof onClick === 'function' && + ( () => { + if ( ! loadingParent ) { + onClick(); + } + } ) + } >
{ - const { - headerMenu, - } = useSelect( - ( select ) => { - return { - headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), - }; - }, - [] - ); + const { headerMenu } = useSelect( ( select ) => { + return { + headerMenu: select( nfdOnboardingStore ).getHeaderMenuData(), + }; + }, [] ); const [ pattern, setPattern ] = useState(); const isLargeViewport = useViewportMatch( 'medium' ); - const { - setDrawerActiveView, - setIsDrawerOpened, + const { + setDrawerActiveView, + setIsDrawerOpened, setIsDrawerSuppressed, setIsSidebarOpened, setIsHeaderNavigationEnabled, @@ -74,4 +70,4 @@ const StepDesignHeaderMenu = () => { ); }; -export default StepDesignHeaderMenu; \ No newline at end of file +export default StepDesignHeaderMenu; diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index bea6f69e7..003f9de1a 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -187,4 +187,4 @@ export function setHeaderMenuData( menu ) { type: 'UPDATE_HEADER_MENU_DATA', menu, }; -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index 5590a0a40..641bef720 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -136,7 +136,10 @@ export function sidebar( return state; } -export function header( state = { isNavigationEnabled: true, menu : "" }, action ) { +export function header( + state = { isNavigationEnabled: true, menu: '' }, + action +) { switch ( action.type ) { case 'SET_HEADER_NAVIGATION_ENABLED': return { @@ -146,7 +149,7 @@ export function header( state = { isNavigationEnabled: true, menu : "" }, actio case 'UPDATE_HEADER_MENU_DATA': return { ...state, - menu:action.menu, + menu: action.menu, }; } return state; diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 4aee66acf..b3c5c9ad4 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -259,6 +259,6 @@ export function getStepPreviewData( state ) { * @param {*} state * @return string */ - export function getHeaderMenuData( state ) { +export function getHeaderMenuData( state ) { return state.header.menu; -} \ No newline at end of file +} From 70a7ac76d7b3d83e55b112812d9bec1f9e43ff09 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 7 Dec 2022 13:42:52 +0530 Subject: [PATCH 16/16] fix formatting in php file --- includes/Data/Patterns.php | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index d69879a7d..a77a65379 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -72,30 +72,30 @@ protected static function get_theme_step_patterns() { 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), ), ), - 'header-menu' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'shown' => true, + 'header-menu' => array( + 'site-header-left-logo-navigation-inline' => array( + 'active' => true, + 'shown' => true, ), - 'homepage-1' => array( - 'active' => true, + 'homepage-1' => array( + 'active' => true, ), - 'site-footer' => array( - 'active' => true, + 'site-footer' => array( + 'active' => true, ), 'site-header-left-logo-navigation-below' => array( - 'active' => true, - 'shown' => true, + 'active' => true, + 'shown' => true, ), - 'site-header-centered' => array( - 'active' => true, - 'shown' => true, + 'site-header-centered' => array( + 'active' => true, + 'shown' => true, ), 'site-header-splitted-menu' => array( - 'active' => true, - 'shown' => true, - ) - ), + 'active' => true, + 'shown' => true, + ), + ), ), ); }