Block Settings Panel

Settings panel

When the user clicks the button in the banner area, they should be taken to another page by following the href link. We can add a link picker option in the settings panel that appears on the right side of the screen when the block is selected.

Every block has a settings panel which is shown on the right side of the screen. We can add settings for the typography, color among other settings. The sidebar settings are defined by the Inspector. Usually the settings that are not directly related to the block are placed in the sidebar. The inspector settings go in the edit.js file because the sidebar appears on the editor screen. To add the sidebar we will import a few things from the block editor and components packages.

Attribute for storing link

We want to give the user the option to select the link for the button. This option will be displayed in the settings sidebar. The user will be able to search for pages or posts that the button should link to.

First, we will add a new attribute in the block.json file. Let’s call it linkObject. Since we want to store the URL as well as the title of the link, we are creating this as an object. The default value is an empty object.