Tutorial on how to create custom components

[bph]

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

[fabiankaegy]

I'm still happy to work on this one if that works for everyone :)

[bph]

Thank you, @fabiankaegy
Fabulous! Here are three links for you

• Tips and guidelines for writers
• How to contribute
• a Google Doc template + comments

Please let me know how I can assist.

[colorful-tones]

I would be happy to proof if you need another set of eyes. This looks like a good one. Thanks!

[juanmaguitar]

A nice addition to this post could be how to enhance core components with custom hooks and higher order components (here's an example - see useCharLimit and withCharLimit)
Or maybe this is material for a complementary post (that I'd be happy to write about).