Skip to content

Refactor link creation UI to standalone component/file #46031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 24, 2022
Merged

Refactor link creation UI to standalone component/file #46031

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
39f1703
Extract updater function from Nav Link block
getdave Nov 24, 2022
9d87050
Extract standalone Link UI component from Nav Link block
getdave Nov 24, 2022
7c4fcf9
Rename Link UI props
getdave Nov 24, 2022
b621417
Remove need for replaceBlock prop and colocate with component
getdave Nov 24, 2022
4f19cbd
Rename more props
getdave Nov 24, 2022
5983d7e
Remove deps on attributes in favour of generic updater prop
getdave Nov 24, 2022
6c5e4de
Colocate transforms control with Link UI component
getdave Nov 24, 2022
5602b47
Extract suggestions utility function and locate with Link UI
getdave Nov 24, 2022
3f84fe6
Rename prop to reflect generic purpose
getdave Nov 24, 2022
c34bc34
Further simplify and reduce Link UI API props
getdave Nov 24, 2022
d267869
Fix tests broken by moving files and renaming
getdave Nov 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Colocate transforms control with Link UI component
  • Loading branch information
@getdave
getdave committed Nov 24, 2022
commit 6c5e4de898fd1be6d070d36bd06ae90bc1850c78
74 changes: 1 addition & 73 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ import { unescape } from 'lodash';
/**
* WordPress dependencies
*/
import { createBlock, switchToBlockType } from '@wordpress/blocks';
import { createBlock } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import {
Button,
PanelBody,
TextControl,
TextareaControl,
Expand All @@ -23,7 +22,6 @@ import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
import { __ } from '@wordpress/i18n';
import {
BlockControls,
BlockIcon,
InspectorControls,
RichText,
useBlockProps,
Expand Down Expand Up @@ -259,76 +257,6 @@ function navStripHTML( html ) {
return doc.body.textContent || '';
}

/**
* Add transforms to Link Control
*/

export 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;
}

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 default function NavigationLinkEdit( {
attributes,
isSelected,
Expand Down
86 changes: 81 additions & 5 deletions packages/block-library/src/navigation-link/link-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,94 @@
/**
Copy link
Contributor

@scruffian scruffian Nov 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it worth moving this out of navigation-link?

Copy link
Contributor Author

@getdave getdave Nov 24, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this? Sorry the comment is on the first line of a JS comment block.

Copy link
Contributor

@scruffian scruffian Nov 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I mean the whole file.

* WordPress dependencies
*/
import { Popover } from '@wordpress/components';
import { Popover, Button } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
import {
__experimentalLinkControl as LinkControl,
BlockIcon,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { createInterpolateElement } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';

import { switchToBlockType } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import { getSuggestionsQuery, LinkControlTransforms } from './edit';
import { getSuggestionsQuery } from './edit';

/**
* 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;
}

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 ) {
const { saveEntityRecord } = useDispatch( coreStore );
Expand Down