All Projects → rtCamp → Gutenberg Fields Middleware

rtCamp / Gutenberg Fields Middleware

Licence: gpl-2.0
Register fields for Gutenberg blocks with less repetitive code

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Gutenberg Fields Middleware

Go Tgbot
Golang telegram bot API wrapper, session-based router and middleware
Stars: ✭ 90 (-46.11%)
Mutual labels:  api, middleware
Slim Oauth2
Routes and Middleware for Using OAuth2 Server within a Slim Framework API
Stars: ✭ 121 (-27.54%)
Mutual labels:  api, middleware
Chi
lightweight, idiomatic and composable router for building Go HTTP services
Stars: ✭ 10,581 (+6235.93%)
Mutual labels:  api, middleware
Acf To Rest Api
Exposes Advanced Custom Fields Endpoints in the WordPress REST API
Stars: ✭ 1,152 (+589.82%)
Mutual labels:  api, wordpress
Foxify
The fast, easy to use & typescript ready web framework for Node.js
Stars: ✭ 138 (-17.37%)
Mutual labels:  api, middleware
Chubbyphp Framework
A based PSR-15 microframework that also sets maximum flexibility with minimum complexity and easy replaceability of the individual components, but also of the framework.
Stars: ✭ 69 (-58.68%)
Mutual labels:  api, middleware
Guzzle Advanced Throttle
A Guzzle middleware that can throttle requests according to (multiple) defined rules. It is also possible to define a caching strategy, e.g. get the response from cache when the rate limit is exceeded or always get a cached value to spare your rate limits. Using wildcards in host names is also supported.
Stars: ✭ 120 (-28.14%)
Mutual labels:  api, middleware
Apicache
Simple API-caching middleware for Express/Node.
Stars: ✭ 957 (+473.05%)
Mutual labels:  api, middleware
React With Wordpress
🔥 Example of react application to access WordPress REST API
Stars: ✭ 137 (-17.96%)
Mutual labels:  api, wordpress
Graphql Api For Wp
[READ ONLY] GraphQL API for WordPress
Stars: ✭ 136 (-18.56%)
Mutual labels:  api, wordpress
Better Rest Endpoints
A WordPress plugin that serves up slimmer WP Rest API endpoints.
Stars: ✭ 56 (-66.47%)
Mutual labels:  api, wordpress
Pop
Monorepo of the PoP project, including: a server-side component model in PHP, a GraphQL server, a GraphQL API plugin for WordPress, and a website builder
Stars: ✭ 160 (-4.19%)
Mutual labels:  api, wordpress
Copper
Copper is a set of Go packages that help you build backend APIs quickly and with less boilerplate.
Stars: ✭ 35 (-79.04%)
Mutual labels:  api, middleware
Laravel Woocommerce
WooCommerce Rest API for Laravel
Stars: ✭ 86 (-48.5%)
Mutual labels:  api, wordpress
Altair
Lightweight and Robust API Gateway written in Go
Stars: ✭ 34 (-79.64%)
Mutual labels:  api, middleware
Ln Paywall
Go middleware for monetizing your API on a per-request basis with Bitcoin and Lightning ⚡️
Stars: ✭ 108 (-35.33%)
Mutual labels:  api, middleware
Kona
a node.js service framework built on koa.js (generators)
Stars: ✭ 23 (-86.23%)
Mutual labels:  api, middleware
Outputcache
Cache api responses using Redis, Memcached or any cache provider for NodeJS
Stars: ✭ 9 (-94.61%)
Mutual labels:  api, middleware
Graphbrainz
A fully-featured GraphQL interface for the MusicBrainz API.
Stars: ✭ 130 (-22.16%)
Mutual labels:  api, middleware
Pure Http
✨ The simple web framework for Node.js with zero dependencies.
Stars: ✭ 139 (-16.77%)
Mutual labels:  api, middleware

Gutenberg Fields Middleware

Project Status: Inactive – The project has reached a stable, usable state but is no longer being actively developed; support/maintenance will be provided as time allows.


IMPORTANT

The work on Gutenberg Fields Middleware had started during the initial development phase of Gutenberg before it was merged into core. Gutenberg has evolved a lot since then and with the introduction of InnerBlocks and block templates, Gutenberg Fields Middleware has become less useful because the core blocks can be used as fields for creating blocks using block templates. Therefore we have stopped the development of this project and would archive this repo.


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.

Using | Available Fields

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.

  1. As a 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.
  2. Using JS and CSS files: Or you can use middleware.min.js and middleware.min.css and enqueue them as dependency for your block script. Be sure to use array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-date', 'wp-hooks' ) 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

image

✔️ 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',
) );

✔️ Gutenberg fields middleware is also available as npm package.

npm i gutenberg-fields-middleware

Available Fields

Gutenberg Fields Middleware supports the following field types and type configuration.

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.inspectorControls for all inspector fields. ( where placement is inspector )

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.

Does this interest you?

Join us at rtCamp, we specialize in providing high performance enterprise WordPress solutions

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].