Add domain picker to FSE

apps/full-site-editing/full-site-editing-plugin/editor-domain-picker/index.php

@@ -29,6 +29,7 @@ function enqueue_script_and_style() {
 	$asset_file          = include plugin_dir_path( __FILE__ ) . 'dist/editor-domain-picker.asset.php';
 	$script_dependencies = isset( $asset_file['dependencies'] ) ? $asset_file['dependencies'] : array();
 	$script_version      = isset( $asset_file['version'] ) ? $asset_file['version'] : filemtime( plugin_dir_path( __FILE__ ) . 'dist/editor-domain-picker.js' );
+	$styles_version      = isset( $asset_file['version'] ) ? $asset_file['version'] : filemtime( plugin_dir_path( __FILE__ ) . 'dist/editor-domain-picker.css' );
 
 	wp_enqueue_script(
 		'a8c-fse-editor-domain-picker-script',
@@ -37,5 +38,12 @@ function enqueue_script_and_style() {
 		$script_version,
 		true
 	);
+
+	wp_enqueue_style(
+		'a8c-fse-editor-domain-picker-styles',
+		plugins_url( 'dist/editor-domain-picker.css', __FILE__ ),
+		array(),
+		$styles_version
+	);
 }
 add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script_and_style' );

apps/full-site-editing/full-site-editing-plugin/editor-domain-picker/index.ts

@@ -1,28 +1,21 @@
 /**
  * External dependencies
  */
+import * as React from 'react';
 import 'a8c-fse-common-data-stores';
-import { select } from '@wordpress/data';
 
-/* eslint-disable no-console */
+import DomainPickerButton from './src/domain-picker-button';
+import * as ReactDOM from 'react-dom';
 
-console.log( "👋 Hi! I'm the editor-domain-picker bundle running!" );
+const awaitSettingsBar = setInterval( () => {
+	const settingsBar = document.querySelector( '.edit-post-header__settings' );
+	if ( ! settingsBar ) {
+		return;
+	}
+	clearInterval( awaitSettingsBar );
 
-let results;
-let int: number | undefined = setInterval( () => {
-	results = select( 'automattic/domains/suggestions' ).getCategories();
+	const domainPickerContainer = document.createElement( 'div' );
+	settingsBar.prepend( domainPickerContainer );
 
-	if ( results.length ) {
-		// eslint-disable-next-line no-console
-		console.log( results );
-		clearInterval( int );
-		int = undefined;
-	}
+	ReactDOM.render( React.createElement( DomainPickerButton ), domainPickerContainer );
 } );
-
-setTimeout( () => {
-	if ( int ) {
-		console.log( '😢 Timed out before we were able to get Domain Categories.' );
-		clearInterval( int );
-	}
-}, 5000 );

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

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { useSelect } from '@wordpress/data';
+import 'a8c-fse-common-data-stores';
+import { Site } from '@automattic/data-stores';
+
+import DomainPickerModal from '../domain-picker-modal';
+import { Button } from '@wordpress/components';
+import { Icon, chevronDown } from '@wordpress/icons';
+import { useDomainSuggestions, DOMAIN_SUGGESTION_VENDOR } from '../hooks/use-domain-suggestions';
+const FLOW_ID = 'gutenboarding';
+
+const SITES_STORE = Site.register( { client_id: '', client_secret: '' } );
+
+declare global {
+	interface Window {
+		_currentSiteId: number;
+	}
+}
+
+export default function DomainPickerButton() {
+	const [ isDomainModalVisible, setDomainModalVisibility ] = React.useState( false );
+	const [ domainSearch, setDomainSearch ] = React.useState( '' );
+	const [ domainCategory, setDomainCategory ] = React.useState< string | undefined >( '' );
+
+	const domainSuggestions = useDomainSuggestions( domainSearch, domainCategory );
+
+	const domainCategories = useSelect( ( select ) =>
+		select( 'automattic/domains/suggestions' ).getCategories()
+	);
+
+	const site = useSelect( ( select ) => select( SITES_STORE ).getSite( window._currentSiteId ) );
+
+	const currentDomain = {
+		domain_name: ( site?.URL && new URL( site?.URL ).hostname ) || '',
+		is_free: site?.URL?.endsWith( 'wordpress.com' ),
+	};
+
+	const search = ( domainSearch.trim() || site?.name ) ?? '';
+
+	return (
+		<>
+			<Button
+				aria-expanded={ isDomainModalVisible }
+				aria-haspopup="menu"
+				aria-pressed={ isDomainModalVisible }
+				onClick={ () => setDomainModalVisibility( ( s ) => ! s ) }
+			>
+				<span className="domain-picker-button__label">{ `Domain: ${ currentDomain.domain_name }` }</span>
+				<Icon icon={ chevronDown } size={ 22 } />
+			</Button>
+			<DomainPickerModal
+				analyticsFlowId={ FLOW_ID }
+				domainSuggestions={ domainSuggestions }
+				domainSearch={ search }
+				domainCategories={ domainCategories }
+				domainCategory={ domainCategory }
+				onSetDomainCategory={ setDomainCategory }
+				onSetDomainSearch={ setDomainSearch }
+				isOpen={ isDomainModalVisible }
+				showDomainConnectButton
+				showDomainCategories
+				currentDomain={ currentDomain }
+				onDomainSelect={ () => setDomainModalVisibility( false ) }
+				onClose={ () => setDomainModalVisibility( false ) }
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				recordAnalytics={ () => {} }
+				railcarId={ 'railcarId' }
+				domainSuggestionVendor={ DOMAIN_SUGGESTION_VENDOR }
+			/>
+		</>
+	);
+}

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Modal } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DomainPicker, { Props as DomainPickerProps } from '@automattic/domain-picker';
+import './styles.scss';
+
+interface Props extends DomainPickerProps {
+	isOpen: boolean;
+	onMoreOptions?: () => void;
+}
+
+const DomainPickerModal: React.FunctionComponent< Props > = ( { isOpen, onClose, ...props } ) => {
+	if ( ! isOpen ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="domain-picker-modal"
+			overlayClassName="domain-picker-modal-overlay"
+			bodyOpenClassName="has-domain-picker-modal"
+			onRequestClose={ onClose }
+			title=""
+		>
+			<DomainPicker
+				showDomainConnectButton
+				onClose={ onClose }
+				showDomainCategories
+				quantity={ 10 }
+				{ ...props }
+			/>
+		</Modal>
+	);
+};
+
+export default DomainPickerModal;

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

@@ -0,0 +1,22 @@
+// Increase specificity
+.components-panel__row {
+	.domain-picker__suggestion-item {
+		border: 1px solid var( --studio-gray-5 );
+		padding: 14px;
+		margin-bottom: 0;
+
+		// override bad styles from wp-admin/css/forms.min.css
+		& > input[type='radio'] {
+			text-align: unset;
+		}
+
+		+ .domain-picker__suggestion-item {
+			margin-top: -1px;
+		}
+	}
+	// Don't show close button & more button when inside a modal.
+	.domain-picker__close-button,
+	.domain-picker__more-button {
+		display: none;
+	}
+}

apps/full-site-editing/full-site-editing-plugin/editor-domain-picker/src/hooks/use-domain-suggestions.ts

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { DOMAIN_SUGGESTIONS_STORE } from '../stores';
+
+export const DOMAIN_SUGGESTION_VENDOR = 'variation4_front';
+const PAID_DOMAINS_TO_SHOW = 10;
+
+export function useDomainSuggestions(
+	searchTerm: string,
+	domainCategory,
+	locale = 'en',
+	quantity = PAID_DOMAINS_TO_SHOW
+) {
+	return useSelect(
+		( select ) => {
+			if ( ! searchTerm ) {
+				return;
+			}
+			return select( DOMAIN_SUGGESTIONS_STORE ).getDomainSuggestions( searchTerm, {
+				// Avoid `only_wordpressdotcom` — it seems to fail to find results sometimes
+				include_wordpressdotcom: true,
+				include_dotblogsubdomain: false,
+				quantity,
+				locale,
+				vendor: DOMAIN_SUGGESTION_VENDOR,
+				category_slug: domainCategory,
+			} );
+		},
+		[ searchTerm, domainCategory, quantity ]
+	);
+}

apps/full-site-editing/full-site-editing-plugin/editor-domain-picker/src/stores/index.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import 'a8c-fse-common-data-stores';
+
+export const DOMAIN_SUGGESTIONS_STORE = 'automattic/domains/suggestions';

apps/full-site-editing/package.json

@@ -82,10 +82,12 @@
 		"prepare": "check-npm-client && yarn run sync:newspack-blocks --nodemodules"
 	},
 	"dependencies": {
-		"@automattic/format-currency": "^1.0.0-alpha.0",
-		"@automattic/data-stores": "^1.0.0-alpha.1",
 		"@automattic/calypso-build": "*",
+		"@automattic/data-stores": "^1.0.0-alpha.1",
+		"@automattic/domain-picker": "1.0.0-alpha.0",
+		"@automattic/format-currency": "^1.0.0-alpha.0",
 		"@wordpress/api-fetch": "*",
+		"@wordpress/base-styles": "1.9.0",
 		"@wordpress/block-editor": "*",
 		"@wordpress/blocks": "*",
 		"@wordpress/components": "*",
@@ -108,6 +110,8 @@
 		"classnames": "^2.2.6",
 		"lodash": "*",
 		"moment": "*",
-		"newspack-blocks": "github:Automattic/newspack-blocks#v1.7.0"
+		"newspack-blocks": "github:Automattic/newspack-blocks#v1.7.0",
+		"react": "^16.12.0",
+		"react-dom": "^16.12.0"
 	}
 }

