タグ

wordpressとCustom Blockに関するmimosafaのブックマーク (3)

  • Before Gurenberg - ブロックの情報保存先、特にカスタムフィールド - Capital P

    前回まででブロックをいくつか作ってみたのだが、今回は情報の保存先という点について詳しく触れてみたい。 HTMLの属性・中身に情報を保存する インタラクティブなHTML要素というのはそれほど多くない。テーマと管理画面で同じinput要素を表示する必要性はほぼないだろうが、ブロックの情報保存先としてわかりやすいので、まずこれから触れてみよう。 inputというブロックを用意し、inputタグをテーマ側にそのまま表示することとしよう。とりあえずブロックcapital-block-inputをPHPで登録し…… // Register block. add_action( 'init', function() { // Register JS wp_register_script( 'capital-block-input', CAPITAL_BLOCK_ASSET_URL . 'assets/j

    Before Gurenberg - ブロックの情報保存先、特にカスタムフィールド - Capital P
  • Before Gutenberg - ダイナミックブロック入門 - Capital P

    前回はシンプルなアラートボックスを作成したが、今回は外部要因によって動的に中身が変更されるダイナミックブロックに挑戦してみよう。 ダイナミックブロックとは? PHPによる動的な生成を伴うものである。保存される内容=表示される内容でよいのなら以前のやり方でよいが、たとえば、「最新の投稿リスト」のようなものの場合、その内容は変わっていく。 今回は「x年y月のイベント一覧を表示するブロック」という想定をしよう。条件は次の通り。 沢山のイベントがカスタム投稿タイプeventとして登録されている。 各イベントは開催日(_event_date)、会場の緯度(_lat)および経度(_lng)をカスタムフィールドに持つ。 Gutenbergでブロックに年yearおよび月monthを指定すると、その時期に開催されるイベントの一覧が出力される。 それでは、早速とりかかろう。今回表示するブロックのイメージは次の

    Before Gutenberg - ダイナミックブロック入門 - Capital P
  • Before Gutenberg - ブロックタイプの登録 - Capital P

    稿ではいよいよGutenbergのブロックタイプについて学んでいこう。Gutenbergではカスタムブロックタイプを登録することができる。このブロックタイプにはいくつか種類があるのだが、まずは一番簡単な「見栄えに関する設定項目だけが存在するブロック」を作ってみよう。 なお、以前の記事ではじめてのカスタムブロックというものがあるのだが、重複するところが多いことをお断りしておく。とはいえ、半年以上前の記事であることと、JSXを採用している点を鑑みると、稿から学ぶことも多いだろう。 成果物 成果物としては、次のようなアラートボックスを作成することを目指す。アラートボックスには次の2つの要素が存在する。 スタイル。success, info, warning, dangerの4種類がある。 メッセージ。これはリッチテキスト(HTML)として編集可能で、strongタグとaタグなどを挿入すること

    Before Gutenberg - ブロックタイプの登録 - Capital P
  • 1