[ 解決済 ] ブロックエディタにてVKカードの改行がくずれる

[hij.kumagai]

■ 質問内容：
初めて投稿する、Wordpress(HP作成自体も)1年未満の初心者です。

VK-BlocksPro 0系では問題なかったのですが、1系に更新されると
必ずブロックエディター上で表示の不具合（？）が起きて困っています。
ページのブラウザ表示は壊れていません。（添付のスクショをご確認ください。）
なんどかプラグインのみ古いバックアップをリストアすることで
（つまり強制的に０系に戻すことで）緊急対処していたのですが、
VK-BlocksProは自動更新設定なしでも
勝手に更新されるようで、1系に戻っては表示くずれが起きます。。
どなたか1系での対処方法をご教示頂けませんでしょうか？

なお、スクショの通りカードアイテムの中には
文章とボタンだけを表示し、文章の箇所に”枠線ボックス”を入れていますが、
”段落”でも同じようにすぐに改行されてしまします。。

■ 症状が発生するブラウザ :
Chromeとfirefoxでは発生。恐らくブラウザに依存しない。

■ 利用テーマとバージョン :
WordPress 5.6.2
Lightning Pro バージョン: 8.7.3
VK-BlocksPro 1.0.6

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

ご報告ありがとうございます。
本件調査中ですのでご迷惑おかけして恐れ入りますが今しばらくお待ちくださいませ。

VK-BlocksProは自動更新設定なしでも
勝手に更新されるようで、

VK Blocks Pro 自体には自動更新の機能はありません。
WordPressのプラグイン一覧の画面で自動更新を設定しているのだと思いますので停止してください。

[Vektor,Inc]

ご報告ありがとうございます。

詳細な調査のために、該当のページのデータの共有をお願いできますでしょうか？

【共有方法】
添付の画像を参考に、コピーした内容をフォーラムに貼り付けてください。

どうぞよろしくお願いします。

Attachments:

You must be logged in to view attached files.

[hij.kumagai]

<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">最終更新日：2021/02/02</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:vk-blocks/card {"name":"vk-blocks/card","layout":"card-noborder","display_title":false,"display_excerpt":false,"display_image":false,"btn_text":"受け入れ希望・相談はこちら","clientId":"1b738bd1-c4f2-4631-abd1-276e625a0ba7","blockId":"1b738bd1-c4f2-4631-abd1-276e625a0ba7"} -->
<div class="wp-block-vk-blocks-card vk_posts vk_card_1b738bd1-c4f2-4631-abd1-276e625a0ba7"><!-- wp:vk-blocks/card-item {"layout":"card-noborder","display_title":false,"display_excerpt":false,"display_image":false,"btn_text":"受け入れ希望・相談はこちら","url":"/anken-request/"} -->
<div class="wp-block-vk-blocks-card-item vk_post card card-noborder card-post vk_card_item vk_post-col-xs-12 vk_post-col-sm-6 vk_post-col-md-4 vk_post-col-lg-4 vk_post-col-xl-4 vk_post-col-xxl-4
vk_post-btn-display"><div class="vk_post_body card-body"><!-- wp:vk-blocks/border-box {"className":"is-style-vk_borderBox-style-solid-kado-tit-banner"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-color-red vk_borderBox-background-transparent is-style-vk_borderBox-style-solid-kado-tit-banner"><div class="vk_borderBox_title_container"><i class=""></i><h4 class="vk_borderBox_title">募集ID：OSA-0005 個人</h4></div><div class="vk_borderBox_body"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><span style="background-color:#fcb900" class="tadv-background-color"></span><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><span style="color:#ff6900" class="tadv-color">NEW!!</span><span style="color:#ff6900" class="tadv-color"></span></span></strong><br>【地域】大阪<br>【期間】2021/3/16～2022/3/15<br>1年間滞在予定のため、3か月毎に延長の相談をさせて頂きます。<br>【国籍・性別】アメリカ・男性<br>【年齢】20歳<br>[su_spoiler title="続きを読む" class="anken_spoiler"]<br>【食事提供】2食（朝・夕食）<br>【日本語】初級<br>【趣味】読書、勉強、ビデオゲーム、音楽鑑賞、サイクリング<br>【内容・条件】<br>中崎町駅最寄りの語学学校に通学予定です。学校より60分圏内にお住まいでファミリーメンバーが2名以上のホストファミリーを希望しています。日本語を頑張って話せるようになりたいので、たくさん日本語で話しかけてあげてください。[/su_spoiler]</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --><div class="vk_post_btnOuter has-text-align-right"><a href="/anken-request/" target="_blank" rel="noreferrer noopener">受け入れ希望・相談はこちら</a></div></div></div>
<!-- /wp:vk-blocks/card-item -->

<!-- wp:vk-blocks/card-item {"layout":"card-noborder","display_title":false,"display_excerpt":false,"display_image":false,"btn_text":"受け入れ希望・相談はこちら","url":"/anken-request/"} -->
<div class="wp-block-vk-blocks-card-item vk_post card card-noborder card-post vk_card_item vk_post-col-xs-12 vk_post-col-sm-6 vk_post-col-md-4 vk_post-col-lg-4 vk_post-col-xl-4 vk_post-col-xxl-4
vk_post-btn-display"><div class="vk_post_body card-body"><!-- wp:vk-blocks/border-box {"className":"is-style-vk_borderBox-style-solid-kado-tit-banner"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-color-red vk_borderBox-background-transparent is-style-vk_borderBox-style-solid-kado-tit-banner"><div class="vk_borderBox_title_container"><i class=""></i><h4 class="vk_borderBox_title">募集ID：OSA-0003 個人</h4></div><div class="vk_borderBox_body"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><span style="background-color:#fcb900" class="tadv-background-color">『受け入れ決定』</span><strong><span data-color="#fffd6b" style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" class="vk_highlighter"><span style="color:#ff6900" class="tadv-color"></span></span></strong><br>【地域】京都<br>【期間】2021/01/16から90泊<span style="color:#cf2e2e" class="tadv-color"><span data-color="#fcb900" style="background: linear-gradient(transparent 60%,rgba(252, 185, 0, 0.7) 0);" class="vk_highlighter"></span></span><br>【国籍・性別】イタリア・女<br>【年齢】44<br>[su_spoiler title="続きを読む" class="anken_spoiler"]<br>【食事提供】2食（朝・夕食）<br>【内容・条件】<br>丸太町駅最寄りの日本語学校に通学します。学校より60分圏内の、他にゲストのいらっしゃらないご家庭を希望しています。イタリアでは鍼療法士として仕事をされていて、日本語や日本文化はもちろん日本式の針治療についても勉強をしたいそうです。<br>[/su_spoiler]</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --><div class="vk_post_btnOuter has-text-align-right"><a href="/anken-request/" target="_blank" rel="noreferrer noopener">受け入れ希望・相談はこちら</a></div></div></div>
<!-- /wp:vk-blocks/card-item -->

<!-- wp:vk-blocks/card-item {"layout":"card-noborder","display_title":false,"display_excerpt":false,"display_image":false,"btn_text":"受け入れ希望・相談はこちら","url":"/anken-request/"} -->
<div class="wp-block-vk-blocks-card-item vk_post card card-noborder card-post vk_card_item vk_post-col-xs-12 vk_post-col-sm-6 vk_post-col-md-4 vk_post-col-lg-4 vk_post-col-xl-4 vk_post-col-xxl-4
vk_post-btn-display"><div class="vk_post_body card-body"><!-- wp:vk-blocks/border-box {"className":"is-style-vk_borderBox-style-solid-kado-tit-banner"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-color-red vk_borderBox-background-transparent is-style-vk_borderBox-style-solid-kado-tit-banner"><div class="vk_borderBox_title_container"><i class=""></i><h4 class="vk_borderBox_title">募集ID：OSA-0004 個人</h4></div><div class="vk_borderBox_body"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><span style="background-color:#fcb900" class="tadv-background-color">『受け入れ決定』</span><br><span style="text-decoration: underline" class="underline">※こちらの案件は決定しましたが、お受け入れ可能なファミリーさまは是非お問い合わせください。</span><span style="background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);" data-color="#fffd6b" class="vk_highlighter"><span style="color:#ff6900" class="tadv-color"></span></span><br>【地域】京都<br>【期間】2021/01/21～2021/07/21<span style="color:#cf2e2e" class="tadv-color"><span data-color="#fcb900" style="background: linear-gradient(transparent 60%,rgba(252, 185, 0, 0.7) 0);" class="vk_highlighter"></span></span><br>【国籍・性別】スイス・男<br>【年齢】18<br>[su_spoiler title="続きを読む" class="anken_spoiler"]<br>【食事提供】2食（朝・夕食）<br>【内容・条件】<br>円町駅最寄りの日本語学校に通学します。学校より60分圏内の、他にゲストのいらっしゃらないご家庭を希望しています。アクティブでお話し好きの性格の学生です。<br>[/su_spoiler]</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --><div class="vk_post_btnOuter has-text-align-right"><a href="/anken-request/" target="_blank" rel="noreferrer noopener">受け入れ希望・相談はこちら</a></div></div></div>
<!-- /wp:vk-blocks/card-item --></div><style type="text/css">@media (max-width: 576px) {
		.vk_card_1b738bd1-c4f2-4631-abd1-276e625a0ba7 .vk_card_item .vk_post_imgOuter::before{
			padding-top:150px!important;
		}
	}
	@media (min-width: 577px) and (max-width: 768px) {
		.vk_card_1b738bd1-c4f2-4631-abd1-276e625a0ba7 .vk_card_item .vk_post_imgOuter::before{
			padding-top:150px!important;
		}
	}
	@media (min-width: 769px) {
		.vk_card_1b738bd1-c4f2-4631-abd1-276e625a0ba7 .vk_card_item .vk_post_imgOuter::before{
			padding-top:150px!important;
		}
	}</style>
<!-- /wp:vk-blocks/card -->

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

• この返信は3年、 8ヶ月前にDRILL LANCERが編集しました。

[hij.kumagai]

すみません、本文に付けてしまいましたが、
これで良かったでしょうか？
よろしくお願いします。

hij.kumagai

• この返信は3年、 8ヶ月前にhij.kumagaiが編集しました。

[hij.kumagai]

トピック作成者です。
本日バージョン 1.0.7に自動アップデートされましたが、現象は解決していませんでした。
追加情報です。
ブロックエディタ上で3カラムにしていましたが、2カラムと1カラムにした際の
スクショを添付します。1カラムのみ、強制改行崩れ（？）が発生しません。
解決の糸口になれば、、

VK Blocks Pro 自体には自動更新の機能はありません。
WordPressのプラグイン一覧の画面で自動更新を設定しているのだと思いますので停止してください。

本日もVK Blocks Proが自動更新されました。プラグイン一覧画面のスクショを添付します。基本的に自動更新はすべて無効にしているつもりですが、この画面ではVKBlocksProのみ自動更新の有効化/無効化ボタンが表示されていません。そのため、このプラグインだけがいつも自動更新されます。どこか別で設定できるものでしょうか？　　

改行崩れの件ですが、
どうも”VKカードが2カラム以上の時”に、基本の表示要素である画像、タイトル、抜粋、ボタンでは問題が起きず、そこに段落や枠線を入力するという異例な使い方で発生しているようですので、使い方を反省し、とりあえず　
VKグリッドカラム＋VK枠線ボックス＋VKボタン　
の組み合わせで、対応したいと思います。
これだとブロックエディタ上でも改行くずれは発生しないようです。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

この画面ではVKBlocksProのみ自動更新の有効化/無効化ボタンが表示されていません。そのため、このプラグインだけがいつも自動更新されます。どこか別で設定できるものでしょうか？

確認したところ確かに VK Blocks Pro は自動更新を一度有効化して最新版の状態だと無効化の表示が出ませんでした。
意図的に非表示にするような処理は入れていないのですが、最新版の配信先がVK Blocks Proは弊社サーバーなためか、WordPressのプラグイン自動更新有効化・無効化の処理が通常のプラグインと同様に動作していないようでした。失礼いたしました。

この件については改めて調査いたしますが、取り急ぎ、最新版でない状態の時には無効化の表示切り替えが表示される事を確認しましたので、
一旦マイページから1系の古いバージョンをダウンロード＆アップデートした上でプラグイン一覧画面を確認してみてください。

[hij.kumagai]

一旦マイページから1系の古いバージョンをダウンロード＆アップデートした上でプラグイン一覧画面を確認してみてください。

この方法で自動更新有効化・無効化のボタンが表示されました。
ありがとうございました。

これで一旦すべての問題が解決しましたので、「解決済み」とさせて頂きます。
お時間ありがとうございました。

[投稿者]

投稿