Merge pull request #438 from newfold-labs/fix/double-header-footer

Separate out header, content and footer for homepages
newfold-labs · Jan 31, 2024 · 9978f1a · 9978f1a
2 parents 1a03588 + 09b2913
commit 9978f1a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/composer.json b/composer.json
@@ -37,7 +37,7 @@
 		"newfold-labs/wp-module-onboarding-data": "^0.1.0",
 		"newfold-labs/wp-module-patterns": "^0.1.12",
 		"newfold-labs/wp-module-install-checker": "^1.0",
-		"newfold-labs/wp-module-facebook": "1.0.0"
+		"newfold-labs/wp-module-facebook": "^1.0.2"
 	},
 	"require-dev": {
 		"wp-phpunit/wp-phpunit": "^6.2",

diff --git a/composer.lock b/composer.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
@@ -110,6 +110,12 @@ const SitegenEditorPatternsSidebar = () => {
 					const newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
 					newPreviewSettings.settings.color.palette =
 						data.color.palette;
+					let blockGrammar = '';
+					[ 'header', 'content', 'footer' ].forEach( ( part ) => {
+						if ( part in data ) {
+							blockGrammar += data[ part ];
+						}
+					} );
 					return (
 						<div
 							className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container` }
@@ -128,7 +134,7 @@ const SitegenEditorPatternsSidebar = () => {
 											? 'custom'
 											: 'custom__highlighted'
 									}
-									blockGrammer={ data.content }
+									blockGrammer={ blockGrammar }
 									viewportWidth={ 1300 }
 									previewSettings={ newPreviewSettings }
 									skeletonLoadingTime={ 0 }
@@ -206,6 +212,17 @@ const SitegenEditorPatternsSidebar = () => {
 														);
 													newPreviewSettings.settings.color.palette =
 														data.color.palette;
+													let blockGrammar = '';
+													[
+														'header',
+														'content',
+														'footer',
+													].forEach( ( part ) => {
+														if ( part in data ) {
+															blockGrammar +=
+																data[ part ];
+														}
+													} );
 													return (
 														<div
 															className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container` }
@@ -231,7 +248,7 @@ const SitegenEditorPatternsSidebar = () => {
 																		: 'custom__highlighted'
 																}
 																blockGrammer={
-																	data.content
+																	blockGrammar
 																}
 																viewportWidth={
 																	1300
@@ -306,6 +323,17 @@ const SitegenEditorPatternsSidebar = () => {
 														);
 													newPreviewSettings.settings.color.palette =
 														data.color.palette;
+													let blockGrammar = '';
+													[
+														'header',
+														'content',
+														'footer',
+													].forEach( ( part ) => {
+														if ( part in data ) {
+															blockGrammar +=
+																data[ part ];
+														}
+													} );
 													return (
 														<div
 															key={ data.slug }
@@ -331,7 +359,7 @@ const SitegenEditorPatternsSidebar = () => {
 																		: 'custom__highlighted'
 																}
 																blockGrammer={
-																	data.content
+																	blockGrammar
 																}
 																viewportWidth={
 																	1300

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
@@ -81,9 +81,16 @@ const StepSiteGenEditor = () => {
 				populateFontsInPreviewSettings( newPreviewSettings );
 		}
 
+		let blockGrammar = '';
+		[ 'header', 'content', 'footer' ].forEach( ( part ) => {
+			if ( part in homepage ) {
+				blockGrammar += homepage[ part ];
+			}
+		} );
+
 		return (
 			<LivePreview
-				blockGrammer={ homepage.content }
+				blockGrammer={ blockGrammar }
 				styling={ 'custom' }
 				previewSettings={ newPreviewSettings }
 				viewportWidth={ 1300 }

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -172,10 +172,16 @@ const SiteGenPreview = () => {
 			const data = homepages[ slug ];
 			const newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
 			newPreviewSettings.settings.color.palette = data.color.palette;
+			let blockGrammar = '';
+			[ 'header', 'content', 'footer' ].forEach( ( part ) => {
+				if ( part in data ) {
+					blockGrammar += data[ part ];
+				}
+			} );
 			return (
 				<SiteGenPreviewSelectableCard
 					key={ idx }
-					blockGrammar={ data.content }
+					blockGrammar={ blockGrammar }
 					previewSettings={ newPreviewSettings }
 					slug={ slug }
 					title={ data.title }