セレクタ

getNotices

指定されたコンテキストのすべての通知を配列として返します。デフォルトはグローバルコンテキストです。

使用法 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as noticesStore } from '@wordpress/notices';
  4. const ExampleComponent = () => {
  5.    const notices = useSelect( ( select ) =>
  6.    select( noticesStore ).getNotices()
  7.    );
  8.    return (
  9.    <ul>
  10.    { notices.map( ( notice ) => (
  11.    <li key={ notice.ID }>{ notice.content }</li>
  12.    ) ) }
  13.    </ul>
  14.    );
  15. };

パラメータ

  • state Object: 通知の状態。
  • context ?string: オプションのグルーピングコンテキスト。

返り値

  • WPNotice[]: 通知の配列。

アクション

createErrorNotice

エラー通知を作成することを示すために使用されるアクションオブジェクトを返します。オプションのドキュメントについてはcreateNoticeを参照してください。

関連

  • createNotice

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const { createErrorNotice } = useDispatch( noticesStore );
  8.    return (
  9.    <Button
  10.    onClick={ () =>
  11.    createErrorNotice( __( 'An error occurred!' ), {
  12.    type: 'snackbar',
  13.    explicitDismiss: true,
  14.    } )
  15.    }
  16.    >
  17.    { __(
  18.    'Generate an snackbar error notice with explicit dismiss button.'
  19.    ) }
  20.    </Button>
  21.    );
  22. };

パラメータ

  • content string: 通知メッセージ。
  • options [Object]: オプションの通知オプション。

返り値

  • Object: アクションオブジェクト。

createInfoNotice

情報通知を作成することを示すために使用されるアクションオブジェクトを返します。オプションのドキュメントについてはcreateNoticeを参照してください。

関連

  • createNotice

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const { createInfoNotice } = useDispatch( noticesStore );
  8.    return (
  9.    <Button
  10.    onClick={ () =>
  11.    createInfoNotice( __( 'Something happened!' ), {
  12.    isDismissible: false,
  13.    } )
  14.    }
  15.    >
  16.    { __( 'Generate a notice that cannot be dismissed.' ) }
  17.    </Button>
  18.    );
  19. };

パラメータ

  • content string: 通知メッセージ。
  • options [Object]: オプションの通知オプション。

返り値

  • Object: アクションオブジェクト。

createNotice

通知を作成することを示すために使用されるアクションオブジェクトを返します。

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const { createNotice } = useDispatch( noticesStore );
  8.    return (
  9.    <Button
  10.    onClick={ () => createNotice( 'success', __( 'Notice message' ) ) }
  11.    >
  12.    { __( 'Generate a success notice!' ) }
  13.    </Button>
  14.    );
  15. };

パラメータ

  • status string|undefined: 通知の状態（未定義の場合は「info」）。
  • content string: 通知メッセージ。
  • options [Object]: 通知オプション。
  • options.context [string]: 通知をグループ化するためのコンテキスト。
  • options.id [string]: 通知の識別子。指定されていない場合は自動的に割り当てられます。
  • options.isDismissible [boolean]: ユーザーが通知を閉じることができるかどうか。
  • options.type [string]: 通知のタイプ、defaultまたはsnackbarのいずれか。
  • options.speak [boolean]: 通知の内容をスクリーンリーダーに発表するかどうか。
  • options.actions [Array<WPNoticeAction>]: 通知と共に表示されるユーザーアクション。
  • options.icon [string]: 通知と共に表示されるアイコン。タイプがsnackbarに設定されている場合のみ使用されます。
  • options.explicitDismiss [boolean]: 通知に明示的な閉じるボタンが含まれているかどうか、通知の本文をクリックして閉じることができないかどうか。タイプがsnackbarに設定されている場合のみ適用されます。
  • options.onDismiss [Function]: 通知が閉じられたときに呼び出されます。

返り値

  • Object: アクションオブジェクト。

createSuccessNotice

成功通知を作成することを示すために使用されるアクションオブジェクトを返します。オプションのドキュメントについてはcreateNoticeを参照してください。

関連

  • createNotice

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const { createSuccessNotice } = useDispatch( noticesStore );
  8.    return (
  9.    <Button
  10.    onClick={ () =>
  11.    createSuccessNotice( __( 'Success!' ), {
  12.    type: 'snackbar',
  13.    icon: '',
  14.    } )
  15.    }
  16.    >
  17.    { __( 'Generate a snackbar success notice!' ) }
  18.    </Button>
  19.    );
  20. };

パラメータ

  • content string: 通知メッセージ。
  • options [Object]: オプションの通知オプション。

