forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
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 BlockFullHeightAlignmentControl component
- Loading branch information
1 parent
76d4652
commit b2f28a2
Showing
2 changed files
with
81 additions
and
2 deletions.
There are no files selected for viewing
56 changes: 54 additions & 2 deletions
56
packages/block-editor/src/components/block-full-height-alignment-control/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 |
---|---|---|
@@ -1,3 +1,55 @@ | ||
# Full Height Toolbar Control | ||
# Block Full Height Alignment Control | ||
|
||
Unlike the block alignment options, `Full Height Alignment` can be applied to a block in an independent way. But also, it works very well together with these block alignment options, where the combination empowers the design-layout capability. | ||
The Block Full Height Alignment Control allows users to toggle full height alignment for blocks. Unlike standard block alignment options, this control specifically manages the vertical height behavior of a block, making it span the full height of its container. | ||
|
||
## Development guidelines | ||
|
||
### Usage | ||
|
||
```jsx | ||
import { BlockFullHeightAlignmentControl } from '@wordpress/block-editor'; | ||
import { useState } from '@wordpress/element'; | ||
|
||
function MyBlockEdit() { | ||
const [ isFullHeight, setIsFullHeight ] = useState( false ); | ||
|
||
return ( | ||
<BlockControls> | ||
<BlockFullHeightAlignmentControl | ||
isActive={ isFullHeight } | ||
onToggle={ setIsFullHeight } | ||
/> | ||
</BlockControls> | ||
); | ||
} | ||
``` | ||
|
||
### Props | ||
|
||
### `isActive` | ||
|
||
- **Type:** `boolean` | ||
- **Default:** `false` | ||
|
||
Controls whether the full height alignment is currently active. | ||
|
||
### `label` | ||
|
||
- **Type:** `string` | ||
- **Default:** `'Full height'` | ||
|
||
Label for the toolbar button. | ||
|
||
### `onToggle` | ||
|
||
- **Type:** `Function` | ||
- **Default:** `undefined` | ||
|
||
Callback function triggered when the alignment is toggled. | ||
|
||
### `isDisabled` | ||
|
||
- **Type:** `boolean` | ||
- **Default:** `false` | ||
|
||
Whether the control should be disabled. |
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