editor_style css ブロックエディタ 4



Help us understand the problem. 2018/12/5 - WordPress 5.0RC2 に更新 テーマではまだまだ新旧エディタに対応する必要があるので面倒くさい。早くブロックエディタのみになってほしいな~, 今回、ブロックエディタに対応したテーマはこちら WordPressの新しいブロックエディタを使い始めた方も多いだろう。昨年末にリリースされたWordPress 5.0より採用になったブロックエディタ(開発時のGutenberg)である。 editor-style.css で宣言したcssは、ダッシュボードの投稿画面では .editor-styles-wrapper に内包される。 つまり、ここで body に書いたスタイルは、投稿画面の .editor-styles-wrapper body に適用される。 投稿タイトルだけはなにがなんでも Noto Serif になってしまうので、ピンポイントで font-family を上書き … 2018/12/7 - wp multibyte patchの更新に対応 旧エディタからブロックに変換した場合も問題ない。, テーマタグとは style.css のTags に書いてあるキーワードだ。ダッシュボードからテーマを検索する際のフィルターに使われる。one-column や custom-header、translation-readyなど、あらかじめ用意されたタグのなかから、テーマの特徴を選んでアピールする。, カスタム投稿タイプでブロックエディタで使うには、register_post_type()に show_in_rest を追加する。これをやっておかないと、カスタム投稿タイプだけクラシックエディタになってしまうので、注意!, 使ってみたら、ブロックエディタ意外に便利だった。 .wp-block-preformatted WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。, Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。, そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。, Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれご紹介いたします。, 1つ目の方法は、after_setup_themeフックにCSSファイルの読み込みを追記するやり方です。functions.phpに以下を追記します。, after_setup_themeは、以前”Gutenbergの「幅広」と「全幅」に対応させる方法“という記事で紹介していますが、すでにafter_setup_themeフックを使った記述がある場合は、そこに「add_theme_support( ‘editor-styles’ );」と「add_editor_style( ‘editor-style.css’ );」を追加してあげればOKです。, functions.phpにCSSファイル読み込み用のコードを追加したら、「editor-style.css」を作成してテーマディレクトリ直下にアップロードします。, editor-style.cssの中身は、以下のように記述します。特にクラスを指定する必要はありません。, なお、エディタ内のコンテンツ部分の横幅を変更したい場合は、以下のように.wp-blockの最大横幅を変更します。, 2つ目の方法は、enqueue_block_editor_assetsフックでCSSファイルを読み込むやり方です。, functions.phpに以下を追加することで、編集画面でeditor-style.cssが読み込まれるようになります。, 続いて、editor-style.cssを作成してテーマディレクトリ直下にアップロードします。, editor-style.cssの中身は以下のようにします。エディタには.editor-styles-wrapperというクラスが付いているので、.editor-styles-wrapperを使ってスタイルを適用します。, なお、エディタ内のコンテンツ部分の横幅を変更したい場合、パターン1とは違って細かい調整が必要です。, 他の部分を変更したい場合は、ブラウザのデベロッパーツールを使って該当箇所のクラスを確認しながら変更していきましょう。, いちいち.editor-styles-wrapperを追加しなくて良いので、パターン1のやり方がわかりやすいですね。, どちらの方法でも、編集画面に独自のスタイルを適用することができるので、状況に合わせて使い分けてください。, ちなみに、旧エディタで独自のスタイルを適用したい場合は、functions.phpに以下を追記します。, その上で、editor-style.cssをテーマディレクトリ直下にアップロードします。editor-style.cssの中身は以下のような感じです。, 投稿や固定ページをクリック一発で複製できるようになるWordPressプラグイン「Post Duplicator」, imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」, Twitterアカウントがシャドウバン(Shadowban)されているか確認できるWEBサービス「Twitter Shadowban Test」, カスタム投稿やカスタムタクソノミーの一覧をウィジェットで表示することができるWordPressプラグイン「Custom Post Type Widgets」, GoogleドライブでWEBサイト(HTML/CSS)が公開できるようになりました。, table-layout:fixed;を指定してもテーブルのwidthがうまく効かない場合の対処法.

.wp-block-table オフシャルのテーマサポートをもとにした情報に更新しました。特にカラム幅の指定を改良しています。幅広画像や全幅画像にも対応しました。 .wp-block-quote 以下、editor-style.cssを生成するためeditor-style.scssの編集内容を示していきます。 エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。

