-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
added README for the "caption" component #52033
Conversation
@derekblank as you seem to be the main developer that has been involved in the work of this component I would appreciate your review and any additions in the README you may consider useful for developers using this component |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM.
The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...) | ||
|
||
This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component | ||
|
||
|
||
## Table of contents | ||
|
||
1. [Development guidelines](#development-guidelines) | ||
2. [Related components](#related-components) | ||
|
||
## Development guidelines | ||
|
||
### Usage | ||
|
||
Renders a Caption area | ||
|
||
```jsx | ||
|
||
import { Caption } from '@wordpress/block-editor'; | ||
|
||
const BlockCaption = ( { | ||
onBlur, | ||
onChange, | ||
onFocus, | ||
isSelected, | ||
shouldDisplay, | ||
text, | ||
insertBlocksAfter, | ||
} ) => ( | ||
<View > | ||
<Caption | ||
isSelected={ isSelected } | ||
onBlur={ onBlur } | ||
onChange={ onChange } | ||
onFocus={ onFocus } | ||
shouldDisplay={ shouldDisplay } | ||
value={ text } | ||
insertBlocksAfter={ insertBlocksAfter } | ||
/> | ||
</View> | ||
); | ||
|
||
``` | ||
|
||
### Props | ||
|
||
The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)) | ||
|
||
## Related components | ||
|
||
Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...) | |
This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component | |
## Table of contents | |
1. [Development guidelines](#development-guidelines) | |
2. [Related components](#related-components) | |
## Development guidelines | |
### Usage | |
Renders a Caption area | |
```jsx | |
import { Caption } from '@wordpress/block-editor'; | |
const BlockCaption = ( { | |
onBlur, | |
onChange, | |
onFocus, | |
isSelected, | |
shouldDisplay, | |
text, | |
insertBlocksAfter, | |
} ) => ( | |
<View > | |
<Caption | |
isSelected={ isSelected } | |
onBlur={ onBlur } | |
onChange={ onChange } | |
onFocus={ onFocus } | |
shouldDisplay={ shouldDisplay } | |
value={ text } | |
insertBlocksAfter={ insertBlocksAfter } | |
/> | |
</View> | |
); | |
``` | |
### Props | |
The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)) | |
## Related components | |
Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component | |
The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...). | |
This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component. | |
## Table of contents | |
1. [Development guidelines](#development-guidelines) | |
2. [Related components](#related-components) | |
## Development guidelines | |
### Usage | |
Renders a Caption area: | |
```jsx | |
import { Caption } from '@wordpress/block-editor'; | |
const BlockCaption = ( { | |
onBlur, | |
onChange, | |
onFocus, | |
isSelected, | |
shouldDisplay, | |
text, | |
insertBlocksAfter, | |
} ) => ( | |
<View > | |
<Caption | |
isSelected={ isSelected } | |
onBlur={ onBlur } | |
onChange={ onChange } | |
onFocus={ onFocus } | |
shouldDisplay={ shouldDisplay } | |
value={ text } | |
insertBlocksAfter={ insertBlocksAfter } | |
/> | |
</View> | |
); | |
Props
The properties isSelected
, onBlur
, onChange
, onFocus
, shouldDisplay
, value
, insertBlocksAfter
of this component are passed directly to their related props of its inner <RichText>
component (see detailed info about component's props).
Related components
Caption components are mostly used by the BlockCaption
component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @juanmaguitar, thanks for adding the docs! I just added one really minor suggestion to add punctuation at the end of the sentences to match the writing style of the other README files. Feel free to include it or not as you wish. Otherwise, approved. 🚀
Flaky tests detected in 2540a7f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5424201731
|
What?
As part of #22891 this PR adds a README.md for this component with some guidance to use.
Why?
Because each component need to have a reference for WordPress developers
How?
By creating a README w/ at least some basic guidance about how to use it