diff --git a/packages/block-editor/src/components/block-switcher/README.md b/packages/block-editor/src/components/block-switcher/README.md new file mode 100644 index 00000000000000..2b4d17585391ba --- /dev/null +++ b/packages/block-editor/src/components/block-switcher/README.md @@ -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 ( + + ); +} +``` + +## Props + +### clientIds + +The client IDs of the blocks that will be displayed in the block list. + +- Type: `Array` +- Required: Yes diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 981dd4a395f89a..722791d925f2e7 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -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 ( + * + * ); + * } + * ``` + * + * @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,