Packages: Add notices package (#9617)

* Packages: Add notices package Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]> * Notices: Add actions support Makes spokenMessage redundant by ensuring content is to be only assigned as plain string Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]> * Editor: Port deprecated notices action to module usage
WordPress · Oct 27, 2018 · 80f625c · 80f625c
1 parent 306cee8
commit 80f625c
Show file tree

Hide file tree

Showing 47 changed files with 1,134 additions and 502 deletions.
diff --git a/docs/data/README.md b/docs/data/README.md
@@ -4,5 +4,6 @@
  - [**core/blocks**: Block Types Data](../../docs/data/data-core-blocks.md)
  - [**core/editor**: The Editor’s Data](../../docs/data/data-core-editor.md)
  - [**core/edit-post**: The Editor’s UI Data](../../docs/data/data-core-edit-post.md)
+ - [**core/notices**: Notices Data](../../docs/data/data-core-notices.md)
  - [**core/nux**: The NUX (New User Experience) Data](../../docs/data/data-core-nux.md)
  - [**core/viewport**: The Viewport Data](../../docs/data/data-core-viewport.md)
diff --git a/docs/data/data-core-editor.md b/docs/data/data-core-editor.md
@@ -1061,18 +1061,6 @@ before falling back to serialization of block state.
 
 Post content.
 
-### getNotices
-
-Returns the user notices array.
-
-*Parameters*
-
- * state: Global application state.
-
-*Returns*
-
-List of notices.
-
 ### canInsertBlockType
 
 Determines if the given block type is allowed to be inserted, and, if
@@ -1382,7 +1370,6 @@ the specified post object and editor settings.
 *Parameters*
 
  * post: Post object.
- * autosaveStatus: The Post's autosave status.
 
 ### resetPost
 
@@ -1636,26 +1623,6 @@ Returns an action object used in signalling that the user has begun to type.
 
 Returns an action object used in signalling that the user has stopped typing.
 
-### createNotice
-
-Returns an action object used to create a notice.
-
-*Parameters*
-
- * status: The notice status.
- * content: The notice content.
- * options: The notice options.  Available options:
-                             `id` (string; default auto-generated)
-                             `isDismissible` (boolean; default `true`).
-
-### removeNotice
-
-Returns an action object used to remove a notice.
-
-*Parameters*
-
- * id: The notice id.
-
 ### updatePostLock
 
 Returns an action object used to lock the editor.
@@ -1780,4 +1747,6 @@ Returns an action object used to signal that post saving is unlocked.
 
 *Parameters*
 
- * lockName: The lock name.
+ * lockName: The lock name.
+
+### createNotice
diff --git a/docs/data/data-core-notices.md b/docs/data/data-core-notices.md
@@ -0,0 +1,86 @@
+# **core/notices**: Notices Data
+
+## Selectors
+
+### getNotices
+
+Returns all notices as an array, optionally for a given context. Defaults to
+the global context.
+
+*Parameters*
+
+ * state: Notices state.
+ * context: Optional grouping context.
+
+## Actions
+
+### createNotice
+
+Yields action objects used in signalling that a notice is to be created.
+
+*Parameters*
+
+ * status: Notice status.
+                                                      Defaults to `info`.
+ * content: Notice message.
+ * options: Notice options.
+ * options.context: Context under which to
+                                                      group notice.
+ * options.id: Identifier for notice.
+                                                      Automatically assigned
+                                                      if not specified.
+ * options.isDismissible: Whether the notice can
+                                                      be dismissed by user.
+                                                      Defaults to `true`.
+ * options.actions: User actions to be
+                                                      presented with notice.
+
+### createSuccessNotice
+
+Returns an action object used in signalling that a success notice is to be
+created. Refer to `createNotice` for options documentation.
+
+*Parameters*
+
+ * content: Notice message.
+ * options: Optional notice options.
+
+### createInfoNotice
+
+Returns an action object used in signalling that an info notice is to be
+created. Refer to `createNotice` for options documentation.
+
+*Parameters*
+
+ * content: Notice message.
+ * options: Optional notice options.
+
+### createErrorNotice
+
+Returns an action object used in signalling that an error notice is to be
+created. Refer to `createNotice` for options documentation.
+
+*Parameters*
+
+ * content: Notice message.
+ * options: Optional notice options.
+
+### createWarningNotice
+
+Returns an action object used in signalling that a warning notice is to be
+created. Refer to `createNotice` for options documentation.
+
+*Parameters*
+
+ * content: Notice message.
+ * options: Optional notice options.
+
+### removeNotice
+
+Returns an action object used in signalling that a notice is to be removed.
+
+*Parameters*
+
+ * id: Notice unique identifier.
+ * context: Optional context (grouping) in which the notice is
+                         intended to appear. Defaults to default context.
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -461,6 +461,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/list-reusable-blocks/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/notices",
+		"slug": "packages-notices",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/notices/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/npm-package-json-lint-config",
 		"slug": "packages-npm-package-json-lint-config",
@@ -935,6 +941,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-edit-post.md",
 		"parent": "data"
 	},
