BugWP logo BugWP
Back to Community
Home / Community / Core → Developing with wordpress

How to Add Custom Fields to the Block Styles Sidebar in WordPress

19 threads Sep 16, 2025 Core → Developing with wordpress

Content

When developing custom blocks in WordPress, you might want to add a custom styling control—like a unified padding field—directly within the familiar Block Styles sidebar tab. This provides a seamless user experience that matches the core design of the block editor. However, finding the right approach can be confusing.

Why This Is a Common Challenge

The block editor's supports property in block.json automatically generates controls for features like color and spacing. While this is powerful, it offers a predefined set of options. Developers often need to extend this functionality to add their own custom controls that logically belong alongside these built-in style options, such as a field to set all padding sides at once.

Available Solutions and Their Limitations

Based on community discussions, there are two primary methods for adding custom controls, each with its own place:

  1. Using InspectorControls for the Settings Tab: The most common method is to use the InspectorControls component within your block's edit.js function. This allows you to add any custom control, but it will appear under the "Settings" tab, not the "Styles" tab. This is the standard and well-documented approach.
  2. The Quest for the Styles Tab: Threads indicate a strong desire to place controls directly within the "Styles" tab, underneath sections like "Padding" or "Margin." As of now, this functionality is not natively exposed by the WordPress block editor API. The structure and controls within the Styles tab are primarily generated automatically based on the supports flags in block.json. There is no direct public API for injecting custom fields into this specific area.

Recommended Approach and Best Practice

Until the WordPress core or Gutenberg project introduces an API for extending the Styles tab, the recommended practice is to use InspectorControls in the Settings tab. To create a cohesive user experience, you can design your custom control to visually mimic the styling of the core controls. Group related styling options together under a clear, descriptive label to help users find them easily.

It is advisable to follow the development of the Gutenberg project on GitHub. Many advanced features, like this one, often start as community requests. By contributing to or watching discussions on the Gutenberg GitHub repository, you can track the progress of such capabilities.

Conclusion

While placing a custom field directly inside the Block Styles tab is not currently possible without potentially unstable methods, you can create a professional and intuitive interface for users by leveraging the existing Settings tab API. Keeping your custom controls well-organized and visually consistent with the core editor will provide the best experience until more advanced APIs become available.

Related Support Threads Support