junaidbhura / gumponents

Essential Gutenberg components for WordPress.

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

Example

const { 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

Example

const { 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"
/>

ColorPaletteControl

Example

const { ColorPaletteControl } = gumponents.components;

...

attributes: {
	color: {
		type: 'object',
	},
},
...

<ColorPaletteControl
	label="Choose a color"
	value={ color ? color.color : null }
	onChange={ color => setAttributes( { color } ) }
/>

MultiSelectControl

Example

const { 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

Example

const { LinkControl } = gumponents.components;

...

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

...

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

FileControl

Example

const { 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

Example

const { 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 } ) }
/>

FocalPointPickerControl

Example

const { FocalPointPickerControl } = gumponents.components;

...

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

...

<FocalPointPickerControl
	label="Focal Point"
	imageUrl={ attributes.image.src }
	value={ attributes.focalPoint }
	help="Choose a focal point"
	onChange={ ( focalPoint ) => setAttributes( { focalPoint } ) }
/>

GalleryControl

Example

const { 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 }
/>

LinkButton

Example

const { LinkButton } = gumponents.components;

...

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

...

<LinkButton
	className="btn btn--primary"
	placeholder="Select Link"
	value={ attributes.link }
	onChange={ ( link ) => setAttributes( { link } ) }
/>

SelectImage

Example

const { 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 }
/>

gumponents's Issues

ImageControl not recognizing the size attribute

Hi @junaidbhura,

The ImageControl element is not recognizing the passed in size attribute and is defaulting to the "full" image size.

Can you please have a look at this?

Regards,
Rachel

New Notice with WP 5.8

The following error is now appearing with your plugin, I think it ist related to your wp_enqueue_script setting wp-editor as a dep. The error appears on the new widget edit page, any ideas?

Notice: wp_enqueue_script() was called incorrectly. "wp-editor" script should not be enqueued together with the new widgets editor (wp-edit-widgets or wp-customize-widgets). […]

URL Control

Add a URL control which is a wrapper for <URLInput />

SelectImage: Problem selecting SVG image

Selecting an SVG image causes an error: TypeError: e.sizes is undefined

GalleryControl

Create a control which allows the user to select a gallery of images.

Any plans to release as an NPM package?

Sorry, I didn't know where to post this but I was wondering if you had any plans to release this as a package rather than a plugin. I love the components you offer but feel it would work better in my (and possibly others'?) workflow if I could pull it in as a dependency.

Working with clients, the risk is that somewhere down the line, they disable unrecognized plugins and break things.

Improvements to PostRelationshipControl

The following improvements can be made to PostRelationshipControl:

1. Allow it to show post thumbnails in results
2. Add a filter for post types
3. UI improvements for de-selecting posts, messages for maximum or minimum posts
4. Add a minimum selection

Multi-select control

An easy to use multi-select control would be useful.

Drag and drop reorder, AJAX / API autocomplete.