クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

これの情報元はありますか。
僕はあまり感じたことはないのですが。

今までなら、style.cssにCSSを記入して、記事にHTMLを呼び出せばすぐに編集できたのですが、グーテンベルくではどのようにして表示させたらいいでしょうか？

ブロックスタイルまたはブロックパターンなどを活用して、既存のブロックをカスタマイズすれば比較的簡単に実現できます。

私は自身でカスタマイズを加えていますが、探せば同じことができるプラグインもあるかと。

fifth(フィフス)のクーポンの記事では添付画像の様なCSSで呼び出したボックスを使っています。

添付された画像のデザインからだと、リストブロックかアイコンリストブロックをカスタマイズするのがいいと思います。

グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

格段に遅くなるということはないと思いますが、ブロックエディターにおけるクラシックブロックはどのブロックにも該当しないHTMLの受け皿に過ぎないので、積極的な使用はおすすめしません。

現状、クラシックブロックのためにデフォルトでTinyMCE用JSが別途読み込まれているものの、パフォーマンスに少なからず影響していることから、

1. クラシックブロックを使用しない限りTinyMCE用JSを読み込まない仕様（非同期など）にする。
2. クラシックブロックをコアから外し、ブロックディレクトリ等を通してサードパーティー化する。

などが検討されています。

なので、少しでもパフォーマンスを気にするなら、基本的にはクラシックブロックは使用しない方針で記事を作成した方がいいです。

ろこ様

早速の回答ありがとうございました。

ブロックスタイルまたはブロックパターンなどを活用して、既存のブロックをカスタマイズすれば比較的簡単に実現できます。

とのことなのですが、やっては見たものの私にはなかなか難しかったです。

カスタムHTMLに記入し、それを再ブロックに登録し、ほかの記事にも使うという方法なら私にもできるのですが、それもそれで編集しづらいです。

今までのAddQuicktagを使っていた頃のような、好きなcssをスタイルシートに書いて、htmlで呼び出すようなシステムが恋しいです。

簡単に好みのボックスやボタンが入れられるプラグインをがさしてみようと思います。

なお、「Gutenbergにして表示速度はどうなりましたか？何か注意する事はありますか？  」にも書きましたが、ろこさんが作ったスキンはなかなか素敵ですね。

どうしても自分でのカスタマイズが無理そうならスキンに頼るのも手だなと思い始めました。

ただ、やはりカスタマイズもしたい…

ジレンマです。

投稿者:: @yhira

クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

これの情報元はありますか。
僕はあまり感じたことはないのですが。

わいひら様

お世話になっております。

どこで読んだ記事か忘れてしまいました。

しかし、クラシックエディアと普通のブロックが混在していると表示速度が遅くなったという記事でした。

しかし具体的な数値などは書かれておらず、自分の実感では…という事だったのでそれほど気にしなくていいのかな…とも思います。

クラシックエディタからGutenbergに移動するにあたって、行き当たりばったりだと後で修正が大変になるので小さなことまで気になってしまっています。

なお、「Gutenbergにして表示速度はどうなりましたか？何か注意する事はありますか？  」にも書きましたが、ろこさんが作ったスキンはなかなか素敵ですね。

ありがとうございます。

SILKスキンでもブロックスタイルやブロックパターンを活用していて、

https://github.com/yhira/cocoon/blob/master/skins/silk/functions.php#L21-L113

  ...
  ],
  [
    'name' => 'cocoon-blocks/blogcard',
    'properties' => [
      'name' => 'text',
      'label' => 'テキスト'
    ]
  ],
  [
    'name' => 'cocoon-blocks/iconlist-box',
    'properties' => [
      'name' => 'fifth-coupon',
      'label' => 'fifth(フィフス)のクーポン'
    ]
  ]
];

赤字部分のようにSILKをベースにカスタマイズすれば、アイコンリストブロックに「fifth(フィフス)のクーポン」というスタイル設定が追加されます。

この例でアイコンリストブロックの該当スタイルを設定した場合、アイコンリストにクラス名'is-style-fifth-coupon'が入るので、あとはCSSを書けばカスタマイズできます。

ろこ様

お世話になっております。

SILKをベースにカスタマイズしていこうかと思っているのですが、

赤字部分のようにSILKをベースにカスタマイズすれば、

というところがわかりません。

どこをいじればいいのでしょうか？

ご教授いただけると嬉しいです。

フックからブロックスタイルを追加できるよう、SILKをアップデートしました。

https://dateqa.com/cocoon/

