[ Outer ] depreatedの記述を直しました

[mtdkei]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

#2418 (comment)

どういう変更をしたか？

書き直してみました。コードの内容の確認のため、お手数ですが @mthaichi さんにご確認いただけたらと思います。

スクリーンショットまたは動画

変更前 Before

変更後 After

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？ →内部のためスキップ
• readme.txt に記載の変更内容はエンドユーザーが見て変更の概要がわかるように書かれているか？ →内部のためスキップ
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

• 書けそうなテストは書いたか？ →スキップ

変更内容について何を確認したか、どういう方法で確認をしたかなど

1. ad71a2e のブランチ(Ver.1.92.0)をnpm run buildし、リンク付きのOuterを設置し公開。
2. 2268679 のブランチ(Ver.1.93.0)に切り替え、以下のコードをコピーしてコードエディターツールで/src/blocks/_pro/outer/deprecated/save/index.jsに貼り付ける。

import save1_0_13 from './1.0.13/save';
import save1_26_0 from './1.26.0/save';
import save1_34_1 from './1.34.1/save';
import save1_36_2 from './1.36.2/save';
import save1_50_1 from './1.50.1/save';
import save1_60_0 from './1.60.0/save';
import save1_61_2 from './1.61.2/save';
import save1_64_0 from './1.64.0/save';
import save1_71_0 from './1.71.0/save';
import save1_76_0 from './1.76.0/save';
import save1_89_0 from './1.89.0/save';
import save1_92_1 from './1.92.1/save';

const blockAttributes = {
	bgColor: {
		type: 'string',
		default: '#f3f4f5',
	},
	bgImage: {
		type: 'string',
		default: null,
	},
	outerWidth: {
		type: 'string',
		default: 'normal',
	},
	bgPosition: {
		type: 'string',
		default: 'normal',
	},
	padding_left_and_right: {
		type: 'string',
		default: '0',
	},
	padding_top_and_bottom: {
		type: 'string',
		default: '1',
	},
	opacity: {
		type: 'number',
		default: 0.5,
	},
	upper_level: {
		type: 'number',
		default: 0,
	},
	lower_level: {
		type: 'number',
		default: 0,
	},
	dividerType: {
		type: 'string',
		default: 'tilt',
	},
	upperDividerBgColor: {
		type: 'string',
		default: '#fff',
	},
	lowerDividerBgColor: {
		type: 'string',
		default: '#fff',
	},
	borderWidth: {
		type: 'number',
		default: 0,
	},
	borderStyle: {
		type: 'string',
		default: 'none',
	},
	borderColor: {
		type: 'string',
		default: '#000',
	},
	borderRadius: {
		type: 'number',
		default: 0,
	},
	defaultBgColor: {
		type: 'string',
		default: '#f3f4f5',
	},
	bgImageTablet: {
		type: 'string',
		default: null,
	},
	bgImageMobile: {
		type: 'string',
		default: null,
	},
	clientId: {
		type: 'string',
		default: null,
	},
};

const blockAttributes2 = {
	...blockAttributes,
	innerSideSpaceValuePC: {
		type: "number",
		default: 0
	},
	innerSideSpaceValueTablet: {
		type: "number",
		default: 0
	},
	innerSideSpaceValueMobile: {
		type: "number",
		default: 0
	},
	innerSideSpaceUnit: {
		type: "string",
		default: "px"
	},
};


// 1.34.1 から attributes を変更
const blockAttributes3 = {
	...blockAttributes2,
	clientId: {
		type: 'string',
	},
	blockId: {
		type: 'string',
	},
};

// 1.61.2 から attributes を変更
const blockAttributes4 = {
	...blockAttributes3,
	levelSettingPerDevice: {
		type: 'boolean',
	},
	upper_level_mobile: {
		type: 'number',
	},
	upper_level_tablet: {
		type: 'number',
	},
	upper_level_pc: {
		type: 'number',
	},
	lower_level_mobile: {
		type: 'number',
	},
	lower_level_tablet: {
		type: 'number',
	},
	lower_level_pc: {
		type: 'number',
	},
};

// 1.64.0 から attributes を変更
const blockAttributes5 = {
	...blockAttributes4,
	minHeight: {
		type: 'object',
	},
};

// 1.71.0 から attributes を変更
const blockAttributes6 = {
	...blockAttributes5,
	linkUrl: {
		type: 'string',
	},
	linkTarget: {
		type: 'string',
		default: ''
	},
};

/*
// 1.76.0 から attributes を変更
const blockAttributes7 = {
	...blockAttributes6,
	relAttribute: {
		type: 'string',
		default: '',
	},
	linkDescription: {
		type: 'string',
		default: '',
	},
};
*/

const deprecated = [
	{
		attributes: blockAttributes6,
		save: save1_92_1,
		migrate: (attributes) => {
			return {
				...attributes,
				relAttribute: attributes.relAttribute ?? '',
				linkDescription: attributes.linkDescription ?? '',
			};
		},
	},
	{
		attributes: blockAttributes6,
		save: save1_89_0,
	},
	{
		attributes: blockAttributes6,
		save: save1_76_0,
	},
	{
		attributes: blockAttributes5,
		save: save1_71_0,
	},
	{
		attributes: blockAttributes4,
		save: save1_64_0,
	},
	{
		attributes: blockAttributes3,
		save: save1_61_2,
	},
	{
		attributes: blockAttributes3,
		save: save1_60_0,
	},
	{
		attributes: blockAttributes3,
		save: save1_50_1,
	},
	//ブロックテンプレート用のdeprecated
	{
		attributes: blockAttributes3,
		save: save1_36_2,
	},
	{
		attributes: blockAttributes2,
		save: save1_34_1,
	},
	{
		attributes: blockAttributes2,
		save: save1_26_0,
	},
	{
		attributes: blockAttributes,
		save: save1_0_13,
	},
];

export default deprecated;

3. npm run buildし、1の編集ページを再読み込みしたところ、変更後のスクショのようになっていることを確認。
4. このブランチ(fix/outer/deprecated)に移動し、npm run buildし、1の編集ページを再読み込みしたところ、変更後のスクショのようになっていることを確認。

レビュワーに回す前の確認事項

• 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー確認方法・確認内容など

実装者と同じ確認、また、コードの確認をお願いいたします。

---

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？
• キャッシュをクリアして確認したか？

[mthaichi]

@mtdkei ありがとうございます。最新の develop をベースに修正ください🙏
焦点ピッカーの追加の時に かなりdeprecatedを書き直してます。

プルリクをあげる時に、「Files Changed」 タブを確認し、すべての修正箇所がこのブランチの変更意図に沿っているかを確認するようにしていただくとよいかと思います。（lintがかかっちゃったり、やむを得ないときはあるとは思いますので、極力です） そうすると今回のケースも「あれ？」と気がつくかもです。

[mtdkei]

@mthaichi お手数をおかけして申し訳ありません。次回からは、オープン前に改めて変更を見直すようにします。

[mtdkei]

@mthaichi ただいま修正いたしました。お手数をおかけしますがご確認いただけたら幸いです。

[mthaichi]

@mtdkei 確認が遅くなってしまい、申し訳ありません。

以下２つのdeprecatedはなんのために存在しますか？ なくても動作するように思えるのですが、なんの修正に対するdeprecatedですか？ コード量を無駄に増やしたくないので、もしこの２つ削って動くようでしたら削ってよいかと思いますが、いかがでしょうか。

	{
		attributes: blockAttributes7,
		save: save1_93_2,
	},
	{
		attributes: blockAttributes7,
		save: save1_93_0,
	},

[mtdkei]

@mthaichi
ご指摘ありがとうございます！
これまで、block.json の attributes だけの変更なら deprecated は不要という認識でしたが、save.js の変更が attributes の更新に伴うもの だった場合も deprecated を必ずしも追加する必要がないということですかね。
実際に deprecated から該当部分を削除してテストしたところ、問題なく動作したため、削除の方向で対応しました。今後も、save.js の変更内容に応じて deprecated の要否を適切に判断するようにします。
また、blockAttributes7 が使われなくなったので、blockAttributes8 の内容を統合し、blockAttributes7 を整理しました。

[mthaichi]

@mtdkei ご確認ありがとうございます。
blockAttributes7は必要ではないですか？ relAttribute と linkDescription は前のバージョンで追加されたものなので、その２つがblockAttributes7として最後に読み込まれるべきではないですか。
bgFocalPointPC以降 は 現バージョンで追加されたものではないのですか？そうであればコメントアウトしなければなりません。

「前のバージョンのblock.jsonとsave.jsを完全に再現する」ということを念頭において考えていただきたいです。
現バージョンで追加されたattributeはdeprecatedには入らないですね。

[mthaichi]

@mtdkei ご確認ありがとうございます。 blockAttributes7は必要ではないですか？ relAttribute と linkDescription は前のバージョンで追加されたものなので、その２つがblockAttributes7として最後に読み込まれるべきではないですか。 bgFocalPointPC以降 は 現バージョンで追加されたものではないのですか？そうであればコメントアウトしなければなりません。

「前のバージョンのblock.jsonとsave.jsを完全に再現する」ということを念頭において考えていただきたいです。 現バージョンで追加されたattributeはdeprecatedには入らないですね。

ちなみにフォーカルポイントの設定の追加をしたのが現バージョンという認識です。

[mtdkei]

@mthaichi
ご確認ありがとうございます。

昨日の段階で「blockAttributes7 の deprecated は不要では？」との指摘をいただき、過去バージョンの block.json や save.js を確認し、削除後の動作検証を行いました。
その結果、削除しても問題がないと判断し、対応しました。

ただ、今回のご指摘の通り、

• relAttribute & linkDescription は過去バージョンで追加されたものであり、save.js の互換性を維持するため、blockAttributes7 を deprecated に復元しました。
• bgFocalPointPC 以降の属性は現バージョンで追加されたものなので、deprecated には含めずコメントアウトしました。

以上の理由から、おそらく コミット 6f7e0e5 で全て対応できていると思われたので以前のコミットに戻しました。
「前のバージョンのblock.jsonとsave.jsを完全に再現する」ということが曖昧だったのですみませんでしたが、この点を意識して対応いたします。
改めてご確認いただけますと幸いです。よろしくお願いいたします。

[mthaichi]

@mtdkei ここは完璧なdeprecatedは厳しいかもしれませんね。
最低限の修正を行ったということでいったんapproveにして、別途対応とします。
ありがとうございました。