Add code examples for actions/selectors in Data Module packages.

[ryanwelcher]

What problem does this address?

Working with any of the data modules provided by WordPress can be very confusing. When looking at the Data Modules section in the handbook, there are almost no code examples for developers to use as reference.

I would love to see an example for each action or selector that is exposed for use.

Packages:

• core/annotations edit @t-hamano the selector and actions in the annotations package are all experimental
• core/block-editor - Add examples for core/block-editor selectors and actions #51853
• core/blocks
  • selectors - [Documentation] Add @examples to core/blocks selectors. #42572
  • actions - [Documentation] add examples for core/blocks actions #42637
  • Public API Examples ( see this comment ) - [Documentation] Adding @example entries to the public API exposed in core/blocks #42745
• core/customize-widgets - Add @example tags to the customize-widgets package #52141
• core/data - [Documentation] Add some examples to the core/data package #42639
• core/edit-post
• core/edit-site
• core/edit-widgets
• core/editor
• core/keyboard-shortcuts [Documentation] Add examples for core/keyboard-shortcut package #42831
• core/notices - [Documentation] Add @example for getNotices to create example in the handbook. #42023
• core/nux - Package was removed with Remove the nux package #46110
• core/preferences
• core/reusable-blocks edit @t-hamano the selector and actions in the annotations package are all experimental
• core/rich-text - Add @examples to the @wordpress/rich-text package selectors and hide the actions from documentation. #52089
• core/viewport [Documentation] Add examples for core/viewport package #42921

What is your proposed solution?

Add an @example tag to each docblock. This will be picked up by the documentation generator and added to the handbook.

[ryanwelcher]

#42023 introduced one example and makes usage much clearer for getNotices

[skorasaurus]

In case you weren't aware, some resources that you may want to draw off of, for core/data:

https://github.com/WordPress/gutenberg/blob/bd06705979ad63ace26d15de47144c253c3b0fc8/docs/getting-started/data.md
https://wordpress.stackexchange.com/questions/390985/how-do-i-access-site-and-block-editor-state-data-and-use-useselect-or-withs/390986#390986

[t-hamano]

@ryanwelcher

I have added missing data module references by #42651.
Could you please add it to the task list as well?

• block-directory
• customize-widgets
• edit-site
• edit-widgets
• preferences
• reusable-blocks
• rich-text

And I would love to help add code examples too 😊

[ryanwelcher]

I have added missing data module references by #42651.
Could you please add it to the task list as well?

This is fantastic! Thanks for putting that together. I've updated the list.

[t-hamano]

@ryanwelcher
I have created PR #42831 about core/keyboard-shortcuts.

[t-hamano]

I have created PR #42921 about core/viewport.

[t-hamano]

I noticed that of the references I added in #42651, the selector and actions in the reusable-blocks package are all experimental.
Should this package be excluded from the documentation?

[t-hamano]

I noticed that the selector and actions in the annotations package are all experimental too.

[ryanwelcher]

It probably makes sense to exclude packages that are fully experimental.

[ryanwelcher]

Some package are not exporting their stores. To keep the DX consistent, I have created the following PRs to to export the store:

• Export store for the core/customize-widgets package. #52189
• Export store from the edit-site package #51986
• Export the store for the core/edit-widgets pacakage #52190

[ryanwelcher]

@troychaplin you might be interested in this issue.

[troychaplin]

I have added a few examples in core/editor in #63768, need a label added