Gutenberg コードリーディングメモ

Gutenberg本体のコードを読む上で、とっかかりになりそうな部分をメモ。

registerBlockType()

https://github.com/WordPress/gutenberg/blob/master/blocks/api/registration.js#L51

色々バリデーションが書いてあって、最終的には

でローカル変数 blocks に第1引数(name)をキー、第2引数(settings)を値として追加する。

setAttributes()

BlockListBlock というブロックで定義されている。

https://github.com/WordPress/gutenberg/blob/master/editor/components/block-list/block.js#L184-L203

ここではBlockListBlockがpropsに持っているonChange()メソッドが重要。

https://github.com/WordPress/gutenberg/blob/master/editor/components/block-list/block.js#L465

onChangeはStoreをdispatchする。属性の設定処理の本体はreducerにある。

https://github.com/WordPress/gutenberg/blob/master/editor/store/reducer.js#L129

Gutenbergのコードを読むなら、ある程度Flux(およびその実装であるRedux)については理解しておく必要がある。

Gutenberg Handbook 読書メモ (3) Reference

↓の続き。今回はリファレンスをざっくり。

Gutenberg Handbook 読書メモ (1)
Gutenberg Handbook 読書メモ (2)

Attributes

https://wordpress.org/gutenberg/handbook/reference/attributes/

ソース(source)

属性のsourceはブロックの属性の値の取得方法を定義する。

それぞれのsourceは、第1引数にセレクタを取る(オプショナル)。セレクタが指定されると、sourceは、ブロック内で対応する要素を取得する。

内部では、sourcehpqライブラリのスーパーセットとなっている。

attribute

attributeを使うと、マークアップから属性を取得できる。

以下の例では、imgタグからsrc属性を抜き出している。

text

textを使うと、マークアップの内側のテキストを取得できる。

html

htmlを使うとマークアップの内側のHTMLを取得できる。

children

childrenを使うとマッチした要素の子ノードを取得できる。Editableコンポーネントとの組み合わせでよく使われる。

query

queryを使うと、複雑なセレクタでマークアップから値を取得できる。

以下では、それぞれのimg要素からurlalt属性を抜き出している。

Meta

記事のメタデータ(post meta)から属性を取得することもできる。

このようにすると、ブロックからメタ属性に対して読み書きできるようになる。

検討事項

デフォルトでは、メタフィールドは記事のオブジェクトのメタデータからは除外されている。この制限は、フィールドを明示的に可視化することで回避可能である。

さらに、WordPressは以下のようなデフォルト設定になっている点に注意が必要。

  • メタデータをユニークなものとしては扱わず、値の配列を返す
  • データを文字列として扱う

どちらの振る舞いも望ましくないなら、register_meta関数の呼び出しを以下のようにすることで、補うことができる。

最後に、属性に値を設定する際はデータの型に注意が必要である。

Blocks support by themes

https://wordpress.org/gutenberg/handbook/reference/theme-support/

基本的に、ブロックのスタイルのカスタマイズはテーマ側のCSSで行うことができる。しかし、一部の機能はテーマ側での明示的な有効化(オプトイン)が必要になる。

Meta Boxes

https://wordpress.org/gutenberg/handbook/reference/meta-box/

※色々書いているけど一旦飛ばす

Glossary

https://wordpress.org/gutenberg/handbook/reference/glossary/

用語集

  • 属性ソース(Attribute sources): ブロックの属性の形を記述するオブジェクト
  • 属性(Attributes): ブロックの現在の状態を表現するオブジェクト
  • ブロック(Block): マークアップの単位を表す抽象的な用語。ブロックは組み合わせて使用され、Webページのコンテンツやレイアウトを構成する。
  • ブロックの名前(Block name): ブロック型のユニークな識別子
  • ブロック型(Block type): ブロックの振る舞いの定義
  • 動的ブロック(Dynamic block): 保存時にコンテンツが確定せず、記事が表示されるタイミングで描画されるブロック
  • Editable: リッチエディタ機能を提供するコンポーネント
  • Inspector: ブロック設定用のUIコンポーネント
  • 記事の設定(Post settings): 記事編集画面のサイドバーのこと
  • シリアライゼーション(Serialization): 記事の保存時にブロックの属性オブジェクトをHTMLマークアップに変換するプロセス
  • 静的ブロック(Static Block): 記事の保存時に内容が確定するブロック
  • TinyMCE: リッチエディタ(WYSIWYGエディタ)
  • ツールバー(Toolbar): ブロックの上に表示される一連のボタンのこと

