カスタム ブロックスタイル設定機能

[shimotmk]

カスタム ブロックスタイル機能を作ったほうが良いのではないか
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-styles/

このissuesで書きましたが一部のブロックで様々なカスタムCSSを持つパターンを作ると思います。
vektor-inc/vk-simple-copy-block#1

配布されたユーザーとしてはそのパターンはサイト内で複数箇所使用する場合があると思います。そう言う場合はプリセットとして持っておきたい時があると思います。
なのでVK Blocksの方ではカスタムブロックスタイル機能が必要かなと思っていますがどうでしょうか？

[shimotmk]

これ作る感じで大丈夫ですか？
「良さそう」とかだけでもコメントいただければと思います

[goutetsuguma]

呼び出せるの便利で良さそう！使いたいです！

[kurudrive]

@shimotmk 非常に便利だと思います！優先度高めでお願いしたいです！

[shimotmk]

プロトタイプはできています。
ただ #1488 #1498 これらがマージされてからになります

[shimotmk]

@goutetsuguma
お疲れ様です。
カスタムブロックスタイルの設定画面のデザインをお願いしたいです🙏

ブランチ
#1507

CSSやクラス名は自分が適当につけたので付け直していただいても構わないですし、FigmaとかでUI作って再現できそうか確認いただいても構わないです。
そのほかユーザーとして欲しい機能などあれば遠慮なく言ってください

よろしくお願いします🙇‍♂️

※注意
#1488 #1498 これらがマージされてから実装する内容なのでCSSもマージされる想定で考えていただけたらと思います🙏

[shimotmk]

オプション周りの実装でブランチを行き来していると存在しないオプションがDBに残ったりするためPHPのエラーが出る可能性がありますその際は
vk-blocks.phpなどに以下のコードを貼ってVK Blocksを有効化and無効化してDBを削除してください

if ( function_exists( 'register_deactivation_hook' ) ) {
	register_deactivation_hook( __FILE__, 'vk_blocks_uninstall_function' );
}
function vk_blocks_uninstall_function() {
	delete_option( 'vk_blocks_options' );
	delete_option( 'vk_blocks_balloon_meta' );
}

[kurudrive]

UIで設定できるレベルではコアにも将来的に入るっぽいですね。
でもCSSまではできないので独自実装は必要だと思います。
WordPress/gutenberg#44417

[shimotmk]

discordより
vk blocks proのブランチを add/custom_block_style　に変えてnpm run build　すると、こんなエラーがでました。developブランチでは出ないのですが、どうしたらよいのかわかる方いらっしゃいますか、、？

( ! ) Warning: foreach() argument must be of type array|object, bool given in /vk-blocks-pro/inc/vk-blocks/utils/array-merge.php on line 26

[kurudrive]

@shimotmk

一応僕の add/custom_block_style の環境ではでませんでした。
vk_blocks_options 消しても出ませんでした。

