How to use the MUI DataGrid in Block Editor?
Why CheckBox dose not work?

ブロックエディタにMUIのDataGridを配置して…

続きを読む・・・

GutenbergでuseSelect()の罠にハマる
Gutenberg Dataにアクセスする時、useSelect()使ってますか？
ついついこの書き方面倒だったので、以下のようなコードを書いて…

続きを読む・・・

この内容は好奇心的なもので実践向きではありません！

Gutenbergのデータモジュールにコアなストアがあります。
コアストア(core)にはREST APIを扱いやすくするEntitiesな機能(…

続きを読む・・・

getEntityRecords()とページネーション。
使える条件は？
エンティティ操作ではメタ情報からアイテムの総数およびページの最大数を取得出来るようになってます。
ただし、設定にsupport…

続きを読む・・・

GutenbergでRedux風にストアを登録する。
今回はcreateReduxStore()をより深く探っていきます。
以下のリンク先が理解できる知識があることが前提となります。
WordPres…

続きを読む・・・

GutenbergのエンティティとREST APIの関係
Gutenbergのエンティティ
WordPressは投稿やカテゴリなど多くのREST APIを公開しています。
例えば「投稿」で考えてみます…

続きを読む・・・

ブロックパターンと再利用ブロックについて！
再利用ブロックについて調べました。
記事はインサーターや初期設定など広範囲に及んでます。
まず再利用ブロックと呼ばれていたものは同期ブロックに変更されました…

続きを読む・・・

記事作成
今回ブロックの機能をいくつかまとめて紹介します。

ブロックパターン
ブロックスタイル
ブロックバリエーション

ブロックパターン
複数のブロックの塊をひな形にしちゃおう的な発想。
例えばプ…

続きを読む・・・

WordPressのREST APIにはapiFetch()で簡単にアクセスすることはできます。
ただその対象が投稿タイプ(postsやpagesなど)やタクソノミー(categoriesやtagsな…

続きを読む・・・

前回はブロックの変換についてでした。
WordPressのブロック開発メモ その１３ ブロックの変換
今回はウィジェットと、ブロックへの変換についてです。
これまでのウィジェット
WordPressに…

続きを読む・・・

前回はブロック作成についてでした。
WordPressのブロック開発メモ その１２ ブロックの作成とシリアライズ/デシリアライズ
今回はブロックの変換についてです。
変換によく出てくるcreateBl…

続きを読む・・・

前回はREST APIについてでした。
今回はブロックの作成と、前回のREST APIを応用した遊びをやってみようと思います。
WordPressのブロック開発メモ その１１ REST API へのア…

続きを読む・・・

前回はワードプレスのデータを扱うストアの紹介をしました。
WordPressのブロック開発メモ その１０ Redux ストアの作成
今回、この投稿は若干難易度が高いので飛ばしてもらっても構いません。
…

続きを読む・・・

前回ではセレクタとアクションを使ってストアからデータにアクセス手段を紹介しました。
WordPressのブロック開発メモ その９ データの操作(セレクタとアクション&ディスパッチ)
ストアはW…

続きを読む・・・

前回はフックについてでした。
WordPressのブロック開発メモ その８ フック(アクションとフィルター)
今回はRedux的なデータ操作について紹介します。
セレクタとアクション
状態を取得するセ…

続きを読む・・・

https://github.com/WordPress/gutenberg/blob/4fa2a874fe9c61a4609ea273425d1302ecc18bd0/packages/data/s…

続きを読む・・・

今回はsaveコンポネントを破棄し、サーバーサイドでレンダリングする方法です。
saveを削除
saveではフロント表示用のコンポーネントを定義していました。
これをサーバーサイドでレンダリングするこ…

続きを読む・・・

前回は高階コンポーネントについて解説しました。
WordPressのブロック開発メモ その７ HOC(高階コンポーネント)
今回はフックについてです。
ブロックにもワードプレス本体のフックのようなもの…

続きを読む・・・

前回はスロットについてでした。
WordPressのブロック開発メモ その６ スロット
今回は鬼門でもある高階コンポーネントについてです。
パッケージは@wordpress/composeにあります。…

続きを読む・・・

ブロックを扱う上で結構重要な概念がスロットです。
前回で説明したInspectorControlsやBlockControlsなど(以下参照)、
WordPressのブロック開発メモ その５ ツールバ…

続きを読む・・・

前回(WordPressのブロック開発メモ その２ TypeScript編)の続きです。
属性
これまでsave及びeditは単に固定されたメッセージを表示するだけの最低限のコードでした。
今度はed…

続きを読む・・・

前回のブロック開発の基本では、ひな形がJavaScriptを生成してました。
WordPressのブロック開発メモ その１
やっぱ、TypeScript使いたいよね！
ひな形はJavaScriptで書…

続きを読む・・・

ワードプレスのブロック作成メモです。
既に本家に翻訳されたドキュメントがあるのですが、
ちょっと分かりにくいところがあったりハマったりもしたので簡素化して纏めました。
最低限の情報しか載せてないので入…

続きを読む・・・

現在WordPressブロック開発の情報収集してます。
それぞれの記事を書いている時点ではまだ詳しい知識がないため、
間違いやもっといい他のやり方などがある可能性が高くなります。
ブロック開発について…

続きを読む・・・

前回ではスロットを紹介しました。
WordPressのブロック開発メモ その６ スロット
今回はスロットを裏で支えるプラグインについても掘り下げていこうと思います。
プラグインに追加すること前提で提供…

続きを読む・・・

前回はGutenbergコアのコンポーネントをいくつか紹介しました。
WordPressのブロック開発メモ その４ コンポーネント
今回はツールバーとサイドバーについてです。
ツールバー
ブロックエデ…

続きを読む・・・

とりあえず調べた@wordpress/iconsのアイコン一覧です。
増えたり減ったり、変更がある可能性があります。
他にもある可能性もあります。

一度表示してみましょう。

続きを読む・・・

前回はReactだけの知識で完結するようＷordＰress(Gutenberg)コアで用意されているコンポーネントの使用をさけてました。
WordPressのブロック開発メモ その３ 編集
今回はGu…

続きを読む・・・

前回はuseRef()でしたが、今回はその続きです。
useEffect()の第二引数を調べてみました。
引数なし、空の配列、要素一つの配列の３通りで試しました。
作業内容は

Clickボタンを２回…

続きを読む・・・

useRef()、再レンダリングせず、コンポーネント単位の状態を持てるという２つのメリットがあります。
非エクスポート変数を使った場合、useState()を使った場合、useRef()を使った場合を…

続きを読む・・・