[arata]

【お使いの Snow Monkey のバージョン】16.1.0
【お使いの Snow Monkey Blocks のバージョン】14.1.0
【お使いの Snow Monkey Editor のバージョン】7.0.0
【お使いのブラウザ】chrome

### 実現したいこと

追加したブロックスタイルをエディター画面でも反映させたい

### 発生している問題

web上ではブロックスタイルが反映され表示されるが、エディターでは反映されない

my-snoe-monkeyに追加したcodeは、

/**
 * 外部JS・CSSの読み込み
 */
add_action('wp_enqueue_scripts', 'msm_enqueue_style_script');
function msm_enqueue_style_script()
{
	/* css読み込み */
	wp_enqueue_style(
		'msm_style',
		MY_SNOW_MONKEY_URL . '/style.css',
		[],
		filemtime(MY_SNOW_MONKEY_PATH . '/style.css')
	);

	/* js読み込み */
	if (is_front_page()) {
		wp_enqueue_script(
			'msm_scripts',
			MY_SNOW_MONKEY_URL . '/main.js',
			['jquery'],
			filemtime(MY_SNOW_MONKEY_PATH . '/main.js'),
			true
		);
	}
}

/* エディター用のCSS読み込み */
add_action(
	'after_setup_theme',
	function () {
		add_theme_support( 'editor-styles' );
		add_editor_style('/../../plugins/my-snow-monkey/style.css');
	}
);

add_action(
	'wp_enqueue_scripts',
	function() {
		// メイン CSS の装飾用 CSS を取り外す
		wp_deregister_style( \Framework\Helper::get_main_style_handle() . '-theme' );
		wp_register_style( \Framework\Helper::get_main_style_handle() . '-theme', null, [] );
	},
	10000
);

// ブロックスタイルの追加
register_block_style(
	'core/heading',
	array(
		'name' => 'side-line',
		'label' => '横線',
		'inline_style' => '.is-style-side-line {
			border-left: solid 10px red ;
			padding-left: 15px ;
		}',
	)
);

### 試したこと

・カスタマイズ→基本デザイン設定から記事中の h2 のデザインを「なし」にすると、実際の画面、エディター画面ともに追加したスタイルが表示されない

→基本デザイン設定から記事中の h2 のデザインを「標準」とし、my-snow-monkeyに

add_action(
	'wp_enqueue_scripts',
	function() {
		// メイン CSS の装飾用 CSS を取り外す
		wp_deregister_style( \Framework\Helper::get_main_style_handle() . '-theme' );
		wp_register_style( \Framework\Helper::get_main_style_handle() . '-theme', null, [] );
	},
	10000
);

を追加すると、実際の画面では追加したスタイルが表示されるが、エディター画面では表示されず、デフォルトのデザインが表示されてしまう状態です。（現在の状態）

デベロッパーツール上はエディター画面でも読み込まれていますが、打ち消されている状態です。（画像を載せます）読み込む事はできているので、原因としてエディター画面上のメイン CSS の装飾用 CSS を取り外すことができていない事だと考えています。フォーラム内で検索しましたが、解決策がわかりらず困っています。

よろしくお願い致します。

エディター画面↓

実際の画面

♥ 0

いいねをした人: 居ません

[Olein_jp]

ブロックスタイル自体も反映されているようですので、CSSの詳細度の問題なのかなと思われます。エディターのラッパークラス（名前忘れてしまいました）を併用した書き方を併記してはどうでしょうか？（未検証ですが）

.editor-wrapper-class-name .is-style-side-line,
.is-style-side-line {
  border-left: solid 10px red;
  padding-left: 15px;
}

♥ 0

いいねをした人: 居ません

[arata]

Olein様

register_block_style(
	'core/heading',
	array(
		'name' => 'side-line',
		'label' => '横線',
		'inline_style' => '.is-root-container .is-style-side-line,.is-style-side-line{
			border-left: solid 10px red;
			padding-left: 15px;
			background-color:transparent;
		}',
	)
);

これでエディターも変更できました。

記述を忘れていたのですが、実は詳細度についても検討していました。申し訳ございません。

この方法ですとスタイルを複数追加するとき、background-colorとborder-leftを毎回上書きしなければいけないことになります。実際のサイトと同じ様に、エディターのデフォルトCSSを消す事が出来たらベストだと考えているのですが、現状不可能なのでしょうか？

♥ 0

いいねをした人: 居ません

[Olein_jp]

個人的にインラインでスタイルを入れる方法で実装した経験がほとんどなく、基本的にフロントとエディター向けにそれぞれCSSファイルを用意するというスタイルで実装しています。

分ける一番の理由は、フロント側とエディター側でスタイルの当てからが変わってくる場合があるからです。例えば、Snow Monkey で言うと、コンテンツエリアのラッパークラスをフロント側では利用することで書きやすくなりますが、エディター側ではそのラッパークラスは不要になるからです。

トピックに掲載されているコードを拝見する限り、エディター向けにCSSファイルを用意されているようですので、こちらを使い分けることでもう少し手軽にブロックスタイルを活用いただけるのかなと感じました。

試しに以下のようにブロックスタイルを追加してみました。そして、コンテンツ部分の見出しスタイルは無効にしています。その場合でも正常に動作しています。

add_action(
	'init',
	function () {
		register_block_style(
			'core/heading',
			[
				'name' => 'sample-block-style',
				'label' => 'サンプルブロックスタイル'
			]
		);
	}
);

editor-style.css にはこのように書いています。

.is-style-sample-block-style {
  padding: 1rem;
  background-color: #000;
  color: white;
}

こちらで正常にフロント/エディターともに表示されることが確認できました。こちらをヒントにエディター側のスタイルの書き方を工夫されるとスムーズに実装できそうな気がします。

ご参考にどうぞ。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

デフォルトのデザインが表示されてしまう

wp_deregister_style() しているのが wp_enqueue_scripts のときだけだからではないですかね？ wp_enqueue_scripts はフロント用でエディターには効かないので。

enqueue_block_editor_assets　でも wp_deregister_style() してみるとどうでしょうか？

♥ 0

いいねをした人: 居ません

[arata]

Olein様
フロントとエディター向けにそれぞれCSSファイルを用意するというスタイルで実装している点、参考になります。理由も大変分かりやすく納得しました。以後この様にファイル構成を変更してみます。

キタジマ様

まさにそれでした。

add_action(
	'enqueue_block_editor_assets',
	function() {
		// エディターのメイン CSS の装飾用 CSS を取り外す
		wp_deregister_style( \Framework\Helper::get_main_style_handle() . '-theme' );
		wp_register_style( \Framework\Helper::get_main_style_handle() . '-theme', null, [] );
	},
	10000
);

を入れたところ、CSSで打ち消すcodeを追加しなくてもエディターと実画面で表示を同じものにする事ができました。

今回は記載しておりませんでしたが、afterを使った追加のスタイルはエディターのみpositionがついてしまっている為、表示がずれてしまいました。
Olein様の方法でposition:static;を追加する事で打ち消す事ができました。

お二人方、ご回答ありがとうございました。今回の件、無事解決できました。

♥ 1

いいねをした人:

[投稿者]

投稿