Merge pull request #2300 from vektor-inc/develop

[ Change version ] 1.90.0.0
vektor-inc · Nov 8, 2024 · bcc9d9d · bcc9d9d
2 parents 3646f46 + e3f9981
commit bcc9d9d
Show file tree

Hide file tree

Showing 17 changed files with 1,248 additions and 55 deletions.
diff --git a/inc/vk-blocks/class-vk-blocks-block-loader.php b/inc/vk-blocks/class-vk-blocks-block-loader.php
@@ -99,9 +99,19 @@ public function load_css_action() {
 	 * VK Blocks Add Styles
 	 */
 	public function add_styles() {
-		// 分割読み込みの場合は register されるファイルが false 指定で何も読み込まれなくなっている.
-		wp_enqueue_style( 'vk-blocks-build-css' );
+		// 共通のスタイル
 		wp_enqueue_style( 'vk-blocks-utils-common-css' );
+
+		// 分割読み込みが有効かどうかをチェック
+		if ( self::should_load_separate_assets() && ! is_admin() ) {
+			// 分割読み込みが有効な場合は個別のスタイルを読み込む
+			wp_enqueue_style( 'vk-blocks/core-table', VK_BLOCKS_DIR_URL . 'build/extensions/core/table/style.css', array(), VK_BLOCKS_VERSION );
+			wp_enqueue_style( 'vk-blocks/core-heading', VK_BLOCKS_DIR_URL . 'build/extensions/core/heading/style.css', array(), VK_BLOCKS_VERSION );
+			wp_enqueue_style( 'vk-blocks/core-image', VK_BLOCKS_DIR_URL . 'build/extensions/core/image/style.css', array(), VK_BLOCKS_VERSION );
+		} else {
+			// 分割読み込みが無効な場合はフロントエンド画面では結合スタイルを読み込まない
+			wp_enqueue_style( 'vk-blocks-build-css' );
+		}
 	}
 
 	/**

diff --git a/readme.txt b/readme.txt
@@ -106,10 +106,16 @@ e.g.
 
 == Changelog ==
 
+= 1.90.0 =
+[ Add function ][ Outer (Pro) ] Add book and pyramid in divider style.
+[ Bug fix ] The split loading option is now supported for core/heading, core/image, and core/table styles for block editor.
+[ Bug fix ][ Cover ] Fixed an issue where, after setting a link in the Cover block and adding two unstyled headings inside it, the content positioning would not apply upon returning to the editing screen (editing screen only).
+[ Bug fix ][ Slider ] Add alert message.
+
 = 1.89.0 =
 [ Add function ][ Outer (Pro) ] Added support for core text color settings.
-[ Add function ][ Accordion (Pro) ] Added the ability to toggle the Accordion block open and close in the editing screen.
-[ Bug Fix ][ Grid Column Card (Pro) ] Fixed slider overflow in Grid Column Card Item Body.
+[ Specification Change ][ Accordion (Pro) ] Added the ability to toggle the Accordion block open and close in the editing screen.
+[ Bug fix ][ Grid Column Card (Pro) ] Fixed slider overflow in Grid Column Card Item Body.
 [ Bug fix ][ core/roup ] Fixed an issue where unwanted classes were assigned when links were present in the group block.
 
 = 1.88.0 =

diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js
@@ -187,6 +187,97 @@ const componentDivider = (
 		);
 	};
 
+	// eslint-disable-next-line no-shadow
+	const bookSectionStyle = (level, color) => {
+		const absLevel = Math.abs(level);
+		let pathData;
+
+		if (level > 0) {
+			const controlPoint1X = 40;
+			const controlPoint1Y = 100 - level * 0.1;
+			const peakX = 50;
+			const peakY = 100 - level;
+			const controlPoint2X = 60;
+			const controlPoint2Y = 100 - level * 0.1;
+
+			pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`;
+		} else if (level === 0) {
+			const controlPoint1X = 40;
+			const controlPoint1Y = 100;
+			const peakX = 50;
+			const peakY = 100;
+			const controlPoint2X = 60;
+			const controlPoint2Y = 100;
+
+			pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`;
+		} else {
+			const controlPoint1X = 40;
+			const controlPoint1Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9;
+			const peakX = 50;
+			const peakY = 100;
+			const controlPoint2X = 60;
+			const controlPoint2Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9;
+			const startY = absLevel === 100 ? 0 : 100 - absLevel;
+
+			pathData = `M0,${startY} H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,${startY} H100 V100 H0 Z`;
+		}
+
+		return (
+			<path
+				d={pathData}
+				strokeWidth="0"
+				fill={isHexColor(color) ? color : 'currentColor'}
+				className={classnames({
+					[`has-text-color`]: color !== undefined,
+					[`has-${color}-color`]:
+						color !== undefined && !isHexColor(color),
+				})}
+			/>
+		);
+	};
+
+	// eslint-disable-next-line no-shadow
+	const pyramidSectionStyle = (level, color) => {
+		const absLevel = Math.abs(level);
+		let pathData;
+
+		if (level < 0) {
+			const firstPeakX = 25;
+			const firstPeakY = 100 - absLevel * 0.6;
+			const dipX = 40;
+			const dipY = 100 - absLevel * 0.2;
+			const secondPeakX = 75;
+			const secondPeakY = 100 - absLevel;
+			const rightEndY = 100 - absLevel * 0.5;
+
+			pathData = `M0,100 H0 L${firstPeakX},${firstPeakY} ${dipX},${dipY} ${secondPeakX},${secondPeakY} 100,${rightEndY} H100 V100 H0 Z`;
+		} else if (level === 0) {
+			pathData = `M0,100 H0 L0,100 35,100 65,100 85,100 100,100 H100 V100 H0 Z`;
+		} else {
+			const firstPeakX = 75;
+			const firstPeakY = 100 - level * 0.6;
+			const dipX = 60;
+			const dipY = 100 - level * 0.2;
+			const secondPeakX = 25;
+			const secondPeakY = 100 - level;
+			const leftEndY = 100 - level * 0.5;
+
+			pathData = `M0,${leftEndY} H0 L${secondPeakX},${secondPeakY} ${dipX},${dipY} ${firstPeakX},${firstPeakY} 100,100 H100 V100 H0 Z`;
+		}
+
+		return (
+			<path
+				d={pathData}
+				strokeWidth="0"
+				fill={isHexColor(color) ? color : 'currentColor'}
+				className={classnames({
+					[`has-text-color`]: color !== undefined,
+					[`has-${color}-color`]:
+						color !== undefined && !isHexColor(color),
+				})}
+			/>
+		);
+	};
 	//背景色をクリアした時は、白に変更
 	if (!color) {
 		color = '#fff';
@@ -212,6 +303,12 @@ const componentDivider = (
 		} else if (dividerType === 'serrated') {
 			sectionPadding = 10;
 			return serratedSectionStyle(lvl, color);
+		} else if (dividerType === 'book') {
+			sectionPadding = Math.abs(lvl);
+			return bookSectionStyle(lvl, color);
+		} else if (dividerType === 'pyramid') {
+			sectionPadding = Math.abs(lvl);
+			return pyramidSectionStyle(lvl, color);
 		}
 	};
 

diff --git a/src/blocks/_pro/outer/deprecated/hooks/index.js b/src/blocks/_pro/outer/deprecated/hooks/index.js
@@ -7,6 +7,7 @@ import OuterHook0_0_1 from './0.0.1'
 // saveの数分必要
 export default [
 	// 後方互換
+	OuterHook1_60_0, // 1.89.0
 	OuterHook1_60_0, // 1.76.0
 	OuterHook1_60_0, // 1.71.0
 	OuterHook1_60_0, // 1.64.0

diff --git a/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js
@@ -0,0 +1,103 @@
+const GenerateBgImage = (props) => {
+	const { attributes, prefix } = props;
+	const { bgImageMobile, bgImageTablet, bgImage, bgSize, blockId } =
+		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}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//tablet only
+	if (!bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc only
+	if (!bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>{`.${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc -mobile
+	if (bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//pc -tablet
+	if (!bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//tablet - mobile
+	if (bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${mobileViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${tabletViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+        `}
+			</style>
+		);
+	}
+	//pc -tablet - mobile
+	if (bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+       }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+       }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
+       }
+        `}
+			</style>
+		);
+	}
+};
+export default GenerateBgImage;