 Hey there, and welcome to Learn WordPress. In this tutorial, you will learn all about block attributes and how you can use them to create blocks that your users can edit. This tutorial builds on the lessons learned from the turning a short code into a block tutorial. If you've not watched that video, I recommend doing so before watching this one. In this tutorial, you will learn how to define block attributes in your block.json file, how attributes are passed to your block through block props, how to access the attributes in your block, and how to add fields to the block editor sidebar so your users can edit the block attributes. Let's say you have a subscribe block that needs to be updated to support attributes. The current block generates HTML content only, a header element with the heading subscribe, and a paragraph that contains some text and a link to a URL on the site. You want to be able to allow the user to update the heading text of the block when it's added in the editor. To do this, you first need to add some attributes to the block. To enable block attributes, you add them in the block.json file. You can read more about attributes in the WordPress documentation on the block editor under reference guides, block API reference attributes. To start, let's add an attribute to manage the heading text. Attributes, heading, your type. You can add the attributes as a top-level field anywhere in your block.json file. There are other keys available to each attribute which control various elements of the attribute, but at a minimum, each attribute definition must contain either a type or an enum. You can add the default key with a value so that the block renders with some content in the editor. Now that the attribute has been defined, you can access it in your edit component and save function through something called a react prop. Like most programming languages, react components and functions can accept arguments. In the case of the block's edit component or save function, the block properties or props are passed as a single argument. Therefore, you can define a parameter in your edit component or save function to accept these props. Let's create this object in our edit component. For the purposes of this tutorial, let's call it block props. And then we'll log it to the browser console to see what happens. Console log, block props. And then just in case, we'll make sure that our build is running. NPM start, switch over to the browser. If you add the block to a post, turn on developer tools in the browser and view the output of the console, you can see the block props object. So we'll search for subscribe and then view the console. And then we can see the most recent object. There it is. Notice that the block props object contains the attributes property, which is passed from the block JSON file when the block is rendered. While you're looking at this object, notice that it also has a function property called set attributes, which you'll use later. You can use something called JavaScript destructuring assignment syntax to extract specific object properties in your edit or save function. For example, we just need the attributes from the block props, so we can extract them from the object like this. So it's curly braces, and then attributes. Just take this out for here. The first step is to update the edit component to use the heading value from the attributes property. So in that case, we will replace subscribe with attributes and we called it heading. Let's also update the heading attribute's default value so we can see it in the block in the editor and on the front end. So let's make this subscribe now. So we see that change. And there's attributes heading there. And then let's check in the browser. So we'll remove, update, refresh, close developer tools for now, and then add, subscribe, and there's the change. Subscribe now. Now you're going to want to allow your users to edit the attribute value when they add the block to a post. You can do this using the setting sidebar by implementing the inspector controls component and using the text control component. The WordPress block editor handbook has a detailed page on how to implement block settings in both the toolbar and the sidebar. It also contains example code using the various control components for the sidebar that you can try out in your own projects. Explaining in detail how to implement these settings is outside the scope of this tutorial. For now, let me show you what the code would look like for this block. Just inside here, it looks like this, inspector controls, and then inside inspector controls, there is a text control component. Inspector controls key is set to setting. Text control has a class name, a label of heading, a value of attributes heading, and then the unchange method. The inspector controls components allows you to add inputs to the setting sidebar for the user to edit block attributes. The important thing to focus on is the text control element. If you look at the text control for the client attribute, it has a label attribute, which in this case outputs the string heading. The components value is set to the value of attributes heading. The unchange event calls a function called setAttributes, which will update the value of the attributes heading field to whatever is entered in the text field. Remember the setAttributes function we saw earlier in the block props? The setAttributes function allows you to store the user's input for a specific attribute so it can be passed to the saved component. You will need to include the setAttributes function as an argument in your edit component for it to be available to the component. You can also extract that function property in the same way that you did for attributes. So here we can add a comma and then include setAttributes. Lastly, you'll also need to update this component to import the inspector controls and text controls components being used in the sidebar. Inspector controls is available in the WordPress block editor package so you can import it like this. So if we scroll up the block props, use block props is being imported from the block editor so we can also import inspector controls. Text control is available in the WordPress components package so you can import it like this. So if we say import text control from WordPress components these packages are available to your code from WordPress core. Let's look at what this looks like in the editor. Update and refresh. Now if you edit your block and look over at the settings you can adjust the header text. As you type the block in the editor is updated. However, if you save and preview this, the saved version will not have the changes. This is because you need to update the save function to use the attribute value passed from the edit component. So if we go back to our code open up save we can destruct the props in the same way and then use the attribute value there. Notice how you don't specify the set attributes function here, as you're not going to be updating attributes in the save component. In fact if you inspect the props passed the save function the set attributes function isn't even available to the save function. If you refresh, edit and save your block you should now see the new value on the front end. So let's refresh. Let's first update. Make a change update that and let's view that on the front end. Subscribe here today. At the same time, if you switch the block editor to code to the code editor view you can see how the attribute is saved in the block element code. So if we click there and say code editor we can see that in the learn subscribe block the heading is stored with the block. At this point you probably agree that the controls don't look great, especially if we compare them to other sidebar controls. So there's a bit of padding and spacing there. To fix this we can use the panel components in our inspector controls component. First go back to your edit components and import the panel body and panel components from WordPress components. So up here we will say I'm going to put these in the beginning panel and panel body. Next update your inspector controls component and wrap the text control components in a panel and panel body. So we want to wrap the text control component. So let's create some space and we can go panel pop this at the end and then panel body pop it at the end and just use two attributes to do some cleanup. Notice how I'm using the title and initial open attributes of the panel body component. If we look back in the editor so let's refresh this let's add the block back and now we can see the attributes fields in the sidebar look much better. Congratulations! You've successfully added an attribute to your subscribe block. You can learn more about attributes, the settings sidebar and text control and panel components by searching for them in the block editor handbook. So for example if I want to learn about panel, I can hit enter and view the details of the panel component. Happy coding!