-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
227 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 12 additions & 19 deletions
31
apps/full-site-editing/full-site-editing-plugin/editor-domain-picker/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ); |
75 changes: 75 additions & 0 deletions
75
...-editing/full-site-editing-plugin/editor-domain-picker/src/domain-picker-button/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 } | ||
/> | ||
</> | ||
); | ||
} |
42 changes: 42 additions & 0 deletions
42
...e-editing/full-site-editing-plugin/editor-domain-picker/src/domain-picker-modal/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
22 changes: 22 additions & 0 deletions
22
...editing/full-site-editing-plugin/editor-domain-picker/src/domain-picker-modal/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
37 changes: 37 additions & 0 deletions
37
...editing/full-site-editing-plugin/editor-domain-picker/src/hooks/use-domain-suggestions.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ] | ||
); | ||
} |
6 changes: 6 additions & 0 deletions
6
apps/full-site-editing/full-site-editing-plugin/editor-domain-picker/src/stores/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import 'a8c-fse-common-data-stores'; | ||
|
||
export const DOMAIN_SUGGESTIONS_STORE = 'automattic/domains/suggestions'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters