Skip to content

Commit

Permalink
BlockSwitcher: Add README and JS doc for BlockSwitcher component
Browse files Browse the repository at this point in the history
  • Loading branch information
SainathPoojary committed Jan 31, 2025
1 parent a2b6d39 commit 9784d4a
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 0 deletions.
26 changes: 26 additions & 0 deletions packages/block-editor/src/components/block-switcher/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Block Switcher

The `BlockSwitcher` component provides a toolbar dropdown menu for converting between block types, applying block styles, and accessing pattern transformations. It appears in the block toolbar when these transformation options are available.

## Usage

Render component to enable block transformations.

```jsx
import { BlockSwitcher } from '@wordpress/block-editor';

function MyBlockSwitcher() {
return (
<BlockSwitcher clientIds={['ch1d82m9-d33a-4c12-b5d9-a8927e12b654']} />
);
}
```

## Props

### clientIds

The client IDs of the blocks that will be displayed in the block list.

- Type: `Array<String>`
- Required: Yes
22 changes: 22 additions & 0 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,28 @@ function BlockSwitcherDropdownMenuContents( {
);
}

/**
* The `BlockSwitcher` component provides a toolbar dropdown menu for converting
* between block types, applying block styles, and accessing pattern
* transformations. It appears in the block toolbar when these transformation
* options are available.
*
* @example
* ```jsx
* import { BlockSwitcher } from '@wordpress/block-editor';
*
* function MyBlockSwitcher() {
* return (
* <BlockSwitcher clientIds={['ch1d82m9-d33a-4c12-b5d9-a8927e12b654']} />
* );
* }
* ```
*
* @param {Object} props Component props.
* @param {string[]} props.clientIds The client IDs of the blocks that will be displayed in the block list.
*
* @return {Element} The BlockSwitcher component.
*/
export const BlockSwitcher = ( { clientIds } ) => {
const {
hasContentOnlyLocking,
Expand Down

0 comments on commit 9784d4a

Please sign in to comment.