返り値

  • Object: アクションオブジェクト。

createWarningNotice

警告通知を作成することを示すために使用されるアクションオブジェクトを返します。オプションのドキュメントについてはcreateNoticeを参照してください。

関連

  • createNotice

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const { createWarningNotice, createInfoNotice } =
  8.    useDispatch( noticesStore );
  9.    return (
  10.    <Button
  11.    onClick={ () =>
  12.    createWarningNotice( __( 'Warning!' ), {
  13.    onDismiss: () => {
  14.    createInfoNotice(
  15.    __( 'The warning has been dismissed!' )
  16.    );
  17.    },
  18.    } )
  19.    }
  20.    >
  21.    { __( 'Generates a warning notice with onDismiss callback' ) }
  22.    </Button>
  23.    );
  24. };

パラメータ

  • content string: 通知メッセージ。
  • options [Object]: オプションの通知オプション。

返り値

  • Object: アクションオブジェクト。

removeAllNotices

指定されたコンテキストからすべての通知を削除します。デフォルトはデフォルトコンテキストです。

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch, useSelect } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. export const ExampleComponent = () => {
  7.    const notices = useSelect( ( select ) =>
  8.    select( noticesStore ).getNotices()
  9.    );
  10.    const { removeAllNotices } = useDispatch( noticesStore );
  11.    return (
  12.    <>
  13.    <ul>
  14.    { notices.map( ( notice ) => (
  15.    <li key={ notice.id }>{ notice.content }</li>
  16.    ) ) }
  17.    </ul>
  18.    <Button onClick={ () => removeAllNotices() }>
  19.    { __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
  20.    </Button>
  21.    <Button onClick={ () => removeAllNotices( 'snackbar' ) }>
  22.    { __(
  23.    'Clear all snackbar notices',
  24.    'woo-gutenberg-products-block'
  25.    ) }
  26.    </Button>
  27.    </>
  28.    );
  29. };

パラメータ

  • noticeType string: すべての通知を削除するコンテキスト。
  • context string: すべての通知を削除するコンテキスト。

返り値

  • Object: アクションオブジェクト。

removeNotice

通知を削除することを示すために使用されるアクションオブジェクトを返します。

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const notices = useSelect( ( select ) =>
  8.    select( noticesStore ).getNotices()
  9.    );
  10.    const { createWarningNotice, removeNotice } = useDispatch( noticesStore );
  12.    return (
  13.    <>
  14.    <Button
  15.    onClick={ () =>
  16.    createWarningNotice( __( 'Warning!' ), {
  17.    isDismissible: false,
  18.    } )
  19.    }
  20.    >
  21.    { __( 'Generate a notice' ) }
  22.    </Button>
  23.    { notices.length > 0 && (
  24.    <Button onClick={ () => removeNotice( notices[ 0 ].id ) }>
  25.    { __( 'Remove the notice' ) }
  26.    </Button>
  27.    ) }
  28.    </>
  29.    );
  30. };

パラメータ

  • id string: 通知のユニーク識別子。
  • context [string]: 通知が表示されることを意図したオプションのコンテキスト（グルーピング）。デフォルトはデフォルトコンテキストです。

返り値

  • Object: アクションオブジェクト。

removeNotices

複数の通知を削除することを示すために使用されるアクションオブジェクトを返します。

使用法 

  1. import { __ } from '@wordpress/i18n';
  2. import { useDispatch, useSelect } from '@wordpress/data';
  3. import { store as noticesStore } from '@wordpress/notices';
  4. import { Button } from '@wordpress/components';
  6. const ExampleComponent = () => {
  7.    const notices = useSelect( ( select ) =>
  8.    select( noticesStore ).getNotices()
  9.    );
  10.    const { removeNotices } = useDispatch( noticesStore );
  11.    return (
  12.    <>
  13.    <ul>
  14.    { notices.map( ( notice ) => (
  15.    <li key={ notice.id }>{ notice.content }</li>
  16.    ) ) }
  17.    </ul>
  18.    <Button
  19.    onClick={ () =>
  20.    removeNotices( notices.map( ( { id } ) => id ) )
  21.    }
  22.    >
  23.    { __( 'Clear all notices' ) }
  24.    </Button>
  25.    </>
  26.    );
  27. };

パラメータ

  • ids string[]: ユニークな通知識別子のリスト。
  • context [string]: 通知が表示されることを意図したオプションのコンテキスト（グルーピング）。デフォルトはデフォルトコンテキストです。

返り値

  • Object: アクションオブジェクト。