【対応中】Outerブロックをカスタムカラーパレットに対応＆細かな修正 #950

mthaichi · 2022-01-13T06:38:27Z

主な変更点

以下のパレットをカスタムカラーパレットに対応
- 背景色
- 枠線
- 上部区切り
- 下部区切り
Radiusの値のminを0に（マイナスの場合はゼロ扱い）
ブレイクポイントの修正

チェック項目

既存ブロックが壊れないか
キーカラー追従するか
5.8で動作するか
5.9で動作するか
CSSの変更箇所は適切か
ブレイクポイントは適切に設定されているか【残りいしかわさん担当】レスポンシブ処理の調整 #763
Radiusの値がマイナスのブロックをきちんとリカバリーできているか。

そのほか特記事項

上部区切りと下部区切りはSVG出力なのですが、キーカラー、カスタムカラーについては、classを付加し、SCSSそれ以外の色は従来どおりSVGに色値を出力しています。
utils/GenerateBgImage はsliderブロックと共有していますが、下村さんと相談し、汎用性が薄れたため、利用しないことにしました。deprecated内に従来の utils/GenerateBgImage を移し、deprecatedはそちらを参照、Outer直下の GenerateBgImage はカスタムカラーパレットに対応したものとしています。

# Conflicts: # inc/vk-blocks/languages/vk-blocks-js.pot # inc/vk-blocks/languages/vk-blocks.pot

# Conflicts: # inc/vk-blocks/languages/vk-blocks.pot

sysbird · 2022-01-17T05:35:03Z

@mthaichi
確認中です、
ブロックのリカバリーが発生することがあります

twenty 系列で独自のパレットを持つテーマの場合
上部・下部区切りレベルの色をパレットから選んだ場合
いったん保存(更新)して、同じ編集画面をリロードした時に発生
カスタムカラーでは発生しません
Lightning系テーマでは発生しません

sysbird · 2022-01-17T06:42:59Z

5.9 で確認しました

カスタムカラーパレットは、
vektor-inc/vk-color-palette-manager#8
がマージされたら再確認しますね

sysbird · 2022-01-17T06:47:42Z

今回と関係ないですが、Rの大きさは0以上でよいかな？と思いました

shimotmk · 2022-01-25T01:34:57Z

GenerateBgImage関連で違うタスクになってしまうのですがブレイクポイントの修正も対応していただければありがたいです
#763
どうせdeprecatedになると思うので

…r/custom-color-palette # Conflicts: # inc/vk-blocks/languages/vk-blocks-js.pot # src/blocks/_pro/outer/index.php

fix: ブレイクポイン値の変更

shimotmk · 2022-02-02T06:18:14Z

@mthaichi
背景設定の透過設定が効かなくなってしまっている
枠線設定のGroove、Ridge、Inset、Outsetが効かなくなってしまっている

気がします😱

mthaichi · 2022-02-02T08:10:34Z

@shimotmk ありがとうございます！
で、すみません、5.8と5.9の２つの環境で見ているんですが、再現ができないんです。エディタとフロント両方とも見ているんですが・・・。特にそのあたりは変更していないので、原因がわからないのですが、Rの下限値がゼロになっているとか、キーカラー追従とかそのあたりは効いている感じでしょうか。やはり、しもむらさんの環境でそのようになるようでしたら、コードエディターで表示されるコードを送ってもらえますでしょうかー。お手数をおかけしますー。

shimotmk · 2022-02-02T08:21:23Z

@mthaichi
このブランチと現在リリースされているもので比べるとこのような感じです！
こんな感じではないですか？？

outer.mov

WordPress5.9でテーマはLightinigプラグインはVk Blocks Proのみです

一応コードエディターのコードはこれ

