Skip to content

Commit

Permalink
Fix: Show UI to update custom links on the sidebar navigation. (#48939)
Browse files Browse the repository at this point in the history 
* Fix: Show UI to update custom links on the sidebar navigation.

* no message
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Mar 30, 2023
1 parent ab8a510 commit ef717ab
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 14 deletions.
3 changes: 2 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/block-editor/src/components/off-canvas-editor/block-contents.js
View file
Expand Up @@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
import { updateAttributes } from './update-attributes';
import { LinkUI } from './link-ui';
import { useInsertedBlock } from './use-inserted-block';
import { useListViewContext } from './context';

const BLOCKS_WITH_LINK_UI_SUPPORT = [
'core/navigation-link',
Expand Down Expand Up @@ -90,6 +91,8 @@ const ListViewBlockContents = forwardRef(
hasExistingLinkValue,
] );

const { renderAdditionalBlockUI } = useListViewContext();

const isBlockMoveTarget =
blockMovingClientId && selectedBlockInBlockEditor === clientId;

Expand All @@ -107,6 +110,7 @@ const ListViewBlockContents = forwardRef(

return (
<>
{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
{ isLinkUIOpen && (
<LinkUI
clientId={ lastInsertedBlockClientId }
Expand Down
26 changes: 15 additions & 11 deletions packages/block-editor/src/components/off-canvas-editor/index.js
View file
Expand Up @@ -54,17 +54,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
/**
* Show a hierarchical list of blocks.
*
* @param {Object} props Components props.
* @param {string} props.id An HTML element id for the root element of ListView.
* @param {string} props.parentClientId The client id of the parent block.
* @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy.
* @param {boolean} props.showBlockMovers Flag to enable block movers
* @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default.
* @param {Object} props.LeafMoreMenu Optional more menu substitution.
* @param {string} props.description Optional accessible description for the tree grid component.
* @param {string} props.onSelect Optional callback to be invoked when a block is selected.
* @param {string} props.showAppender Flag to show or hide the block appender.
* @param {Object} ref Forwarded ref
* @param {Object} props Components props.
* @param {string} props.id An HTML element id for the root element of ListView.
* @param {string} props.parentClientId The client id of the parent block.
* @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy.
* @param {boolean} props.showBlockMovers Flag to enable block movers
* @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default.
* @param {Object} props.LeafMoreMenu Optional more menu substitution.
* @param {string} props.description Optional accessible description for the tree grid component.
* @param {string} props.onSelect Optional callback to be invoked when a block is selected.
* @param {string} props.showAppender Flag to show or hide the block appender.
* @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
* @param {Object} ref Forwarded ref.
*/
function OffCanvasEditor(
{
Expand All @@ -77,6 +78,7 @@ function OffCanvasEditor(
LeafMoreMenu,
description = __( 'Block navigation structure' ),
onSelect,
renderAdditionalBlockUI,
},
ref
) {
Expand Down Expand Up @@ -200,6 +202,7 @@ function OffCanvasEditor(
expand,
collapse,
LeafMoreMenu,
renderAdditionalBlockUI,
} ),
[
isMounted.current,
Expand All @@ -208,6 +211,7 @@ function OffCanvasEditor(
expand,
collapse,
LeafMoreMenu,
renderAdditionalBlockUI,
]
);

Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/package.json
View file
Expand Up @@ -37,6 +37,7 @@
"@wordpress/core-data": "file:../core-data",
"@wordpress/data": "file:../data",
"@wordpress/deprecated": "file:../deprecated",
"@wordpress/dom": "file:../dom",
"@wordpress/editor": "file:../editor",
"@wordpress/element": "file:../element",
"@wordpress/hooks": "file:../hooks",
Expand Down
70 changes: 68 additions & 2 deletions ...site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
View file
Expand Up @@ -6,17 +6,48 @@ import {
store as blockEditorStore,
BlockList,
BlockTools,
__experimentalLinkControl as LinkControl,
} from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';
import { createBlock } from '@wordpress/blocks';
import { useCallback } from '@wordpress/element';
import { useCallback, useState } from '@wordpress/element';
import { Popover } from '@wordpress/components';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';

/**
* Internal dependencies
*/
import { unlock } from '../../private-apis';
import { NavigationMenuLoader } from './loader';

function CustomLinkAdditionalBlockUI( { block, onClose } ) {
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const { label, url, opensInNewTab } = block.attributes;
const link = {
url,
opensInNewTab,
title: label && stripHTML( label ),
};
return (
<Popover placement="bottom" shift onClose={ onClose }>
<LinkControl
hasTextControl
hasRichPreviews
value={ link }
onChange={ ( updatedValue ) => {
updateBlockAttributes( block.clientId, {
label: updatedValue.title,
url: updatedValue.url,
opensInNewTab: updatedValue.opensInNewTab,
} );
onClose();
} }
onCancel={ onClose }
/>
</Popover>
);
}

export default function NavigationMenuContent( { rootClientId, onSelect } ) {
const { clientIdsTree, isLoading } = useSelect(
( select ) => {
Expand All @@ -35,6 +66,29 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );

const [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =
useState( false );

const renderAdditionalBlockUICallback = useCallback(
( block ) => {
if (
customLinkEditPopoverOpenId &&
block.clientId === customLinkEditPopoverOpenId
) {
return (
<CustomLinkAdditionalBlockUI
block={ block }
onClose={ () => {
setIsCustomLinkEditPopoverOpenId( false );
} }
/>
);
}
return null;
},
[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
);

const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );

const offCanvasOnselect = useCallback(
Expand All @@ -48,11 +102,22 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
block.clientId,
createBlock( 'core/navigation-link', block.attributes )
);
} else if (
block.name === 'core/navigation-link' &&
block.attributes.kind === 'custom' &&
block.attributes.url
) {
setIsCustomLinkEditPopoverOpenId( block.clientId );
} else {
onSelect( block );
}
},
[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
[
onSelect,
__unstableMarkNextChangeAsNotPersistent,
replaceBlock,
setIsCustomLinkEditPopoverOpenId,
]
);

// The hidden block is needed because it makes block edit side effects trigger.
Expand All @@ -66,6 +131,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
onSelect={ offCanvasOnselect }
LeafMoreMenu={ LeafMoreMenu }
showAppender={ false }
renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
/>
) }
<div style={ { visibility: 'hidden' } }>
Expand Down

1 comment on commit ef717ab

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in ef717ab.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4563075850
📝 Reported issues:

Please sign in to comment.