Skip to content
Essential Gutenberg components for WordPress.
JavaScript PHP Shell CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.bin
.circleci
.tests
assets
inc
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.stylelintignore
.stylelintrc
LICENSE
README.md
composer.json
gumponents.php
package-lock.json
package.json
phpcs.xml.dist
phpunit.xml.dist
webpack.config.js

README.md

CircleCI

Gumponents!

Essential Gutenberg components for WordPress.

Gumponents offer some crucial missing Gutenberg components, essential to create advanced blocks. 🚀

Individual Gumponents aim to be deprecated over time, when components similar or better land in WordPress core.

They are not blocks, but rather, what you would use to build advanced blocks.

Quick Links

Documentation | Roadmap

Components

PostRelationshipControl

post-relationship-control

Example

import { PostRelationshipControl } = gumponents.components;

<PostRelationshipControl
	label="Select people"
	help="Select people"
	postTypes="people"
	taxonomies={ [ { people_roles: [ 'ceo', 'management' ] } ] }
	value={ people.map( person => person.ID ) }
	onSelect={ people => setAttributes( { people } ) }
	buttonLabel="Select People"
	filter="people_meta"
	max="1"
/>

TaxonomyRelationshipControl

taxonomy-relationship-control

Example

import { TaxonomyRelationshipControl } = gumponents.components;

<TaxonomyRelationshipControl
	label="Select people roles"
	taxonomies="people_roles"
	value={ taxonomy.map( tax => tax.term_id ) }
	onSelect={ taxonomy => setAttributes( { taxonomy } ) }
	buttonLabel="Select People Roles"
	filter="people_meta"
	max="1"
/>

MultiSelectControl

multi-select-control

Example

import { MultiSelectControl } = gumponents.components;

...

attributes: {
	simpsons: {
		type: 'array',
		default: [],
	},
},

...

const options = [
	{ value: 'bart', label: 'Bart' },
	{ value: 'homer', label: 'Homer' },
	{ value: 'marge', label: 'Marge' },
];

<MultiSelectControl
	label="Choose Simpsons"
	help="Choose your favorite characters."
	options={ options }
	value={ attributes.simpsons }
	onChange={ ( simpsons ) => setAttributes( { simpsons } ) }
	placeholder="D'oh"
/>

LinkControl

link-control

Example

import { LinkControl } = gumponents.components;

...

attributes: {
	link: {
		type: 'object',
		default: {},
	},
},

...

<LinkControl
	label="Select URL"
	value={ attributes.link }
	onChange={ ( link ) => setAttributes( { link } ) }
	help="Enter a URL."
/>

FileControl

file-control

Example

import { FileControl } = gumponents.components;

...

attributes: {
	file: {
		type: 'object',
		default: null,
	},
},

...

<FileControl
	label="Choose file"
	selectLabel="Choose video"
	removeLabel="Remove this video"
	onChange={ file => setAttributes( { file: file ? { id: file.id, name: file.filename } : null } ) }
	value={ file ? file.id : null }
/>

ImageControl

image-control

Example

import { ImageControl } = gumponents.components;

...

attributes: {
	image: {
		type: 'object',
		default: null,
	},
},

...

<ImageControl
	label="Choose image"
	selectLabel="Choose image"
	removeLabel="Remove this image"
	size="thumbnail"
	value={ image }
	onChange={ ( image, media ) => setAttributes( { image } ) }
/>

GalleryControl

gallery-control

Example

import { GalleryControl } = gumponents.components;

...

attributes: {
	gallery: {
		type: 'array',
		default: [],
	},
},

...

<GalleryControl
	size="medium"
	onSelect={ ( gallery, media ) => {
		setAttributes( { gallery: null } ); // The block editor doesn't update arrays correctly? 🤷‍♂️
		setAttributes( { gallery } );
	} }
	value={ attributes.gallery }
/>

SelectImage

select-image

Example

import { SelectImage } = gumponents.components;

...

attributes: {
	image: {
		type: 'object',
		default: null,
	},
},

...

<SelectImage
	image={ image }
	placeholder="Choose an image"
	size="full"
	onChange={ ( image, media ) => {
		setAttributes( { image: null } ); // The block editor doesn't update objects correctly? 🤷‍♂️
		setAttributes( { image } );
	} }
	showCaption={ false }
/>
You can’t perform that action at this time.