Merge pull request #2188 from vektor-inc/fix/list-color-legacy

[ core/list ] 古いリストカラー設定に対応しました
vektor-inc · Aug 26, 2024 · 00702cb · 00702cb
2 parents ef7666c + fc9a476
commit 00702cb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/inc/vk-blocks/extensions/core/list.php b/inc/vk-blocks/extensions/core/list.php
@@ -49,7 +49,7 @@ function vk_blocks_render_core_list( $block_content, $block ) {
 				'selector'     => ".is-style-vk-numbered-square-mark.{$unique_classname} li::before",
 				'declarations' => array(
 					'color'            => '#fff',
-					'background-color' => vk_blocks_get_color_code( $block['attrs']['color'] ),
+					'background-color' => vk_blocks_get_color_code( $block['attrs']['color'] ) . ' !important',
 				),
 			),
 		);
@@ -59,7 +59,7 @@ function vk_blocks_render_core_list( $block_content, $block ) {
 				'selector'     => ".is-style-vk-numbered-circle-mark.{$unique_classname} li::before",
 				'declarations' => array(
 					'color'            => '#fff',
-					'background-color' => vk_blocks_get_color_code( $block['attrs']['color'] ),
+					'background-color' => vk_blocks_get_color_code( $block['attrs']['color'] ) . ' !important',
 				),
 			),
 		);
@@ -68,7 +68,7 @@ function vk_blocks_render_core_list( $block_content, $block ) {
 			array(
 				'selector'     => ".{$unique_classname} li::marker,.{$unique_classname} li::before",
 				'declarations' => array(
-					'color' => vk_blocks_get_color_code( $block['attrs']['color'] ),
+					'color' => vk_blocks_get_color_code( $block['attrs']['color'] ) . ' !important',
 				),
 			),
 		);

diff --git a/readme.txt b/readme.txt
@@ -107,6 +107,7 @@ e.g.
 == Changelog ==
 
 [ Add Setting ][ Alert ] Add icon setting and inner block.
+[ Bug fix ] [ Core List ] Add support for handling list color in old settings.
 [ Bug fix ][ Tab Item ] When duplicating an active tab-item block, no more than one tab-item block becomes active.
 
 = 1.82.0 =

diff --git a/src/utils/common.scss b/src/utils/common.scss
@@ -210,6 +210,10 @@ ol {
 		&-vk-numbered-circle-mark,
 		&-vk-numbered-square-mark {
 			padding-inline-start: 2em;
+			&:not(.has-text-color), 
+			&:not(.has-link-color) {
+				color: initial;
+			}
 			li {
 				list-style: none;
 				position: relative;
@@ -375,7 +379,8 @@ ol {
 	}
 
 	@each $colorClass, $color in $colorPalette {
-		&.#{$colorClass} {
+		&.vk-has-#{$colorClass}-color,
+		&.has-vk-#{$colorClass}-color {
 			li::marker {
 				color: $color;
 			}
@@ -384,13 +389,17 @@ ol {
 			}
 		}
 
-		&.is-style-vk-numbered-circle-mark.#{$colorClass}-color,
-		&.is-style-vk-numbered-square-mark.#{$colorClass}-color {
-			li::before {
-				color: #ffffff;
-				background-color: $color;
+		&.is-style-vk-numbered-circle-mark,
+		&.is-style-vk-numbered-square-mark {
+			&.vk-has-#{$colorClass}-color,
+			&.has-vk-#{$colorClass}-color {
+				li::before {
+					color: #fff;
+					background-color: $color;
+				}
 			}
 		}
+
 	}
 }
 //ul,ol
@@ -609,8 +618,8 @@ ol {
 /*-------------------------------------------*/
 $xxl-min: 1400px;
 .col {
-    // Bootstrap4 では xxl サイズがないので独自に追加
-    @media (min-width: $xxl-min) {
+	// Bootstrap4 では xxl サイズがないので独自に追加
+	@media (min-width: $xxl-min) {
 		&-xxl-2 {
 			flex: 0 0 16.66667%;
 			max-width: 16.66667%;
@@ -639,7 +648,7 @@ $xxl-min: 1400px;
 /*-------------------------------------------*/
 .wp-block-columns {
 	&.wp-block-columns.is-vk-row-reverse {
-    	flex-direction: row-reverse;
+		flex-direction: row-reverse;
 	}
 }