Gutenberg Block Development Ep6 - Adding block settings to the Settings Sidebar (Inspector Controls)

In this video, we look at how to add block settings to the settings sidebar in Gutenberg. Specifically adding a colour palette component within the inspector controls component. It might be beneficial for you to watch episode 5 first, but we'll leave that for you to decide.

Block Editor Handbook - Attributes

Inspector Controls Docs

Panel Docs

ColorPalette Docs

ColorPalette example on wp-gb

Code for this tutorial on Github

Follow us on Twitter
@jkoussertari
@phil_sola123

[emimrulkayes]

It's totally awesome series. please keep going...⭐⭐⭐⭐⭐

[kbrealize]

This playlist help for me...thanks for awesome videos provide.

[thewpwing]

Guys! Its awesome. I am exited about this series. :)

[doesitstill]

Loving this series, please keep them going?

[PhilInAustralia]

Fantastic series James and Phil. I've found it very useful, so thank you. With the long delay since Ep6 was released, I do hope that it continues with Ep7 shortly.
A couple of the topics I'd like to see you cover include...
• the use of PHP-side render callback and your thoughts on using it to resolve the "This block contains unexpected or invalid content" issue.
• extending core blocks - for example removing unrequired attributes and adding new ones. Most often developers look at reuse rather than build from scratch. WordPress has traditionally been create at supporting extension/customisation (e.g. action and filter hooks), however it seems Gutenberg doesn't really support extending blocks. The scant information I have found seems to imply that the only way to reuse core blocks is to rebuild them from scratch by duplicating their code.

[isagive]

You guys are awesome! thanks a lot for the time you guys spent doing this - gr8 job 🙏

[staceymcmullen]

This is been a lifesaver, how to add an align option in the back end editor? ive tried just repeating the processes but changing certain values but getting no joy :(

[ytech]

Can You Show us how to develop the Gutenberg Blocks but without initialize it as a plugin .. with Webpack and and NPM .. Please it will be helps more .. and Thank you Alot too for this series

[robertglidden]

Great video, but could you zoom in in VS Code and web pages? The text is very small.