 After making any changes to your plugin file and block metadata, you can start adding the blocks core functionality. This is usually a case of adding the blocks functionality in the editor via the edit component and adding how the block stores its output via the save function. Let's look at what it takes to add the blocks functionality. It's often a good idea to start by building out the blocks edit component first so it functions correctly in the editor. At the moment, the block displays in the editor with the scaffolded text copyright date block hello from the editor. If you open the edit.js file in the source directory and scroll past all the imports to the bottom you'll see the following code. This is the code that displays the block in the editor, also known as the edit component. There are a couple of things to note here. The first is that the component returns what looks like a paragraph tag with some text inside it. This code is known as JSX and it's a special syntax that looks like HTML but it's actually JavaScript. So while the p tags might look like typical HTML paragraph tags, you will see that there is some code inside the tag which is wrapped in curly braces. The curly braces are used to indicate that the code inside them should be evaluated as JavaScript and then the result is inserted into the JSX. Learning about how JSX works is outside the scope of this lesson but you can learn more about JSX on the React website. At this stage, what's important to note is that the code returned by the edit component is wrapped in a single container element. This is the parent container of this component and any React component must only return a single parent container. This means you can't return for example two paragraph tags or a paragraph tag next to a div tag without ensuring they are inside one parent container. Depending on your code editor, if you do try and do this, you might see all kinds of red warnings. The second thing to note is the use of the useBlockProps function. This is a special function known as a React hook that is used to fetch the blocks properties. You'll see that useBlockProps has three dots before it which is known in JavaScript as the spread syntax. The spread syntax takes the properties of an object and adds the object's key value pairs to whatever it's being applied to. Because useBlockProps returns an object with properties and values, the use of the spread syntax here applies those properties and their values as attributes to this parent container. Lastly, you will note that the scaffolded code is used in the WordPress double underscore function. This is a special function that allows text to be translated for different languages also known as internationalization. You can read more about internationalization in the WordPress developer documentation but we won't be covering it in this lesson. For now, update this component to return something more appropriate to the requirements of your block. For example, you can just leave in the word copyright and then add the copyright symbol and maybe some example dates. For the copyright symbol, you can use the copy HTML entity which will be converted to the right symbol when it's rendered. If you're wondering the reason the symbol and year is rendered outside the double underscore function is because you only need to make the word copyright translatable. You probably don't want to hard code that end date though so you can use some JavaScript to get the current year as a variable and replace that year with the variable. So const, current year, and we'll use the JavaScript date object, get the full year, and convert it to a string. Then we can pop that variable inside the curly braces inside the JSX. Once you've made the changes, save the file and let the build run or run the build command manually. Now when you add the block to a postal page, you should see that the block now displays the output that you've defined for the editor. The next step is to update the block save functionality so it renders correctly on the front end. Right now, if you preview the block, it's still showing the scaffolded text. The save function in the save.js file is what is run every time the block is saved in the editor. This is the content that is stored in the post content field in the database and rendered on the front end. Open the save.js file in the source directory and you'll see the following code. This is very similar to what was scaffolded in the edit component with a couple of differences. One difference is that only a specific subset of the block's properties are applied to the parent container via use block props save. This is because the save function is only concerned with the properties that are relevant to the front end and not in the editor. The other difference that the code inside the parent tag is all on one line. This is mostly irrelevant to the block's actual functionality and it just shows a different way to write the same code. Some developers prefer to split out the code into multiple lines as it makes it more readable in some circumstances. So you can update the save function to return the same content as the edit component. So first let's create the current year variable and then let's update the text and then let's add the copyright HTML entity, the starting year and the current year variable. Once the updated block has been built, add the block to a post and preview it. You should now see the block displays the save markup. To read more about building your edit and save functionality, take a look at the edit and save reference guide and the block editor handbook.