【確認待ち】Outerブロックのカスタムカラーパレットに対応

readme.txt

@@ -63,10 +63,12 @@ e.g.
 
 == Changelog ==
 
+
+[ Bug fix ][ Outer(Pro) ] cope with custom color palette
+
 = 1.26.2 =
 [ Other ] Rerelease
 
-= 1.26.1 =
 [ Bugfix ][ Spacer ] fix spacer
 
 = 1.26.0 =

src/blocks/_pro/outer/GenerateBgImage.js

@@ -0,0 +1,102 @@
+const GenerateBgImage = (props) => {
+	const { attributes, clientId, prefix } = props;
+	const { bgImageMobile, bgImageTablet, bgImage, bgSize } = attributes;
+
+	const mobileViewport = 'max-width: 575.98px';
+	const tabletViewport = 'min-width: 576px';
+	const pcViewport = 'min-width: 992px';
+	const underPcViewport = 'max-width: 992.98px';
+
+	let backgroundStyle;
+	const backgroundPosition = 'background-position:center!important;';
+	if ('cover' === bgSize) {
+		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
+	} else if ('repeat' === bgSize) {
+		backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`;
+	} else {
+		backgroundStyle = ``;
+	}
+
+	//moible only
+	if (bgImageMobile && !bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//tablet only
+	if (!bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc only
+	if (!bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc -mobile
+	if (bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//pc -tablet
+	if (!bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//tablet - mobile
+	if (bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${mobileViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${tabletViewport}) {
+            .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+        `}
+			</style>
+		);
+	}
+	//pc -tablet - mobile
+	if (bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+       }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+       }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}
+       }
+        `}
+			</style>
+		);
+	}
+};
+export default GenerateBgImage;

src/blocks/_pro/outer/component-divider.js

@@ -1,16 +1,32 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+
 const componentDivider = (level, color, whichSide, dividerType) => {
 	let sectionPadding;
 	let sectionClass;
 	let lenderDivider;
 
+	const pathClassNames = classnames({
+		[`has-text-color`]: color !== undefined,
+		[`has-${color}-color`]: color !== undefined && !isHexColor(color),
+	});
+
 	// eslint-disable-next-line no-shadow
 	const tiltSectionStyle = (level, color) => {
 		if (level > 0) {
 			return (
 				<path
 					d={`m0,${100 - level} L100,100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		} else if (level < 0) {
@@ -21,7 +37,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 				<path
 					d={`m100,${100 - absLevel} L0,100 L100,100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		}
@@ -34,15 +51,17 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 				<path
 					d={`m0,${100 - level} q50,${level * 2},100,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		} else if (level < 0) {
 			return (
 				<path
 					d={`m0,100 q50,${level * 2},100,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		}
@@ -57,7 +76,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						100 - level / 2
 					} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		} else if (level < 0) {
@@ -67,7 +87,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						level / 2 + 100
 					} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		}
@@ -85,7 +106,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						50 - DivideAbs4
 					} l${DivideAbs4},-${absLevel} l${DivideAbs4},${absLevel} h${DivideAbs4} v100 h-100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		} else if (level < 0) {
@@ -97,7 +119,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						50 - DivideAbs4
 					} v${absLevel + 1} h-100 z`}
 					strokeWidth="0"
-					fill={color}
+					fill={isHexColor(color) ? color : 'currentColor'}
+					className={pathClassNames}
 				/>
 			);
 		}

src/blocks/_pro/outer/deprecated/1.26.0/component-divider.js

@@ -0,0 +1,164 @@
+const componentDivider = (level, color, whichSide, dividerType) => {
+	let sectionPadding;
+	let sectionClass;
+	let lenderDivider;
+
+	// eslint-disable-next-line no-shadow
+	const tiltSectionStyle = (level, color) => {
+		if (level > 0) {
+			return (
+				<path
+					d={`m0,${100 - level} L100,100 L0,100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		} else if (level < 0) {
+			//絶対値に変換
+			const absLevel = Math.abs(level);
+
+			return (
+				<path
+					d={`m100,${100 - absLevel} L0,100 L100,100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		}
+	};
+
+	// eslint-disable-next-line no-shadow
+	const curveSectionStyle = (level, color) => {
+		if (level > 0) {
+			return (
+				<path
+					d={`m0,${100 - level} q50,${level * 2},100,0 V100 L0,100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		} else if (level < 0) {
+			return (
+				<path
+					d={`m0,100 q50,${level * 2},100,0 V100 L0,100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		}
+	};
+
+	// eslint-disable-next-line no-shadow
+	const waveSectionStyle = (level, color) => {
+		if (level > 0) {
+			return (
+				<path
+					d={`m0,${100 - level / 2
+						} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		} else if (level < 0) {
+			return (
+				<path
+					d={`m0,${level / 2 + 100
+						} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		}
+	};
+
+	// eslint-disable-next-line no-shadow
+	const triangleSectionStyle = (level, color) => {
+		const absLevel = Math.abs(level);
+		const DivideAbs4 = absLevel / 4;
+
+		if (level > 0) {
+			return (
+				<path
+					d={`m0,100 h${50 - DivideAbs4
+						} l${DivideAbs4},-${absLevel} l${DivideAbs4},${absLevel} h${DivideAbs4} v100 h-100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		} else if (level < 0) {
+			return (
+				<path
+					d={`m0,${100 - absLevel} h${50 - DivideAbs4
+						} l${DivideAbs4},${absLevel} l${DivideAbs4},-${absLevel} h${50 - DivideAbs4
+						} v${absLevel + 1} h-100 z`}
+					strokeWidth="0"
+					fill={color}
+				/>
+			);
+		}
+	};
+
+	//背景色をクリアした時は、白に変更
+	if (!color) {
+		color = '#fff';
+	}
+
+	//Paddingの条件分岐を追加
+	if (dividerType === 'tilt') {
+		sectionPadding = Math.abs(level);
+		lenderDivider = tiltSectionStyle(level, color);
+	} else if (dividerType === 'curve') {
+		if (level > 0) {
+			sectionPadding = Math.abs(level);
+		} else if (level < 0) {
+			sectionPadding = Math.abs(level) * 2;
+		}
+		lenderDivider = curveSectionStyle(level, color);
+	} else if (dividerType === 'wave') {
+		sectionPadding = Math.abs(level);
+		lenderDivider = waveSectionStyle(level, color);
+	} else if (dividerType === 'triangle') {
+		sectionPadding = Math.abs(level);
+		lenderDivider = triangleSectionStyle(level, color);
+	}
+
+	//classにdividerTypeを追加
+	// eslint-disable-next-line prefer-const
+	sectionClass = dividerType;
+
+	//upper-paddingを追加
+	if (whichSide === 'upper') {
+		return (
+			<div
+				className={`vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-${sectionClass}`}
+				style={{ paddingBottom: sectionPadding + `px` }}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 100 100"
+					preserveAspectRatio="none"
+				>
+					{lenderDivider}
+				</svg>
+			</div>
+		);
+		//lower-paddingを追加
+	} else if (whichSide === 'lower') {
+		return (
+			<div
+				className={`vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-${sectionClass}`}
+				style={{ paddingTop: sectionPadding + `px` }}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 100 100"
+					preserveAspectRatio="none"
+				>
+					{lenderDivider}
+				</svg>
+			</div>
+		);
+	}
+};
+
+export { componentDivider };