Since WordPress 5.0, the block editor (Gutenberg) became the standard editor. For theme and plugin developers, knowledge of block development is an unavoidable skill. This article explains five key points useful in practice.
1. Block Registration Using block.json
In WordPress 6.0 and later, declaring a block's metadata in a block.json file is the standard approach. You can consolidate the name, category, attributes, and supported features into a single JSON file, referenced from both PHP and JavaScript. Because the block is registered simply by passing the path of block.json to register_block_type(), the amount of code is greatly reduced.
2. Make Use of useBlockProps
On the React side, using the useBlockProps() hook automatically applies the block's attributes and class names. It is more maintainable than assembling className by hand, and also ensures compatibility with the theme. Using this hook is essential to make the look in the editor match the look on the front end.
3. Achieve Nested Structures with InnerBlocks
When creating layout-type blocks (sections, cards, etc.), the InnerBlocks component is essential. Restricting insertable blocks with allowedBlocks also prevents client operation errors. Defining the initial structure with the template property saves users the trouble of assembling from scratch.
4. Integration with theme.json
Block style variations and color palettes can be controlled with theme.json. Rather than writing CSS directly, using theme.json's design tokens makes it easier to maintain a unified look across the entire site. Since they are output as custom properties, they can also be referenced from CSS within blocks.
5. Choosing Server-Side Rendering (SSR)
Blocks that display dynamic data (such as a list of latest posts) require SSR on the PHP side via render_callback. Because the design approach differs from static layout-type blocks, use them appropriately depending on the purpose. An SSR block's save function returns null, leaving front-end rendering entirely to PHP.
Summary
Block development has a learning curve, but once you grasp the basics, it becomes a major advantage in both theme and plugin development. Start with the combination of block.json + useBlockProps. Don't forget to make use of the official Handbook and the Create Block tool.