search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
36 stars 2 forks source link

Tutorial on how to create custom components #257

Open bph opened 2 months ago

bph commented 2 months ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/252

Originally posted by **bph** April 23, 2024 In the outreach channel, there was a [discussion around this topic](https://wordpress.slack.com/archives/C015GUFFC00/p1713864175741239): 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](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/base-control) > >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 commented 2 months ago

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

bph commented 2 months ago

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

Please let me know how I can assist.

colorful-tones commented 2 months ago

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

juanmaguitar commented 1 month ago

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