WordPress 5から「Gutenberg」は「ブロックエディター」に名前が変わるので差し替え。 フロント側はあまり変更ないように見えながら、ダッシュボードの投稿画面はブロックエディタによって大きく変化した。正直とっつきづらい印象を持ちつつ、公式ディレクトリに登録しているテーマから対応してみた。, なお、以下に挙げる対応なしでもブロックエディタは使える。とはいえダッシュボードとフロントの見た目がかなり食い違ってしまうため、ユーザーが戸惑ってしまう心配がある。テーマを配布していたり、クライアント案件では対応をおすすめする。, 次にフロント画面をみながら、ダッシュボードの投稿画面の表示が同等になるように editor-style.css にスタイルを追加していく。この作業は旧バージョンと同じくコツコツと。ブロックエディタではさらにブロック特有のクラスが付与される。 WordPressって何?から始まった悪戦苦闘の自分メモを公開...», » Block Unit Test for Gutenberg – WordPress プラグイン | WordPress.org, » BirdFIELD – WordPress テーマ | WordPress.org, WordPress.orgに登録してあるテーマの更新をサボってしまったときの対応メモ, 「WordPress と写真」テーマの選び方 テーマを選んだら試すこと #tokyowp, WordPressで使うなら?Tokyo WordPress Meetup June 〜レンタルサーバー座談会〜 #tokyowp, WordPressの翻訳システム「GlotPress」テーマの翻訳ファイルはどこへ行ったの?, Infinite Timeline the Free WordPress Plugin, Google Maps Photo Gallery the Free WordPress Plugin. .wp-block-gallery enqueue_block_editor_assets で読み込んだCSS( block-editor-style.css 等)の後.

2019/7/3 - クラシックブロック用のスタイルについて追加 続いて、editor-style.cssを作成してテーマディレクトリ直下にアップロードします。 editor-style.cssの中身は以下のようにします。エディタには.editor-styles-wrapperというクラスが付いているので、.editor-styles-wrapperを使ってスタイルを適用します。 なおここでは、さらに幅広と全幅の画像やブロックの幅も指定しています。, 基本はそれぞのブロックのラッパークラス.wp-block-ホニャララを指定し、内部要素にスタイルを当てる形式です。以下のセレクタでスタイルを当てることができます。, WordPress 5.4.1 更新: 以前は .wp-block-heading 配下でしたが気がついたら無くなってましたので、data 属性ベースに変更しました。, WordPress 5.5.0 更新: [data-type="core/heading"] h* が h*[data-type="core/heading"] にさらに変更されています。, 追記(2020/05) エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。, このように書かれたスタイルシートは WordPress 側で次のように変換され、編集画面に直接埋め込まれます。, body は実際の編集領域である.editor-style-wapperに、その他のセレクタは、.editor-style-wapper の子として再配置されます。, デフォルトでは Noto Serif が当たっていますが、これも同様にbodyに指定すればOKです。ただしタイトルは編集領域外のため、別の対応が必要です。, ブロックエディターのデフォルトでは編集領域の幅が 610px 固定で狭いです。さらにブロック選択時のパディングを考えると実質 580px しかありません。今回はそれを実質 800px に拡大にしてみましょう。 区切りや画像のブロックにはデフォルトでいくつかの「ブロックスタイル」が設定されています。これは、選択すると特定のクラスが付与され、予め仕込んでおいたスタイルが適用されるというものです。不要の場合は削除できます。こちらの記事でやり方を説明しています。, クラシックブロックは基本的なスタイル(文字など)は適用されますが、その内部の個々の要素はブロック用クラスが無いので手付かずの状態です。クラシックブロックには.wp-block-freeformクラスがついていますのでその内部を操作します。, フロント側と編集画面ではHTMLの構造に直接的な互換性はありません。scssなどでブロックごとにコンポーネント化したり、変数を共用するのがよいと思います。, 一番の問題点は、クラス無しでそのまま出力されるブロックがあることです。例えばp, h1, h2, h3, h4, h5, h6, ul, olはラッパーもクラスも無く出てきますが、それらは他のブロック内でも使われていたり、将来新しいブロックを追加したときに競合する可能性があります。, その他のブロックも .wp-block-ホニャララ クラスがラッパーに付くものと、

のように、要素に直接クラスが付くものが混在しているので注意が必要です。, なお、WordPress 5.2 まではギャラリーとテーブルがラッパー無しで出力されていましたが、5.3 からそれぞれ、