Uploading Images

In this lesson, we will add the ability to add a background image in the banner area. This can be done by adding a button in the banner block’s settings, that allows the user to choose a background image. If we select the overall banner block, we want the button to appear in the right-hand sidebar that lets the user choose a background image.

Imports

As discussed before, the InspectorControls element is responsible for displaying items in the sidebar. Open the edit.js file from the banner folder. We need to import the following:

• InspectorControls, MediaUpload and MediaUploadCheck from the block-editor package.

• Button, PanelBody, and PanelRow from the components package.