Skip to content

Commit

Permalink
Add README for TextAlignmentControl component (#68126)
Browse files Browse the repository at this point in the history
* doc: Add README.md for text-alignment-control

* doc: Corrected headings and removed justify

* doc: Fix default and options for value prop

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: t-hamano <[email protected]>
  • Loading branch information
3 people authored Dec 26, 2024
1 parent 1fad00a commit 61d7404
Showing 1 changed file with 49 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# TextAlignmentControl

The `TextAlignmentControl` component is responsible for rendering a control element that allows users to select and apply text alignment options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for aligning text with options such as `left`, `center` and `right`.

## Usage

Renders the Text Alignment Component with `left`, `center` and `right` alignment options.

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

const MyTextAlignmentControlComponent = () => (
<TextAlignmentControl
value={ textAlign }
onChange={ ( value ) => {
setAttributes( { textAlign: value } );
} }
/>
);
```

## Props

### `value`

- **Type:** `String`
- **Default:** `undefined`
- **Options:** `left`, `center`, `right`, `justify`

The current value of the text alignment setting. You may only choose from the `Options` listed above.

### `onChange`

- **Type:** `Function`

A callback function invoked when the text alignment value is changed via an interaction with any of the options. The function is called with the new alignment value (`left`, `center`, `right`) as the only argument.

### `className`

- **Type:** `String`

Class name to add to the control for custom styling.

### `options`

- **Type:** `Array`
- **Default:** [`left`, `center`, `right`]

An array that determines which alignment options will be available in the control. You can pass an array of alignment values to customize the options.

1 comment on commit 61d7404

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 61d7404.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12498716168
📝 Reported issues:

Please sign in to comment.