FSE: Add skeleton for editor site launch. (#43825)

* Skeleton for editor site launch.

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/index.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * File for various functionality which needs to be added to Simple and Atomic
+ * sites. The code in this file is always loaded in the block editor.
+ *
+ * Currently, this module may not be the best place if you need to load
+ * front-end assets, but you could always add a separate action for that.
+ *
+ * @package A8C\FSE
+ */
+
+namespace A8C\FSE\EditorSiteLaunch;
+
+/**
+ * Enqueue assets
+ */
+function enqueue_script_and_style() {
+
+	// @TODO: Remove this block to enable in production
+	// Constant to disable the feature for development.
+	if ( ! ( defined( 'A8C_FSE_SITE_LAUNCH_ENABLE' ) && A8C_FSE_SITE_LAUNCH_ENABLE ) ) {
+		return;
+	}
+
+	// Avoid loading assets if possible.
+	if ( ! \A8C\FSE\Common\is_block_editor_screen() ) {
+		return;
+	}
+
+	$asset_file          = include plugin_dir_path( __FILE__ ) . 'dist/editor-site-launch.asset.php';
+	$script_dependencies = isset( $asset_file['dependences'] ) ? $asset_file['dependencies'] : array();
+	$script_version      = isset( $asset_file['version'] ) ? $asset_file['version'] : filemtime( plugin_dir_path( __FILE__ ) . 'dist/editor-site-launch.js' );
+	$style_version       = isset( $asset_file['version'] ) ? $asset_file['version'] : filemtime( plugin_dir_path( __FILE__ ) . 'dist/editor-site-launch.css' );
+
+	wp_enqueue_script(
+		'a8c-fse-editor-site-launch-script',
+		plugins_url( 'dist/editor-site-launch.js', __FILE__ ),
+		$script_dependencies,
+		$script_version,
+		true
+	);
+
+	wp_enqueue_style(
+		'a8c-fse-editor-site-launch-style',
+		plugins_url( 'dist/editor-site-launch.css', __FILE__ ),
+		array(),
+		$style_version
+	);
+}
+add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script_and_style' );

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/index.ts

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import 'a8c-fse-common-data-stores';
+
+import LaunchButton from './src/launch-button';
+
+const awaitSettingsBar = setInterval( () => {
+	const settingsBar = document.querySelector( '.edit-post-header__settings' );
+	if ( ! settingsBar ) {
+		return;
+	}
+	clearInterval( awaitSettingsBar );
+
+	const launchButtonContainer = document.createElement( 'div' );
+	settingsBar.prepend( launchButtonContainer );
+
+	ReactDOM.render( React.createElement( LaunchButton ), launchButtonContainer );
+} );

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-button/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import LaunchModal from '../launch-modal';
+import './styles.scss';
+
+const LaunchButton: React.FunctionComponent = () => {
+	const [ isLaunchModalVisible, setLaunchModalVisibility ] = React.useState( false );
+
+	const handleClick = () => {
+		setLaunchModalVisibility( ! isLaunchModalVisible );
+	};
+
+	const handleModalClose = () => {
+		setLaunchModalVisibility( false );
+	};
+
+	return (
+		<>
+			<Button
+				aria-expanded={ isLaunchModalVisible }
+				aria-pressed={ isLaunchModalVisible }
+				aria-haspopup="menu"
+				onClick={ handleClick }
+			>
+				{ __( 'Launch site', 'full-site-editing' ) }
+			</Button>
+			{ isLaunchModalVisible && <LaunchModal onClose={ handleModalClose } /> }
+		</>
+	);
+};
+
+export default LaunchButton;

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-modal/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Modal } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './styles.scss';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Launch, { LaunchStepType } from '../launch';
+
+interface Props {
+	onClose?: () => void;
+	step?: LaunchStepType;
+}
+
+const LaunchModal: React.FunctionComponent< Props > = ( { onClose, step } ) => {
+	const handleClose = () => {
+		onClose?.();
+	};
+
+	return (
+		<Modal
+			className="nux-launch-modal"
+			overlayClassName="nux-launch-modal-overlay"
+			bodyOpenClassName="has-nux-launch-modal"
+			onRequestClose={ handleClose }
+			title={ __(
+				"You're almost there! Review a few things before launching your site!",
+				'full-site-editing'
+			) }
+		>
+			<Launch step={ step }></Launch>
+		</Modal>
+	);
+};
+
+export default LaunchModal;

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-modal/styles.scss

