Support for Gutenberg Notice component.

README.md

@@ -8,9 +8,9 @@ This project is in its early stages. Please [open an issue](https://github.com/r
 
 
 
-## Using 
+## Using
 
-Gutenberg fields middleware requires only two files `dist/middleware.min.js` and `dist/middleware.min.css` as dependency. 
+Gutenberg fields middleware requires only two files `dist/middleware.min.js` and `dist/middleware.min.css` as dependency.
 
 There are two ways of using fields middleware.
 
@@ -127,6 +127,7 @@ Gutenberg Fields Middleware supports the following field types and type configur
 - [input types: email / number/ hidden / search / tel etc.](docs/input.md)
 - [link](docs/link.md)
 - [media-icon](docs/media-icon.md)
+- [notice](docs/notice.md)
 - [radio](docs/radio.md)
 - [range](docs/range.md)
 - [rich-text](docs/rich-text.md)
@@ -144,7 +145,7 @@ Gutenberg Fields Middleware supports the following field types and type configur
 #### Returning field in `edit` method:
 
 - `middleware.fields.arrtibuteKeyName` for a **single** field when `placement` property is not defined.
-- `middleware.blockControls` for **all** block-control fields. ( where `placement` is `block-control` ) 
+- `middleware.blockControls` for **all** block-control fields. ( where `placement` is `block-control` )
 - `middleware.inspectorControls` for **all** inspector fields. ( where `placement` is `inspector` )
 
 
@@ -162,6 +163,5 @@ See [example usage](docs/alignment-toolbar.md#example-usage--es5-) of alignment-
 #### Example Usage:
 
 - See [examples](examples/)
-	* You can set GUTENBERG_FIELDS_MIDDLEWARE_IS_DEV to true during development in wp-config.php which will also enable example blocks. 
+	* You can set GUTENBERG_FIELDS_MIDDLEWARE_IS_DEV to true during development in wp-config.php which will also enable example blocks.
 - Check [gutenberg-supplements](https://github.com/rtCamp/gutenberg-supplements) plugin where we have created some actual blocks using middleware.
-

dist/middleware.js

@@ -255,7 +255,7 @@ var Field = function (_Component) {
 /* 2 */
 /***/ (function(module, exports) {
 
-var core = module.exports = { version: '2.5.7' };
+var core = module.exports = { version: '2.6.0' };
 if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
 
 
@@ -1591,6 +1591,9 @@ var GutenbergFieldsMiddleWare = function () {
 				case 'media-icon':
 					field = fields.mediaIcon(props, config, defaultConfig, attributeKey, this);
 					break;
+				case 'notice':
+					field = fields.notice(props, config, defaultConfig, attributeKey, this);
+					break;
 				case 'dropdown-menu':
 					field = fields.dropDownMenu(props, config, defaultConfig, attributeKey, this);
 					break;
@@ -1658,7 +1661,7 @@ var GutenbergFieldsMiddleWare = function () {
 				BlockControls,
 				{ key: 'block-controls', __source: {
 						fileName: _jsxFileName,
-						lineNumber: 254
+						lineNumber: 257
 					}
 				},
 				_.isEmpty(fields) && __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys___default()(this.blockControlFields).map(function (key) {
@@ -1688,7 +1691,7 @@ var GutenbergFieldsMiddleWare = function () {
 				InspectorControls,
 				{ key: 'inspector-control', __source: {
 						fileName: _jsxFileName,
-						lineNumber: 275
+						lineNumber: 278
 					}
 				},
 				_.isEmpty(fields) && __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys___default()(this.inspectorControlFields).map(function (key) {
@@ -1846,7 +1849,7 @@ var GutenbergFieldsMiddleWare = function () {
 				'div',
 				{ key: props.className, __source: {
 						fileName: _jsxFileName,
-						lineNumber: 427
+						lineNumber: 430
 					}
 				},
 				__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys___default()(this.fields).map(function (key) {
@@ -2124,22 +2127,25 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "link", function() { return __WEBPACK_IMPORTED_MODULE_13__link__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__media_upload__ = __webpack_require__(130);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mediaUpload", function() { return __WEBPACK_IMPORTED_MODULE_14__media_upload__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__radio__ = __webpack_require__(140);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "radio", function() { return __WEBPACK_IMPORTED_MODULE_15__radio__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__range__ = __webpack_require__(141);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "range", function() { return __WEBPACK_IMPORTED_MODULE_16__range__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__rich_text__ = __webpack_require__(142);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "richText", function() { return __WEBPACK_IMPORTED_MODULE_17__rich_text__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__select__ = __webpack_require__(144);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "select", function() { return __WEBPACK_IMPORTED_MODULE_18__select__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__text__ = __webpack_require__(145);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "text", function() { return __WEBPACK_IMPORTED_MODULE_19__text__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__textarea__ = __webpack_require__(146);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "textarea", function() { return __WEBPACK_IMPORTED_MODULE_20__textarea__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__tree_select__ = __webpack_require__(148);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "treeSelect", function() { return __WEBPACK_IMPORTED_MODULE_21__tree_select__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__url_input_button__ = __webpack_require__(149);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "urlInputButton", function() { return __WEBPACK_IMPORTED_MODULE_22__url_input_button__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__notice__ = __webpack_require__(140);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "notice", function() { return __WEBPACK_IMPORTED_MODULE_15__notice__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__radio__ = __webpack_require__(141);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "radio", function() { return __WEBPACK_IMPORTED_MODULE_16__radio__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__range__ = __webpack_require__(142);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "range", function() { return __WEBPACK_IMPORTED_MODULE_17__range__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__rich_text__ = __webpack_require__(143);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "richText", function() { return __WEBPACK_IMPORTED_MODULE_18__rich_text__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__select__ = __webpack_require__(145);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "select", function() { return __WEBPACK_IMPORTED_MODULE_19__select__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__text__ = __webpack_require__(146);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "text", function() { return __WEBPACK_IMPORTED_MODULE_20__text__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__textarea__ = __webpack_require__(147);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "textarea", function() { return __WEBPACK_IMPORTED_MODULE_21__textarea__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__tree_select__ = __webpack_require__(149);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "treeSelect", function() { return __WEBPACK_IMPORTED_MODULE_22__tree_select__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__url_input_button__ = __webpack_require__(150);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "urlInputButton", function() { return __WEBPACK_IMPORTED_MODULE_23__url_input_button__["a"]; });
+
 
 
 
@@ -4690,6 +4696,63 @@ module.exports = __webpack_require__(2).getIterator = function (it) {
 /* 140 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (immutable) */ __webpack_exports__["a"] = notice;
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_field__ = __webpack_require__(1);
+
+var _jsxFileName = '/Users/yahilmadakiya/Local Sites/wp50/app/public/wp-content/plugins/gutenberg-fields-middleware/middleware/fields/notice/index.js';
+/**
+ * Notice field.
+ */
+
+
+
+var Notice = wp.components.Notice;
+
+
+function notice(props, config, defaultConfig, attributeKey, middleware) {
+
+	var fieldAttributes = _.extend(defaultConfig, config);
+
+	delete fieldAttributes.type;
+	delete fieldAttributes.message;
+
+	return wp.element.createElement(
+		__WEBPACK_IMPORTED_MODULE_1__components_field__["a" /* default */],
+		__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default()({}, config, {
+			__source: {
+				fileName: _jsxFileName,
+				lineNumber: 17
+			}
+		}),
+		wp.element.createElement(
+			Notice,
+			__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default()({}, fieldAttributes, {
+				__source: {
+					fileName: _jsxFileName,
+					lineNumber: 18
+				}
+			}),
+			wp.element.createElement(
+				'p',
+				{
+					__source: {
+						fileName: _jsxFileName,
+						lineNumber: 19
+					}
+				},
+				config.message
+			)
+		)
+	);
+}
+
+/***/ }),
+/* 141 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = radio;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__ = __webpack_require__(0);
@@ -4722,7 +4785,7 @@ function radio(props, config, defaultConfig, attributeKey) {
 }
 
 /***/ }),
-/* 141 */
+/* 142 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4748,14 +4811,14 @@ function range(props, config, defaultConfig) {
 }
 
 /***/ }),
-/* 142 */
+/* 143 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = richText;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__editor_scss__ = __webpack_require__(143);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__editor_scss__ = __webpack_require__(144);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__editor_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__editor_scss__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_field__ = __webpack_require__(1);
 
@@ -4797,13 +4860,13 @@ function richText(props, config, defaultConfig, attributeKey) {
 }
 
 /***/ }),
-/* 143 */
+/* 144 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
 
 /***/ }),
-/* 144 */
+/* 145 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4833,7 +4896,7 @@ function select(props, config, defaultConfig) {
 }
 
 /***/ }),
-/* 145 */
+/* 146 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4880,14 +4943,14 @@ function text(props, config, defaultConfig, attributeKey, middleware) {
 }
 
 /***/ }),
-/* 146 */
+/* 147 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = textarea;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__editor_scss__ = __webpack_require__(147);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__editor_scss__ = __webpack_require__(148);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__editor_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__editor_scss__);
 
 var _jsxFileName = '/Users/yahilmadakiya/Local Sites/wp50/app/public/wp-content/plugins/gutenberg-fields-middleware/middleware/fields/textarea/index.js';
@@ -4918,13 +4981,13 @@ function textarea(props, config, defaultConfig) {
 }
 
 /***/ }),
-/* 147 */
+/* 148 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
 
 /***/ }),
