言語学サイトのWordPressテーマを開発中、ブロックエディタの「カラム」ブロックが突然機能しなくなった。2カラムレイアウトを設定しても、コンテンツが縦に積み重なってしまう。
調査の結果、functions.phpの誤った設定が原因だと判明した。不要なスタイルを削除しようとして、wp-block-libraryをdequeueしていたのだ。
// 問題のあったコード
function anagura_dequeue_unnecessary() {
wp_dequeue_style('wp-block-library');
}
add_action('wp_enqueue_scripts', 'anagura_dequeue_unnecessary');
wp-block-libraryは、WordPressのブロックエディタが生成するすべてのブロックの基本スタイルを含んでいる。これを削除すると、カラムブロックだけでなく、ギャラリー、引用、ボタンなど、すべてのブロックが正しく表示されなくなる。
正しいアプローチは、wp-block-libraryを保持しつつ、テーマでブロックスタイルのサポートを明示的に宣言することだった。
add_theme_support('wp-block-styles');
この一行を追加することで、WordPressはテーマがブロックエディタと互換性があることを認識し、適切なスタイルを適用する。
同時に、年表(Chronology)セクションのリファクタリングも行った。複雑なHTMLテーブルを廃止し、新しいショートコードシステム([chronology_section])に置き換えた。このショートコードは、functions.phpで定義され、モバイルレスポンシブな年表テーブルを生成する。
モバイルCSS版でも苦労した。年表テーブルが小さな画面で崩れていた。最終的に、完全に書き直したchronology.css(v4)を作成し、flexboxベースのレスポンシブレイアウトを実装した。
現在、言語学サイトのWordPressテーマは、ブロックエディタと完全に互換性がある。カラムブロックは正しく動作し、年表セクションはすべてのデバイスで読みやすく表示される。