After making any changes to your plugin file and block metadata,
you can start adding the block's core functionality.
This is usually a case of adding the block's 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 block's functionality.
Often a good idea to start by building out the block's 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 use block props function.
This is a special function known as a React hook that is used to fetch the blocks properties.
You'll see that use block props 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 use block props 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 using 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 is 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.
You can update the save function to return the same content as the edit component.
First, let's create the current geovarable.
And then let's update the text.
And then let's add a 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.
block edits a handbook.