3ヶ月前に投稿

ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する 3

2019年1月27日

この記事は約 8 分で読めます。

4.5

前回では、
一部のテキストに
スタイルを当てる方法を
ご紹介いたしました。
https://neco913.kirara.st/post-3723/

はじめに

先ずはじめに、
導入するにあたり
gutenberg-examples
(カスタムブロック)
のフォルダーで作業する事

前提としてお話していく事とします。
https://neco913.kirara.st/post-3485/

ブロックごとにスタイルを追加する

↑画像のように
プレビュー機能もあり、
使いやすくなっています。

ブロックスタイルの追加方法

まず、
カスタマイズするためのファイルを
読み込む記述をします。

gutenberg-examples/index.php
以下のコードを書きます。

// スタイルセレクト機能 script
function style_editor($hook) {
    wp_enqueue_script( 'style_js', plugins_url( 'js/style.js', __FILE__ ),
    array('wp-blocks','wp-element') // Dependency to include the CSS after it.
     );
}
add_action('enqueue_block_editor_assets', 'style_editor');
 
// スタイルセレクト機能 style
function style_frontend_editor($hook) {
    wp_enqueue_style( 'style_css', plugins_url( 'css/style.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'css/style.css' ) // filemtime — Gets file modification time.
     );
}
add_action('enqueue_block_assets', 'style_frontend_editor');

CSSやJSは上記のファイルに記述するものとします。

ブロックスタイルを追加するjs 基本形

wp.blocks.registerBlockStyle('ブロック名', {
    name: '付与するクラス',
    label: 'ラベル名'
});

段落ブロックの名前は「core/paragraph」です。
他のブロックの名前は以下の記事を
参考にしてみてください。

あとは、付与するクラス名に合わせてCSSを調節してあげるだけです。
実際にブロックに付与されるクラス名は、
is-style-{nameで指定したクラス名}となります。

ブロックスタイルの追加方法

ブロックスタイルを追加するjs

jQuery(document).ready(function($) {
  wp.blocks.registerBlockStyle("core/paragraph", {
    name: "default",
    label: "標準",
  });
 
  wp.blocks.registerBlockStyle("core/paragraph", {
    name: "dashborder",
    label: "枠あり(点線)"
  });

  wp.blocks.registerBlockStyle("core/paragraph", {
    name: "bg-red",
    label: "背景色(赤)"
  });

  wp.blocks.registerBlockStyle("core/paragraph", {
    name: "point",
    label: "ポイント"
  });
});

上記jsファイルを
 gutenberg-examples/js 
フォルダーに置きます。

ブロックスタイルを追加するcss

.is-style-dashborder{
    padding: 1em;
    border: dashed 1px #aaa;
}
.is-style-bg-red{
    padding: 1em;
    background: rgb(199, 69, 69);
    color: #fff;
}
.is-style-point{
    padding: 1em;
    background: white;
    border-top: solid 5px #f5a440;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

上記cssファイルを
 gutenberg-examples/css
フォルダーに置きます。

cssは任意に
変更してください。

スタイルの疑問

フロント側とエディタ側の
スタイルで
イマイチ疑問だったのですが、
以下で納得しました。

Front-End Styling
While a block’s scripts are only necessary to load in the editor, you’ll want to load styles both on the front of your site and in the editor. You may even want distinct styles in each context.
The enqueue_block_editor_assets action will only be triggered when the editor is loading. To enqueue styles for your block when viewing the front of your site, you should do so during the enqueue_block_assets action.
The enqueue_block_assets action is triggered both in the editor and on the front of the site. Since your block is likely to share some styles in both contexts, you can consider style.css as the base stylesheet, placing editor-specific styles in editor.css.

https://github.com/WordPress/gutenberg/blob/7779f7…

フロントエンドスタイリング
ブロックのスクリプトはエディタにロードするために必要なだけですが、あなたはあなたのサイトの前面とエディタの両方でスタイルをロードしたいでしょう。 あなたはそれぞれの文脈で異なるスタイルが欲しいかもしれません。

enqueue_block_editor_assetsアクションは、エディタが読み込まれているときにのみトリガされます。 サイトの前面を表示しているときにブロックのスタイルをエンキューするには、enqueue_block_assetsアクションの間にそれを実行する必要があります。

enqueue_block_assetsアクションは、エディタとサイトの前面の両方で起動されます。 ブロックは両方のコンテキストでいくつかのスタイルを共有する可能性が高いので、style.cssを基本スタイルシートと見なし、エディタ固有のスタイルをeditor.cssに配置することができます。

最後に

WEMO.tech さんの記事が
大変参考になりました。
感謝致します。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する 3