-/* 148 */
+/* 149 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4954,7 +5017,7 @@ function treeSelect(props, config, defaultConfig) {
 }
 
 /***/ }),
-/* 149 */
+/* 150 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

docs/notice.md

@@ -0,0 +1,63 @@
+# Notice
+
+This component is used to display notices in editor. ( See example usage )
+
+![notice](https://user-images.githubusercontent.com/11607839/49986320-74d31280-ff95-11e8-826f-d40a4e40037f.png)
+
+
+
+## Properties
+
+#### status:
+
+Can be warning (yellow), success (green), error (red).
+
+- Type: `string`
+- Required: No
+
+#### onRemove:
+
+Function called when dismissing the notice
+
+- Type: `function`
+- Required: No
+
+#### isDismissible:
+
+Whether the notice should be dismissible or not
+
+- Type: `boolean`
+- Default: `true`
+- Required: No
+
+#### placement:
+
+Defines where you want to show the field. By default a field would be added to the block however it can be added to the sidebar settings by using `inspector` or in the block-controls by using `block-controls`.
+
+- Accepts: `block-controls`, `inspector`
+- Type: `String`
+- Required: No
+
+#### **actions:**
+
+An array of action objects. Each member object should contain a label and either a url link string or onClick callback function.
+
+- Type: `Array`
+- Required: No
+
+**Example:**
+
+```js
+alignment: {
+    type: 'boolean',
+    field: {
+        type: 'notice',
+        status: 'error',
+        message: 'An error occurred',
+    },
+},
+```
+
+For more read gutenberg [readme](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/notice).
+
+Read more about defining attributes on official Gutenberg [handbook](https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-attributes/).

examples/all-fields-block/blocks.js

@@ -28,6 +28,14 @@ registerBlockType( 'gb-m-example/simple-block', {
 				placement: 'block-controls',
 			},
 		},
+		alignment: {
+			type: 'boolean',
+			field: {
+				type: 'notice',
+				status: 'error',
+				message: 'An error occurred',
+			},
+		},
 		view: {
 			type: 'string',
 			field: {

middleware/fields/index.js

@@ -13,6 +13,7 @@ export { default as iconsToolbar } from './icons-toolbar';
 export { default as inputField } from './input-field';
 export { default as link } from './link';
 export { default as mediaUpload } from './media-upload';
+export { default as notice } from './notice';
 export { default as radio } from './radio';
 export { default as range } from './range';
 export { default as richText } from './rich-text';

middleware/fields/notice/index.js

@@ -0,0 +1,23 @@
+/**
+ * Notice field.
+ */
+
+import Field from './../../components/field';
+
+const { Notice } = wp.components;
+
+export default function notice( props, config, defaultConfig, attributeKey, middleware ) {
+
+	const fieldAttributes = _.extend( defaultConfig, config );
+
+	delete fieldAttributes.type;
+	delete fieldAttributes.message;
+
+	return (
+		<Field { ...config } >
+			<Notice { ...fieldAttributes }>
+				<p>{ config.message }</p>
+			</Notice>
+		</Field>
+	);
+}