1. SILK最新版をダウンロード。
2. ダウンロードしたSILKのZIPファイルを解凍。
3. サーバーにあるCocoon子テーマ内の'skins'フォルダに、解凍したSILKフォルダをFTP等でアップロード。
4. Cocoon設定のスキン一覧で[Child]SILK（シルク）を選択し、設定を保存。
5. Cocoon子テーマのfunctions.phpに以下のコードを追記。

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'cocoon-blocks/iconlist-box',
    'properties' => [
      'name' => 'fifth-coupon',
      'label' => 'fifth(フィフス)のクーポン'
    ]
  ];
  return $blockstyles;
});

Cocoon親テーマでカスタマイズすると、テーマのアップデートで全て消えてしまうので、カスタマイズは子テーマに加えてください。

https://wp-cocoon.com/downloads/

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ',
      'label' => '表示ラベル'
    ]
  ];
  return $blockstyles;
});

の形で複数のブロックスタイルを追加できます。

ブロック名が分からなければ、ブロックエディターで各ブロックHTMLをブラウザのDevToolsから確認すると、添付画像のようにdata-typeという属性（アイコンボックスにブロックスタイルを追加する場合はブロック名に'cocoon-blocks/icon-box'を記述）に書かれています。

スラッグはスタイルを適用したときのクラス名の一部になり、「'is-style-'＋'スラッグ'」となります。

表示ラベルはスタイル設定で表示される選択項目の名前になります。

あとは、選択したときのクラス名「'is-style-'＋'スラグ'」（スラッグが'fifth-coupon'なら'is-style-fifth-coupon'）を用いて、CSSを書いていくだけです。

ろこ様

アップデートまでしていただいて感激です！

FTPソフトの使い方が不安なのですが、勉強してやってみようと思います。

すみませんここであと3つ質問があります。

①新しいボックスやボタンを増やす毎に、functions.phpに書き加えていくという理解でよろしいでしょうか？

②追加するCSSはskins/skin-template/style.cssではなくstyle.cssでいいのでしょうか？

③今回追加予定のボックスCSSは以下なのですが、■■■の個所にスラッグ名(is-style-fifth-coupon)で間違いないでしょうか。

.■■■ {
position:relative;/* 配置に関するもの(ここを基準に) */
padding: 2em 2em 1.7em; /* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
margin: 2.5em auto;/*ボックス外側余白*/
background-color: #c7ede2; /*ボックス背景色*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
border-radius:4px;/* ボックス角丸 */
max-width:600px;/*ボックス横幅*/
}
.■■■ .box-title {
position: absolute;/* 配置に関するもの(ここを動かす) */
top: -22px;/* 上から（-22px）移動*/
left: 30px;/* 左から（30px）移動*/
padding: 0.2em 2em;/* テープ内側余白*/
color: #58be89; /* テープ文字色 */
font-weight: bold;/* テープ文字太さ*/
font-size:18px;/* テープ文字大きさ*/
background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ→*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /* テープ影*/
transform: rotate(-3deg);/* テープの傾き*/
}
.■■■ p{
margin: 0; /* 文字の外側余白リセット*/
padding: 0; /* 文字の内側余白リセット*/
}

①新しいボックスやボタンを増やす毎に、functions.phpに書き加えていくという理解でよろしいでしょうか？

そうです。

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ１',
      'label' => '表示ラベル１'
    ]
  ];
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ２',
      'label' => '表示ラベル２'
    ]
  ];
  ...
  return $blockstyles;
});

とするか、

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ１',
      'label' => '表示ラベル１'
    ]
  ];
  return $blockstyles;
});

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ２',
      'label' => '表示ラベル２'
    ]
  ];
  return $blockstyles;
});
...

とすれば複数追加できます。

②追加するCSSはskins/skin-template/style.cssではなくstyle.cssでいいのでしょうか？

子テーマのstyle.cssで問題ありません。

③今回追加予定のボックスCSSは以下なのですが、■■■の個所にスラッグ名(is-style-fifth-coupon)で間違いないでしょうか。

アイコンリストブロックでカスタマイズする場合、アイコンリストのHTMLに従ってCSSのセレクタを指定する必要があります。

SILKでは、アイコンリストは添付画像のようなデザインになるので、「アイコンリスト」と書かれたテキスト部分を上書きで装飾するなら、

.is-style-fifth-coupon .iconlist-title {
  ...
}

といった感じになります。

Cocoonテーマやスキンで当てはめているスタイルがあるので、そのあたりは臨機応変にカスタマイズする必要があります。

ろこ様

返信が遅くなり申し訳ありません。

丁寧に教えてくださってありがとうございます。

土日に頑張ってみようと思います。

知識不足なので、頑張って勉強してから取り掛かることにします。

まずはテストサイトで試してみて。。。なので、長い道のりになりそうですが、好みにデザインにできるように試行錯誤してみます。

ありがとうございました！

ろこ様が以前書いておられた記事

WordPress5.6～2021年のアップデートについて も読んで、やっぱりそろそろ手を付けないといけないんだなとおしりに火が付きました！

いつも有益な情報を提供して下さりありがとうございます。