From a45ea3fa01da70679ea0d8fc8387f94d9b2cb35c Mon Sep 17 00:00:00 2001
From: Rinkal Pagdar <92097119+rinkalpagdar@users.noreply.github.com>
Date: Wed, 8 Jan 2025 13:59:14 +0530
Subject: [PATCH] Block rename on double click
---
.../list-view/block-select-button.js | 205 ++++++++++--------
1 file changed, 118 insertions(+), 87 deletions(-)
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 3b21fd4a04e6d..06a64ca5dd985 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -11,10 +11,10 @@ import {
__experimentalTruncate as Truncate,
} from '@wordpress/components';
import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
import { SPACE, ENTER } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
-
+import { useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
/**
* Internal dependencies
*/
@@ -25,6 +25,8 @@ import ListViewExpander from './expander';
import { useBlockLock } from '../block-lock';
import useListViewImages from './use-list-view-images';
import { store as blockEditorStore } from '../../store';
+import isEmptyString from '../block-rename/is-empty-string';
+import BlockRenameModal from '../block-rename/modal';
function ListViewBlockSelectButton(
{
@@ -44,6 +46,17 @@ function ListViewBlockSelectButton(
},
ref
) {
+ const { metadata } = useSelect(
+ ( select ) => {
+ const { getBlockAttributes } = select( blockEditorStore );
+
+ const _metadata = getBlockAttributes( clientId )?.metadata;
+ return {
+ metadata: _metadata,
+ };
+ },
+ [ clientId ]
+ );
const blockInformation = useBlockDisplayInformation( clientId );
const blockTitle = useBlockDisplayTitle( {
clientId,
@@ -58,103 +71,121 @@ function ListViewBlockSelectButton(
} ),
[ clientId ]
);
- const shouldShowLockIcon = isLocked && ! isContentOnly;
+ const shouldShowLockIcon = isLocked && !isContentOnly;
const isSticky = blockInformation?.positionType === 'sticky';
- const images = useListViewImages( { clientId, isExpanded } );
+ const images = useListViewImages({ clientId, isExpanded });
+ const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+ const { blockName, allowRightClickOverrides } = useSelect(
+ ( select ) => {
+ const { getBlockName, getSettings } =
+ select( blockEditorStore );
- // The `href` attribute triggers the browser's native HTML drag operations.
- // When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
- // We need to clear any HTML drag data to prevent `pasteHandler` from firing
- // inside the `useOnBlockDrop` hook.
- const onDragStartHandler = ( event ) => {
+ return {
+ blockName: getBlockName( clientId ),
+ allowRightClickOverrides:
+ getSettings().allowRightClickOverrides,
+ };
+ },
+ [ clientId ]
+ );
+ // State for renaming modal
+ const [renamingBlock, setRenamingBlock] = useState(false);
+ const showBlockActions =
+ // When a block hides its toolbar it also hides the block settings menu,
+ // since that menu is part of the toolbar in the editor canvas.
+ // List View respects this by also hiding the block settings menu.
+ hasBlockSupport( blockName, '__experimentalToolbar', true );
+ const onDragStartHandler = (event) => {
event.dataTransfer.clearData();
- onDragStart?.( event );
+ onDragStart?.(event);
};
- /**
- * @param {KeyboardEvent} event
- */
- function onKeyDown( event ) {
- if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
- onClick( event );
+ function onKeyDown(event) {
+ if (event.keyCode === ENTER || event.keyCode === SPACE) {
+ onClick(event);
}
}
-
+ function onChange( newName ) {
+ updateBlockAttributes( [ clientId ], {
+ metadata: {
+ ...metadata,
+ name: newName,
+ },
+ } );
+ }
return (
-
-
-
-
+
-
- { blockTitle }
-
- { blockInformation?.anchor && (
-
-
- { blockInformation.anchor }
-
-
- ) }
- { isSticky && (
-
-
-
- ) }
- { images.length ? (
+
+
+
{
+ console.log('showBlockActions:', showBlockActions);
+ console.log('allowRightClickOverrides:', allowRightClickOverrides);
+ if (showBlockActions && allowRightClickOverrides) {
+ setRenamingBlock(true);
+ }
+ }}
>
- { images.map( ( image, index ) => (
-
- ) ) }
-
- ) : null }
- { shouldShowLockIcon && (
-
-
+ {blockTitle}
- ) }
-
-
+ {/* Additional UI Elements */}
+
+
+ {/* Render Rename Modal */}
+ {renamingBlock && (
+ setRenamingBlock(false)}
+ onSave={ ( newName ) => {
+ // If the new value is the block's original name (e.g. `Group`)
+ // or it is an empty string then assume the intent is to reset
+ // the value. Therefore reset the metadata.
+ if (
+ newName === blockInformation?.title ||
+ isEmptyString( newName )
+ ) {
+ newName = undefined;
+ }
+
+ onChange( newName );
+ } }
+ />
+ )}
+
);
}
+
export default forwardRef( ListViewBlockSelectButton );