-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add readme for the multi selection component (#25306)
* Add readme for the multi selection component * Update multi selection inspection component readme * Update JSX code sample * Udate multi selection inspector readme
- Loading branch information
1 parent
075df57
commit 5231ec9
Showing
1 changed file
with
34 additions
and
0 deletions.
There are no files selected for viewing
34 changes: 34 additions & 0 deletions
34
packages/block-editor/src/components/multi-selection-inspector/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# Multi Selection Inspector | ||
|
||
The `MultiSelectionInspector` component adds a card in the panel displayed by the [`BlockInspector`](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/block-inspector) component when several blocks are selected in the editor. | ||
|
||
This card contains information on the number of blocks selected, and in the case where one or more of these blocks contains text, the number of words they contain. | ||
|
||
![Multi selection inspector card](https://make.wordpress.org/core/files/2020/09/multi-selection-inspector-card.png) | ||
|
||
## Table of contents | ||
|
||
1. [Development guidelines](#development-guidelines) | ||
2. [Related components](#related-components) | ||
|
||
## Development guidelines | ||
|
||
### Usage | ||
|
||
Renders the multi selection inspector card. | ||
|
||
```jsx | ||
import { <MultiSelectionInspector /> } from '@wordpress/block-editor'; | ||
|
||
const SelectedBlockCount = getSelectedBlockCount(); | ||
|
||
if ( SelectedBlockCount > 1 ) { | ||
const MyMultiSelectionInspector = () => <MultiSelectionInspector />; | ||
} | ||
``` | ||
|
||
_Note:_ In this example, we detect if more than one block is selected with `getSelectedBlockCount()` before using the `MultiSelectionInspector` component. | ||
|
||
## Related components | ||
|
||
Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/provider/README.md) in the components tree. |