forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Display inserter popover in Nav Offcanvas experiment UI (WordPress#46013
) * Add new prop to control 4th arg to insertBlock * Don’t select block on insertion from offcanvas appender * Make appender * Provide data on inserted block in Inserter block callback * Extract updater function from Nav Link block This will make this easier to refactor in future * Extract standalone Link UI component from Nav Link block * Rename Link UI props * Remove need for replaceBlock prop and colocate with component * Rename more props * Remove deps on attributes in favour of generic updater prop * Colocate transforms control with Link UI component * Copy Link UI from Nav Link Block * Experiment with including Link UI in offcanvas * Select inserted link attributes to dynamically update UI * Pass title and new tab props to Link UI * Remove create suggestion and resulting dep on Core Data package * Use WP version of escape html over lodash dep * Update packages/block-editor/src/components/off-canvas-editor/link-ui.js Co-authored-by: Dave Smith <getdavemail@gmail.com> * Separately import to fix unit tests * Fix lint * Use the correct import! * Close the link appender Co-authored-by: Ben Dwyer <ben@scruffian.com>
- Loading branch information
Showing
6 changed files
with
332 additions
and
6 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
160 changes: 160 additions & 0 deletions
160
packages/block-editor/src/components/off-canvas-editor/link-ui.js
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,160 @@ | ||
// Note: this file is copied directly from packages/block-library/src/navigation-link/link-ui.js | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Popover, Button } from '@wordpress/components'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { switchToBlockType } from '@wordpress/blocks'; | ||
import { useSelect, useDispatch } from '@wordpress/data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { store as blockEditorStore } from '../../store'; | ||
import LinkControl from '../link-control'; | ||
import BlockIcon from '../block-icon'; | ||
|
||
/** | ||
* Given the Link block's type attribute, return the query params to give to | ||
* /wp/v2/search. | ||
* | ||
* @param {string} type Link block's type attribute. | ||
* @param {string} kind Link block's entity of kind (post-type|taxonomy) | ||
* @return {{ type?: string, subtype?: string }} Search query params. | ||
*/ | ||
export function getSuggestionsQuery( type, kind ) { | ||
switch ( type ) { | ||
case 'post': | ||
case 'page': | ||
return { type: 'post', subtype: type }; | ||
case 'category': | ||
return { type: 'term', subtype: 'category' }; | ||
case 'tag': | ||
return { type: 'term', subtype: 'post_tag' }; | ||
case 'post_format': | ||
return { type: 'post-format' }; | ||
default: | ||
if ( kind === 'taxonomy' ) { | ||
return { type: 'term', subtype: type }; | ||
} | ||
if ( kind === 'post-type' ) { | ||
return { type: 'post', subtype: type }; | ||
} | ||
return {}; | ||
} | ||
} | ||
|
||
/** | ||
* Add transforms to Link Control | ||
* | ||
* @param {Object} props Component props. | ||
* @param {string} props.clientId Block client ID. | ||
*/ | ||
function LinkControlTransforms( { clientId } ) { | ||
const { getBlock, blockTransforms } = useSelect( | ||
( select ) => { | ||
const { | ||
getBlock: _getBlock, | ||
getBlockRootClientId, | ||
getBlockTransformItems, | ||
} = select( blockEditorStore ); | ||
|
||
return { | ||
getBlock: _getBlock, | ||
blockTransforms: getBlockTransformItems( | ||
_getBlock( clientId ), | ||
getBlockRootClientId( clientId ) | ||
), | ||
}; | ||
}, | ||
[ clientId ] | ||
); | ||
|
||
const { replaceBlock } = useDispatch( blockEditorStore ); | ||
|
||
const featuredBlocks = [ | ||
'core/site-logo', | ||
'core/social-links', | ||
'core/search', | ||
]; | ||
|
||
const transforms = blockTransforms.filter( ( item ) => { | ||
return featuredBlocks.includes( item?.name ); | ||
} ); | ||
|
||
if ( ! transforms?.length ) { | ||
return null; | ||
} | ||
|
||
if ( ! clientId ) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<div className="link-control-transform"> | ||
<h3 className="link-control-transform__subheading"> | ||
{ __( 'Transform' ) } | ||
</h3> | ||
<div className="link-control-transform__items"> | ||
{ transforms.map( ( item, index ) => { | ||
return ( | ||
<Button | ||
key={ `transform-${ index }` } | ||
onClick={ () => | ||
replaceBlock( | ||
clientId, | ||
switchToBlockType( | ||
getBlock( clientId ), | ||
item.name | ||
) | ||
) | ||
} | ||
className="link-control-transform__item" | ||
> | ||
<BlockIcon icon={ item.icon } /> | ||
{ item.title } | ||
</Button> | ||
); | ||
} ) } | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export function LinkUI( props ) { | ||
return ( | ||
<Popover | ||
placement="bottom" | ||
onClose={ props?.onClose } | ||
anchor={ props?.anchor } | ||
shift | ||
> | ||
<LinkControl | ||
hasTextControl | ||
hasRichPreviews | ||
className="wp-block-navigation-link__inline-link-input" | ||
value={ props?.value } | ||
showInitialSuggestions={ true } | ||
withCreateSuggestion={ props?.hasCreateSuggestion } | ||
noDirectEntry={ !! props?.linkAttributes?.type } | ||
noURLSuggestion={ !! props?.linkAttributes?.type } | ||
suggestionsQuery={ getSuggestionsQuery( | ||
props?.linkAttributes?.type, | ||
props?.linkAttributes?.kind | ||
) } | ||
onChange={ props.onChange } | ||
onRemove={ props.onRemove } | ||
renderControlBottom={ | ||
! props?.linkAttributes?.url | ||
? () => ( | ||
<LinkControlTransforms | ||
clientId={ props?.clientId } | ||
/> | ||
) | ||
: null | ||
} | ||
/> | ||
</Popover> | ||
); | ||
} |
Oops, something went wrong.