Once you've scaffolded your new block project using create block,
you can start tweaking the code to meet your specific requirements.
Let's dive into what this might look like for the copyright date block you scaffolded in the
previous lesson. To start, you can clean up any scaffolded code you know you don't need.
Navigate to the copyright date block source directory and remove the view.js file.
At the same time, remove the view script property from the block.json.
Make sure not to leave a trailing comma at the end of the last property in the block.json file.
Now open up the copyright date block.php file in the root of the plugin directory.
There's not a lot to be changed in this file except maybe the package annotation in the
plugin header. This defaults to create block and you might want to change it to something
more specific to your plugin. For the purposes of this lesson, let's change it to copyright date.
You can also improve the code that registers the block by moving the hook registration
above the init hooks callback and simplifying the callback function name.
This makes the code a little easier to read and understand.
As you can see, this code uses the register block type function to register the block,
which internally uses the metadata from the block.json file.
Therefore, now would be a good time to review the code in that file.
The block.json file contains the block metadata in a JSON format. JSON stands for
JavaScript object notation and it's a lightweight data format that is easy for humans to read and
write and easy for machines to pass and generate. JSON is made up of key value pairs and each value
can also be a nested JSON object. To modify the scaffolded block metadata for your block,
you should at least change the values for the following properties. Update the name. In this
case, you can replace create block with the same value you use for the package value in the plugin
header copyright date. Update the icon. For now, change the icon value to calendar.
This icon comes from the Gutenberg icon library.
Update the description to make it more specific to your block.
Next, let's look at the block's main JavaScript file.
The index.js file in the source directory is the main JavaScript file for your block.
Mostly, you won't need to change much in this file, as it's already set up to register your
block for the block editor. At the top of the file, you'll see the following line. Import
register block type from WordPress blocks. The JavaScript import declaration is used to import
functionality like variables, functions and objects from somewhere else in your project.
In this case, it's importing the register block type function from the WordPress blocks package,
which is a package that powers the block editor. Next, it imports the style.sss file,
which is the file that contains the block styles. Then it imports the edit component.
This component is exported from the edit.js file. After that, it imports the save function.
This function is exported from the save.js file. Last but not least, it imports the JSON object
from the block.js file as the metadata variable. Finally, it uses the register block type function
to register the block and passes in two variables, the block name and a block configuration object
of block properties. Inside the properties object, the edit property is set to the value of the edit
component and the save property is set to the value of the save function. Because the save property
and the imported save function have the same name, it uses a shorthand syntax to set the property
value. Now that you've updated some block code, you can bold your block for the first time.
Bold your block, open a terminal and navigate to the root of your block plugin directory.
In my case, that's wplocalenv sites learn, wplcontent, plugins,
copyright, date block. Then run the following command, npm run bold.
This will scan through the contents of your source directory and compile the files from that
directory into the bold directory. If the bold directory doesn't exist, it will be created.
Whenever you make changes to this block code in the source directory,
you will need to run this command again to update the bold directory.
Optionally, there is the npm run start command that will start a development server that watches
for changes in the files in the source directory and automatically builds them into the bold
directory. This is useful when you're actively developing your block. Whichever option you use,
if you open your WordPress dashboard, create a new post and add your block,
you should see the block appear in the block insertor.
You'll notice that the icon has changed and the description is more specific to your block.
You can read more about the block metadata fields in the metadata in block JSON section
of the block editor handbook, as well as the development platform and bold processes
in the development platform and working with JavaScript for the block editor pages.