Skip to content

Commit

Permalink
Edit Site: Enable link viewer template navigation.
Browse files Browse the repository at this point in the history
  • Loading branch information
epiqueras committed Jan 9, 2020
1 parent a086d4e commit e0e14bd
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 2 deletions.
11 changes: 10 additions & 1 deletion packages/block-editor/src/components/url-popover/link-viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,14 @@ import classnames from 'classnames';
*/
import { __ } from '@wordpress/i18n';
import {
createSlotFill,
ExternalLink,
Button,
} from '@wordpress/components';
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
import { useMemo } from '@wordpress/element';

const { Slot, Fill } = createSlotFill( 'BlockEditorURLPopoverLinkViewer' );

function LinkViewerUrl( { url, urlLabel, className } ) {
const linkClassName = classnames(
Expand All @@ -33,7 +37,7 @@ function LinkViewerUrl( { url, urlLabel, className } ) {
);
}

export default function LinkViewer( {
function LinkViewer( {
className,
linkClassName,
onEditLinkClick,
Expand All @@ -51,6 +55,11 @@ export default function LinkViewer( {
>
<LinkViewerUrl url={ url } urlLabel={ urlLabel } className={ linkClassName } />
{ onEditLinkClick && <Button icon="edit" label={ __( 'Edit' ) } onClick={ onEditLinkClick } /> }
<Slot fillProps={ useMemo( () => ( { url } ), [ url ] ) } />
</div>
);
}

LinkViewer.Fill = Fill;

export default LinkViewer;
26 changes: 25 additions & 1 deletion packages/edit-site/src/components/block-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { parse, serialize } from '@wordpress/blocks';
import {
BlockEditorProvider,
BlockEditorKeyboardShortcuts,
URLPopover,
BlockInspector,
WritingFlow,
ObserveTyping,
Expand All @@ -20,10 +21,11 @@ import {
* Internal dependencies
*/
import { useEditorContext } from '../editor';
import NavigateToLink from '../navigate-to-link';
import Sidebar from '../sidebar';

export default function BlockEditor() {
const { settings: _settings } = useEditorContext();
const { settings: _settings, setSettings } = useEditorContext();
const canUserCreateMedia = useSelect( ( select ) => {
const _canUserCreateMedia = select( 'core' ).canUser( 'create', 'media' );
return _canUserCreateMedia || _canUserCreateMedia !== false;
Expand Down Expand Up @@ -66,6 +68,15 @@ export default function BlockEditor() {
},
[ setBlocks, _setContent ]
);
const setActiveTemplateId = useCallback(
( newTemplateId ) =>
setSettings( ( prevSettings ) => ( {
...prevSettings,
templateId: newTemplateId,
templateType: 'wp_template',
} ) ),
[]
);
return (
<BlockEditorProvider
settings={ settings }
Expand All @@ -74,6 +85,19 @@ export default function BlockEditor() {
onChange={ setContent }
>
<BlockEditorKeyboardShortcuts />
<URLPopover.LinkViewer.Fill>
{ useCallback(
( fillProps ) => (
<NavigateToLink
{ ...fillProps }
templateIds={ settings.templateIds }
activeId={ settings.templateId }
onActiveIdChange={ setActiveTemplateId }
/>
),
[ settings.templateIds, settings.templateId, setActiveTemplateId ]
) }
</URLPopover.LinkViewer.Fill>
<Sidebar.InspectorFill>
<BlockInspector />
</Sidebar.InspectorFill>
Expand Down
60 changes: 60 additions & 0 deletions packages/edit-site/src/components/navigate-to-link/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/**
* WordPress dependencies
*/
import { useState, useEffect, useMemo } from '@wordpress/element';
import { select } from '@wordpress/data';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Browser dependencies
*/
const { fetch } = window;

export default function NavigateToLink( {
url,
templateIds,
activeId,
onActiveIdChange,
} ) {
const [ templateId, setTemplateId ] = useState();
useEffect( () => {
const effect = async () => {
try {
const { success, data } = await fetch(
`${ url }?_wp-find-template`
).then( ( res ) => res.json() );
if ( success ) {
let newTemplateId = data.ID;
if ( newTemplateId === null ) {
const { getEntityRecord } = select( 'core' );
newTemplateId = templateIds
.map( ( id ) => getEntityRecord( 'postType', 'wp_template', id ) )
.find( ( template ) => template.slug === data.post_name ).id;
}
setTemplateId( newTemplateId );
} else {
throw new Error();
}
} catch ( err ) {
setTemplateId( null );
}
};
effect();
}, [ url, templateIds ] );
const onClick = useMemo( () => {
if ( ! templateId || templateId === activeId ) {
return null;
}
return () => onActiveIdChange( templateId );
}, [ templateId, activeId, onActiveIdChange ] );
return (
onClick && (
<Button
icon="welcome-write-blog"
label={ __( 'Edit Page Template' ) }
onClick={ onClick }
/>
)
);
}

0 comments on commit e0e14bd

Please sign in to comment.