Time to update your PanelColor components!

The PanelColor component will soon be deprecated in Gutenberg version 4.3.0! In order for your color pickers to continue working, you’ll need to update your code to use the new component, PanelColorSettings.

Since color pickers were one of the first Gutenberg block settings that developers started tinkering with and integrating, I figured it would be a good time to write a little tutorial showing you how we updated this component in Atomic Blocks and how you can use the same technique in your blocks. 

Keeping up with deprecated features

Before we get into updating the PanelColor component, let’s talk briefly about keeping up with deprecated features in Gutenberg. Because Gutenberg is still in development, changes (big and small) are still expected to happen with each update. Sometimes features are removed entirely and sometimes they are simply updated. 

There are a few ways to keep up with these changes and deprecated features. One of the quickest ways to see deprecated features is by visiting the Deprecated Features page in the Gutenberg handbook. This page will list all of the upcoming feature changes that will affect your blocks. 

Another way to see if your block is going to change is to check out the browser console while developing your block. You will see a message like this to indicate a change is coming: 

type property of wp.editor.MediaUpload is deprecated and will be removed in 4.2. Please use allowedTypes property containing an array with the allowedTypes or do not pass any property if all types are allowed instead.

This not only tells you what will be changed, but sometimes gives you a few hints about how to proceed with a fix. Keeping your blocks happy and healthy will ensure a top-notch user experience!

Let’s update that PanelColor component

Luckily for us, updating the PanelColor component is pretty simple and just requires a few tweaks. Let’s take a look at what your PanelColor component might look like as is.

<PanelColor
	title={ __( 'Background Color', 'atomic-blocks' ) }
	colorValue={ yourBackgroundColor }
	initialOpen={ false }
>
	<ColorPalette
		label={ __( 'Background Color', 'atomic-blocks' ) }
		value={ yourBackgroundColor }
		onChange={ ( value ) => this.props.setAttributes( { yourBackgroundColor: value } ) }
	/>
</PanelColor>

Take note of the PanelColor component and the ColorPalette component here. We’ll be swapping out the PanelColor component with the new PanelColorSettings component. We’ll also be removing the ColorPalette tag in favor of a colorSettings array.

In this example, I also extracted the onChange functionality into its own component, but this isn’t required.

<PanelColorSettings
	title={ __( 'Background Color', 'atomic-blocks' ) }
	initialOpen={ false }
	colorSettings={ [ {
		value: profileBackgroundColor,
		onChange: onChangeBackgroundColor,
		label: __( 'Background Color', 'atomic-blocks' ),
	} ] }
>
</PanelColorSettings>

Finally, we need to clean up the component imports at the top of the block! We can remove PanelColor from wp.components, remove ColorPalette from wp.editor and add PanelColorSettings into wp.editor. 

Wrapping up

Keeping your components up to date will ensure your blocks and users are healthy and happy! It will also ensure that your blocks are always up to date with the latest version of Gutenberg.

Stay tuned on the Atomic Blocks Twitter feed and Gutenberg News for more handy tutorials like this one!

• Share:
• Facebook
• Twitter
• Email

• Category: Uncategorized