From 1ab003f0939acb03c51a4460d5ce9389da6d8e23 Mon Sep 17 00:00:00 2001 From: Yahil Madakiya Date: Mon, 2 Apr 2018 19:02:50 +0530 Subject: [PATCH 1/4] Update register_block_type example. --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index dace4e4..db9109c 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,36 @@ register_block_type( 'example-namespace/example-block', array( ) ) ), + 'render_callback' => 'example_callback', ) ); ``` +**Inspector Controls:** + +Use `placement: inspector` with the `field` configurations + +``` +attributes: { + columns: { + type: 'string', + field: { + type: 'range', + label: __( 'Columns' ), + placement: 'inspector', + }, + }, +}, + +// Optional. +edit( props, middleware ) { + return [ + middleware.inspectorControls, + ]; +} +``` + +Alternatively the middleware can also be used just by enqueuing `buid/middleware.js` file + ## Available Fields Gutenberg Fields Middleware supports the following field types and type configuration. From 435f25802bdaeb85cb5e10a706205e7914056798 Mon Sep 17 00:00:00 2001 From: Yahil Madakiya Date: Mon, 2 Apr 2018 19:23:56 +0530 Subject: [PATCH 2/4] Update readme with Inspector Controls example --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index db9109c..8e604a0 100644 --- a/README.md +++ b/README.md @@ -71,9 +71,9 @@ register_block_type( 'example-namespace/example-block', array( **Inspector Controls:** -Use `placement: inspector` with the `field` configurations +Inspector controls are shown in the sidebar when a block is selected and can easily be added by using `placement: 'inspector'` when adding attributes as shown in the example below. -``` +```js attributes: { columns: { type: 'string', @@ -85,7 +85,6 @@ attributes: { }, }, -// Optional. edit( props, middleware ) { return [ middleware.inspectorControls, @@ -93,7 +92,7 @@ edit( props, middleware ) { } ``` -Alternatively the middleware can also be used just by enqueuing `buid/middleware.js` file +Alternatively the middleware can also be used just by enqueuing `buid/middleware.js` file as dependency. ## Available Fields From 19dd5135fc105b3ff2174f3bd54809265d661f37 Mon Sep 17 00:00:00 2001 From: Yahil Madakiya Date: Mon, 2 Apr 2018 19:53:10 +0530 Subject: [PATCH 3/4] Update README: Add Gutenberg fields inside the attributes. --- README.md | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 8e604a0..f93b17d 100644 --- a/README.md +++ b/README.md @@ -23,24 +23,43 @@ wp_enqueue_script( Once you've required the `gutenberg-fields-middleware` dependency, fields are registered as attribute configuration details. -Here's how you might register `url` and `text` fields: +Here's how you might register `url`, `text` and `range` fields: ```js registerBlockType( 'example-namespace/example-block', { title: 'Example Block', - url: { - type: 'string', - field: { - type: 'url', + attributes: { + url: { + type: 'string', + field: { + type: 'url', + }, }, - }, - text: { - type: 'string', - field: { - type: 'text', - placeholder: 'Enter link text', + text: { + type: 'string', + field: { + type: 'text', + placeholder: 'Enter link text', + }, + }, + range: { + type: 'string', + field: { + type: 'range', + label: __( 'Columns' ), + placement: 'inspector', + }, }, }, + + edit( props, middleware ) { + return [ + middleware.inspectorControls, + middleware.fields.url, + middleware.fields.text, + middleware.fields.range, + ]; + }, }); ``` @@ -73,25 +92,6 @@ register_block_type( 'example-namespace/example-block', array( Inspector controls are shown in the sidebar when a block is selected and can easily be added by using `placement: 'inspector'` when adding attributes as shown in the example below. -```js -attributes: { - columns: { - type: 'string', - field: { - type: 'range', - label: __( 'Columns' ), - placement: 'inspector', - }, - }, -}, - -edit( props, middleware ) { - return [ - middleware.inspectorControls, - ]; -} -``` - Alternatively the middleware can also be used just by enqueuing `buid/middleware.js` file as dependency. ## Available Fields @@ -942,11 +942,11 @@ For more read gutenberg [readme](https://github.com/WordPress/gutenberg/tree/mas ```js dropdown: { - type: 'string', - field: { - type: 'dropdown', - position: 'top left', - }, + type: 'string', + field: { + type: 'dropdown', + position: 'top left', + }, } ``` From f44232f4ed4cdaf88a8dab4c798ee4bb93d62290 Mon Sep 17 00:00:00 2001 From: yahil madakiya Date: Mon, 2 Apr 2018 20:08:11 +0530 Subject: [PATCH 4/4] Update README.md --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f93b17d..1213067 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,9 @@ Once you've required the `gutenberg-fields-middleware` dependency, fields are re Here's how you might register `url`, `text` and `range` fields: ```js +// Inspector controls are shown in the sidebar when a block is selected and can easily be added +// by using `placement: 'inspector'` when adding attributes as shown in the example below. + registerBlockType( 'example-namespace/example-block', { title: 'Example Block', attributes: { @@ -88,10 +91,6 @@ register_block_type( 'example-namespace/example-block', array( ) ); ``` -**Inspector Controls:** - -Inspector controls are shown in the sidebar when a block is selected and can easily be added by using `placement: 'inspector'` when adding attributes as shown in the example below. - Alternatively the middleware can also be used just by enqueuing `buid/middleware.js` file as dependency. ## Available Fields