Merge pull request #1906 from vektor-inc/fix/image-zoom-transform-none

【2人目確認待ち】フォトフレーム傾きを拡大した時の傾きをリセット

readme.txt

@@ -102,6 +102,7 @@ e.g.
 1. VK Blocks examples.
 
 == Changelog ==
+[ Bug Fix ][ Image ]Fixed a bug in the photo frame with activated zoom in the image block styled 'photoFrame-tilt'
 
 [ Add Function ][ Post List (Pro) ] Add paged lock setting
 

src/extensions/core/image/style.scss

@@ -18,7 +18,7 @@ $border_primary: 1px solid #e5e5e5;
         width:auto;
     }
     figcaption {
-       display: block;
+       display: block !important; //管理画面で負けるので important 追加
        margin: 8px 0 0;
     }
 }
@@ -58,8 +58,6 @@ $border_primary: 1px solid #e5e5e5;
 
 //左寄せ、右寄せが未指定の場合はfigureに.is-style-vk-image のクラス名が付く
 //figure.wp-block-imageの「.wp-block-image」をつけないと、角丸2のスタイルがつかないので追加
-
-
 figure.wp-block-image{
     // width: fit-content;
     &.is-style-vk-image {
@@ -123,7 +121,8 @@ figure.wp-block-image{
     }
 }
 
-//左寄せ、右寄せを指定した場合はdivのほうに.is-style-vk-image のクラス名が付くので、以下を追加する必要がある
+//theme.json が有効時、左寄せ・右寄せを指定した場合はdivのほうに.is-style-vk-image のクラス名が付くので、以下を追加する必要がある。
+//このdivのラッパーはtheme.json が無効の場合はdivラッパーが削除される。
 .wp-block-image{
     &.is-style-vk-image {
         &-rounded figure{
@@ -204,3 +203,34 @@ figure.wp-block-image{
         }
     }
 }
+
+//「フォトフレーム傾き左」「フォトフレーム傾き右」で「クリックで拡大」をONにした時、拡大された画像の一部が欠けるので、拡大された時にフォトフレームの傾きをリセット
+.wp-lightbox-overlay.zoom.active {
+    figure.wp-block-image{
+        &.is-style-vk-image {
+            &-photoFrame-tilt-right{
+                transform: none;
+            }
+
+            &-photoFrame-tilt-left{
+                transform: none;
+            }
+        }
+    }
+    // theme.json が有効時、左寄せ・右寄せを指定した場合はdivでラッパーされるので追加
+    .wp-block-image{ 
+        &.is-style-vk-image {
+            &-photoFrame-tilt-right, &-photoFrame-tilt-right figure{
+                &.alignleft, &.alignright, &.aligncenter{
+                    transform: none;
+                }
+            }
+
+            &-photoFrame-tilt-left, &-photoFrame-tilt-left figure{
+                &.alignleft, &.alignright, &.aligncenter{
+                    transform: none;
+                }
+            }
+        }
+    }
+}