Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Adjust rich-text source mentions in docs
  • Loading branch information
ellatrix committed Oct 11, 2018
commit 167c627739ac87ff3c374937916042e848dda259
4 changes: 2 additions & 2 deletions docs/block-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ attributes: {
attribute: 'src',
},
author: {
source: 'rich-text',
source: 'html',
selector: '.book-author',
},
pages: {
Expand Down Expand Up @@ -413,7 +413,7 @@ align: true,
align: [ 'left', 'right', 'full' ],
```
When supports align is used the block attributes definition is extended to include an align attribute with a string type.
By default, no alignment is assigned to the block.
By default, no alignment is assigned to the block.
The block can apply a default alignment by specifying its own align attribute with a default e.g.:
```
attributes: {
Expand Down
19 changes: 5 additions & 14 deletions docs/block-api/attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,26 +55,17 @@ Use `html` to extract the inner HTML from markup.
// { "content": "The inner text of the <strong>figcaption</strong> element" }
```

### `children`

Use `children` to extract child nodes of the matched element, returned as an array of virtual elements. This is most commonly used in combination with the `RichText` component.

_Example_: Extract child nodes from a paragraph of rich text.
Use the `multiline` property to extract the inner HTML for the use in `RichText` with the `multiline` prop.

```js
{
content: {
source: 'children',
selector: 'p'
source: 'html',
multiline: 'p',
selector: 'blockquote',
}
}
// {
// "content": [
// "Vestibulum eu ",
// { "type": "strong", "children": "tortor" },
// " vel urna."
// ]
// }
// { "content": "<p>Quoted text</p><p>And more</p>" }
Copy link
Member

Choose a reason for hiding this comment

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

Maybe using an example like "<p>Quoted text</p><p>Second line</p>" might make this a bit more immediately obvious.

```

### `query`
Expand Down
4 changes: 2 additions & 2 deletions docs/block-api/deprecated-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
{
attributes: {
title: {
source: 'rich-text',
source: 'html',
selector: 'p',
},
},
Expand Down Expand Up @@ -244,7 +244,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
{
attributes: {
title: {
source: 'rich-text',
source: 'html',
selector: 'p',
},
},
Expand Down
4 changes: 2 additions & 2 deletions docs/blocks/block-controls-toolbars-and-inspector.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {

attributes: {
content: {
source: 'rich-text',
source: 'html',
selector: 'p',
},
alignment: {
Expand Down Expand Up @@ -110,7 +110,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {

attributes: {
content: {
source: 'rich-text',
source: 'html',
selector: 'p',
},
alignment: {
Expand Down
8 changes: 4 additions & 4 deletions docs/blocks/introducing-attributes-and-editable-fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-03', {

attributes: {
content: {
source: 'rich-text',
source: 'html',
selector: 'p',
}
},
Expand Down Expand Up @@ -72,7 +72,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', {

attributes: {
content: {
source: 'rich-text',
source: 'html',
selector: 'p',
},
},
Expand Down Expand Up @@ -111,7 +111,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', {

When registering a new block type, the `attributes` property describes the shape of the attributes object you'd like to receive in the `edit` and `save` functions. Each value is a [source function](../../docs/block-api/attributes.md) to find the desired value from the markup of the block.

In the code snippet above, when loading the editor, we will extract the `content` value as the children of the paragraph element in the saved post's markup.
In the code snippet above, when loading the editor, we will extract the `content` value as the html of the paragraph element in the saved post's markup.

## Components and the `RichText` Component

Expand All @@ -121,4 +121,4 @@ The `RichText` component can be considered as a super-powered `textarea` element

Implementing this behavior as a component enables you as the block implementer to be much more granular about editable fields. Your block may not need `RichText` at all, or it may need many independent `RichText` elements, each operating on a subset of the overall block state.

Because `RichText` allows for nested nodes, you'll most often use it in conjunction with the `rich-text` attribute source when extracting the value from saved content. You'll also use `RichText.Content` in the `save` function to output RichText values.
Because `RichText` allows for nested nodes, you'll most often use it in conjunction with the `html` attribute source when extracting the value from saved content. You'll also use `RichText.Content` in the `save` function to output RichText values.