Skip to content

Commit

Permalink
feat: Adds JSDoc and Readme.md
Browse files Browse the repository at this point in the history
  • Loading branch information
vipul0425 committed Dec 26, 2024
1 parent 261979a commit 1664d94
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 1664d94

Please sign in to comment.