+	{
+		"title": "Notices Data",
+		"slug": "data-core-notices",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-notices.md",
+		"parent": "data"
+	},
 	{
 		"title": "The NUX (New User Experience) Data",
 		"slug": "data-core-nux",

diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
@@ -4,6 +4,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 
 - `wp.date.getSettings` has been removed. Please use `wp.date.__experimentalGetSettings` instead.
 - `wp.compose.remountOnPropChange` has been removed.
+- The following editor store actions have been removed: `createNotice`, `removeNotice`, `createSuccessNotice`, `createInfoNotice`, `createErrorNotice`, `createWarningNotice`. Use the equivalent actions by the same name from the `@wordpress/notices` module.
 
 ## 4.3.0
 

diff --git a/docs/tool/config.js b/docs/tool/config.js
@@ -30,6 +30,11 @@ module.exports = {
 			selectors: [ path.resolve( root, 'packages/edit-post/src/store/selectors.js' ) ],
 			actions: [ path.resolve( root, 'packages/edit-post/src/store/actions.js' ) ],
 		},
+		'core/notices': {
+			title: 'Notices Data',
+			selectors: [ path.resolve( root, 'packages/notices/src/store/selectors.js' ) ],
+			actions: [ path.resolve( root, 'packages/notices/src/store/actions.js' ) ],
+		},
 		'core/nux': {
 			title: 'The NUX (New User Experience) Data',
 			selectors: [ path.resolve( root, 'packages/nux/src/store/selectors.js' ) ],

diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -451,8 +451,8 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-is-shallow-equal',
 			'wp-keycodes',
 			'wp-polyfill',
-			'wp-url',
 			'wp-rich-text',
+			'wp-url',
 		),
 		filemtime( gutenberg_dir_path() . 'build/components/index.js' ),
 		true
@@ -477,6 +477,18 @@ function gutenberg_register_scripts_and_styles() {
 		filemtime( gutenberg_dir_path() . 'build/blocks/index.js' ),
 		true
 	);
+	gutenberg_override_script(
+		'wp-notices',
+		gutenberg_url( 'build/notices/index.js' ),
+		array(
+			'lodash',
+			'wp-a11y',
+			'wp-data',
+			'wp-polyfill-ecmascript',
+		),
+		filemtime( gutenberg_dir_path() . 'build/notices/index.js' ),
+		true
+	);
 	gutenberg_override_script(
 		'wp-viewport',
 		gutenberg_url( 'build/viewport/index.js' ),
@@ -680,6 +692,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-i18n',
 			'wp-is-shallow-equal',
 			'wp-keycodes',
+			'wp-notices',
 			'wp-nux',
 			'wp-polyfill',
 			'wp-tinymce',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
 		"@wordpress/i18n": "file:packages/i18n",
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keycodes": "file:packages/keycodes",
+		"@wordpress/notices": "file:packages/notices",
 		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",
 		"@wordpress/redux-routine": "file:packages/redux-routine",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,9 +1,13 @@
 ## 5.0.0 (Unreleased)
 
-### Breaking Changes
+### Breaking Change
 
 - `AccessibleSVG` component has been removed. Please use `SVG` instead.
 
+### New Feature
+
+- The `Notice` component accepts an array of action objects via the `actions` prop. Each member object should contain a `label` and either a `url` link string or `onClick` callback function.
+
 ## 4.2.1 (2018-10-22)
 
 ### Bug Fix

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -48,6 +48,7 @@
 		"uuid": "^3.1.0"
 	},
 	"devDependencies": {
+		"@wordpress/token-list": "file:../token-list",
 		"enzyme": "^3.3.0",
 		"react-test-renderer": "^16.4.1"
 	},

diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
@@ -30,4 +30,5 @@ The following props are used to control the display of the component.
 
 * `status`: (string) can be `warning` (yellow), `success` (green), `error` (red).
 * `onRemove`: function called when dismissing the notice
-* `isDismissible`: (bool) defaults to true, whether the notice should be dismissible or not
+* `isDismissible`: (boolean) defaults to true, whether the notice should be dismissible or not
+* `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function.
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isString, noop } from 'lodash';
+import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -12,17 +12,36 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import IconButton from '../icon-button';
+import { Button, IconButton } from '../';
 
-function Notice( { className, status, children, onRemove = noop, isDismissible = true } ) {
-	const classNames = classnames( className, 'components-notice', {
-		[ `is-${ status }` ]: ! ! status,
-	}, {
+function Notice( {
+	className,
+	status,
+	children,
+	onRemove = noop,
+	isDismissible = true,
+	actions = [],
+} ) {
+	const classes = classnames( className, 'components-notice', 'is-' + status, {
 		'is-dismissible': isDismissible,
 	} );
+
 	return (
-		<div className={ classNames }>
-			{ isString( children ) ? <div className="components-notice__content">{ children }</div> : children }
+		<div className={ classes }>
+			<div className="components-notice__content">
+				{ children }
+				{ actions.map( ( { label, url, onClick }, index ) => (
+					<Button
+						key={ index }
+						href={ url }
+						isLink={ !! url }
+						onClick={ onClick }
+						className="components-notice__action"
+					>
+						{ label }
+					</Button>
+				) ) }
+			</div>
 			{ isDismissible && (
 				<IconButton
 					className="components-notice__dismiss"

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -29,6 +29,13 @@
 	margin: 1em 0;
 }
 
+.components-notice__action.components-button {
+	&,
+	&.is-link {
+		margin-left: 4px;
+	}
+}
+
 .components-notice__dismiss {
 	position: absolute;
 	top: 0;