Tutorial on how to create custom components

[bph]

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]

Love this idea and would be happy to create a writeup for how to create these custom components 👍

[luminuu]

Ping me if you need someone to proof read.

[bph]

This topic was approved in today's meeting. The conversation continues on the issue

• Tutorial on how to create custom components #257

[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).

[bph]

The discussion should move to the issue @juanmaguitar as this discussion is locked for non-maintainers.

[juanmaguitar]

Ups! I didn't realize that.
Thanks for the heads up! 🙏