.wp-block-quote WordPressの新しいブロックエディタを使い始めた方も多いだろう。昨年末にリリースされたWordPress 5.0より採用になったブロックエディタ(開発時のGutenberg)である。 you can read useful information later efficiently. Why not register and get more from Qiita? と、一番最後に読み込まれます。 特徴として、各セレクターの直前にブロックエディタ全体を囲っている .editor-styles-wrapper というクラスが自動的に挿入されます。 初出はGutenberg 3.6で書いていましたが、バージョンの変更に伴い一部互換性がなくなりました。具体的には、, 2018/08/18 2019/7/3 - クラシックブロック用のスタイルについて追加 以下、editor-style.cssを生成するためeditor-style.scssの編集内容を示していきます。 エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。 » Block Unit Test for Gutenberg – WordPress プラグイン | WordPress.org, ブロックエディタはデフォルトでなぜか font-family が Noto Serif(明朝体) になっている。, テーマで使っていないフォントは無効にしないと、違和感がある。テーマと同じ font-family で上書きしたほうがいよいだろう。, editor-style.css で宣言したcssは、ダッシュボードの投稿画面では .editor-styles-wrapper に内包される。つまり、ここで body に書いたスタイルは、投稿画面の .editor-styles-wrapper body に適用される。, 投稿タイトルだけはなにがなんでも Noto Serif になってしまうので、ピンポイントで font-family を上書きする。, テーマでGoogleフォントを使っている場合は、ダッシュボードでもGoogleフォントを有効にしておこう。, 運用の途中からブロックエディタに切り替えた場合、新規投稿からブロックエディタが採用される。過去の投稿は旧エディタ(クラシックエディタ)で表示される。その際にアイコンが文字化けしまった。, なお、プラグインの Classic Editor を利用する場合は問題ない。 add_theme_support( 'editor-styles' );によるエディタスタイルの適用に変更。以前はさらに強いスタイルがあって!important必須でしたが解消したため。 What is going on with this article? function my_setup() {
 add_theme_support( 'wp-block-styles' ); add_theme_support( 'editor-styles' );
 add_editor_style( 'editor-style.css' ); add_action( 'after_setup_theme', 'my_setup' ); font-family: 'Raleway', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial','Hiragino Sans', YuGothic, 'Yu Gothic', Meiryo, 'MS PGothic'; .editor-post-title__block,
.editor-post-title__input {. .wp-block-preformatted .wp-block-table オフシャルのテーマサポートをもとにした情報に更新しました。特にカラム幅の指定を改良しています。幅広画像や全幅画像にも対応しました。 例えば、 フロント側はあまり変更ないように見えながら、ダッシュボードの投稿画面はブロックエディタによって大きく変化した。正直とっつきづらい印象を持ちつつ、公式ディレクトリに登録しているテーマから対応してみた。, なお、以下に挙げる対応なしでもブロックエディタは使える。とはいえダッシュボードとフロントの見た目がかなり食い違ってしまうため、ユーザーが戸惑ってしまう心配がある。テーマを配布していたり、クライアント案件では対応をおすすめする。, 次にフロント画面をみながら、ダッシュボードの投稿画面の表示が同等になるように editor-style.css にスタイルを追加していく。この作業は旧バージョンと同じくコツコツと。ブロックエディタではさらにブロック特有のクラスが付与される。 » BirdFIELD – WordPress テーマ | WordPress.org, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, Google Maps Photo Gallery位置情報付きの写真をGoogle Map上に表示するショートコード, Post Title Furigana記事タイトルのふりがなをカスタムフィールドに自動入力するプラグイン. 旧エディタからブロックに変換した場合も問題ない。, テーマタグとは style.css のTags に書いてあるキーワードだ。ダッシュボードからテーマを検索する際のフィルターに使われる。one-column や custom-header、translation-readyなど、あらかじめ用意されたタグのなかから、テーマの特徴を選んでアピールする。, カスタム投稿タイプでブロックエディタで使うには、register_post_type()に show_in_rest を追加する。これをやっておかないと、カスタム投稿タイプだけクラシックエディタになってしまうので、注意!, 使ってみたら、ブロックエディタ意外に便利だった。 2018/12/5 - WordPress 5.0RC2 に更新 editor-style.css で宣言したcssは、ダッシュボードの投稿画面では .editor-styles-wrapper に内包される。 つまり、ここで body に書いたスタイルは、投稿画面の .editor-styles-wrapper body に適用される。 投稿タイトルだけはなにがなんでも Noto Serif になってしまうので、ピンポイントで font-family を上書き … 区切りや画像のブロックにはデフォルトでいくつかの「ブロックスタイル」が設定されています。これは、選択すると特定のクラスが付与され、予め仕込んでおいたスタイルが適用されるというものです。不要の場合は削除できます。こちらの記事でやり方を説明しています。, クラシックブロックは基本的なスタイル(文字など)は適用されますが、その内部の個々の要素はブロック用クラスが無いので手付かずの状態です。クラシックブロックには.wp-block-freeformクラスがついていますのでその内部を操作します。, フロント側と編集画面ではHTMLの構造に直接的な互換性はありません。scssなどでブロックごとにコンポーネント化したり、変数を共用するのがよいと思います。, 一番の問題点は、クラス無しでそのまま出力されるブロックがあることです。例えばp, h1, h2, h3, h4, h5, h6, ul, olはラッパーもクラスも無く出てきますが、それらは他のブロック内でも使われていたり、将来新しいブロックを追加したときに競合する可能性があります。, その他のブロックも .wp-block-ホニャララ クラスがラッパーに付くものと、
のように、要素に直接クラスが付くものが混在しているので注意が必要です。, なお、WordPress 5.2 まではギャラリーとテーブルがラッパー無しで出力されていましたが、5.3 からそれぞれ、