@@ -0,0 +1,31 @@
+.nux-launch-modal-overlay {
+	&.components-modal__screen-overlay {
+		background: none;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.nux-launch-modal {
+	&.components-modal__frame {
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		min-width: unset;
+		max-width: none;
+		max-height: none;
+		transform: none;
+		border: none;
+		box-shadow: none;
+		position: absolute;
+	}
+
+	.components-modal__header {
+		margin: 0;
+	}
+
+	.components-modal__content {
+		padding: 0;
+	}
+}

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-step/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './styles.scss';
+
+export interface Props {
+	className?: string;
+	onPrevStep?: () => void;
+	onNextStep?: () => void;
+}
+
+const LaunchStep: React.FunctionComponent< Props > = ( { className, children } ) => {
+	return <div className={ classnames( 'nux-launch-step', className ) }>{ children }</div>;
+};
+
+export default LaunchStep;

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-step/styles.scss

@@ -0,0 +1,20 @@
+@import '~@automattic/typography/sass/fonts';
+
+.nux-launch-step {
+	// TODO: container padding/margin with mobile breakpoints goes here.
+	padding: 88px;
+}
+
+.nux-launch-step__header {
+	display: flex;
+	align-items: baseline;
+}
+
+.nux-launch-step__heading {
+	flex-grow: 1;
+
+	h1 {
+		@extend .wp-brand-font;
+		font-size: 42px;
+	}
+}

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-steps/domain-step/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import LaunchStep, { Props as LaunchStepProps } from '../../launch-step';
+import './styles.scss';
+
+const DomainStep: React.FunctionComponent< LaunchStepProps > = ( { onPrevStep, onNextStep } ) => {
+	const handleBack = () => {
+		onPrevStep?.();
+	};
+
+	const handleContinue = () => {
+		onNextStep?.();
+	};
+
+	return (
+		<LaunchStep className="nux-launch-domain-step">
+			<div className="nux-launch-step__header">
+				<div className="nux-launch-step__heading">
+					<h1 className="nux-launch-step__title">
+						{ __( 'Choose a domain', 'full-site-editing' ) }
+					</h1>
+					<p className="nux-launch-step__subtitle">
+						{ __( 'Free for the first year with any paid plan', 'full-site-editing' ) }
+					</p>
+				</div>
+				<div className="nux-launch-step__actions">
+					<Button isTertiary onClick={ handleBack }>
+						{ __( 'Go back', 'full-site-editing' ) }
+					</Button>
+					<Button isPrimary onClick={ handleContinue }>
+						{ __( 'Continue', 'full-site-editing' ) }
+					</Button>
+				</div>
+			</div>
+			<div className="nux-launch-step__body"></div>
+		</LaunchStep>
+	);
+};
+
+export default DomainStep;

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-steps/plan-step/index.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import LaunchStep, { Props as LaunchStepProps } from '../../launch-step';
+import './styles.scss';
+
+const PlanStep: React.FunctionComponent< LaunchStepProps > = ( { onPrevStep } ) => {
+	const handleBack = () => {
+		onPrevStep && onPrevStep();
+	};
+
+	return (
+		<LaunchStep className="nux-launch-plan-step">
+			<div className="nux-launch-step__header">
+				<div className="nux-launch-step__heading">
+					<h1 className="nux-launch-step__title">{ __( 'Choose a plan', 'full-site-editing' ) }</h1>
+					<p className="nux-launch-step__subtitle">
+						{ __(
+							'Pick a plan that’s right for you. Switch plans as your needs change. There’s no risk, you can cancel for a full refund within 30 days.',
+							'full-site-editing'
+						) }
+					</p>
+				</div>
+				<div className="nux-launch-step__actions">
+					<Button isTertiary onClick={ handleBack }>
+						{ __( 'Go back', 'full-site-editing' ) }
+					</Button>
+				</div>
+			</div>
+			<div className="nux-launch-step__body"></div>
+		</LaunchStep>
+	);
+};
+
+export default PlanStep;

apps/full-site-editing/full-site-editing-plugin/editor-site-launch/src/launch-steps/privacy-step/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import LaunchStep, { Props as LaunchStepProps } from '../../launch-step';
+import './styles.scss';
+
+const PrivacyStep: React.FunctionComponent< LaunchStepProps > = ( { onNextStep } ) => {
+	const handleContinue = () => {
+		onNextStep && onNextStep();
+	};
+
+	return (
+		<LaunchStep className="nux-launch-privacy-step">
+			<div className="nux-launch-step__header">
+				<div className="nux-launch-step__heading">
+					<h1 className="nux-launch-step__title">{ __( 'Site privacy', 'full-site-editing' ) }</h1>
+					<p className="nux-launch-step__subtitle">
+						{ __( 'Control who is able to see your site once your launch', 'full-site-editing' ) }
+					</p>
+				</div>
+				<div className="nux-launch-step__actions">
+					<Button isPrimary onClick={ handleContinue }>
+						{ __( 'Continue', 'full-site-editing' ) }
+					</Button>
+				</div>
+			</div>
+			<div className="nux-launch-step__body"></div>
+		</LaunchStep>
+	);
+};
+
+export default PrivacyStep;