ブロックカラーのサポートが開始されたそうです。今回は、概要説明の後に検証してみます。

概要説明

Notion の公式 API でブロックカラーがサポートされるようになりました。以下のブロックタイプについて、color キーワードが使えるようになります。→ paragraph, heading_1, heading_2, heading_3, bulleted_list_item, numbered_list_item, to_do, toggle, callout, quote, table_of_contents.

これらのブロックタイプの場合、ブロックの色は block object に返されます。また、 update block, append block children, そして create page エンドブロックで既存の色を更新したり、色付きの新しいブロックを作成できます。

サポートされているカラーは default, gray, brown, orange, yellow, green, blue, purple, pink, red, gray_background, brown_background, orange_background, yellow_background, green_background, blue_background, purple_background, pink_background, red_background です。以下はブロック例です。

{
    "object": "block",
    "id": "79bc0ae2-b002-4ecd-92db-870354734aaf",
    "created_time": "2022-03-03T22:49:00.000Z",
    "last_edited_time": "2022-03-03T22:49:00.000Z",
    "created_by": {
        "object": "user",
        "id": "914ff1b3-45c7-48dc-b2c2-be37d21e7695"
    },
    "last_edited_by": {
        "object": "user",
        "id": "914ff1b3-45c7-48dc-b2c2-be37d21e7695"
    },
    "has_children": false,
    "archived": false,
    "type": "callout",
    "callout": {
        "rich_text": [
            {
                "type": "text",
                "text": {
                    "content": "This block has color!",
                    "link": null
                },
                "annotations": {
                    "bold": false,
                    "italic": false,
                    "strikethrough": false,
                    "underline": false,
                    "code": false,
                    "color": "default"
                },
                "plain_text": "This block has color!",
                "href": null
            }
        ],
        "icon": {
            "type": "emoji",
            "emoji": "💡"
        },
        "color": "green_background"
    }
}

検証

簡単にパラグラフの背景色を変更してみます。color だけ送ればいいのかと思ったのですが、rich_text も必要なんですね。update_block はまだやったことなかったんで、この動きは想定外でした。今作っているライブラリも検討が必要だな。

#!/bin/sh
curl '<https://api.notion.com/v1/blocks/c27870f881994057b0ca7b5260ae4f68>' \\
  -H 'Authorization: Bearer '"$NOTION_API_KEY"'' \\
  -H "Content-Type: application/json" \\
  -H "Notion-Version: 2022-02-22" \\
  -X PATCH \\
  --data '{
  "paragraph": {
    "rich_text": [
      {
        "text": {
          "content": "段落\\n"
        }
      },
      {
        "text": {
          "content": "二行目"
        }
      }
    ],
    "color": "gray_background"
  }
}'

戻ってきた JSON はこちらです。

{
    "object": "block",
    "id": "c27870f8-8199-4057-b0ca-7b5260ae4f68",
    "created_time": "2022-03-08T22:59:00.000Z",
    "last_edited_time": "2022-03-08T23:28:00.000Z",
    "created_by": {
        "object": "user",
        "id": "2200a911-6a96-44bb-bd38-6bfb1e01b9f6"
    },
    "last_edited_by": {
        "object": "user",
        "id": "9497f745-1d35-4311-b127-f0c757adb870"
    },
    "has_children": false,
    "archived": false,
    "type": "paragraph",
    "paragraph": {
        "rich_text": [
            {
                "type": "text",
                "text": {
                    "content": "段落\\n",
                    "link": null
                },
                "annotations": {
                    "bold": false,
                    "italic": false,
                    "strikethrough": false,
                    "underline": false,
                    "code": false,
                    "color": "default"
                },
                "plain_text": "段落\\n",
                "href": null
            },
            {
                "type": "text",
                "text": {
                    "content": "二行目",
                    "link": null
                },
                "annotations": {
                    "bold": false,
                    "italic": false,
                    "strikethrough": false,
                    "underline": false,
                    "code": false,
                    "color": "default"
                },
                "plain_text": "二行目",
                "href": null
            }
        ],
        "color": "gray_background"
    }
}

変更されたブロックはこちら。背景がグレーに変わっています。

段落 二行目

Notion API Changelog まとめ