Specification

The open-source protocol for creating interactive, data-driven blocks

This document is a working draft

This specification is currently in progress. We’re drafting it in public to gather feedback and improve the final document. If you have any suggestions or improvements you would like to add, or questions you would like to ask, feel free to submit a PR or open a discussion on our GitHub repo.

Appendix A: Styling

🚧

This section is still being written. Advance comments are welcome.

  • primaryColor: a primary theme color for main action elements and fills
  • secondaryColor: a secondary color for highlights and variations
  • borderColor: a color to use for borders for tables, boxes, etc
  • borderRadius: the radius of borders for tables, boxes, buttons, etc
  • backgroundColor: a color to use as the background for elements
  • fontColor: the default text color
  • fontFamily: the default font

Embedding applications may pass different variables at different times, e.g. when a user enables/disables dark mode, different colors may be passed – or different styles may be passed for different users/orgs depending on their own preferences.

To ensure that the blocks you develop look good across a wide range of environments, consider adhering to our recommended block design guidelines.

Add blocks to your app

Anyone with an existing application who wants to embed semantically-rich, reusable blocks in their product can use the protocol. Improve your app’s utility and tap into a world of structured data with no extra effort, for free.

Read the Embedding Guide

Build your own blocks

Any developer can build and publish blocks to the global registry for other developers to use. Create blocks that solve real-world problems, and contribute to an open source community changing the landscape of interoperable data.

Read the Quickstart Guide
We're hiring full-stack TypeScript/React and PHP plugin developers to help grow theBlock ProtocolWordPress ecosystem.Learn more