<!-- wp:vk-blocks/outer {"bgColor":"vk-color-custom-1","opacity":0.3,"borderWidth":65,"borderStyle":"groove","borderColor":"vk-color-custom-2","clientId":"5c6bf237-49ac-4017-b0a8-c236c5ad7cd7"} -->
<div class="wp-block-vk-blocks-outer vkb-outer-5c6bf237-49ac-4017-b0a8-c236c5ad7cd7 vk_outer vk_outer-width-normal has-background has-vk-color-custom-1-background-color has-text-color has-vk-color-custom-2-color vk_outer-paddingLR-none vk_outer-paddingVertical-use vk_outer-bgPosition-normal" style="border:65px groove currentColor;border-radius:0px"><style>.vkb-outer-5c6bf237-49ac-4017-b0a8-c236c5ad7cd7{ }
</style><div><div class="vk_outer_container"><!-- wp:paragraph -->
<p>Outer</p>
<!-- /wp:paragraph --></div></div></div><style type="text/css">
	.vkb-outer-5c6bf237-49ac-4017-b0a8-c236c5ad7cd7 .vk_outer_container{
		padding-left:0px;
		padding-right:0px;
	}
	@media (min-width: 577px) {
		.vkb-outer-5c6bf237-49ac-4017-b0a8-c236c5ad7cd7 .vk_outer_container{
			padding-left:0px;
			padding-right:0px;
		}
	}
	@media (min-width: 769px) {
		.vkb-outer-5c6bf237-49ac-4017-b0a8-c236c5ad7cd7 .vk_outer_container{
			padding-left:0px;
			padding-right:0px;
		}
	}
	</style>
<!-- /wp:vk-blocks/outer -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

mthaichi · 2022-02-02T08:38:53Z

@shimotmk なるほど、再現できました。ありがとうございます。

mthaichi · 2022-02-02T11:15:47Z

@shimotmk 透過設定の方は単なる私のミスで修正しました。

で、枠線のborderStyleがgroove、ridge、inset、outsetで色が反映されない件は、ブラウザで以下のような挙動不審なところがあり、修正してみたのですが、ご意見頂けると嬉しいです。（パレットでカラーが選ばれた時の問題で、色値指定の場合は対象外です）

SafariとGoogle Chromeでは border: 1px groove currentColor; というように色に currentColor が指定されていて、かつ、スタイルが groove、ridge、inset、outset だと、なぜか currentColorが反映されません。
そこで以下のようなシンプルなHTML/CSSをローカル環境で、SafariとGoogle Chromeに読み込ませたところ、枠線がグレーになり、反映されませんでした。(Firefoxでは赤色になります。）

<!DOCTYPE html>
<html>
	<head>

	</head>
	<body>
		<div class="red" id="test">
		<p>テスト</p>
	</div>
	<style>
		div {
		   border: 10px groove currentColor;
		   color: red;
		}		
	</style>
	</body>
</html>

そこで、フロント側でJavaScriptで強引にスタイルを適用させるという手法をとっています。
そもそも、わたくしめが大ボケをかましているだけかもしれないので、誠に申し訳ないのですが、一緒にこのあたりの挙動を確認してもらえると嬉しいです。

shimotmk · 2022-02-03T01:13:52Z

@mthaichi
カラーパレットのみのときは透過設定効いていること確認できました！
ただ現在リリースされているもとの差があるので確認お願いします

・透過設定が中のコンテンツに対しても効いてしまっている
・画像を設定したときの透過設定が効いていない
・borderは透過設定の影響を受けている
気がします😱

以前お話したかと思うのですがコアのCoverブロックがうまいことやっています

screen recording

outer.mov

borderStyleについては調べてみます！
@kurudrive さん相談案件かもしれないですが、、

sysbird · 2022-02-03T02:04:42Z

@mthaichi
R値の最低値 0 にする件を確認しました、ありがとうございます！

mthaichi · 2022-02-03T02:12:18Z

@shimotmk なめてかかって、仕様の理解が不足したまま、修正したので、だめですね。
その部分、1から時間かけて見直します。ありがとうございます。

shimotmk · 2022-02-03T02:56:19Z

@mthaichi
has-${色名}-border-colorが追加されればこのようなHTMLで対応できそうです！

<!DOCTYPE html>
<html>
  <head>
  <style>
    :root{ 
      --color-primary:#337ab7
    }:root
    .has-primary-border-color {
      border-color: var(--color-primary);
    }:root
  </style>
  </head>
  <body>
    <div class="has-primary-border-color" id="test" style="border-width: 20px; border-style: outset;">
      <p>テスト</p>
    </div>
  </body>
</html>

なぜcurrentColorが効かないのかは不思議ですが💦

has-${色名}-border-colorについてはvk-color-palette-managerで提案中。
vektor-inc/vk-color-palette-manager#4

sysbird · 2022-02-04T02:31:48Z

@mthaichi
確認が抜けてました
以前 Radiusの値がマイナスだったブロックはリカバリーがでます〜

mthaichi · 2022-02-04T02:47:42Z

@sysbird R値のリカバリーですが、確認ができませんでした。
当ブランチの前バージョンで作ったブロックを当ブランチの最新状態にはりつけると、リカバリーがでますが、そういうことではないでしょうか。
当ブランチ以外のブランチ(たとえばdevelop）でマイナス値を設定して、そのコードを当ブランチの最新状態でビルドしたOuterに貼り付けてもリカバリーでますでしょうか。（その場合は0になるようにしています）
もしリカバリーでたらコードエディタで表示されるコードを送ってくださいー。
お手数をおかけします。

sysbird · 2022-02-04T03:15:01Z

@mthaichi

developで作成した投稿を、このブランチで再編集しようとしたときにリカバリーがでます
たまたま、標準のカラムブロックを中に入れたためかもしれません
ためしにカラムを使わないときはリカバリーでません
R値にマイナスがない場合は両者ともリカバリーでません

develop で保存したコード添付します

■リカバリーがでる(カラムのため？) border-radius:-10px
outer-develop-ng.txt

■正常 border-radius:-5px
outer-develop-ok.txt

mthaichi · 2022-02-04T03:35:43Z

@sysbird ありがとうございます！原因わかりましたので、調整させていただきます。

sysbird · 2022-02-04T03:36:35Z

@mthaichi
すみません、カラム関係なかったですね、
[コンテナ内側のスペース設定]をしている場合のようです

mthaichi · 2022-02-24T10:04:39Z

こちらに移動
#1032

mthaichi added 18 commits December 6, 2021 14:26

fix: GenerateBgImage で背景色出力抑制モードを追加

4e5c8b3

refactor: GnenerateBgImageリファクタリング

ac5c57e

lint

cce80ed

fix: outer背景色をキーカラー追随

427cea4

fix:deprecated修正

97aaa16

deprecated 最新版でfitlerが取るように修正

989abf3

deprecatedでfilterが通るように修正

2a3c0c3

コメント、変数名の変更

69c2c32

fix: deprecatedなど修正

dbbabd6

SVG修正

97ec269

枠線のキーカラー追従：途中

88ce956

lint

e40fcaa

Merge branch 'develop' into fix/outer/custom-color-palette

d057bcd

# Conflicts: # inc/vk-blocks/languages/vk-blocks-js.pot # inc/vk-blocks/languages/vk-blocks.pot

fix: deprecated 修正

32e4a9a

lint

4ec2e28

fix: GeneratedBgImageをローカル化

b2b92f7

fix: 古いパレットを削除

c1f111f

Merge branch 'develop' into fix/outer/custom-color-palette

4df0cf2

# Conflicts: # inc/vk-blocks/languages/vk-blocks.pot

mthaichi requested review from drill-lancer, shimotmk, goutetsuguma and sysbird January 13, 2022 06:41

sysbird changed the title ~~【確認待ち】Outerブロックをカスタムカラーパレットに対応~~ 【確認中】Outerブロックをカスタムカラーパレットに対応 Jan 17, 2022

mthaichi marked this pull request as draft January 24, 2022 15:56

mthaichi added 2 commits February 2, 2022 13:47

Merge commit '74663e6ea27947e23303a6db5e0fe224a8c298cc' into fix/oute…

c3a5f0a

…r/custom-color-palette # Conflicts: # inc/vk-blocks/languages/vk-blocks-js.pot # src/blocks/_pro/outer/index.php

fix: 枠線Rのマイナス値を0扱いに

3cec42b

fix: ブレイクポイン値の変更

fix: ブレイクポイントの値修正

9dc1042

mthaichi added 2 commits February 2, 2022 19:48

fix: 背景透過が効かない、borderStyleによって枠線の色を反映しない不具合修正

0a30e33

fix: 変数名変更

37b0082

shimotmk linked an issue Feb 3, 2022 that may be closed by this pull request

カスタムカラーパレットの色がクラス名でブロックに反映されるように調整 #765

Open

18 tasks

mthaichi changed the title ~~【確認待ち】Outerブロックをカスタムカラーパレットに対応＆細かな修正~~ 【対応中】Outerブロックをカスタムカラーパレットに対応＆細かな修正 Feb 7, 2022

mthaichi marked this pull request as draft February 7, 2022 08:34

mthaichi removed request for sysbird, goutetsuguma, drill-lancer and shimotmk February 7, 2022 08:34

mthaichi added 2 commits February 10, 2022 15:37

fix: Radius値でブロックリカバリーが出るケースを修正

716e50d

fix: 背景透過が効かない不具合の修正

c90b5cf

mthaichi closed this Feb 24, 2022

shimotmk mentioned this pull request Mar 1, 2022

Outerブロック Rの大きさは0以上にする #1040

Closed

shimotmk removed a link to an issue Mar 3, 2022

カスタムカラーパレットの色がクラス名でブロックに反映されるように調整 #765

Open

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【対応中】Outerブロックをカスタムカラーパレットに対応＆細かな修正 #950

【対応中】Outerブロックをカスタムカラーパレットに対応＆細かな修正 #950

mthaichi commented Jan 13, 2022 •

edited

sysbird commented Jan 17, 2022

sysbird commented Jan 17, 2022

sysbird commented Jan 17, 2022

shimotmk commented Jan 25, 2022

shimotmk commented Feb 2, 2022

mthaichi commented Feb 2, 2022

shimotmk commented Feb 2, 2022 •

edited

mthaichi commented Feb 2, 2022

mthaichi commented Feb 2, 2022 •

edited

shimotmk commented Feb 3, 2022

sysbird commented Feb 3, 2022

mthaichi commented Feb 3, 2022

shimotmk commented Feb 3, 2022

sysbird commented Feb 4, 2022

mthaichi commented Feb 4, 2022 •

edited

sysbird commented Feb 4, 2022

mthaichi commented Feb 4, 2022

sysbird commented Feb 4, 2022

mthaichi commented Feb 24, 2022

【対応中】Outerブロックをカスタムカラーパレットに対応＆細かな修正 #950

【対応中】Outerブロックをカスタムカラーパレットに対応＆細かな修正 #950

Conversation

mthaichi commented Jan 13, 2022 • edited

主な変更点

チェック項目

そのほか特記事項

sysbird commented Jan 17, 2022

sysbird commented Jan 17, 2022

sysbird commented Jan 17, 2022

shimotmk commented Jan 25, 2022

shimotmk commented Feb 2, 2022

mthaichi commented Feb 2, 2022

shimotmk commented Feb 2, 2022 • edited

mthaichi commented Feb 2, 2022

mthaichi commented Feb 2, 2022 • edited

shimotmk commented Feb 3, 2022

screen recording

sysbird commented Feb 3, 2022

mthaichi commented Feb 3, 2022

shimotmk commented Feb 3, 2022

sysbird commented Feb 4, 2022

mthaichi commented Feb 4, 2022 • edited

sysbird commented Feb 4, 2022

mthaichi commented Feb 4, 2022

sysbird commented Feb 4, 2022

mthaichi commented Feb 24, 2022

mthaichi commented Jan 13, 2022 •

edited

shimotmk commented Feb 2, 2022 •

edited

mthaichi commented Feb 2, 2022 •

edited

mthaichi commented Feb 4, 2022 •

edited