Skip to content
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

Block attributes docs: missing Saved content code block in example of multiline prop usage #41469

Closed
vasartam opened this issue May 31, 2022 · 1 comment · Fixed by #43075
Closed
Assignees
Labels
[Type] Developer Documentation Documentation for developers

Comments

@vasartam
Copy link
Contributor

vasartam commented May 31, 2022

What problem does this address?

In the html section of Block Attributes page there is a "Saved content" code block missing. Because of that, for a person who is at the stage of researching the Gutenberg capabilities it is unclear what multiline prop does when using source: 'html' in block attribute definition:

Use the `multiline` property to extract the inner HTML of matching tag names for the use in `RichText` with the `multiline` prop.
```js
{
content: {
type: 'string',
source: 'html',
multiline: 'p',
selector: 'blockquote',
}
}
```
Attribute available in the block:
```js
{ "content": "<p>First line</p><p>Second line</p>" }
```

What is your proposed solution?

There should be a "Saved content" code block example just before the attribute definition example, as it's done in the example right above:

Use `html` to extract the inner HTML from markup. Note that text is returned according to the rules of [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerHTML).
Saved content:
```html
<figure>
<img src="/image.jpg" />
<figcaption>The inner text of the <strong>figcaption</strong> element</figcaption>
</figure>
```
Attribute definition:
```js
attributes {
content: {
type: 'string',
source: 'html',
selector: 'figcaption',
}
}
```
Attribute available in the block:
```js
{ "content": "The inner text of the <strong>figcaption</strong> element" }
```

I would have created this code block myself in the PR #41468, but I myself don't exactly know how this feature works.

@skorasaurus skorasaurus added the [Type] Developer Documentation Documentation for developers label Jun 1, 2022
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Aug 9, 2022
@t-hamano
Copy link
Contributor

t-hamano commented Aug 9, 2022

@vasartam

Thank you for submitting the issue.
I have submitted a PR at #43075 for consistency, including the points you raised.

@t-hamano t-hamano removed the [Status] In Progress Tracking issues with work in progress label Aug 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants