gutenberg
-
他ブログから記事を取得するブロックの実装|WordPress
仕事用サイトをドメイン直で一つのサイトとして、サブドメインでブログを運用する構成にしているが、最新記事の一覧はドメイン直の方のサイトに出したくて、オリジナルブロックを作成したのでメモ。 RSSブロック RSSを読み込んで […] -
WPダイナミックブロック作成|記事への表示|WordPress|GutenBerg
前の記事でブロック実装まで書いた。 この記事では記事への表示を試す。 プラグインphpへの表示関数の追加 前記事にてプラグインのphpファイル(ここではblock-sample.php)に表示のためのざっくりコードを書い […] -
WPダイナミックブロック作成|保存して表示まで|WordPress|GutenBerg
ダイナミックブロックとは 通常のブロックだとブロックエディタから入力したテキストは静的に本文の一部として保存され、表示時にもHTMLとして静的にレンダリングされる。 保存される本文をコードエディタで見るとこんな感じ。 こ […] -
WordPress|Gutenbergカスタムブロック|Genesis Custom Blocks
プラグインによるカスタムブロック追加。 ググったところBlock Labというプラグインがよさそうだったので公式リポジトリからインストールしたところ、Genesis Custom Blocksに移行したとのことでMigr […] -
WordPress|Gutenbergカスタムブロック|Create Guten Block
前項まではスクラッチでプラグインとしてカスタムブロックを追加する方法をまとめたが、GutenbergはReactで実装されており、JSXというReactの記述法を用いて開発できるCreate Guten Blockという […] -
WordPress|Gutenbergカスタムブロック|カスタム設定
サイドバーに表示されるカスタム設定を追加したい。 カスタムブロックの追加については前項までを参照。 なお、ここからの記述はネットの情報を断片的にかき集めてなんとか動くようにしたものなので、コードとして正しいかは不明。項目 […] -
WordPress|Gutenbergカスタムブロック|編集可能ブロック
ブロックの追加自体は前項を参照。 上記で設定したブロックを編集可能となるよう書き直す。 block.js block.jsを以下のように変更。 サイトにより書いてある内容も異なるので、最低限動作した内容のみに抜粋。ネット […] -
WordPress|Gutenbergカスタムブロック|CSS別ファイル
ブロック追加の基本は前項にて。 前項参照のうえで、以下に変更を加えたファイルを記載。 CSSを別ファイルにて設定する場合、cssファイルを用意してプラグインの定義ファイルにそれぞれCSS定義の記述を追加して以下のようにす […] -
WordPress|Gutenbergカスタムブロック|編集不可ブロック
自分でシンプルに追加(編集不可ブロック) functions.phpに追加したいブロックの記述を書けば追加できる。 ここでは追加するブロックのコードを独立して管理するべく、プラグインとして作成してみる。 pluginsフ […]