The beginning of Spring was celebrated in the Latvian WordPress group with a women’s meetup. Katya Leurdo gave a presentation on “Gutenberg by a developer’s eyes – creating custom blocks”. This was the second meetup of a technical series that started in March 2021. The report shows the creation of three custom Gutenberg blocks, with code examples on GitHub. The materials of the meetup are available for download at the links below.
To sum up, the presentation included a look at the builder setup and the creation of three blocks: a test block, a single panel accordion and a block with nested blocks.
However, installing the project builder causes difficulties for beginners. The presentation describes the process and provides a link to a plugin template containing all the necessary files for the webpack. It shows how to automatically rebuild a project if the js source files change.
Gutenberg by a developer’s eyes: presentation examples
At first, the test block example is based on the Gutenberg block plugin template. The speaker analysed the contents of the template files and their purpose. She showed the resulting text-block in action in the administrative part of the site and on the frontend. The test block has extremely simple content – one paragraph.
Secondly, the next example shows the creation of a custom accordion unit with a single panel. The panel has a header and content. The presenter draws attention to the difference in the design of the header and the content, which can consist of several lines.
The third example goes further towards complexity and shows a real custom block – an accordion with many panels. The speaker implemented such a block through Gutenberg’s nested blocks. Nested blocks require a slightly different process of definition and configuration, which the speaker covered in detail with explanations of the code.
In addition, in the course of the presentation, she covered the issues related to attributes, state and useBlockProps. The rapporteur also discussed the differences between the versions of the Gutenberg API. Recently, with the release of WordPress 5.6, the Gutenberg team released version 2 of the API.
Finally, questions were answered that took quite a long time, which shows the interest of the audience. Questions about the advantages and disadvantages of creating blocks via ACF, the required level of React knowledge, etc. were answered.
To summarize, you can download the presentation of the “Gutenberg by a developer’s eyes” meetup here. The repository of the demonstration plugin is here. A recording of the meetup is available below.