Design Priciples

https://wordpress.org/gutenberg/handbook/reference/design-principles/

抽象的な話なので割愛

History

https://wordpress.org/gutenberg/handbook/reference/history/

内容がないので割愛

Coding Guidelines

https://wordpress.org/gutenberg/handbook/reference/coding-guidelines/

Gutenbergのコードに関することなので割愛。

Testing Overview

https://wordpress.org/gutenberg/handbook/reference/testing-overview/

JSはnpm testでテストが実行できる。

Jestのスナップショットテストを使っていて、スナップショットテストを使う際のベストプラクティス等について言及してある。

FAQ

https://wordpress.org/gutenberg/handbook/reference/faq/

いずれ公式で訳されるはず。

This Blog is Powered By PHP/7.0.0

w_powerd_by_php_700-min

本ブログでは、以前はPHP5.6を使用していたのですが、PHP7の正式版もリリースされたことですし、PHP7.0にアップグレードしてみました。

本ブログのサーバOSはCentOS6を使用していて、PHPはremiリポジトリを使用してインストールしています。remiリポジトリを使用している場合、PHPのメジャーバージョンアップは非常に簡単です。

まず、remiリポジトリの情報を最新に更新します。その後、PHP 7.0のリポジトリを指定した状態で、PHPのパッケージの更新をかけます。
念のため、ApacheとMySQLを再起動しておくとよいと思います。

ざっと使ってみた感じでは、特に不具合は見当たりません。

ただ、Wordpress本体はともかく、プラグインやテーマのPHP 7対応がどの程度進んでいるのかは不明です。趣味のブログなら気軽にバージョンアップできますが、商用で使っているWordpressの場合は慎重な対応が必要でしょう。

WP-Twitterが記事の更新時にもツイートするので、記事の公開時だけツイートされるようにした

WP-Twitterは割と良いプラグインなのだけど、ツイートされるタイミングが「記事の公開時及び更新時」ということで、微小な変更に対してもツイートがされてしまう。

なぜこのような挙動になっているのかというと、WordpressのAPIにはフック(hook)というものがあって、特定のイベント時に実行する処理を記述できるのだけど、「記事公開時にだけ起動するフック」というものは提供されていないから。WP-Twitterが利用しているのはpublish_postフックで、これは更新時にも起動してしまう。

とりあえずの回避策として考えたのが、ステータス変更時のフックの利用。例えば、「下書き」状態の記事を「公開」する際のフックは「draft_to_publish」。これを利用すれば、多少冗長になるけれど、「公開時にだけツイート」という処理を実現できる。

具体的なコードは以下。なお、WP-Twitterのバージョンは4.2.2。

既存の処理(2行目)をコメントアウトして、3行目以降の処理を追加している。やっていることは単純で、新規作成時/レビュー待ち/下書き/自動作成された下書き/予約投稿 のいずれかの状態になっている記事が、公開状態に変わった際にツイートを行う、というもの。雑な感じだけど、とりあえず動いたのでこれで。

プラグインの処理をオーバーライドする、もっといい方法があるなら教えてください。。。

WordPressサイト構築メモ

このサイトの構成を簡単にメモしておきます。

バックエンド:ConoHa VPS メモリ1GB 仮想2コア HDD 100GB

ConoHaでリージョンの確認ってどうやるんだろう…。SSH接続時の体感では、石巻リージョンのさくらVPSより速いけど。

OS: CentOS 6.5

7にしようかなとも思ったけど、変なところで詰まるのが嫌だったので。6系でもあと6年は戦える!

Webサーバー: Nginx 1.6

DBサーバ: MySQL 5.6

PHP: 5.6.0

WordPress: 3.9.2

この辺はできるだけ新し目で揃えてみた。あえてApacheを採用する理由もないのでNginxで。Wordpress使うのが前提なのでPHP + MySQLで。

一番ハマったのは、お名前.comのDNS設定。。。

移行に関しては、heroku用に作ってたgitリポジトリの中身をそのまま移した。プラグインも全部コミットしてあったので、ソースの移行は楽。データのインポートは、heroku側のWordpressでエクスポート→このサイトのWordpressでインポート で実施。プラグインの設定は引き継がれなかったので、再設定は若干面倒だった。