Block Render and Screenshots

includes/RestApi/BlockRenderController.php

@@ -0,0 +1,88 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\Onboarding\RestApi;
+
+use NewfoldLabs\WP\Module\Onboarding\Permissions;
+use NewfoldLabs\WP\Module\Onboarding\Data\Services\BlockRenderService;
+
+/**
+ * Undocumented class
+ */
+class BlockRenderController {
+
+	/**
+	 * The namespace of this controller's route.
+	 *
+	 * @var string
+	 */
+	protected $namespace = 'newfold-onboarding/v1';
+
+	/**
+	 * The endpoint base
+	 *
+	 * @var string
+	 */
+	protected $rest_base = '/block-render';
+
+		/**
+		 * Registers rest routes for BlockRenderController class.
+		 *
+		 * @return void
+		 */
+	public function register_routes() {
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/screenshot',
+			array(
+				'methods'  => \WP_REST_Server::CREATABLE,
+				'callback' => array( $this, 'generate_screenshot' ),
+				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+				'args'     => $this->generate_screenshot_args(),
+			)
+		);
+	}
+
+	/**
+	 * Args for Generating the screenshot.
+	 *
+	 * @return array
+	 */
+	public function generate_screenshot_args() {
+		return array(
+			'width'   => array(
+				'required' => true,
+				'type'     => 'integer',
+			),
+			'height'  => array(
+				'required' => true,
+				'type'     => 'integer',
+			),
+			'content' => array(
+				'required' => true,
+				'type'     => 'string',
+			),
+		);
+	}
+
+	/**
+	 * Generates a PNG screenshot of the HTML block render.
+	 *
+	 * @param \WP_REST_Request $request The incoming request.
+	 * @return \WP_REST_Response|\WP_Error
+	 */
+	public function generate_screenshot( \WP_REST_Request $request ) {
+		$width   = $request->get_param( 'width' );
+		$height  = $request->get_param( 'height' );
+		$content = $request->get_param( 'content' );
+
+		$screenshot = BlockRenderService::generate_screenshot( $width, $height, $content );
+		if ( is_wp_error( $screenshot ) ) {
+			return $screenshot;
+		}
+
+		return new \WP_REST_Response(
+			$screenshot,
+			201
+		);
+	}
+}

includes/RestApi/RestApi.php

