【確認待ち】[ グリッドカラムカード ] カードブロック内の上下要素の指定が編集画面で効かない（下揃えになってしまう）不具合を修正 #1915

kurudrive · 2024-02-08T17:35:52Z

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

Before

どういう変更をしたか？

編集画面のCSS調整

After

実装者の確認事項

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

複数の意図の変更（機能の不具合修正 + 別の機能追加など）を含んでいないか？
Files changed (変更ファイル)の内容は目視で確認したか？
readme.txt に変更内容は書いたか？
本当にちゃんと確認をしたか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。

書けそうなテストは書いたか？
→ 見た目の問題につき省略

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

グリッドカラムカードbodyブロックの中の要素の表記位置を変更して編集画面でも効くか確認

サンプルコード

<!-- wp:vk-blocks/gridcolcard {"colWidthMin":"240px","colWidthMinTablet":"240px","colWidthMinPC":"240px","gapRow":"","backgroundColor":"#ffffff","containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide","footerDisplay":"hide","blockId":"2ed54674-7ad3-4695-a260-9f8e0d4af409"} -->
<div class="wp-block-vk-blocks-gridcolcard vk_gridcolcard vk_gridcolcard-2ed54674-7ad3-4695-a260-9f8e0d4af409"><!-- wp:vk-blocks/gridcolcard-item {"backgroundColor":"#ffffff","containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide","footerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item vk_gridcolcard_item has-background" style="background-color:#ffffff"><div class="vk_gridcolcard_item_container" style="padding-top:1.25rem;padding-bottom:1.25rem;padding-left:1.25rem;padding-right:1.25rem"><!-- wp:vk-blocks/gridcolcard-item-header {"containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-header vk_gridcolcard_item_header vk_gridcolcard_item_header-hidden" style="aspect-ratio:1.618/1;top:-1.25rem;margin-left:-1.25rem;margin-right:-1.25rem"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:vk-blocks/gridcolcard-item-header -->

<!-- wp:vk-blocks/gridcolcard-item-body {"verticalAlignment":"bottom"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-body vk_gridcolcard_item_body vk_gridcolcard_item_body-valign-bottom"><!-- wp:group {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"vk-color-primary","textColor":"white","className":"is-style-vk-group-solid-roundcorner vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<div class="wp-block-group is-style-vk-group-solid-roundcorner vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom has-white-color has-vk-color-primary-background-color has-text-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"className":"vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom" style="line-height:1"><strong>STEP 01</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:vk-blocks/spacer {"spaceType":"height","spaceSize":"xs"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-xs--height"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","iconSize":50,"iconMargin":0,"iconAlign":"center","iconType":"2","iconColor":"vk-color-primary","className":"vk_block-margin-0\u002d\u002dmargin-bottom vk_block-margin-0\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-icon vk_icon vk_block-margin-0--margin-bottom vk_block-margin-0--margin-top"><div class="vk_icon_frame text-center is-style-noline"><div class="vk_icon_border has-text-color has-vk-color-primary-color" style="width:calc(50px + 0px);height:calc(50px + 0px)"><i style="font-size:50px" class="far vk_icon_font fa-envelope"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:vk-blocks/spacer {"spaceType":"height","pc":6,"tablet":6,"mobile":6,"spaceSize":"custom"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:6px"></div><div class="vk_spacer-display-tablet" style="height:6px"></div><div class="vk_spacer-display-mobile" style="height:6px"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem","fontStyle":"normal","fontWeight":"700"}},"className":"is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-xs\u002d\u002dmargin-bottom"} -->
<h3 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-top vk_block-margin-xs--margin-bottom" style="font-size:1.25rem;font-style:normal;font-weight:700">下揃え</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="vk_block-margin-0--margin-bottom"> <span style="font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;">まずはお問い合わせフォームまたは電話にてご連絡ください。</span> </p>
<!-- /wp:paragraph --></div>
<!-- /wp:vk-blocks/gridcolcard-item-body -->

<!-- wp:vk-blocks/gridcolcard-item-footer {"footerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-footer vk_gridcolcard_item_footer vk_gridcolcard_item_footer-hidden"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} /--></div>
<!-- /wp:buttons --></div>
<!-- /wp:vk-blocks/gridcolcard-item-footer --></div></div>
<!-- /wp:vk-blocks/gridcolcard-item -->

<!-- wp:vk-blocks/gridcolcard-item {"backgroundColor":"#ffffff","containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide","footerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item vk_gridcolcard_item has-background" style="background-color:#ffffff"><div class="vk_gridcolcard_item_container" style="padding-top:1.25rem;padding-bottom:1.25rem;padding-left:1.25rem;padding-right:1.25rem"><!-- wp:vk-blocks/gridcolcard-item-header {"containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-header vk_gridcolcard_item_header vk_gridcolcard_item_header-hidden" style="aspect-ratio:1.618/1;top:-1.25rem;margin-left:-1.25rem;margin-right:-1.25rem"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:vk-blocks/gridcolcard-item-header -->

<!-- wp:vk-blocks/gridcolcard-item-body {"verticalAlignment":"center"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-body vk_gridcolcard_item_body vk_gridcolcard_item_body-valign-center"><!-- wp:group {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"vk-color-primary","textColor":"white","className":"is-style-vk-group-solid-roundcorner vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<div class="wp-block-group is-style-vk-group-solid-roundcorner vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom has-white-color has-vk-color-primary-background-color has-text-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"className":"vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom" style="line-height:1"><strong>STEP 01</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:vk-blocks/spacer {"spaceType":"height","spaceSize":"xs"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-xs--height"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","iconSize":50,"iconMargin":0,"iconAlign":"center","iconType":"2","iconColor":"vk-color-primary","className":"vk_block-margin-0\u002d\u002dmargin-bottom vk_block-margin-0\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-icon vk_icon vk_block-margin-0--margin-bottom vk_block-margin-0--margin-top"><div class="vk_icon_frame text-center is-style-noline"><div class="vk_icon_border has-text-color has-vk-color-primary-color" style="width:calc(50px + 0px);height:calc(50px + 0px)"><i style="font-size:50px" class="far vk_icon_font fa-envelope"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:vk-blocks/spacer {"spaceType":"height","pc":6,"tablet":6,"mobile":6,"spaceSize":"custom"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:6px"></div><div class="vk_spacer-display-tablet" style="height:6px"></div><div class="vk_spacer-display-mobile" style="height:6px"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem","fontStyle":"normal","fontWeight":"700"}},"className":"is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-xs\u002d\u002dmargin-bottom"} -->
<h3 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-top vk_block-margin-xs--margin-bottom" style="font-size:1.25rem;font-style:normal;font-weight:700">上下中央</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="vk_block-margin-0--margin-bottom"> <span style="font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;">まずはお問い合わせフォームまたは電話にてご連絡ください。</span> </p>
<!-- /wp:paragraph --></div>
<!-- /wp:vk-blocks/gridcolcard-item-body -->

<!-- wp:vk-blocks/gridcolcard-item-footer {"footerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-footer vk_gridcolcard_item_footer vk_gridcolcard_item_footer-hidden"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} /--></div>
<!-- /wp:buttons --></div>
<!-- /wp:vk-blocks/gridcolcard-item-footer --></div></div>
<!-- /wp:vk-blocks/gridcolcard-item -->

<!-- wp:vk-blocks/gridcolcard-item {"backgroundColor":"#ffffff","containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide","footerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item vk_gridcolcard_item has-background" style="background-color:#ffffff"><div class="vk_gridcolcard_item_container" style="padding-top:1.25rem;padding-bottom:1.25rem;padding-left:1.25rem;padding-right:1.25rem"><!-- wp:vk-blocks/gridcolcard-item-header {"containerSpace":{"top":"1.25rem","left":"1.25rem","right":"1.25rem","bottom":"1.25rem"},"headerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-header vk_gridcolcard_item_header vk_gridcolcard_item_header-hidden" style="aspect-ratio:1.618/1;top:-1.25rem;margin-left:-1.25rem;margin-right:-1.25rem"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:vk-blocks/gridcolcard-item-header -->

<!-- wp:vk-blocks/gridcolcard-item-body {"verticalAlignment":"center"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-body vk_gridcolcard_item_body vk_gridcolcard_item_body-valign-center"><!-- wp:group {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"vk-color-primary","textColor":"white","className":"is-style-vk-group-solid-roundcorner vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<div class="wp-block-group is-style-vk-group-solid-roundcorner vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom has-white-color has-vk-color-primary-background-color has-text-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"className":"vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="has-text-align-center vk_block-margin-0--margin-top vk_block-margin-0--margin-bottom" style="line-height:1"><strong>STEP 01</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:vk-blocks/spacer {"spaceType":"height","spaceSize":"xs"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-height"><div class="vk_block-margin-xs--height"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","iconSize":50,"iconMargin":0,"iconAlign":"center","iconType":"2","iconColor":"vk-color-primary","className":"vk_block-margin-0\u002d\u002dmargin-bottom vk_block-margin-0\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-icon vk_icon vk_block-margin-0--margin-bottom vk_block-margin-0--margin-top"><div class="vk_icon_frame text-center is-style-noline"><div class="vk_icon_border has-text-color has-vk-color-primary-color" style="width:calc(50px + 0px);height:calc(50px + 0px)"><i style="font-size:50px" class="far vk_icon_font fa-envelope"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:vk-blocks/spacer {"spaceType":"height","pc":6,"tablet":6,"mobile":6,"spaceSize":"custom"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="height:6px"></div><div class="vk_spacer-display-tablet" style="height:6px"></div><div class="vk_spacer-display-mobile" style="height:6px"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem","fontStyle":"normal","fontWeight":"700"}},"className":"is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-xs\u002d\u002dmargin-bottom"} -->
<h3 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-top vk_block-margin-xs--margin-bottom" style="font-size:1.25rem;font-style:normal;font-weight:700">未指定（上揃え）</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="vk_block-margin-0--margin-bottom"> <span style="font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;"><span style="font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;">まずはお問い合わせフォームまたは電話にてご連絡ください。</span>まずはお問い合わせフォームまたは電話にてご連絡ください。まずはお問い合わせフォームまたは電話にてご連絡ください。</span> </p>
<!-- /wp:paragraph --></div>
<!-- /wp:vk-blocks/gridcolcard-item-body -->

<!-- wp:vk-blocks/gridcolcard-item-footer {"footerDisplay":"hide"} -->
<div class="wp-block-vk-blocks-gridcolcard-item-footer vk_gridcolcard_item_footer vk_gridcolcard_item_footer-hidden"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} /--></div>
<!-- /wp:buttons --></div>
<!-- /wp:vk-blocks/gridcolcard-item-footer --></div></div>
<!-- /wp:vk-blocks/gridcolcard-item --><style>
				.vk_gridcolcard-2ed54674-7ad3-4695-a260-9f8e0d4af409 {
					grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
					gap:30px;
				}
				@media (min-width: 576px) {
					.vk_gridcolcard-2ed54674-7ad3-4695-a260-9f8e0d4af409 {
						grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
					}
				}
				@media (min-width: 992px) {
					.vk_gridcolcard-2ed54674-7ad3-4695-a260-9f8e0d4af409 {
						grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
					}
				}
				</style></div>
<!-- /wp:vk-blocks/gridcolcard -->

確認URL

ローカルでよろしくお願いいたします。

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

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

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

レビュワーがどういう手順で何を確認して欲しいかを記載してください。

実装者に同じ

備考 : 内容的に一人確認でよいかと

レビュワー向け

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

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

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

… settings for card blocks did not apply in the editing screen.

sysbird · 2024-02-26T08:52:30Z

@kurudrive
develop ブランチでまず状況を確認しました

カラムヘッダーメディアエリア [削除] のとき再現しません(→正常)
カラムヘッダーメディアエリア [表示][非表示]のとき再現しますが、私の環境では上揃いに見えます

当ブランチで確認したところ、上記と同じです

sysbird · 2024-02-26T08:56:10Z

@kurudrive さんのスクリーンショットは

カラムヘッダーメディアエリア [非表示]か[削除]
かな？と思います

kurudrive · 2024-02-28T05:29:52Z

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

カラムヘッダーメディアエリア [削除] のとき再現しません(→正常)

削除のときは develop でも再現しませんでした。

カラムヘッダーメディアエリア [表示][非表示]のとき再現しますが、私の環境では上揃いに見えます

下記の手順で再現させています。

このプルリクで元の症状が解消されていたらマージよろしくお願いいたします。

本日リリース予定ですので優先確認よろしくお願いいたします (￣人￣)

[ Bug Fix ][ GridColCard (Pro) ] Fixed a bug where vertical alignment…

8ca674f

… settings for card blocks did not apply in the editing screen.

kurudrive requested review from sysbird, goutetsuguma, mtdkei and drill-lancer February 8, 2024 17:44

Merge branch 'develop' into fix/gridcol-editor-v-align

1f64842

kurudrive added the 優先度：超高 label Feb 28, 2024

kurudrive merged commit 6333d20 into develop Feb 28, 2024
14 checks passed

kurudrive deleted the fix/gridcol-editor-v-align branch February 28, 2024 06:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【確認待ち】[ グリッドカラムカード ] カードブロック内の上下要素の指定が編集画面で効かない（下揃えになってしまう）不具合を修正 #1915

【確認待ち】[ グリッドカラムカード ] カードブロック内の上下要素の指定が編集画面で効かない（下揃えになってしまう）不具合を修正 #1915

kurudrive commented Feb 8, 2024 •

edited

Loading

sysbird commented Feb 26, 2024

sysbird commented Feb 26, 2024

kurudrive commented Feb 28, 2024

【確認待ち】[ グリッドカラムカード ] カードブロック内の上下要素の指定が編集画面で効かない（下揃えになってしまう）不具合を修正 #1915

【確認待ち】[ グリッドカラムカード ] カードブロック内の上下要素の指定が編集画面で効かない（下揃えになってしまう）不具合を修正 #1915

Conversation

kurudrive commented Feb 8, 2024 • edited Loading

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

Before

どういう変更をしたか？

After

実装者の確認事項

プログラムの変更の場合

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

確認URL

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

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

備考 : 内容的に一人確認でよいかと

レビュワー向け

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

sysbird commented Feb 26, 2024

sysbird commented Feb 26, 2024

kurudrive commented Feb 28, 2024

kurudrive commented Feb 8, 2024 •

edited

Loading