Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update task list documentation and example (#38245) 

* Update woocommerce task list examples

* Update onboarding-tasks.md

* Add changelog

* Update changelog

* Update task list doc

* Update onboarding-tasks.md

* Update examples readme

* Fix lint

* Update onboarding-tasks.md

* Fix build wca example cmd

* Update plugins/woocommerce-admin/docs/features/onboarding-tasks.md

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* Update plugins/woocommerce-admin/docs/features/onboarding-tasks.md

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* Update plugins/woocommerce-admin/docs/features/onboarding-tasks.md

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* Update plugins/woocommerce-admin/docs/features/onboarding-tasks.md

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* Update task list image

---------

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
This commit is contained in:
Chi-Hsuan Huang 2023-05-18 11:21:53 +08:00 committed by GitHub
parent 00952e8b95
commit b8aa7eb1fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 361 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/docs/examples/extensions/README.md
View File

@ -12,11 +12,12 @@ pnpm install
Build the example extension by running the pnpm script and passing the example name.
```bash
WC_EXT=<example> pnpm example --filter=woocommerce/client/admin
WC_EXT=<example> pnpm --filter=woocommerce/client/admin example
```
Include the output plugin in your `.wp-env.json` and `.wp-env.override.json` and restart the WordPress instance. WooCommerce Analytics reports will now reflect the changes made by the example extension.
You should see a new directory in `./woocommerce/plugins/{example} path.` Include the output plugin in your `.wp-env.json` or `.wp-env.override.json` and restart the WordPress instance. WooCommerce will now reflect the changes made by the example extension.
You can make changes to Javascript and PHP files in the example and see changes reflected upon refresh.
@ -27,3 +28,4 @@ You can make changes to Javascript and PHP files in the example and see changes
- `dashboard-section` - Adding a custom "section" to the new dashboard area.
- `table-column` - An example of how to add column(s) to any report.
- `sql-modification` - An example of how to modify SQL statements.
- `payment-gateway-suggestions` - An example of how to add a new payment gateway suggestion

49
plugins/woocommerce-admin/docs/examples/extensions/add-task/class-mytask.php Normal file
View File

@ -0,0 +1,49 @@
<?php
/**
* Custom task example.
*
* @package WooCommerce\Admin
*/
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
/**
* Custom task class.
*/
class MyTask extends Task {
/**
* Get the task ID.
*
* @return string
*/
public function get_id() {
return 'my-task';
}
/**
* Title.
*
* @return string
*/
public function get_title() {
return __( 'My task', 'woocommerce' );
}
/**
* Content.
*
* @return string
*/
public function get_content() {
return __( 'Add your task description here for display in the task list.', 'woocommerce' );
}
/**
* Time.
*
* @return string
*/
public function get_time() {
return __( '2 minutes', 'woocommerce' );
}
}

36
plugins/woocommerce-admin/docs/examples/extensions/add-task/js/index.js
View File

@ -1,13 +1,17 @@
/* eslint-disable @wordpress/i18n-text-domain */
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card, CardBody } from '@wordpress/components';
import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
import { registerPlugin } from '@wordpress/plugins';
import { useDispatch } from '@wordpress/data';
import { WooOnboardingTask } from '@woocommerce/onboarding';
import {
WooOnboardingTask,
WooOnboardingTaskListItem,
} from '@woocommerce/onboarding';
const Task = ( { onComplete, task } ) => {
const { actionTask } = useDispatch( ONBOARDING_STORE_NAME );
@ -46,10 +50,32 @@ const Task = ( { onComplete, task } ) => {
registerPlugin( 'add-task-content', {
render: () => (
<WooOnboardingTask id="my-task">
{ ( { onComplete, query, task } ) => (
<Task onComplete={ onComplete } task={ task } />
) }
{ ( {
onComplete,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
query,
task,
} ) => <Task onComplete={ onComplete } task={ task } /> }
</WooOnboardingTask>
),
scope: 'woocommerce-tasks',
} );
registerPlugin( 'my-task-list-item-plugin', {
scope: 'woocommerce-tasks',
render: () => (
<WooOnboardingTaskListItem id="my-task">
{ ( { defaultTaskItem: DefaultTaskItem } ) => (
// Add a custom wrapper around the default task item.
<div
className="woocommerce-custom-tasklist-item"
style={ {
border: '1px solid red',
} }
>
<DefaultTaskItem />
</div>
) }
</WooOnboardingTaskListItem>
),
} );

25
plugins/woocommerce-admin/docs/examples/extensions/add-task/woocommerce-admin-add-task-example.php
View File

@ -5,29 +5,18 @@
* @package WooCommerce\Admin
*/
use Automattic\WooCommerce\Internal\Admin\Onboarding;
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists;
/**
* Register the task.
*/
function add_task_my_task() {
TaskLists::add_task(
require_once __DIR__ . '/class-mytask.php';
$task_lists = \Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists::instance();
// Add the task to the extended list.
$task_lists::add_task(
'extended',
array(
'id' => 'my-task',
'title' => __( 'My task', 'woocommerce-admin' ),
'content' => __(
'Add your task description here for display in the task list.',
'woocommerce-admin'
),
'action_label' => __( 'Do action', 'woocommerce-admin' ),
'is_complete' => Task::is_task_actioned( 'my-task' ),
'can_view' => 'US' === WC()->countries->get_base_country(),
'time' => __( '2 minutes', 'woocommerce-admin' ),
'is_dismissable' => true,
'is_snoozeable' => true,
new MyTask(
$task_lists::get_list( 'extended' ),
)
);
}

BIN
plugins/woocommerce-admin/docs/features/images/task-list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

375
plugins/woocommerce-admin/docs/features/onboarding-tasks.md
View File

@ -4,78 +4,127 @@ The onboarding tasks provides a way to help store owners get their sites quickly
The task list is easily extensible to allow inserting custom tasks around plugin setup that benefits store owners.
### Models and classes
<img src="./images/task-list.png" width="500px" alt="Onboarding Task List" />
#### TaskLists
## Adding a custom task
The `TaskLists` class acts as a data store for tasks and provides a way to add or retrieve tasks and lists.
### Step 1: Add your task in PHP
* `TaskLists::get_lists()` - Get all registered task lists
* `TaskLists::get_visible()` - Get visible task lists
* `TaskLists::get_list( $id )` - Get a list by ID
* `TaskLists::get_task( $id )` - Get a task by ID
* `TaskLists::add_list( $args )` - Add a list with the given arguments
* `TaskLists::add_task( $list_id, $args )` - Add a task to a given list ID
#### Task
**Arguments**
To add a custom task, you first need to create a new class that extends the `Task` class.
```php
$args = array(
'id' => 'my-task', // A unique task ID.
'title' => 'My Task', // Task title.
'content' => 'Task explanation and instructions', // Content shown in the task list item.
'action_label' => __( "Do the task!", 'woocommerce' ), // Text used for the action button.
'action_url' => 'http://wordpress.com/my/task', // URL used when clicking the task item in lieu of SlotFill.
'is_complete' => get_option( 'my-task-option', false ), // Determine if the task is complete.
'can_view' => 'US:CA' === wc_get_base_location(),
'level' => 3, // Priority level shown for extended tasks.
'time' => __( '2 minutes', 'plugin-text-domain' ), // Time string for time to complete the task.
'is_dismissable' => false, // Determine if the task is dismissable.
'is_snoozeable' => true, // Determine if the task is snoozeable.
'additional_info' => array( 'apples', 'oranges', 'bananas' ), // Additional info passed to the task.
)
$task = new Task( $args );
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
class MyTask extends Task {
public function get_id() {
return 'my-task';
}
public function get_title() {
return __( 'My task', 'woocommerce' );
}
public function get_content() {
return __( 'Add your task description here for display in the task list.', 'woocommerce');
}
public function get_time() {
return __( '2 minutes', 'woocommerce' );
}
}
```
**Methods**
You can then add the task to the task list by calling the `add_task` method on the `TaskLists` class.
* `$task->dismiss()` - Dismiss the task
* `$task->undo_dismiss()` - Undo dismissal of a task
* `$task->is_dismissed()` - Check if a task is dismissed
* `$task->snooze()` - Snooze a task for later
* `$task->undo_snooze()` - Undo snoozing of a task
* `$task->is_snoozed()` - Check if a task has been snoozed
* `$task->mark_actioned()` - Mark a task as actioned. Optional to help determine completion
* `$task->is_actioned()` - Check if a task has been actioned
* `$task->get_json()` - Get the camelcase JSON for use in the client
* `id` (int) - Task ID.
* `title` (string) - Task title.
* `canView` (bool) - If a task should be viewable on a given store.
* `content` (string) - Task content.
* `additionalInfo` (object) - Additional extensible information about the task.
* `actionLabel` (string) - The label used for the action button.
* `actionUrl` (string) - The URL used when clicking the task if no task card is required.
* `isComplete` (bool) - If the task has been completed or not.
* `time` (string) - Length of time to complete the task.
* `level` (integer) - A priority for task list sorting.
* `isActioned` (bool) - If a task has been actioned.
* `isDismissed` (bool) - If a task has been dismissed.
* `isDismissable` (bool) - Whether or not a task is dismissable.
* `isSnoozed` (bool) - If a task has been snoozed.
* `isSnoozeable` (bool) - Whether or not a task can be snoozed.
* `snoozedUntil` (int) - Timestamp in milliseconds that the task has been snoozed until.
```php
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists;
#### TaskList
TaskLists::add_task(
'extended', // The task list ID. See the TaskList section below for more information.
new MyTask(
$task_lists::get_list( 'extended' ), // The task list object.
)
);
```
**Arguments**
### Step 2 – Register the task in JavaScript.
Next, you have to add your task to the tasks list in JavaScript.
```jsx
import { __ } from '@wordpress/i18n';
import {
WooOnboardingTask,
WooOnboardingTaskListItem,
} from '@woocommerce/onboarding';
const Task = ( { onComplete, task, query } ) => {
// Implement your task UI/feature here.
return (
<div>
</div>
);
};
registerPlugin( 'add-task-content', {
render: () => (
<WooOnboardingTask id="my-task">
{ ( {
onComplete,
query,
task,
} ) => <Task onComplete={ onComplete } task={ task } query={ query } /> }
</WooOnboardingTask>
)
```
### Example
You can find a complete example of how to add a custom task as a WordPress plugin in the [examples directory](../examples/extensions/add-task/).
## Models and classes
### TaskLists
The `TaskLists` class serves as a data store for tasks, providing functionality to create, initialize, add tasks, retrieve task lists, and perform other task management operations.
#### Methods
- `TaskLists::instance()`: Returns the class instance of the `TaskLists` interface.
- `TaskLists::init()`: Initializes the task lists. This method should be called to set up the necessary configurations and hooks for task management.
- `TaskLists::is_experiment_treatment($name)`: Checks if an experiment is the treatment or control. This is internally used by Woo.
- `TaskLists::init_default_lists()`: Initializes the default task lists. This method adds predefined task lists with their properties and tasks.
- `TaskLists::init_tasks()`: Initializes the tasks. This method should be called to initialize the tasks associated with the task lists.
- `TaskLists::set_active_task()`: Temporarily stores the active task to persist across page loads when necessary. This method is used to manage active tasks.
- `TaskLists::add_list($args)`: Adds a task list with the specified properties.
- `TaskLists::add_task($list_id, $args)`: Adds a task to the specified task list.
- `TaskLists::maybe_add_extended_tasks($extended_tasks)`: Adds default extended task lists.
- `TaskLists::get_lists()`: Returns an array of all task lists.
- `TaskLists::get_lists_by_ids($ids)`: Returns an array of task lists filtered by the specified list IDs.
- `TaskLists::get_list_ids()`: Returns an array of all task list IDs.
- `TaskLists::clear_lists()`: Clears all task lists.
- `TaskLists::get_visible()`: Returns an array of visible task lists.
- `TaskLists::get_list($id)`: Retrieves a task list by its ID.
- `TaskLists::get_task($id, $task_list_id = null)`: Retrieves a single task.
- `TaskLists::setup_tasks_remaining()`: Return the number of setup tasks remaining.
- `TaskLists::menu_task_count()`: Adds a badge to the homescreen menu item for remaining tasks.
- `TaskLists::task_list_preloaded_settings($settings)`: Adds visible list IDs to component settings.
### TaskList
The `TaskList` class represents a task list. It contains properties and methods for managing task list. We currently have three predefined task lists
- `setup`: The default task list
- `extended`: The "Things to do next" task list
- `secret_tasklist`: The "Secret" task list that is used for having tasks that are accessed by other means.
#### Example & Arguments
```php
$args = array(
'id' => 'my-list', // A unique task list ID.
'title' => 'My List', // Task list title.
'sort_by' => array( // An array of keys to sort the tasks by.
'id' => 'my-list', // A unique task list ID.
'title' => 'My List', // Task list title.
'sort_by' => array( // An array of keys to sort the tasks by.
array(
'key' => 'is_complete',
'order' => 'asc',
@ -85,29 +134,138 @@ $args = array(
'order' => 'asc',
),
),
)
$list = new TaskList( $args );
'tasks' => array( /* Array of Task objects */ ), // Optional: Initialize with pre-existing tasks.
'display_progress_header' => true, // Optional: Whether to display the progress header.
'event_prefix' => 'tasklist_', // Optional: Event prefix for task-related events.
'options' => array(
'use_completed_title' => true, // Optional: Whether to use a completed title for the task list.
),
'visible' => true, // Optional: Whether the task list is visible.
);
$task_list = new TaskList($args);
```
**Methods**
#### Methods
* `$task_list->is_hidden()` - Check if a task list is hidden
* `$task_list->is_visible()` - Check if a task list is visible (opposite value of `is_hidden()`)
* `$task_list->hide()` - Hide a task list
* `$task_list->unhide()` - Undo hiding of a task list
* `$task_list->is_complete()` - Check if a task list is complete
* `$task_list->add_task( $args )` - Add a task to a task list
* `$task_list->get_viewable_tasks()` - Get tasks that are marked as `can_view` for the store
* `$task_list->sort_tasks( $sort_by )` - Sort the tasks by the provided `sort_by` value or the task list `sort_by` property if no argument is passed.
* `$task_list->get_json()` - Get the camelcase JSON for use in the client
* `id` (int) - Task list ID.
* `title` (string) - Task list title.
* `isHidden` (bool) - If a task has been hidden.
* `isVisible` (bool) - If a task list is visible.
* `isComplete` (bool) - Whether or not all viewable tasks have been completed.
* `tasks` (array) - An array of `Task` objects.
- `$task_list::get_list_id()`: Returns the ID of the task list.
- `$task_list::get_title()`: Returns the title of the task list.
- `$task_list::get_tasks()`: Returns an array of tasks associated with the task list.
- `$task_list::add_task($task)`: Adds a task to the task list.
- `$task_list::remove_task($task_id)`: Removes a task from the task list based on its ID.
- `$task_list::has_task($task_id)`: Checks if the task list contains a task with the specified ID.
- `$task_list::get_task($task_id)`: Retrieves a task from the task list based on its ID.
- `$task_list::get_viewable_tasks()`: Returns an array of viewable tasks within the task list.
- `$task_list::is_visible()`: Checks if the task list is visible.
- `$task_list::is_hidden()`: Checks if the task list is hidden.
- `$task_list::is_complete()`: Checks if all tasks in the task list are complete.
- `$task_list::get_completed_count()`: Returns the count of completed tasks in the task list.
- `$task_list::get_total_count()`: Returns the total count of tasks in the task list.
- `$task_list::get_progress_percentage()`: Returns the progress percentage of the task list.
- `$task_list::get_sorted_tasks($sort_by)`: Returns the tasks sorted based on the specified sorting criteria.
- `$task_list::get_json()`: Returns the JSON representation of the task list.
- `$task_list->get_json()` - Get the camelcase JSON for use in the client
- `id` (int) - Task list ID.
- `title` (string) - Task list title.
- `isHidden` (bool) - If a task has been hidden.
- `isVisible` (bool) - If a task list is visible.
- `isComplete` (bool) - Whether or not all viewable tasks have been completed.
- `tasks` (array) - An array of `Task` objects.
#### Data store actions
### Task
The `Task` class represents a task. It contains properties and methods for managing tasks. You can see the predefined tasks in [this directory](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks).
Please note that the `Task` class is abstract and intended to be extended by custom task classes.
#### Example
```php
<?php
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
class MyTask extends Task {
public function get_id() {
// Return a unique identifier for your task
}
public function get_title() {
// Return the title of your task
}
public function get_content() {
// Return the content/explanation of your task
}
public function get_time() {
// Return the estimated time to complete the task
}
// Implement other abstract methods as needed
}
// Add MyTask to "test-list" task list
TaskLists::add_task(
'test-list',
new MyTask(
TaskLists::get_list( 'test-list' )
)
);
```
### Methods
- `$task->get_id(): string`: Returns the ID of the task.
- `$task->get_title(): string`: Returns the title of the task.
- `$task->get_content(): string`: Returns the content of the task.
- `$task->get_time(): string`: Returns the estimated time to complete the task.
- `$task->get_parent_id(): string`: Returns the ID of the parent task list.
- `$task->get_parent_options(): array`: Returns the options of the parent task list.
- `$task->get_parent_option($option_name): mixed|null`: Returns the value of a specific option from the parent task list.
- `$task->prefix_event($event_name): string`: Returns the event name prefixed with the task list's event prefix.
- `$task->get_additional_info(): string`: Returns additional information about the task. Typically includes details, notes, or instructions related to the task itself.
- `$task->get_additional_data(): mixed|null`: Returns additional data associated with the task. It can be any type of data, such as arrays, objects, or simple values.
- `$task->get_action_label(): string`: Returns the label for the action button of the task.
- `$task->get_action_url(): string|null`: Returns the URL associated with the task's action.
- `$task->is_dismissable(): bool`: Checks if the task is dismissable.
- `$task->is_dismissed(): bool`: Checks if the task is dismissed.
- `$task->dismiss(): bool`: Dismisses the task.
- `$task->undo_dismiss(): bool`: Undoes the dismissal of the task.
- `$task->has_previously_completed(): bool`: Checks if the task has been completed in the past.
- `$task->possibly_track_completion(): void`: Tracks the completion of the task if necessary.
- `$task->set_active(): void`: Sets the task as the active task.
- `$task->is_active(): bool`: Checks if the task is the active task.
- `$task->can_view(): bool`: Checks if the task can be viewed based on store capabilities.
- `$task->is_complete(): bool`: Checks if the task is complete.
- `$task->is_visited(): bool`: Checks if the task has been visited.
- `$task->get_record_view_event(): bool`: Checks if the task view event should be recorded.
- `$task->convert_object_to_camelcase($data): object`: Converts an array's keys to camel case.
- `$task->mark_actioned(): bool`: Marks the task as actioned.
- `$task->is_actioned(): bool`: Checks if the task has been actioned.
- `$task->is_task_actioned($id): bool`: Checks if a specific task has been actioned.
- `$task->sort($a, $b, $sort_by): int`: Sorts tasks based on given sort criteria.
- `$task->get_json(): array`: Returns the task data as a JSON-formatted array.
- `id` (int) - Task ID.
- `title` (string) - Task title.
- `canView` (bool) - If a task should be viewable on a given store.
- `content` (string) - Task content.
- `additionalInfo` (object) - Additional extensible information about the task.
- `actionLabel` (string) - The label used for the action button.
- `actionUrl` (string) - The URL used when clicking the task if no task card is required.
- `isComplete` (bool) - If the task has been completed or not.
- `time` (string) - Length of time to complete the task.
- `level` (integer) - A priority for task list sorting.
- `isActioned` (bool) - If a task has been actioned.
- `isDismissed` (bool) - If a task has been dismissed.
- `isDismissable` (bool) - Whether or not a task is dismissable.
- `isSnoozed` (bool) - If a task has been snoozed.
- `isSnoozeable` (bool) - Whether or not a task can be snoozed.
- `snoozedUntil` (int) - Timestamp in milliseconds that the task has been snoozed until.
## Frontend
We use the `@woocommerce/onboarding` package to render the onboarding task lists on the frontend and use the `@woocommerce/data` package to interact with the onboarding store.
### Data store actions
Using the `@woocommerce/data` package, the following selectors and actions are available to interact with the task lists under the onboarding store.
@ -125,64 +283,63 @@ const { taskLists } = useSelect( ( select ) => {
} );
```
- `getTaskLists` - (select) Resolve any registered task lists with their nested tasks
- `hideTaskList( id )` - (dispatch) Hide a task list
- `actionTask( id )` - (dispatch) Mark a task as actioned
- `dismissTask( id )` - (dispatch) Dismiss a task
- `undoDismissTask( id )` - (dispatch) Undo task dismiss
- `optimisticallyCompleteTask( id )` - (dispatch) Optimistically mark a task as complete
* `getTaskLists` - (select) Resolve any registered task lists with their nested tasks
* `hideTaskList( id )` - (dispatch) Hide a task list
* `actionTask( id )` - (dispatch) Mark a task as actioned
* `snoozeTask( id )` - (dispatch) Snooze a task
* `dismissTask( id )` - (dispatch) Dismiss a task
* `optimisticallyCompleteTask( id )` - (dispatch) Optimistically mark a task as complete
### API Endpoints
The following REST endpoints are available to interact with tasks. For ease of use, we recommend using the data store actions above to interact with these endpoints.
- `/wc-admin/onboarding/tasks` (GET) - Retrieve all tasks and their statuses
- `/wc-admin/onboarding/tasks/{list_id}/hide` (POST) - Hide a given task list
- `/wc-admin/onboarding/tasks/{task_id}/unhide` (POST) - Un-hide a given task list
- `/wc-admin/onboarding/tasks/{task_id}/dismiss` (POST) - Dismiss a task
- `/wc-admin/onboarding/tasks/{task_id}/undo_dismiss` (POST) - Undo dismissal of a task
- `/wc-admin/onboarding/tasks/{task_id}/action` (POST) - Mark a task as actioned
### SlotFills
The task UI can be supplemented by registering plugins that fill the provided task slots.
The task UI can be supplemented by registering plugins that fill the provided task slots. Learn more about slot fills in the [SlotFill documentation](https://developer.wordpress.org/block-editor/reference-guides/slotfills/) and [here](https://developer.wordpress.org/block-editor/reference-guides/components/slot-fill/).
#### Task content
### Task content
A task list fill is required if no `action_url` is provided for the task. This is the content shown after a task list item has been clicked.
A task list fill is required if no `action_url` is provided for the task. This is the content shown after a task list item has been clicked.
```js
import { registerPlugin } from '@wordpress/plugins';
import { WooOnboardingTask } from '@woocommerce/onboarding';
registerPlugin( 'my-task-plugin', {
scope: 'woocommerce-tasks',
render: () => (
scope: 'woocommerce-tasks',
render: () => (
<WooOnboardingTask id="my-task">
{ ( { onComplete, query } ) => (
<MyTask onComplete={ onComplete } />
{ ( { onComplete, query, task } ) => (
<MyTask onComplete={ onComplete } query={ query } task={ task } />
) }
</WooOnboardingTask>
),
),
} );
```
#### Task list item
The items shown in the list can be customized beyond the default task list item. This can allow for custom appearance or specific `onClick` behavior for your task.
### Task list item
The items shown in the list can be customized beyond the default task list item. This can allow for custom appearance or specific `onClick` behavior for your task. For example, we're using this to install and activate WooCommerce Payments when clicking on the WooCommerce Payment task
```js
import { WooOnboardingTaskListItem } from '@woocommerce/onboarding';
registerPlugin( 'my-task-list-item-plugin', {
scope: 'woocommerce-tasks',
render: () => (
scope: 'woocommerce-tasks',
render: () => (
<WooOnboardingTaskListItem id="appearance">
{ ( { defaultTaskItem, onComplete } ) => (
<MyTaskListItem onComplete={ onComplete } />
) }
</WooOnboardingTaskListItem>
),
),
} );
```
### Endpoints
The following REST endpoints are available to interact with tasks. For ease of use, we recommend using the data store actions above to interact with these endpoints.
* `/wc-admin/onboarding/tasks` (GET) - Retrieve all tasks and their statuses
* `/wc-admin/onboarding/tasks/{list_id}/hide` (POST) - Hide a given task list
* `/wc-admin/onboarding/tasks/{task_id}/dismiss` (POST) - Dismiss a task
* `/wc-admin/onboarding/tasks/{task_id}/undo_dismiss` (POST) - Undo dismissal of a task
* `/wc-admin/onboarding/tasks/{task_id}/snooze` (POST) - Snooze a task for later
* `/wc-admin/onboarding/tasks/{task_id}/undo_snooze` (POST) - Undo snoozing of a task
* `/wc-admin/onboarding/tasks/{task_id}/action` (POST) - Mark a task as actioned

4
plugins/woocommerce/changelog/dev-update-task-list-docs-example Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Update tasklist documentation/example