[ブロック開発]Cannot read properties of undefined (reading ‘orientation’) エラ ...
WordPress のブロック開発(Gutenberg)にて、WordPress が提供するコンポーネントを操作している最中に、コンソールに以下のエラーが発生したときの備忘録。 エラーメッセージ TypeError: C ...
並べ替え
[WP]親ブロックの値の変更を子ブロック(InnerBlocks)に伝える簡単な方法
WordPress のブロックエディタ(Gutenberg)用のブロック開発にて、親ブロックの属性(attributes)の値の変更を子ブロックである InnerBlocks 側で動的に検知し、その値(条件)に応じて I ...
Gutenberg 15.0 にて実装された主な機能の概要
2023年1月18日に公開された Gutenberg 15.0 では、設定サイドバー(InspectorControl)のタブ化がいよいよ本格的な実装に近づいてきたようです。 設定サイドバーのタブ化(InspectorC ...
[WP] BorderRadiusControl で角丸(border-radius)を制御する
WordPress のブロックエディタ(Gutenberg)のブロック開発時に、任意のブロックや要素に角丸具合(border-radius)をコントロールするオプションを持たせる場合、大抵はRangeControl をコ ...
[WP]インナーブロックからルートブロックの attributes を参照する方法
WordPress (Gutenberg) のブロックにて、インナーブロック(InnerBlocks)を持つ階層構造のブロックで、ルートブロック(親)の atributes 値に合わせてインナーブロック(子孫)の状態を変 ...
[WP]BoxControl または DimensionControl でブロックの余白の調整をする
WordPress のブロックエディターでブロック間に余白を設けたい場合、標準の「スペーサー」ブロックを利用している場合も多いと思いますが、これはブロック間に意味のない空の div を挿入してその div に対する高さ( ...
[WP]BorderBoxControl でボーダー周りの設定を実装する
WordPress のブロックエディターにカスタムブロックを追加し、そのブロックでボーダー周り(枠線の太さ、色、線の種類)のカスタマイズを実装したい場合、WordPress 6.0 より実装された BorderBoxCo ...
[WP]create-block でブロックの追加とダイナミックブロックを作成する方法
WordPress 公式パッケージである @wordpress/create-block の バージョン 4.0.0 にて、既存のプラグインに新たに単体のブロックのみを追加するオプションと、例えば「最近の投稿」のようにサ ...
[WP]ページ内に特定のブロックがある時のみ専用の CSS, JavaScript を読み込む方法
WordPress のブロックエディター(Gutenberg)や FSE (フルサイト編集) 機能の登場によって、様々なコンテンツを記事もサイトも「ブロック」単位で自由に組み立てて構築できるようになりました。 さらにコン ...
[WP] parse_blocks 関数を利用して目次を表示するサンプル
今や WordPress での投稿作業は、ブロックエディター(Gutenberg)が主流となっています。つまり、記事を投稿するときは GUI ベースであらゆるブロックを組み合わせて投稿するため、投稿コンテンツすべてがブロ ...
[WP] theme.json の “elements” で指定できる要素
WordPress 5.9 よりベータ版で実装された、サイト全体をブロックで構築する「フルサイト編集（FSE）」機能に対応するテーマでは、ルートディレクトリに theme.json ファイルを作成し、そこにカラーやタイポ ...
[WP]ブロックテーマでもカスタマイザーを利用する方法
WordPress 6.0 よりフルサイト編集機能（FSE）が実装され、ブロックテーマを有効にすると、管理画面の「外観」メニューには従来のクラシックテーマの場合に存在していた「カスタマイズ」、「ウィジェット」の項目がなく ...