bin/pre-commit-hook.js

@@ -12,6 +12,13 @@ const composerBinDir = path.join( __dirname, '..', 'vendor', 'bin' );
 const phpcsPath = path.join( composerBinDir, 'phpcs' );
 const phpcbfPath = path.join( composerBinDir, 'phpcbf' );
 
+function quotedPath( pathToQuote ) {
+	if ( pathToQuote.includes( ' ' ) ) {
+		return `"${ pathToQuote }"`;
+	}
+	return pathToQuote;
+}
+
 console.log(
 	'\nBy contributing to this project, you license the materials you contribute ' +
 		'under the GNU General Public License v2 (or later). All materials must have ' +
@@ -118,7 +125,9 @@ toPHPCBF.forEach( ( file ) => console.log( `PHPCBF formatting staged file: ${ fi
 if ( toPHPCBF.length ) {
 	if ( phpcs ) {
 		try {
-			execSync( `${ phpcbfPath } --standard=apps/phpcs.xml ${ toPHPCBF.join( ' ' ) }` );
+			execSync(
+				`${ quotedPath( phpcbfPath ) } --standard=apps/phpcs.xml ${ toPHPCBF.join( ' ' ) }`
+			);
 		} catch ( error ) {
 			// PHPCBF returns a `0` or `1` exit code on success, and `2` on failures. ¯\_(ツ)_/¯
 			// https://github.com/squizlabs/PHP_CodeSniffer/blob/master/src/Runner.php#L210
@@ -174,10 +183,14 @@ if ( toEslint.length ) {
 // and finally PHPCS
 if ( toPHPCS.length ) {
 	if ( phpcs ) {
-		const lintResult = spawnSync( phpcsPath, [ '--standard=apps/phpcs.xml', ...toPHPCS ], {
-			shell: true,
-			stdio: 'inherit',
-		} );
+		const lintResult = spawnSync(
+			quotedPath( phpcsPath ),
+			[ '--standard=apps/phpcs.xml', ...toPHPCS ],
+			{
+				shell: true,
+				stdio: 'inherit',
+			}
+		);
 
 		if ( lintResult.status ) {
 			linterFailure();