Skip to content

Tutorial on how to create custom components #257

Open
@bph

Description

Discussed in #252

Originally posted by bph April 23, 2024
In the outreach channel, there was a discussion around this topic:

Jessica Lyschik elaborated:

When creating a custom block, I have some settings defined inside InspectorControls with like toggles, selects, inputs, etc. Now I have to implement a setting that I can't get done with the provided Components, so I'd like to know how to create my own component, preferably in JSX.

Fabian Kägy had some tips:

I tend to start by wrapping my control in the BaseControl

It already gives you all the styles for labels, help text etc. And from there it really is just plain react, and you can do whatever you want.

I’m building components like that here in this package for example: https://github.com/10up/block-components/

This here is a simple one that just exports a light wrapper around another control: https://github.com/10up/block-components/blob/develop/components/color-settings/index.js

But it can also be much more complex like in this example here for an icon picker: https://github.com/10up/block-components/blob/88f68d8df1e3912abf4c976b7c8b8fa72b964a3d/components/icon-picker/icon-picker.js#L68-L91

Metadata

Assignees

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions