【要再確認】btn クラスの復活と色指定のロジックを調整 #834

drill-lancer · 2021-10-20T07:35:38Z

【変更点】

btn クラスを復活 & vk_button_btn クラスを削除
記事更新時の色指定のロジックを調整

【問題点】

btn:hover で color が更新され curtrentColor で設定した色が取得できなくなる

drill-lancer · 2021-10-21T00:26:29Z

@kurudrive
.btn を使うと .btn:hover の影響で currentColor が使えません。
そこで適当な変数 --vk-current-color を用意してそこに選択した色を格納するようにしました。
あとは currentColor で回していたものを var( --vk-current-color ) で回すようにしました。

kurudrive · 2021-10-21T02:40:17Z

@drill-lancer これはもう確認待ち状態ですか？
※コミットが追加され続けてるのでまだ調整中かなと思ったので。
※無理に確認に回さなくて良いので自分的に問題ないレベルになってから確認にまわして貰えればOK

drill-lancer · 2021-10-21T02:41:46Z

@kurudrive
今回のコミットで確認待ち状態です。
（前回のコメント時点で確認待ち状態でしたが CSS の構造をシンプルにしたくなったのでそのための追加コミットです。）

kurudrive · 2021-10-21T03:13:58Z

@drill-lancer ありがとうございます。
以下調整よろしくお願いいたします。

カスタムカラーの塗りが反映されない
編集画面再読み込みでリカバリになる

<!-- wp:heading -->
<h2 id="vk-htags-582f5720-9ddd-48ac-973b-f721ea234470">ボタン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-e0246181-6935-4e8f-983f-c8859525d446">サブテキスト</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"subCaption":"サブテキスト","buttonUrl":"https://www.google.com/","fontAwesomeIconBefore":"\u003ci class=\u0022far fa-arrow-alt-circle-right\u0022\u003e\u003c/i\u003e","fontAwesomeIconAfter":"\u003ci class=\u0022fas fa-external-link-alt\u0022\u003e\u003c/i\u003e","clientId":"29743cf0-ccba-4f37-b44c-6e3864c3c433","className":"vk_button-fb6ce070-5c31-42b8-9a86-348333b92fa7"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-fb6ce070-5c31-42b8-9a86-348333b92fa7"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><i class="far vk_button_link_before fa-arrow-alt-circle-right"></i><span class="vk_button_link_txt">ボタン</span><i class="fas vk_button_link_after fa-external-link-alt"></i><p class="vk_button_link_subCaption">サブテキスト</p></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-f45c2db4-1de0-4653-a4f8-f6ce5a1c0911">ボタンサイズ</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonSize":"lg","clientId":"3ac2832c-75b2-4f45-9f59-96e0b40e14e3","className":"vk_button-8faa4eed-7177-4d68-a191-f4e24647512b"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-8faa4eed-7177-4d68-a191-f4e24647512b"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-lg" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">ボタン大</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","clientId":"ab66d780-077c-4ab2-b5b1-e3f26fa9cbde","className":"vk_button-b9d27467-3444-4c9a-aee3-d228f28750d2"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-b9d27467-3444-4c9a-aee3-d228f28750d2"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">ボタン標準</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","clientId":"792ac793-8cfc-4542-a53c-ee36ee2b90e6","className":"vk_button-422c1c33-9499-4ed4-b02a-1312cf43f96e"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-422c1c33-9499-4ed4-b02a-1312cf43f96e"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">ボタン小</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-5c80d281-dda0-49ab-b7bb-7562bcaf4dca">ボタン位置</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","clientId":"c0300ef9-61b1-46dd-945b-de9824558adf","className":"vk_button-722fd395-bdfa-42b2-ac3e-3283b75625bd"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-722fd395-bdfa-42b2-ac3e-3283b75625bd"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">左</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"center","clientId":"d6ad9cf7-0bcc-4d02-9d93-fca082b86073","className":"vk_button-afcdfdea-094b-4a84-b1d4-98b7836e9299"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center vk_button-afcdfdea-094b-4a84-b1d4-98b7836e9299"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">中央</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"right","clientId":"3b35a3b4-214a-4582-99f4-b31cecb6bcba","className":"vk_button-972434b3-f49a-497e-8489-b3404b09e9af"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-right vk_button-972434b3-f49a-497e-8489-b3404b09e9af"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">右</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"wide","clientId":"a747c299-8848-4a42-a56a-22e8f4279e46","className":"vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-wide vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">幅広</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"block","clientId":"0180fa75-f293-4c71-b07e-279af3a4d91d","className":"vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-block vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md btn-block" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">全幅</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-5563f5a0-4ff3-44d7-b650-a76c391556f8">色</h3>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"clientId":"beb23328-68cd-4a6b-b3c8-538e9ae3d496"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"bef48324-19b0-4aa9-805a-248378993e24"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Secondary 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"fabf9589-5f95-4dfb-b600-2d45d190580a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Success 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"af64b12f-ae00-4e13-8cd5-21c2c4a18107"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Info 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"299c0864-3a89-4c7f-96b5-4ea0c0ccb08d"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Warning 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"a4db3baa-7e8a-44bf-8213-21f5458e16fd"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt"> Danger塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"f39b5f05-2ed5-4deb-b55f-f91a435eb229"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Light塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"6efead47-7cda-4645-8bc4-66c1c99dd456"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Dark塗り</span></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"1","clientId":"d65e67d8-fab2-4f5c-990c-d1b97bcbbea0"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"dded8948-99a9-4229-8677-5ca1ed8155d5"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Secondary 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"5a36eff5-f131-4309-ad1b-93533b81919c"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Success 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"b70e2b00-767a-4b83-8a08-8f66a51c7622"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Info 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"ce5a3774-1276-4b0c-bfc2-92901968391b"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Warning 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"6bbd9aad-42b4-40b9-9452-58c297651b3e"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt"> Danger背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"933c5b3b-ca85-4e23-86ca-39cb859704e4"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Light背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"284fb5e6-0761-4c3a-b342-d533260a8fa5"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Dark背景なし</span></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"2","clientId":"30fd504c-1fc8-4fe2-9924-750aab247712"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"02f8e4c1-1af4-4ec3-8fcf-9a45aaf42384"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Secondary テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"7863117f-d6e0-4931-8c6f-553d59825834"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Success テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"26be4d67-9220-4be1-ae4c-83d219aa46b6"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Info テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"8d57f12e-cb2a-45ca-bb68-f9a99bb815ee"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Warning テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"7d5b1b0e-5df1-433f-9b4e-afe529da38d4"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt"> Dangerテキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"95994b98-89a3-4cbd-b49b-86a23c4e8a92"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Lightテキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"9e6c1a34-1255-4c10-a67f-93f121479785"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Darkテキストのみ</span></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"clientId":"8073a481-fc3b-4258-be7c-99599143006a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"b212c439-22fc-49fa-9856-f6f37f9c8022"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">キーカラー 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonColorCustom":"vk-color-custom-2","clientId":"cd2db554-821b-4db9-8184-d6825233d26b"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link has-background vk_button_btn has-vk-color-custom-2-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムパレットカラー 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonColorCustom":"#005073","clientId":"88eec410-6c5e-4406-8323-8feefa8d1cae"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-88eec410-6c5e-4406-8323-8feefa8d1cae"><a class="vk_button_link has-background vk_button_btn btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムカラー 塗り</span></a></div><style type="text/css">
			.vk_button-88eec410-6c5e-4406-8323-8feefa8d1cae .has-background {
				background-color: #005073;
				border: 1px solid #005073;
				color: #fff;
			}
			</style>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"1","clientId":"20dea9cd-dd5c-4bb1-a554-d324222bad77"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary ゴースト</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"vk-color-primary","clientId":"05fbd1c2-e42c-42b5-8eff-c79f260af1ac"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link has-text-color vk_button_btn has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">キーカラー ゴースト</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"vk-color-custom-1","clientId":"b9cc2e28-5339-48cd-b43d-6fd3edef73ce"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link has-text-color vk_button_btn has-vk-color-custom-1-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムパレットカラー ゴースト</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"#bd1991","clientId":"c5da0607-9340-4eb5-996d-498b72d86075"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-c5da0607-9340-4eb5-996d-498b72d86075"><a class="vk_button_link has-text-color vk_button_btn btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムカラー ゴースト</span></a></div><style type="text/css">
			.vk_button-c5da0607-9340-4eb5-996d-498b72d86075 .has-text-color {
				background-color: transparent;
				border: 1px solid #bd1991;
				color: #bd1991;
			}
			.vk_button-c5da0607-9340-4eb5-996d-498b72d86075 .has-text-color:hover {
				background-color: #bd1991;
				border: 1px solid #bd1991;
				color: #fff;
			}
			</style>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"2","clientId":"b1a4c2d0-2d69-45a1-a964-aa79d05e5a10"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","buttonColor":"custom","buttonColorCustom":"vk-color-primary","clientId":"b8e39ac4-835a-41c4-a2fa-f015ae27fb9a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">キーカラー テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","buttonColor":"custom","buttonColorCustom":"vk-color-custom-1","clientId":"3b9edb53-df52-4c52-9ffa-eb402ee4df6a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-custom-1-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムパレットカラー テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","buttonColor":"custom","buttonColorCustom":"#bd1991","clientId":"74b7abf5-7b0c-4bd8-a95e-8155ea0ca6a8"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-74b7abf5-7b0c-4bd8-a95e-8155ea0ca6a8"><a class="vk_button_link vk_button_link-type-text has-text-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムカラー テキストのみ</span></a></div><style type="text/css">
			.vk_button-74b7abf5-7b0c-4bd8-a95e-8155ea0ca6a8 .vk_button_link-type-text {
				color: #bd1991;
			}
			</style>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-3b9a5f9a-7536-40e5-bfbf-5eaecce48e7a">Font awesome</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","fontAwesomeIconBefore":"fas fa-arrow-circle-right","fontAwesomeIconAfter":" fas fa-external-link-alt","clientId":"952ffad4-cc39-4637-8fb8-9fa02e0481ee","className":"vk_button-51c7023e-9315-413e-8110-62452701505c"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-51c7023e-9315-413e-8110-62452701505c"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><i class="fas vk_button_link_before fa-arrow-circle-right"></i><span class="vk_button_link_txt">前後のアイコンフォント</span><i class="fas vk_button_link_after fa-external-link-alt"></i></a></div>
<!-- /wp:vk-blocks/button -->

drill-lancer · 2021-10-21T06:17:54Z

別ブランチで作業するのでクローズ

…/button/unuse-vk_button-btn

drill-lancer · 2021-10-22T00:03:25Z

下記で問題なく動作することを確認しました。
（上記石川さんのデータは存在しないバージョンのものが含まれていたので master でリカバリーしたデータを再掲します。）

<!-- wp:heading -->
<h2 id="vk-htags-582f5720-9ddd-48ac-973b-f721ea234470">ボタン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-e0246181-6935-4e8f-983f-c8859525d446">サブテキスト</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"subCaption":"サブテキスト","buttonUrl":"https://www.google.com/","fontAwesomeIconBefore":"\u003ci class=\u0022far fa-arrow-alt-circle-right\u0022\u003e\u003c/i\u003e","fontAwesomeIconAfter":"\u003ci class=\u0022fas fa-external-link-alt\u0022\u003e\u003c/i\u003e","clientId":"29743cf0-ccba-4f37-b44c-6e3864c3c433","className":"vk_button-fb6ce070-5c31-42b8-9a86-348333b92fa7"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-fb6ce070-5c31-42b8-9a86-348333b92fa7"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><i class="far vk_button_link_before fa-arrow-alt-circle-right"></i><span class="vk_button_link_txt">ボタン</span><i class="fas vk_button_link_after fa-external-link-alt"></i><p class="vk_button_link_subCaption">サブテキスト</p></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-f45c2db4-1de0-4653-a4f8-f6ce5a1c0911">ボタンサイズ</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonSize":"lg","clientId":"3ac2832c-75b2-4f45-9f59-96e0b40e14e3","className":"vk_button-8faa4eed-7177-4d68-a191-f4e24647512b"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-8faa4eed-7177-4d68-a191-f4e24647512b"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-lg" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">ボタン大</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","clientId":"ab66d780-077c-4ab2-b5b1-e3f26fa9cbde","className":"vk_button-b9d27467-3444-4c9a-aee3-d228f28750d2"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-b9d27467-3444-4c9a-aee3-d228f28750d2"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">ボタン標準</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","clientId":"792ac793-8cfc-4542-a53c-ee36ee2b90e6","className":"vk_button-422c1c33-9499-4ed4-b02a-1312cf43f96e"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-422c1c33-9499-4ed4-b02a-1312cf43f96e"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">ボタン小</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-5c80d281-dda0-49ab-b7bb-7562bcaf4dca">ボタン位置</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","clientId":"c0300ef9-61b1-46dd-945b-de9824558adf","className":"vk_button-722fd395-bdfa-42b2-ac3e-3283b75625bd"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-722fd395-bdfa-42b2-ac3e-3283b75625bd"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">左</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"center","clientId":"d6ad9cf7-0bcc-4d02-9d93-fca082b86073","className":"vk_button-afcdfdea-094b-4a84-b1d4-98b7836e9299"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center vk_button-afcdfdea-094b-4a84-b1d4-98b7836e9299"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">中央</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"right","clientId":"3b35a3b4-214a-4582-99f4-b31cecb6bcba","className":"vk_button-972434b3-f49a-497e-8489-b3404b09e9af"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-right vk_button-972434b3-f49a-497e-8489-b3404b09e9af"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">右</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"wide","clientId":"a747c299-8848-4a42-a56a-22e8f4279e46","className":"vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-wide vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">幅広</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","buttonAlign":"block","clientId":"0180fa75-f293-4c71-b07e-279af3a4d91d","className":"vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-block vk_button-41033268-2fb6-42fb-bf7a-50cd64020105"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md btn-block" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">全幅</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-5563f5a0-4ff3-44d7-b650-a76c391556f8">色</h3>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"clientId":"beb23328-68cd-4a6b-b3c8-538e9ae3d496"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"bef48324-19b0-4aa9-805a-248378993e24"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Secondary 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"fabf9589-5f95-4dfb-b600-2d45d190580a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Success 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"af64b12f-ae00-4e13-8cd5-21c2c4a18107"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Info 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"299c0864-3a89-4c7f-96b5-4ea0c0ccb08d"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Warning 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"a4db3baa-7e8a-44bf-8213-21f5458e16fd"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt"> Danger塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"f39b5f05-2ed5-4deb-b55f-f91a435eb229"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Light塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"6efead47-7cda-4645-8bc4-66c1c99dd456"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Dark塗り</span></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"1","clientId":"d65e67d8-fab2-4f5c-990c-d1b97bcbbea0"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"dded8948-99a9-4229-8677-5ca1ed8155d5"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Secondary 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"5a36eff5-f131-4309-ad1b-93533b81919c"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Success 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"b70e2b00-767a-4b83-8a08-8f66a51c7622"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Info 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"ce5a3774-1276-4b0c-bfc2-92901968391b"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Warning 背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"6bbd9aad-42b4-40b9-9452-58c297651b3e"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt"> Danger背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"933c5b3b-ca85-4e23-86ca-39cb859704e4"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Light背景なし</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","clientId":"284fb5e6-0761-4c3a-b342-d533260a8fa5"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Dark背景なし</span></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"2","clientId":"30fd504c-1fc8-4fe2-9924-750aab247712"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"02f8e4c1-1af4-4ec3-8fcf-9a45aaf42384"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Secondary テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"7863117f-d6e0-4931-8c6f-553d59825834"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Success テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"26be4d67-9220-4be1-ae4c-83d219aa46b6"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Info テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"8d57f12e-cb2a-45ca-bb68-f9a99bb815ee"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Warning テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"7d5b1b0e-5df1-433f-9b4e-afe529da38d4"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt"> Dangerテキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"95994b98-89a3-4cbd-b49b-86a23c4e8a92"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Lightテキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","clientId":"9e6c1a34-1255-4c10-a67f-93f121479785"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Darkテキストのみ</span></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"clientId":"8073a481-fc3b-4258-be7c-99599143006a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"clientId":"b212c439-22fc-49fa-9856-f6f37f9c8022"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">キーカラー 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonColorCustom":"vk-color-custom-2","clientId":"cd2db554-821b-4db9-8184-d6825233d26b"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link has-background vk_button_btn has-vk-color-custom-2-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムパレットカラー 塗り</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonColorCustom":"#005073","clientId":"88eec410-6c5e-4406-8323-8feefa8d1cae"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-88eec410-6c5e-4406-8323-8feefa8d1cae"><a class="vk_button_link has-background vk_button_btn btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムカラー 塗り</span></a></div><style type="text/css">
			.vk_button-88eec410-6c5e-4406-8323-8feefa8d1cae .has-background {
				background-color: #005073;
				border: 1px solid #005073;
				color: #fff;
			}
			</style>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"1","clientId":"20dea9cd-dd5c-4bb1-a554-d324222bad77"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_btn has-text-color has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary ゴースト</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"vk-color-primary","clientId":"05fbd1c2-e42c-42b5-8eff-c79f260af1ac"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link has-text-color vk_button_btn has-vk-color-primary-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">キーカラー ゴースト</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"vk-color-custom-1","clientId":"b9cc2e28-5339-48cd-b43d-6fd3edef73ce"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link has-text-color vk_button_btn has-vk-color-custom-1-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムパレットカラー ゴースト</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"#bd1991","clientId":"c5da0607-9340-4eb5-996d-498b72d86075"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-c5da0607-9340-4eb5-996d-498b72d86075"><a class="vk_button_link has-text-color vk_button_btn btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムカラー ゴースト</span></a></div><style type="text/css">
			.vk_button-c5da0607-9340-4eb5-996d-498b72d86075 .has-text-color {
				background-color: transparent;
				border: 1px solid #bd1991;
				color: #bd1991;
			}
			.vk_button-c5da0607-9340-4eb5-996d-498b72d86075 .has-text-color:hover {
				background-color: #bd1991;
				border: 1px solid #bd1991;
				color: #fff;
			}
			</style>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"buttonType":"2","clientId":"b1a4c2d0-2d69-45a1-a964-aa79d05e5a10"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">Primary テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","buttonColor":"custom","buttonColorCustom":"vk-color-primary","clientId":"b8e39ac4-835a-41c4-a2fa-f015ae27fb9a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-primary-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">キーカラー テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","buttonColor":"custom","buttonColorCustom":"vk-color-custom-1","clientId":"3b9edb53-df52-4c52-9ffa-eb402ee4df6a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left"><a class="vk_button_link vk_button_link-type-text has-text-color has-vk-color-custom-1-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムパレットカラー テキストのみ</span></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"2","buttonColor":"custom","buttonColorCustom":"#bd1991","clientId":"74b7abf5-7b0c-4bd8-a95e-8155ea0ca6a8"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-74b7abf5-7b0c-4bd8-a95e-8155ea0ca6a8"><a class="vk_button_link vk_button_link-type-text has-text-color btn-md" role="button" aria-pressed="true" rel="noopener"><span class="vk_button_link_txt">カスタムカラー テキストのみ</span></a></div><style type="text/css">
			.vk_button-74b7abf5-7b0c-4bd8-a95e-8155ea0ca6a8 .vk_button_link-type-text {
				color: #bd1991;
			}
			</style>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading {"level":3} -->
<h3 id="vk-htags-3b9a5f9a-7536-40e5-bfbf-5eaecce48e7a">Font awesome</h3>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button {"buttonUrl":"https://www.google.com/","fontAwesomeIconBefore":"fas fa-arrow-circle-right","fontAwesomeIconAfter":" fas fa-external-link-alt","clientId":"952ffad4-cc39-4637-8fb8-9fa02e0481ee","className":"vk_button-51c7023e-9315-413e-8110-62452701505c"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-left vk_button-51c7023e-9315-413e-8110-62452701505c"><a href="https://www.google.com/" class="vk_button_link vk_button_btn has-background has-vk-color-primary-background-color btn-md" role="button" aria-pressed="true" rel="noopener"><i class="fas vk_button_link_before fa-arrow-circle-right"></i><span class="vk_button_link_txt">前後のアイコンフォント</span><i class="fas vk_button_link_after fa-external-link-alt"></i></a></div>
<!-- /wp:vk-blocks/button -->

kurudrive · 2021-10-22T01:14:08Z

@drill-lancer ありがとうございます。チェック項目確認よろしくお願いいたします。

kurudrive · 2021-10-22T01:19:43Z

@drill-lancer 確認無しでそのままリリースされる前提で確認にまわしてください。

drill-lancer · 2021-10-22T01:24:01Z

@kurudrive

カスタムカラーの塗りが反映されない → 再構築後は反映されます
編集画面再読み込みでリカバリになる → リカバリーは発生しません

kurudrive · 2021-10-22T02:01:30Z

カスタムカラー以外はスタイルを出力しないように

drill-lancer · 2021-10-22T02:22:53Z

@kurudrive
下記を完了しつつそれに合わせた調整を加えたものをコミットしておきました。
今回のコミットで該当する問題が浮き彫りになります。

カスタムカラー以外はスタイルを出力しないように

kurudrive · 2021-10-22T02:23:58Z

@drill-lancer ありがとうございます。確認します。

kurudrive · 2021-10-22T02:55:08Z

.btn.has-vk-color-custom-1-color:hover{
	color:var(--vk-color-custom-1);
}

drill-lancer · 2021-10-22T04:15:13Z

@kurudrive
応急処置が完了しましました！

kurudrive · 2021-10-22T04:45:03Z

@drill-lancer ありがとうございます

↓ でスペースが２つ入りますー。

is-style-outline has-vk-color-primary-color

kurudrive · 2021-10-22T04:46:34Z

src/blocks/button/deprecated/hooks/index.js

+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,
+	ButtonHook1_16_2,


@drill-lancer これなくて良くね（・ｗ・？
何か特殊な処理？

Suggested change

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

ButtonHook1_16_2,

@kurudrive
過去の deprecated (save) と対で作用しているので必要だと思います。

@drill-lancer あー、なるほど！ありがとうございます。

drill-lancer · 2021-10-22T04:49:29Z

@kurudrive
スペース削除しました。

kurudrive · 2021-10-22T05:35:12Z

@drill-lancer マージしました！ありがとうございました！

kurudrive · 2021-10-22T05:36:18Z

@drill-lancer Katawara / Lightning Pro で表示してカスタムカラーパレット以外不具合でないか確認よろしくお願いいたします。

drill-lancer · 2021-10-22T07:17:48Z

@kurudrive
公開画面では問題ないですが編集画面で色関連の CSS が負けてました。
Katawara / Lightning Pro ともにです。
気になったので下記で修正済みです。
#843

drill-lancer · 2021-10-22T07:33:22Z

Lightning Pro では --vk-color-primary の値が公開画面と編集画面で違います。

Filterの書き方をボタンと同様に修正参考 #834

参考 #834

fix: btn の復活と画面更新時の色設定の変動を調整

202f321

drill-lancer self-assigned this Oct 20, 2021

drill-lancer linked an issue Oct 20, 2021 that may be closed by this pull request

[ ボタンブロック ] クラス名の処理変更 #832

Closed

drill-lancer added 3 commits October 20, 2021 16:51

fix: deprecated & test

8edc36c

fix: css

57963c4

test

b7de497

drill-lancer changed the title ~~【WIP】btn クラスの復活と色指定のロジックを調整~~ 【確認待ち】btn クラスの復活と色指定のロジックを調整 Oct 21, 2021

drill-lancer marked this pull request as ready for review October 21, 2021 00:23

drill-lancer requested a review from kurudrive October 21, 2021 00:23

drill-lancer added 4 commits October 21, 2021 09:35

fix: 色の処理変更

14b962d

fix: inline css

acf88df

fix: CSS をシンプルに

780916f

fix: css 調整

b9915f7

fix: いらない気もするけど has-xxx-background-color から色を取得

24ccae0

fix: deprecated

69b1f5f

kurudrive changed the title ~~【確認待ち】btn クラスの復活と色指定のロジックを調整~~ 【要再調整】btn クラスの復活と色指定のロジックを調整 Oct 21, 2021

drill-lancer closed this Oct 21, 2021

drill-lancer added 4 commits October 21, 2021 16:21

deprecated

7c71bc0

fix: deprecated

a0f0a0b

deprecated test

c8b5eb9

fix: deprecated

db1a3f2

drill-lancer reopened this Oct 21, 2021

drill-lancer added 2 commits October 22, 2021 08:55

Merge branch 'master' of github.com:vektor-inc/vk-blocks-pro into fix…

007c64c

…/button/unuse-vk_button-btn

fix: filter

c700c4a

drill-lancer changed the title ~~【要再調整】btn クラスの復活と色指定のロジックを調整~~ 【要再確認】btn クラスの復活と色指定のロジックを調整 Oct 22, 2021

drill-lancer added 2 commits October 22, 2021 11:07

一旦戻し

f1fdaa0

変数を廃止＆JS からカスタムカラー以外の CSS を削除

6621b66

drill-lancer added 2 commits October 22, 2021 13:10

fix: 応急処置による直書き

e9d0ea6

fix: 応急処置による CSS 直書き対策

6efbff9

kurudrive requested changes Oct 22, 2021

View reviewed changes

fix: スペース削除

b5b0f58

kurudrive added 2 commits October 22, 2021 14:00

doc / button : コメントのみ

9f01787

fix / button : sass クラス名半角スペースつなぎなら & は不要なので削除

fe37797

kurudrive approved these changes Oct 22, 2021

View reviewed changes

[ Change version ] 1.16.8

e582ae8

kurudrive merged commit 5f5b47d into master Oct 22, 2021

kurudrive deleted the fix/button/unuse-vk_button-btn branch October 22, 2021 05:34

shimotmk added a commit that referenced this pull request Feb 4, 2022

fix / card :

15db053

Filterの書き方をボタンと同様に修正参考 #834

shimotmk added a commit that referenced this pull request Feb 8, 2022

fix / card : CardHookのsave数を調整

56c7106

参考 #834

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【要再確認】btn クラスの復活と色指定のロジックを調整 #834

【要再確認】btn クラスの復活と色指定のロジックを調整 #834

drill-lancer commented Oct 20, 2021 •

edited

Loading

drill-lancer commented Oct 21, 2021 •

edited

Loading

kurudrive commented Oct 21, 2021 •

edited

Loading

drill-lancer commented Oct 21, 2021

kurudrive commented Oct 21, 2021 •

edited by drill-lancer

Loading

drill-lancer commented Oct 21, 2021

drill-lancer commented Oct 22, 2021

kurudrive commented Oct 22, 2021

kurudrive commented Oct 22, 2021

drill-lancer commented Oct 22, 2021 •

edited

Loading

kurudrive commented Oct 22, 2021

drill-lancer commented Oct 22, 2021 •

edited

Loading

kurudrive commented Oct 22, 2021

kurudrive commented Oct 22, 2021

drill-lancer commented Oct 22, 2021

kurudrive commented Oct 22, 2021

kurudrive Oct 22, 2021

drill-lancer Oct 22, 2021

kurudrive Oct 22, 2021

drill-lancer commented Oct 22, 2021

kurudrive commented Oct 22, 2021

kurudrive commented Oct 22, 2021 •

edited

Loading

drill-lancer commented Oct 22, 2021 •

edited

Loading

drill-lancer commented Oct 22, 2021

【要再確認】btn クラスの復活と色指定のロジックを調整 #834

【要再確認】btn クラスの復活と色指定のロジックを調整 #834

Conversation

drill-lancer commented Oct 20, 2021 • edited Loading

drill-lancer commented Oct 21, 2021 • edited Loading

kurudrive commented Oct 21, 2021 • edited Loading

drill-lancer commented Oct 21, 2021

kurudrive commented Oct 21, 2021 • edited by drill-lancer Loading

drill-lancer commented Oct 21, 2021

drill-lancer commented Oct 22, 2021

kurudrive commented Oct 22, 2021

kurudrive commented Oct 22, 2021

drill-lancer commented Oct 22, 2021 • edited Loading

kurudrive commented Oct 22, 2021

drill-lancer commented Oct 22, 2021 • edited Loading

kurudrive commented Oct 22, 2021

kurudrive commented Oct 22, 2021

drill-lancer commented Oct 22, 2021

kurudrive commented Oct 22, 2021

kurudrive Oct 22, 2021

Choose a reason for hiding this comment

drill-lancer Oct 22, 2021

Choose a reason for hiding this comment

kurudrive Oct 22, 2021

Choose a reason for hiding this comment

drill-lancer commented Oct 22, 2021

kurudrive commented Oct 22, 2021

kurudrive commented Oct 22, 2021 • edited Loading

drill-lancer commented Oct 22, 2021 • edited Loading

drill-lancer commented Oct 22, 2021

drill-lancer commented Oct 20, 2021 •

edited

Loading

drill-lancer commented Oct 21, 2021 •

edited

Loading

kurudrive commented Oct 21, 2021 •

edited

Loading

kurudrive commented Oct 21, 2021 •

edited by drill-lancer

Loading

drill-lancer commented Oct 22, 2021 •

edited

Loading

drill-lancer commented Oct 22, 2021 •

edited

Loading

kurudrive commented Oct 22, 2021 •

edited

Loading

drill-lancer commented Oct 22, 2021 •

edited

Loading