From 1664d948cdb95736b95697593c5f8260c7252f54 Mon Sep 17 00:00:00 2001
From: Vipul Gupta <vipulgup04@gmail.com>
Date: Thu, 26 Dec 2024 13:30:03 +0530
Subject: [PATCH] feat: Adds JSDoc and Readme.md

---
 .../inserter-draggable-blocks/README.md       | 74 +++++++++++++++++++
 .../inserter-draggable-blocks/index.js        | 13 ++++
 2 files changed, 87 insertions(+)
 create mode 100644 packages/block-editor/src/components/inserter-draggable-blocks/README.md

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/README.md b/packages/block-editor/src/components/inserter-draggable-blocks/README.md
new file mode 100644
index 00000000000000..d7eba41c7fe86b
--- /dev/null
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/README.md
@@ -0,0 +1,74 @@
+# InserterDraggableBlocks
+
+The `InserterDraggableBlocks` component provides functionality to make WordPress blocks or patterns draggable within the editor environment. This component leverages the `Draggable` component from `@wordpress/components` and allows customization of drag-and-drop behavior through props.
+
+## Usage
+
+```jsx
+import { InserterDraggableBlocks } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+const blocks = [
+	createBlock( 'core/paragraph', { content: 'This is a paragraph block.' } ),
+	createBlock( 'core/heading', {
+		content: 'This is a heading block.',
+		level: 2,
+	} ),
+];
+
+const MyComponent = () => {
+	return (
+		<InserterDraggableBlocks
+			isEnabled={ true }
+			blocks={ blocks }
+			icon={ <span>Drag</span> }
+			children={ ( { draggable, onDragStart, onDragEnd } ) => (
+				<div
+					draggable={ draggable }
+					onDragStart={ onDragStart }
+					onDragEnd={ onDragEnd }
+				>
+					Drag Me!
+				</div>
+			) }
+		/>
+	);
+};
+```
+
+## Props
+
+### `isEnabled`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Whether dragging is enabled.
+
+### `blocks`
+
+-   **Type:** `Array`
+-   **Default:** `[]`
+
+Array of blocks to make draggable.
+
+### `icon`
+
+-   **Type:** `ReactNode`
+-   **Default:** `null`
+
+Icon for the draggable chip.
+
+### `children`
+
+-   **Type:** `Function`
+-   **Default:** `null`
+
+Render function for child elements. Receives draggable props (`draggable`, `onDragStart`, `onDragEnd`).
+
+### `pattern`
+
+-   **Type:** `Object`
+-   **Default:** `null`
+
+Optional block pattern for drag-and-drop. Should include `type`, `syncStatus`, and `id` attributes.
diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index ebef6304937aa7..b776c99eec731d 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -14,6 +14,19 @@ import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+/**
+ * InserterDraggableBlocks Component
+ *
+ * A component that wraps blocks or patterns with draggable functionality for use in the editor.
+ *
+ * @param {Object}   props           Component properties.
+ * @param {boolean}  props.isEnabled Whether dragging is enabled.
+ * @param {Array}    props.blocks    Array of blocks to make draggable.
+ * @param {Element}  props.icon      Icon for the draggable chip.
+ * @param {Function} props.children  Render function for child elements.
+ * @param {Object}   [props.pattern] Optional block pattern for drag-and-drop.
+ * @return {Element} Draggable block wrapper.
+ */
 const InserterDraggableBlocks = ( {
 	isEnabled,
 	blocks,