Add LYS hub site preview (#45976)
* Add lys hub site preview * Add changelog * Improve loading UI * Use REQUEST_URI * Set min-width to the page
This commit is contained in:
Chi-Hsuan Huang
GitHub
parent
468c5e61bf
commit
3667d2b620
|
|
@ -0,0 +1,29 @@
|
|||
.launch-store-site-preview-page__container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
padding: 16px 16px 16px 0;
|
||||
position: relative;
|
||||
|
||||
.launch-store-site__preview-site-iframe {
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.04), 0 13px 15px 0 rgba(0, 0, 0, 0.03), 0 6px 10px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.25);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.launch-store-site-preview-site__loading-overlay {
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
opacity: 0.9;
|
||||
height: calc(100% - 32px);
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,20 +2,65 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
import { useState, useRef, useEffect } from '@wordpress/element';
|
||||
import { Spinner } from '@woocommerce/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
import type { MainContentComponentProps } from '../xstate';
|
||||
import './site-preview.scss';
|
||||
|
||||
export const SitePreviewPage = ( props: MainContentComponentProps ) => {
|
||||
const siteUrl = getAdminSetting( 'siteUrl' ) + '?site-preview=1';
|
||||
const [ isLoading, setIsLoading ] = useState( true );
|
||||
const iframeRef = useRef< HTMLIFrameElement >( null );
|
||||
|
||||
useEffect( () => {
|
||||
const iframeContentWindow = iframeRef.current?.contentWindow;
|
||||
|
||||
const beforeUnloadHandler = () => {
|
||||
setIsLoading( true );
|
||||
};
|
||||
|
||||
if ( iframeContentWindow ) {
|
||||
iframeContentWindow.addEventListener(
|
||||
'beforeunload',
|
||||
beforeUnloadHandler
|
||||
);
|
||||
}
|
||||
return () => {
|
||||
if ( iframeContentWindow ) {
|
||||
iframeContentWindow.removeEventListener(
|
||||
'beforeunload',
|
||||
beforeUnloadHandler
|
||||
);
|
||||
}
|
||||
};
|
||||
// IsLoading is a dependency because we want to reset it when the iframe reloads.
|
||||
}, [ iframeRef, setIsLoading, isLoading ] );
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ classnames(
|
||||
'launch-store-site-preview-page__container',
|
||||
{ 'is-loading': isLoading },
|
||||
props.className
|
||||
) }
|
||||
>
|
||||
<p>Main Content - Site Preview</p>
|
||||
{ isLoading && (
|
||||
<div className="launch-store-site-preview-site__loading-overlay">
|
||||
<Spinner />
|
||||
</div>
|
||||
) }
|
||||
<iframe
|
||||
ref={ iframeRef }
|
||||
className="launch-store-site__preview-site-iframe"
|
||||
src={ siteUrl }
|
||||
title="Preview"
|
||||
onLoad={ () => setIsLoading( false ) }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,30 @@
|
|||
.woocommerce-layout__main .launch-your-store-layout__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.woocommerce-launch-your-store {
|
||||
min-width: 600px;
|
||||
overflow: auto;
|
||||
|
||||
.launch-your-store-layout__sidebar {
|
||||
width: 380px;
|
||||
.woocommerce-layout__primary {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.is-sidebar-hidden {
|
||||
display: none;
|
||||
.woocommerce-layout__main {
|
||||
padding: 0;
|
||||
|
||||
.launch-your-store-layout__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.launch-your-store-layout__sidebar {
|
||||
width: 380px;
|
||||
|
||||
&.is-sidebar-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.launch-your-store-layout__content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.launch-your-store-layout__content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: add
|
||||
|
||||
Add LYS hub site preview
|
||||
|
|
@ -9,6 +9,17 @@ use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
|
|||
* Launch Your Store Task
|
||||
*/
|
||||
class LaunchYourStore extends Task {
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param TaskList $task_list Parent task list.
|
||||
*/
|
||||
public function __construct( $task_list ) {
|
||||
parent::__construct( $task_list );
|
||||
|
||||
add_action( 'show_admin_bar', array( $this, 'possibly_hide_wp_admin_bar' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* ID.
|
||||
*
|
||||
|
|
@ -82,4 +93,40 @@ class LaunchYourStore extends Task {
|
|||
public function can_view() {
|
||||
return Features::is_enabled( 'launch-your-store' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the WP admin bar when the user is previewing the site.
|
||||
*
|
||||
* @param bool $show Whether to show the admin bar.
|
||||
*/
|
||||
public function possibly_hide_wp_admin_bar( $show ) {
|
||||
if ( isset( $_GET['site-preview'] ) ) { // @phpcs:ignore
|
||||
return false;
|
||||
}
|
||||
|
||||
global $wp;
|
||||
$http_referer = wp_get_referer() ?? '';
|
||||
$parsed_url = wp_parse_url( $http_referer, PHP_URL_QUERY );
|
||||
$query_string = is_string( $parsed_url ) ? $parsed_url : '';
|
||||
|
||||
// Check if the user is coming from the site preview link.
|
||||
if ( strpos( $query_string, 'site-preview' ) !== false ) {
|
||||
if ( ! isset( $_SERVER['REQUEST_URI'] ) ) {
|
||||
return $show;
|
||||
}
|
||||
|
||||
// Redirect to the current URL with the site-preview query string.
|
||||
$current_url =
|
||||
add_query_arg(
|
||||
array(
|
||||
'site-preview' => 1,
|
||||
),
|
||||
esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) )
|
||||
);
|
||||
wp_safe_redirect( $current_url );
|
||||
exit;
|
||||
}
|
||||
|
||||
return $show;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue