editor_style css ブロックエディタ 4

2019/12/20 - WordPress 5.3でギャラリーやテーブルがfigureでラッピングされたので更新。 » BirdFIELD – WordPress テーマ | WordPress.org, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, Google Maps Photo Gallery位置情報付きの写真をGoogle Map上に表示するショートコード, Post Title Furigana記事タイトルのふりがなをカスタムフィールドに自動入力するプラグイン. Help us understand the problem. By following users and tags, you can catch up information on technical fields that you are interested in as a whole, By "stocking" the articles you like, you can search right away. enqueue_block_editor_assets で読み込んだCSS( block-editor-style.css 等)の後. WP-multibyte-patchがイタリックを解除していたバグが修正されたのでその部分を削除。 WordPressの新しいブロックエディタを使い始めた方も多いだろう。昨年末にリリースされたWordPress 5.0より採用になったブロックエディタ(開発時のGutenberg)である。 .wp-block-gallery 2020/05/25 - WP v5.4.0 での見出しブロックの仕様変更に伴う更新。.wp-block-heading を [data-type="core/heading"] に変更。 2.「editor-style.css」でないテーマにCSSクラスメニュを適用させる方法 <対策方法> ①利用しているビジュアルエディタのCSSファイルを子テーマフォルダにコピーする。場所は子テーマディレクト直下でも可。 ②上記のファイル名を「editor-style.css」に変更する。 .wp-block-preformatted 初出はGutenberg 3.6で書いていましたが、バージョンの変更に伴い一部互換性がなくなりました。具体的には、, 2018/08/18 What is going on with this article? フロント側はあまり変更ないように見えながら、ダッシュボードの投稿画面はブロックエディタによって大きく変化した。正直とっつきづらい印象を持ちつつ、公式ディレクトリに登録しているテーマから対応してみた。, なお、以下に挙げる対応なしでもブロックエディタは使える。とはいえダッシュボードとフロントの見た目がかなり食い違ってしまうため、ユーザーが戸惑ってしまう心配がある。テーマを配布していたり、クライアント案件では対応をおすすめする。, 次にフロント画面をみながら、ダッシュボードの投稿画面の表示が同等になるように editor-style.css にスタイルを追加していく。この作業は旧バージョンと同じくコツコツと。ブロックエディタではさらにブロック特有のクラスが付与される。 このように wp-block- と付くクラスはWordPress 5.0以降に内包される theme.min.css にスタイルが定義されているので、そのまま利用すればいいかんじに表示される。テーマで上書きしてもよい。, フロントとダッシュボードの投稿画面で正しく同じように表示されるか?確認しながら追加する。, 動作確認には、プラグインの Block Unit Test for Gutenberg を使うと便利だ。 旧エディタからブロックに変換した場合も問題ない。, テーマタグとは style.css のTags に書いてあるキーワードだ。ダッシュボードからテーマを検索する際のフィルターに使われる。one-column や custom-header、translation-readyなど、あらかじめ用意されたタグのなかから、テーマの特徴を選んでアピールする。, カスタム投稿タイプでブロックエディタで使うには、register_post_type()に show_in_rest を追加する。これをやっておかないと、カスタム投稿タイプだけクラシックエディタになってしまうので、注意!, 使ってみたら、ブロックエディタ意外に便利だった。 add_theme_support( 'editor-styles' );によるエディタスタイルの適用に変更。以前はさらに強いスタイルがあって!important必須でしたが解消したため。 作成したCSSファイルにスタイルを書き込む このような手順を踏むことで、結構簡単に以下のようにビジュアルエディターに独自のスタイルを反映させることができます。 僕は、Simplicityというテーマを使っている … テーマ(子テーマ)フォルダ内にCSSファイルを作成する 3. 2018/12/7 - wp multibyte patchの更新に対応 テーマではまだまだ新旧エディタに対応する必要があるので面倒くさい。早くブロックエディタのみになってほしいな~, 今回、ブロックエディタに対応したテーマはこちら なおここでは、さらに幅広と全幅の画像やブロックの幅も指定しています。, 基本はそれぞのブロックのラッパークラス.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) 2019/7/3 - クラシックブロック用のスタイルについて追加 区切りや画像のブロックにはデフォルトでいくつかの「ブロックスタイル」が設定されています。これは、選択すると特定のクラスが付与され、予め仕込んでおいたスタイルが適用されるというものです。不要の場合は削除できます。こちらの記事でやり方を説明しています。, クラシックブロックは基本的なスタイル(文字など)は適用されますが、その内部の個々の要素はブロック用クラスが無いので手付かずの状態です。クラシックブロックには.wp-block-freeformクラスがついていますのでその内部を操作します。, フロント側と編集画面ではHTMLの構造に直接的な互換性はありません。scssなどでブロックごとにコンポーネント化したり、変数を共用するのがよいと思います。, 一番の問題点は、クラス無しでそのまま出力されるブロックがあることです。例えばp, h1, h2, h3, h4, h5, h6, ul, olはラッパーもクラスも無く出てきますが、それらは他のブロック内でも使われていたり、将来新しいブロックを追加したときに競合する可能性があります。, その他のブロックも .wp-block-ホニャララ クラスがラッパーに付くものと、

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

Start a Conversation

Your email address will not be published.