-
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.
* Add domain picker to FSE * Update to work with domain picker changes in the last 2 weeks. * Added yarn.lock file. Co-authored-by: Yan Sern <yan.sern@automattic.com>
- Loading branch information
Showing
11 changed files
with
206 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 ); |
77 changes: 77 additions & 0 deletions
77
...-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,77 @@ | ||
| /** | ||
| * 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 } | ||
| initialDomainSearch={ search } | ||
| domainCategories={ domainCategories } | ||
| domainCategory={ domainCategory } | ||
| onSetDomainCategory={ setDomainCategory } | ||
| onSetDomainSearch={ setDomainSearch } | ||
| isOpen={ isDomainModalVisible } | ||
| showDomainConnectButton | ||
| showDomainCategories | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | ||
| // @ts-ignore | ||
| currentDomain={ currentDomain } | ||
| onDomainSelect={ () => setDomainModalVisibility( false ) } | ||
| onClose={ () => setDomainModalVisibility( false ) } | ||
| // eslint-disable-next-line @typescript-eslint/no-empty-function | ||
| recordAnalytics={ () => {} } | ||
| railcarId={ 'railcarId' } | ||
| domainSuggestionVendor={ DOMAIN_SUGGESTION_VENDOR } | ||
| /> | ||
| </> | ||
| ); | ||
| } |
36 changes: 36 additions & 0 deletions
36
...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,36 @@ | ||
| /** | ||
| * 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; | ||
| onClose: () => 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 showDomainCategories { ...props } /> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default DomainPickerModal; |
Empty file.
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
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