gutenberg-fields-middleware
v0.3.2
Published
Register fields for Gutenberg blocks with a simple, declarative API.
Downloads
5
Keywords
Readme
Gutenberg Fields Middleware
Register fields for Gutenberg blocks with a simple, declarative API.
This project is in its early stages. Please open an issue with questions, feedback, suggestions, and bug reports.
Installation
$ npm i gutenberg-fields-middleware
To include Middleware in your JS file add import statement at the top of the file
import 'gutenberg-fields-middleware';
Using
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.
There are two ways of using the middleware.
- As a WordPress Plugin: Install the Gutenberg Fields Middleware as a standalone WordPress plugin which will register a
gutenberg-fields-middleware
handle you can add as a dependency for your block script. - Using JS and CSS files: Or you can use
middleware.min.js
andmiddleware.min.css
and enqueue them as dependency for your block script. Be sure to usearray( 'wp-editor', 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-date', 'underscore' )
handles as your dependency when enqueing middleware js file.
Fields are now registered as attribute configuration details. Here's how you might register image
, text
, color
and range
fields:
wp.blocks.registerBlockType( 'example-namespace/example-block', {
title: 'Example Block',
category: 'common',
attributes: {
image: {
type: 'object',
field: {
type: 'image',
},
},
text: {
type: 'string',
field: {
type: 'text',
placeholder: 'Enter text..',
},
},
color: {
type: 'string',
field: {
type: 'color',
placement: 'inspector',
},
},
range: {
type: 'string',
field: {
type: 'range',
label: 'Columns',
placement: 'inspector', // To show in sidebar.
},
default: 20,
},
},
edit: function( props, middleware ) {
return [
middleware.inspectorControls, // Contains ALL inspector controls.
middleware.fields.image,
middleware.fields.text,
];
},
save: function( props ) {}
});
Which will create a block like this
✔️ Fields can also be used in the same way when using register_block_type
in PHP.
register_block_type( 'example-namespace/example-block', array(
'attributes' => array(
'image' => array(
'type' => 'object',
'field' => array(
'type' => 'image',
'buttonText' => 'Upload',
'imagePlaceholder' => true,
'removeButtonText' => 'Remove',
),
),
'color' => array(
'type' => 'string',
'field' => array(
'type' => 'color'
)
)
),
'render_callback' => 'example_callback',
) );
Returning field in edit
method:
middleware.fields.arrtibuteKeyName
for a single field whenplacement
property is not defined.middleware.blockControls
for all block-control fields. ( whereplacement
isblock-control
)middleware.inspectorControls
for all inspector fields. ( whereplacement
isinspector
)
Getting more control over fields:
There are two ways of getting a field, one is simply use middleware.fields.arrtibuteKeyName
or middleware.getField( props, 'arrtibuteKeyName', config )
when you need more control over a field, here you can use all configuration options in config
parameter given in the fields doc.
The same can be done for block controls and inspector controls as middleware.getBlockControls( props, fields )
and middleware.getInspectorControls( props, fields )
where fields
can be defined as an array of fields.
See example usage of alignment-toolbar.
Example Usage:
- See examples
- 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 plugin where we have created some actual blocks using middleware.
Documentation
Read docs on github