# Gutenberg オリジナルブロック

1. ブロック開発環境の用意
[@wordpress/create-block](https://ja.wordpress.org/team/handbook/block-editor/packages/packages-create-block/)
wp-env で一度確認
1. リンターを入れる（必須ではない）
[@wordpress/eslint-plugin - npm](https://www.npmjs.com/package/@wordpress/eslint-plugin)

3. index.jsの調整
1. コメント削除
2. Edit/Save
[edit と save – Japanese Team — WordPress.org](https://ja.wordpress.org/team/handbook/block-editor/developers/block-api/block-edit-save/)
4. InnerBlockのjs作成
1. index.jsをコピーしてframework-dl-inner.js
[ブロックの登録 – Japanese Team — WordPress.org](https://ja.wordpress.org/team/handbook/block-editor/developers/block-api/block-registration/)

5. InnerBlockの登録
[ネストしたブロック: InnerBlocks の使用 – Japanese Team — WordPress.org](https://ja.wordpress.org/team/handbook/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/)
6. InnerBlockのEdit/Save実装
1. Edit: コンポーネントの設定
[Component Reference | Block Editor Handbook | WordPress Developer Resources](https://developer.wordpress.org/block-editor/components/)

2. attributesの設定
[属性 – Japanese Team — WordPress.org](https://ja.wordpress.org/team/handbook/block-editor/developers/block-api/block-attributes/)
3. SaveでHTMLを保存

7. index.jsを完成させる
9. スタイルの調整