{"id":134613,"date":"2021-03-09T08:38:24","date_gmt":"2021-03-09T08:38:24","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/"},"modified":"2026-06-07T06:31:38","modified_gmt":"2026-06-07T06:31:38","slug":"data-core-notices","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/","title":{"rendered":"Notices Data"},"content":{"rendered":"

Namespace: core\/notices<\/code>.<\/p>\n

Selectors<\/h2>\n

<\/p>\n

getNotices<\/h3>\n

Returns all notices as an array, optionally for a given context. Defaults to the global context.<\/p>\n

Usage<\/em><\/p>\n

import { useSelect } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\n\nconst ExampleComponent = () => {\n    const notices = useSelect( ( select ) =>\n        select( noticesStore ).getNotices()\n    );\n    return (\n        <ul>\n            { notices.map( ( notice ) => (\n                <li key={ notice.ID }>{ notice.content }<\/li>\n            ) ) }\n        <\/ul>\n    );\n};\n<\/code><\/pre>\n
Parameters<\/em><\/p>\n
    \n
  • state<\/em> Record< string, Array< Notice > ><\/code>: Notices state.<\/li>\n
  • context<\/em> string<\/code>: Optional grouping context.<\/li>\n<\/ul>\n
    Returns<\/em><\/p>\n
      \n
    • Array of notices.<\/li>\n<\/ul>\n
      <\/p>\n
      Actions<\/h2>\n
      <\/p>\n
      createErrorNotice<\/h3>\n
      Returns an action object used in signalling that an error notice is to be created. Refer to createNotice<\/code> for options documentation.<\/p>\n
      Related<\/em><\/p>\n
        \n
      • createNotice<\/li>\n<\/ul>\n
        Usage<\/em><\/p>\n
        import { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const { createErrorNotice } = useDispatch( noticesStore );\n    return (\n        <Button\n            onClick={ () =>\n                createErrorNotice( __( 'An error occurred!' ), {\n                    type: 'snackbar',\n                    explicitDismiss: true,\n                } )\n            }\n        >\n            { __(\n                'Generate a snackbar error notice with explicit dismiss button.'\n            ) }\n        <\/Button>\n    );\n};\n<\/code><\/pre>\n
        Parameters<\/em><\/p>\n
          \n
        • content<\/em> string<\/code>: Notice message.<\/li>\n
        • options<\/em> NoticeOptions<\/code>: Optional notice options.<\/li>\n<\/ul>\n
          Returns<\/em><\/p>\n
            \n
          • Action object.<\/li>\n<\/ul>\n
            createInfoNotice<\/h3>\n
            Returns an action object used in signalling that an info notice is to be created. Refer to createNotice<\/code> for options documentation.<\/p>\n
            Related<\/em><\/p>\n
              \n
            • createNotice<\/li>\n<\/ul>\n
              Usage<\/em><\/p>\n
              import { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const { createInfoNotice } = useDispatch( noticesStore );\n    return (\n        <Button\n            onClick={ () =>\n                createInfoNotice( __( 'Something happened!' ), {\n                    isDismissible: false,\n                } )\n            }\n        >\n            { __( 'Generate a notice that cannot be dismissed.' ) }\n        <\/Button>\n    );\n};\n<\/code><\/pre>\n
              Parameters<\/em><\/p>\n
                \n
              • content<\/em> string<\/code>: Notice message.<\/li>\n
              • options<\/em> NoticeOptions<\/code>: Optional notice options.<\/li>\n<\/ul>\n
                Returns<\/em><\/p>\n
                  \n
                • Action object.<\/li>\n<\/ul>\n
                  createNotice<\/h3>\n
                  Returns an action object used in signalling that a notice is to be created.<\/p>\n
                  Usage<\/em><\/p>\n
                  import { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const { createNotice } = useDispatch( noticesStore );\n    return (\n        <Button\n            onClick={ () => createNotice( 'success', __( 'Notice message' ) ) }\n        >\n            { __( 'Generate a success notice!' ) }\n        <\/Button>\n    );\n};\n<\/code><\/pre>\n
                  Parameters<\/em><\/p>\n
                    \n
                  • status<\/em> Notice status (“info” if undefined is passed).<\/li>\n
                  • content<\/em> string<\/code>: Notice message.<\/li>\n
                  • options<\/em> NoticeOptions<\/code>: Optional notice options.<\/li>\n<\/ul>\n
                    Returns<\/em><\/p>\n
                      \n
                    • Extract< ReducerAction, { type: 'CREATE_NOTICE'; } ><\/code>: Action object.<\/li>\n<\/ul>\n
                      createSuccessNotice<\/h3>\n
                      Returns an action object used in signalling that a success notice is to be created. Refer to createNotice<\/code> for options documentation.<\/p>\n
                      Related<\/em><\/p>\n
                        \n
                      • createNotice<\/li>\n<\/ul>\n
                        Usage<\/em><\/p>\n
                        import { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const { createSuccessNotice } = useDispatch( noticesStore );\n    return (\n        <Button\n            onClick={ () =>\n                createSuccessNotice( __( 'Success!' ), {\n                    type: 'snackbar',\n                    icon: '\ud83d\udd25',\n                } )\n            }\n        >\n            { __( 'Generate a snackbar success notice!' ) }\n        <\/Button>\n    );\n};\n<\/code><\/pre>\n
                        Parameters<\/em><\/p>\n
                          \n
                        • content<\/em> string<\/code>: Notice message.<\/li>\n
                        • options<\/em> NoticeOptions<\/code>: Optional notice options.<\/li>\n<\/ul>\n
                          Returns<\/em><\/p>\n
                            \n
                          • Action object.<\/li>\n<\/ul>\n
                            createWarningNotice<\/h3>\n
                            Returns an action object used in signalling that a warning notice is to be created. Refer to createNotice<\/code> for options documentation.<\/p>\n
                            Related<\/em><\/p>\n
                              \n
                            • createNotice<\/li>\n<\/ul>\n
                              Usage<\/em><\/p>\n
                              import { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const { createWarningNotice, createInfoNotice } =\n        useDispatch( noticesStore );\n    return (\n        <Button\n            onClick={ () =>\n                createWarningNotice( __( 'Warning!' ), {\n                    onDismiss: () => {\n                        createInfoNotice(\n                            __( 'The warning has been dismissed!' )\n                        );\n                    },\n                } )\n            }\n        >\n            { __( 'Generates a warning notice with onDismiss callback' ) }\n        <\/Button>\n    );\n};\n<\/code><\/pre>\n
                              Parameters<\/em><\/p>\n
                                \n
                              • content<\/em> string<\/code>: Notice message.<\/li>\n
                              • options<\/em> NoticeOptions<\/code>: Optional notice options.<\/li>\n<\/ul>\n
                                Returns<\/em><\/p>\n
                                  \n
                                • Action object.<\/li>\n<\/ul>\n
                                  removeAllNotices<\/h3>\n
                                  Removes all notices from a given context. Defaults to the default context.<\/p>\n
                                  Usage<\/em><\/p>\n
                                  import { __ } from '@wordpress\/i18n';\nimport { useDispatch, useSelect } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nexport const ExampleComponent = () => {\n    const notices = useSelect( ( select ) =>\n        select( noticesStore ).getNotices()\n    );\n    const { removeAllNotices } = useDispatch( noticesStore );\n    return (\n        <>\n            <ul>\n                { notices.map( ( notice ) => (\n                    <li key={ notice.id }>{ notice.content }<\/li>\n                ) ) }\n            <\/ul>\n            <Button onClick={ () => removeAllNotices() }>\n                { __( 'Clear all notices', 'woo-gutenberg-products-block' ) }\n            <\/Button>\n            <Button onClick={ () => removeAllNotices( 'snackbar' ) }>\n                { __(\n                    'Clear all snackbar notices',\n                    'woo-gutenberg-products-block'\n                ) }\n            <\/Button>\n        <\/>\n    );\n};\n<\/code><\/pre>\n
                                  Parameters<\/em><\/p>\n
                                    \n
                                  • noticeType<\/em> The context to remove all notices from.<\/li>\n
                                  • context<\/em> string<\/code>: The optional context to remove all notices from.<\/li>\n<\/ul>\n
                                    Returns<\/em><\/p>\n
                                      \n
                                    • Extract< ReducerAction, { type: 'REMOVE_ALL_NOTICES'; } ><\/code>: Action object.<\/li>\n<\/ul>\n
                                      removeNotice<\/h3>\n
                                      Returns an action object used in signalling that a notice is to be removed.<\/p>\n
                                      Usage<\/em><\/p>\n
                                      import { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const notices = useSelect( ( select ) =>\n        select( noticesStore ).getNotices()\n    );\n    const { createWarningNotice, removeNotice } = useDispatch( noticesStore );\n\n    return (\n        <>\n            <Button\n                onClick={ () =>\n                    createWarningNotice( __( 'Warning!' ), {\n                        isDismissible: false,\n                    } )\n                }\n            >\n                { __( 'Generate a notice' ) }\n            <\/Button>\n            { notices.length > 0 && (\n                <Button onClick={ () => removeNotice( notices[ 0 ].id ) }>\n                    { __( 'Remove the notice' ) }\n                <\/Button>\n            ) }\n        <\/>\n    );\n};\n<\/code><\/pre>\n
                                      Parameters<\/em><\/p>\n
                                        \n
                                      • id<\/em> string<\/code>: Notice unique identifier.<\/li>\n
                                      • context<\/em> string<\/code>: Optional context (grouping) in which the notice is intended to appear. Defaults to ‘default’ context.<\/li>\n<\/ul>\n
                                        Returns<\/em><\/p>\n
                                          \n
                                        • Extract< ReducerAction, { type: 'REMOVE_NOTICE'; } ><\/code>: Action object.<\/li>\n<\/ul>\n
                                          removeNotices<\/h3>\n
                                          Returns an action object used in signalling that several notices are to be removed.<\/p>\n
                                          Usage<\/em><\/p>\n
                                          import { __ } from '@wordpress\/i18n';\nimport { useDispatch, useSelect } from '@wordpress\/data';\nimport { store as noticesStore } from '@wordpress\/notices';\nimport { Button } from '@wordpress\/components';\n\nconst ExampleComponent = () => {\n    const notices = useSelect( ( select ) =>\n        select( noticesStore ).getNotices()\n    );\n    const { removeNotices } = useDispatch( noticesStore );\n    return (\n        <>\n            <ul>\n                { notices.map( ( notice ) => (\n                    <li key={ notice.id }>{ notice.content }<\/li>\n                ) ) }\n            <\/ul>\n            <Button\n                onClick={ () =>\n                    removeNotices( notices.map( ( { id } ) => id ) )\n                }\n            >\n                { __( 'Clear all notices' ) }\n            <\/Button>\n        <\/>\n    );\n};\n<\/code><\/pre>\n
                                          Parameters<\/em><\/p>\n
                                            \n
                                          • ids<\/em> Array< string ><\/code>: List of unique notice identifiers.<\/li>\n
                                          • context<\/em> string<\/code>: Optional context (grouping) in which the notices are intended to appear. Defaults to ‘default’ context.<\/li>\n<\/ul>\n
                                            Returns<\/em><\/p>\n
                                              \n
                                            • Extract< ReducerAction, { type: 'REMOVE_NOTICES'; } ><\/code>: Action object.<\/li>\n<\/ul>\n
                                              <\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134606,"menu_order":500,"template":"","meta":{"footnotes":""},"class_list":["post-134613","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":15,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134613\/revisions"}],"predecessor-version":[{"id":160680,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134613\/revisions\/160680"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134606"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}