Skip to content

Commit

Permalink
Update usage documentation for Annotations API (#16233)
Browse files Browse the repository at this point in the history
* Updated the annotations documentation to describe the richTextIdentifier property in more detail.
* Link to developer.wordpress.org in the package README.
  • Loading branch information
mattheu authored and atimmer committed Jun 20, 2019
1 parent b6ab1cf commit 03473a9
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ The start and the end of the range should be calculated based only on the text o

To help with determining the correct positions, the `wp.richText.create` method can be used. This will split a piece of HTML into text and formats.

All available properties can be found in the API documentation of the `addAnnotation` action.
All available properties can be found in the API documentation of the `addAnnotation` action.

The property `richTextIdentifier` is the identifier of the RichText instance the annotation applies to. This is necessary because blocks may have multiple rich text instances that are used to manage data for different attributes, so you need to pass this in order to highlight text within the correct one.

For example the paragraph block only has a single RichText instance, with the identifer `content`. The quote block type has 2 RichText instances, so if you wish to highlight text in the citation, you need to pass `citation` as the `richTextIdentifier` when adding an annotation. To target the quote content, you need to use the identifier `value`. Refer to the source code of the block type to find the correct identifier.

## Block annotation

Expand Down
6 changes: 5 additions & 1 deletion packages/annotations/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ npm install @wordpress/annotations --save

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Getting Started

You need to include `wp-annotations` as a dependency of the JavaScript file in which you wish to use the Annotations API.

## Usage

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
[See this page for more detailed usage instructions](https://developer.wordpress.org/block-editor/developers/block-api/block-annotations).

0 comments on commit 03473a9

Please sign in to comment.