ただ、foreach ( (array) $args as $key => $value ) {
の $args が bool(false) で落ちてくる事はあるみたいなので、
(array) $args で配列にはしてるけど、 $args が配列じゃない空だったらストレートに $default 返すとかそういう話かな。

意図した事と違ったらスルーでかまいません（＝ｗ＝；

[shimotmk]

@kurudrive
ありがとうございます！
vk_blocks_array_mergeはオプション値とデフォルトのオプション値をマージする関数で、DBから貰ってきた(get_option())で取得した値が空の時はfalseを返すみたいですね
https://github.com/WordPress/wordpress-develop/blob/905bc9651f1a34b75c4f9ca18de66afdb135cc9f/src/wp-includes/option.php#L72-L78

なので @kurudrive さんの通り 空の際はループを回さずにデフォルト値が返ってきた方が良いので早期リターンにしたいと思います

[goutetsuguma]

@shimotmk さんおつかれさまです。以下の箇所は、調整可能でしょうか？難しいようであればなくてOKです！

【質問01】

codeタグがあった方がコピーする場所がわかりやすいので、追加できたら良いなと思いました。難しいようであればなくてもOKですmm

---

【質問02】

横並びに調整したくて、<div>で囲われていたらCSS調整しやすそうでしたので聞いてみました。難しそうであれば、なくてもOKですmm

[shimotmk]

@goutetsuguma
調整ありがとうございます！
【質問01】
codeタグで囲っておきました。下の文章もcodeにしました

【質問02】
divで囲っておきました！

[goutetsuguma]

@shimotmk
CC @kurudrive @doshimaf

おつかれさまです！いろいろ使ってみました、めっちゃ使いやすいです！！

【機能追加の案です】
管理画面用のCSSも書けると便利だなと思いましたが、なくても全然使いやすいです！
下のissueもたっていたので、案として出しました。みなさんにお聞きしてもいいかもですね
#1508

---

以下、質問です。

【01】インナーのカラムが「テキスト」エリアに入っていましたが「デザイン」に入るのが正しいのでしょうか？親のカラムは「デザイン」に入っていたので、聞いてみました。

よろしくお願いします

[shimotmk]

@goutetsuguma
ありがとうございます！

管理画面用のCSSは迷いますね。私としては管理画面用に書いたつもりのCSSがコアのアップデートなどによりかえって分かりにくくなる可能性もありえるなと思ったり迷っています。

【01】インナーのカラムが「テキスト」エリアに入っていましたが「デザイン」に入るのが正しいのでしょうか？

これそうですよね。コアの方には報告済みなのでいつか変わるかもです。
このブロック一覧のカテゴリーなどは手動で設定しているわけではなくコアの設定通りなのでVK Blocks側では設定できない(しない方が良い)箇所かなと思います。

---

CSSの調整は一旦以上ですか？？？

少し相談したいのですが、いくつかブロックスタイルを追加すると結構場所をとってしまう感じがあってどうにか出来ないかと迷っています。(これは別に @goutetsuguma 以外の人のアイディアも待っています。 )

管理画面画像(クリックで表示)

[goutetsuguma]

@shimotmk @kurudrive @doshimaf @mthaichi @sysbird @drill-lancer
折りたためるの良いですね！あと、ブロックスタイルのそれぞれの順番が入れ替えれるとうれしいかもと思いました。
たくさんブロックスタイルを作っていくと順番を変えたくなる気がしました。
みなさんはいかがでしょうか？

▼イメージ画像です、タイトルのところをクリックして展開できて、ドラッグドロップでブロックスタイルの順番が入れ替えできる

[shimotmk]

@goutetsuguma
ありがとうございます！多分クラシックウィジェットみたいな感じですよね。
少し調整してみます！

[kurudrive]

@shimotmk @goutetsuguma
動作確認しました！
なるほど、たしかに数が多いとめっちゃ場所とりますね。
折りたたみ＆順番入れ替えできると更に良いと思います👍

@goutetsuguma @sysbird @shimotmk

• 新規追加でブロックを選ぶラジオボタンの所ですが、文字数の影響でアイコンの位置がガタガタになるので、コア＆ブロックマネージャー設定を踏襲して下線 + アイコン右 のデザインにしたほうが良いかなと思うのですがどうでしょう？
• 折りたたんでドラッグできる部分についても、畳んで並んだときに、文字数によってアイコンの位置がガタガタにならないように下村さんが実装後にデザイン調整よろしくお願いいたします (￣人￣)

[goutetsuguma]

@kurudrive @shimotmk
たしかにガタガタでした、、下線 + アイコン右に調整いたしましたmm
下村さんが実装後に、ドラッグできる部分のデザイン調整など着手しますmm

[shimotmk]

お疲れ様です。カスタムブロックスタイル設定機能を調整しました。

本番リリース前に使ってみた感想や欲しい機能などあったらご意見いただきたいです🙏
お手隙の際で構わないのでよろしくお願いします🙇‍♂️

ブランチ #1507
現時点でのzipプラグイン
vk-blocks-pro.zip

[kurudrive]

@shimotmk ありがとうございます！全体的に非常にすばらしい仕上がりだと思います！

機能面で下記だけ気になりました。
テキストエリアの上でドラッグを離すと文字が入ってしまうので、これ制限って出来たりしますか？

@goutetsuguma @shimotmk

あとはデザイン的な細かい所ですが下記気になった点です。

↓ 畳んだ状態だとバランスが良いのでもったいないのですが、
展開した状態だと、下の文字の方が大きく、ひっついていてバランスが悪いので、
何かしら改善できたらいいなと思いました。

[shimotmk]

@kurudrive

テキストエリアの上でドラッグを離すと文字が入ってしまうので、これ制限って出来たりしますか？

これは制限できないと思います。
気になったということなので、ドラッグ&ドロップは無い方が良いかと思います

[kurudrive]

@shimotmk

ドラッグ&ドロップは無い方が良いかと思います

そうですね...あった方が便利だと思う反面
意図せずうっかり入ってしまう事があると思うので、実際はもっとCSSが多い事を考えると、
残念ですがドラッグ＆ドロップはなし...

あ、展開してない時だけ...いや...ドラッグされる側が展開状態だと一緒か...

はい、無しでいきましょう。

[shimotmk]

@kurudrive
ドラッグ&ドロップは削除しておきました。

デザイン的な細かい所は多分自分が行うとあれだと思うので @goutetsuguma お願いしても良いでしょうか？

[kurudrive]

@shimotmk 対応ありがとうございます！
デザインは @goutetsuguma さんが主担当領域ですので大丈夫です。
@goutetsuguma さんよろしくお願いいたします。

[goutetsuguma]

@kurudrive @shimotmk
css調整いたしましたのでお手隙の時にご確認お願いいたしますmm

ブランチ：#1507

[kurudrive]

@goutetsuguma 確認しましたー！
ありがとうございますー。ばっちりです！