@@ -30,6 +30,7 @@ final class RestApi {
 		'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeColorsController',
 		'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\SiteClassificationController',
 		'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\SiteGenController',
+		'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\BlockRenderController',
 	);
 
 	/**

src/OnboardingSPA/components/LivePreview/BlockPreview/index.js

@@ -10,6 +10,7 @@
 import Animate from '../../Animate';
 
 const BlockPreview = ( {
+	slug = '',
 	blockGrammer,
 	viewportWidth = 1300,
 	styling = 'large',
@@ -37,7 +38,7 @@
 		if ( setIsLoadingParent ) {
 			setIsLoadingParent( false );
 		}
 	}, [ skeletonLoadingTime ] );
 
 	const { currentData, storedPreviewSettings } = useSelect( ( select ) => {
 		return {
@@ -69,7 +70,7 @@
 		if ( ! previewSettings ) {
 			setSettings( storedPreviewSettings );
 		}
 	}, [ storedPreviewSettings, currentData ] );
 
 	const SkeletonLivePreviewDefault = memo( () => {
 		return (
@@ -122,7 +123,10 @@
 	};
 
 	return (
-		<div className={ `live-preview__container-${ styling }` }>
+		<div
+			data-slug={ `nfd-onboarding-block-preview-${ slug }` }
+			className={ `live-preview__container-${ styling }` }
+		>
 			{ loading && getSkeleton() }
 			{ blocks && settings && (
 				<BlockEditorProvider

src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js

@@ -1,5 +1,12 @@
 import { __ } from '@wordpress/i18n';
 import { Fill } from '@wordpress/components';
+import { Icon, chevronRight } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState, render } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cloneDeep } from 'lodash';
+
 import {
 	HEADER_CENTER,
 	HEADER_END,
@@ -8,22 +15,20 @@
 	SIDEBAR_SITEGEN_EDITOR_PATTERNS,
 	pluginDashboardPage,
 } from '../../../../../constants';
-import { Icon, chevronRight } from '@wordpress/icons';
 import { store as nfdOnboardingStore } from '../../../../store';
-
-import { useSelect, useDispatch } from '@wordpress/data';
-
-import { useEffect, useState } from '@wordpress/element';
 import { setFlow, completeFlow } from '../../../../utils/api/flow';
 import Spinner from '../../../../components/Loaders/Spinner';
 import { regenerateHomepage } from '../../../../utils/api/siteGen';
 import StepEditorHeaderCenter from './center';
-import { useViewportMatch } from '@wordpress/compose';
+import { getGlobalStyles } from '../../../../utils/api/themes';
+import { LivePreview } from '../../../../components/LivePreview';
+import { blockRenderScreenshot } from '../../../../utils/api/blockRender';
 
 const StepSiteGenEditorHeader = () => {
 	const [ homepage, setHomepage ] = useState();
 	const [ isSaving, setIsSaving ] = useState( false );
 	const [ isRegenerating, setIsRegenerating ] = useState( false );
+	const [ globalStyles, setGlobalStyles ] = useState( false );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -102,11 +107,13 @@
 		setIsSidebarOpened( true );
 	};
 
-	const handleCustomize = () => {
+	const handleCustomize = async () => {
 		const isSidebarOpenedNew =
 			sideBarView === 'Customize' ? ! isSidebarOpened : isSidebarOpened;
 		setSidebarActiveView( 'Customize' );
 		setIsSidebarOpened( isSidebarOpenedNew );
+		const globalStylesResponse = await getGlobalStyles();
+		setGlobalStyles( globalStylesResponse.body );
 	};
 
 	const handleRename = ( title ) => {
@@ -116,8 +123,91 @@
 		setCurrentOnboardingData( currentData );
 	};
 
+	const buildPreviewsForScreenshot = ( homepages, activeHomepage ) => {
+		return (
+			<div className="nfd-onboarding-screenshot-container__pages">
+				{ Object.keys( homepages ).map( ( slug, idx ) => {
+					const data = homepages[ slug ];
+					if ( ! data.isFavorite && slug !== activeHomepage.slug ) {
+						return false;
+					}
+					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 (
+						<LivePreview
+							key={ idx }
+							blockGrammer={ blockGrammar }
+							previewSettings={ newPreviewSettings }
+							slug={ slug }
+							tabIndex="0"
+							role="button"
+						/>
+					);
+				} ) }
+			</div>
+		);
+	};
+
 	const saveAndContinue = async () => {
 		setIsSaving( true );
+
+		const homepages = currentData.sitegen.homepages.data;
+		const activeHomepage = currentData.sitegen.homepages.active;
+		const finalPreviews = buildPreviewsForScreenshot(
+			homepages,
+			activeHomepage
+		);
+		const ele = document.querySelector(
+			'.nfd-onboarding-screenshot-container'
+		);
+		if ( ele ) {
+			render( finalPreviews, ele );
+
+			const delay = ( ms ) =>
+				new Promise( ( res ) => setTimeout( res, ms ) );
+			await delay( 5000 );
+
+			const screenshots = await Promise.all(
+				Object.keys( homepages ).map( ( slug ) => {
+					const data = homepages[ slug ];
+					if ( ! data.isFavorite && slug !== activeHomepage.slug ) {
+						return false;
+					}
+
+					const iframe = ele.querySelector(
+						`div > div[data-slug="nfd-onboarding-block-preview-${ slug }"] > .block-editor-block-preview__container > div > iframe`
+					);
+					const html = iframe.contentWindow.document.querySelector(
+						'.block-editor-block-preview__content-iframe'
+					);
+
+					return blockRenderScreenshot( html.innerHTML );
+				} )
+			);
+
+			Object.keys( homepages ).forEach( ( slug, idx ) => {
+				if ( screenshots[ idx ]?.body?.screenshot ) {
+					homepages[ slug ].screenshot =
+						screenshots[ idx ].body.screenshot;
+					if ( slug === activeHomepage.slug ) {
+						activeHomepage.screenshot =
+							screenshots[ idx ].body.screenshot;
+					}
+				}
+			} );
+
+			currentData.sitegen.homepages.data = homepages;
+			currentData.sitegen.homepages.active = activeHomepage;
+			setCurrentOnboardingData( currentData );
+			return currentData;
+		}
 		await setFlow( currentData );
 		await completeFlow();
 		window.location.replace( pluginDashboardPage );
@@ -125,7 +215,7 @@
 
 	useEffect( () => {
 		handleCustomize();
 	}, [] );
 
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {

src/OnboardingSPA/steps/SiteGen/Editor/index.js

@@ -60,7 +60,7 @@
 		setDrawerActiveView( false );
 		loadData();
 		handleSitemapPagesGeneration();
 	}, [] );
 
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {
@@ -122,6 +122,7 @@
 			<div className="nfd-onboarding-step--site-gen__editor__live-preview">
 				{ buildPreview() }
 			</div>
+			<div className="nfd-onboarding-screenshot-container"></div>
 		</CommonLayout>
 	);
 };

src/OnboardingSPA/utils/api/blockRender.js

@@ -0,0 +1,18 @@
+import apiFetch from '@wordpress/api-fetch';
+
+import { onboardingRestURL } from './common';
+import { resolve } from './resolve.js';
+
+export async function blockRenderScreenshot( content ) {
+	return await resolve(
+		apiFetch( {
+			url: onboardingRestURL( 'block-render/screenshot' ),
+			method: 'POST',
+			data: {
+				width: 1200,
+				height: 900,
+				content,
+			},
+		} ).then()
+	);
+}