カードブロック ブレイクポイント修正

readme.txt

@@ -63,6 +63,8 @@ e.g.
 
 == Changelog ==
 
+[ fix ][ Card(Pro) ] fix unify breakpoints.
+
 = 1.24.4 =
 [ Specification Change ][ Heading Design ] Strengthen selector on editor screen 
 

src/blocks/_pro/card/deprecated/hooks/1.23.0/index.js

@@ -0,0 +1,45 @@
+export const prefix = 'vk_card_';
+const generateInlineCss = (attributes) => {
+	let { clientId, mobile, tablet, pc, unit } = attributes;
+
+	//For recovering block.
+	if (undefined === unit) {
+		unit = 'px';
+	}
+	if (undefined === mobile) {
+		mobile = 150;
+	}
+	if (undefined === tablet) {
+		tablet = 150;
+	}
+	if (undefined === pc) {
+		pc = 150;
+	}
+
+	const cardImgSelector = `.${prefix}${clientId} .vk_card_item .vk_post_imgOuter::before`;
+	return `@media (max-width: 576px) {
+		${cardImgSelector}{
+			padding-top:${mobile}${unit}!important;
+		}
+	}
+	@media (min-width: 577px) and (max-width: 768px) {
+		${cardImgSelector}{
+			padding-top:${tablet}${unit}!important;
+		}
+	}
+	@media (min-width: 769px) {
+		${cardImgSelector}{
+			padding-top:${pc}${unit}!important;
+		}
+	}`;
+};
+
+export default function CardHook( {el,attributes}) {
+	const cssTag = generateInlineCss(attributes);
+	return (
+		<>
+			{el}
+			<style type="text/css">{cssTag}</style>
+		</>
+	);
+}

src/blocks/_pro/card/deprecated/hooks/index.js

@@ -1,7 +1,13 @@
+import CardHook1_23_0 from './1.23.0'
 import CardHook1_0_4 from './1.0.4'
 import CardHook0_0_1 from './0.0.1'
 
+// saveの数分必要
 export default [
+	CardHook1_23_0,
+	CardHook1_0_4,
+	CardHook1_0_4,
+	CardHook1_0_4,
 	CardHook1_0_4,
 	// Fix: https://github.com/vektor-inc/vk-blocks-pro/issues/376
 	// 存在不明なバージョンの後方互換

src/blocks/_pro/card/deprecated/save/1.23.0/save.js

@@ -0,0 +1,14 @@
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save({ attributes }) {
+	const { clientId } = attributes;
+	const blockProps = useBlockProps.save({
+		className: `vk_posts vk_card_${clientId}`,
+	});
+
+	return (
+		<div {...blockProps}>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

src/blocks/_pro/card/deprecated/save/index.js

@@ -3,6 +3,7 @@ import save0374 from './0.37.4/save';
 import save0400 from './0.40.0/save';
 import save0601 from './0.60.1/save';
 import save1_0_4 from './1.0.4/save';
+import save1_23_0 from './1.23.0/save';
 
 const blockAttributes = {
 	postId: {
@@ -139,6 +140,10 @@ const blockAttributes3 = {
 }
 
 const deprecated = [
+	{
+		attributes: blockAttributes3,
+		save: save1_23_0
+	},
 	{
 		attributes:blockAttributes3,
 		save: save1_0_4

src/blocks/_pro/card/index.js

@@ -86,83 +86,76 @@ const generateInlineCss = (attributes) => {
 	}
 
 	const cardImgSelector = `.${prefix}${clientId} .vk_card_item .vk_post_imgOuter::before`;
-	return `@media (max-width: 576px) {
+	return `@media (max-width: 575.98px) {
 		${cardImgSelector}{
 			padding-top:${mobile}${unit}!important;
 		}
 	}
-	@media (min-width: 577px) and (max-width: 768px) {
+	@media (min-width: 576px) and (max-width: 991.98px) {
 		${cardImgSelector}{
 			padding-top:${tablet}${unit}!important;
 		}
 	}
-	@media (min-width: 769px) {
+	@media (min-width: 992px) {
 		${cardImgSelector}{
 			padding-top:${pc}${unit}!important;
 		}
 	}`;
 };
 
-addFilter(
-	'editor.BlockEdit',
-	'vk-blocks/card-addInlineEditorsCss',
-	createHigherOrderComponent((BlockEdit) => {
-		return (props) => {
-			const { attributes, setAttributes, clientId } = props;
+const VKCardInlineEditorCss = createHigherOrderComponent((BlockEdit) => {
+	return (props) => {
+		const { attributes, setAttributes, clientId } = props;
 
-			if ('vk-blocks/card' === props.name) {
-				useEffect(() => {
-					setAttributes({ clientId });
-				}, []);
+		if ('vk-blocks/card' === props.name) {
+			useEffect(() => {
+				setAttributes({ clientId });
+			}, []);
 
-				const cssTag = generateInlineCss(attributes);
+			const cssTag = generateInlineCss(attributes);
 
-				return (
-					<>
-						<BlockEdit {...props} />
-						<style type="text/css">{cssTag}</style>
-					</>
-				);
-			}
-			return <BlockEdit {...props} />;
-		};
-	}, 'addInlineEditorsCss')
-);
-
-addFilter(
-	'blocks.getSaveElement',
-	'vk-blocks/card-addInlineFrontCss',
-	(el, type, attributes) => {
-		if ('vk-blocks/card' === type.name) {
-			//現在実行されている deprecated内の save関数のindexを取得
-			const deprecatedFuncIndex = deprecated.findIndex(
-				(item) => item.save === type.save
+			return (
+				<>
+					<BlockEdit {...props} />
+					<style type="text/css">{cssTag}</style>
+				</>
 			);
+		}
+		return <BlockEdit {...props} />;
+	};
+}, 'VKCardInlineEditorCss');
+addFilter('editor.BlockEdit', 'vk-blocks/card', VKCardInlineEditorCss);
 
-			// 最新版
-			if (-1 === deprecatedFuncIndex) {
-				// NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、
-				// カスタムクラスを追加する処理が失敗する
-				const cssTag = generateInlineCss(attributes);
-				return (
-					<>
-						{el}
-						<style type="text/css">{cssTag}</style>
-					</>
-				);
+const VKCardInlineCss = (el, type, attributes) => {
+	if ('vk-blocks/card' === type.name) {
+		//現在実行されている deprecated内の save関数のindexを取得
+		const deprecatedFuncIndex = deprecated.findIndex(
+			(item) => item.save === type.save
+		);
+
+		// 最新版
+		if (-1 === deprecatedFuncIndex) {
+			// NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、
+			// カスタムクラスを追加する処理が失敗する
+			const cssTag = generateInlineCss(attributes);
+			return (
+				<>
+					{el}
+					<style type="text/css">{cssTag}</style>
+				</>
+			);
 
-				//後方互換
-			}
-			let DeprecatedHook;
-			// Deprecated Hooks が Deprecated Save関数より少ない場合にエラーが出ないように。
-			if (deprecatedHooks.length > deprecatedFuncIndex) {
-				DeprecatedHook = deprecatedHooks[deprecatedFuncIndex];
-			} else {
-				DeprecatedHook = deprecatedHooks[deprecatedHooks.length - 1];
-			}
-			return <DeprecatedHook el={el} attributes={attributes} />;
+			//後方互換
 		}
-		return el;
-	},
-	11
-);
+		let DeprecatedHook;
+		// Deprecated Hooks が Deprecated Save関数より少ない場合にエラーが出ないように。
+		if (deprecatedHooks.length > deprecatedFuncIndex) {
+			DeprecatedHook = deprecatedHooks[deprecatedFuncIndex];
+		} else {
+			DeprecatedHook = deprecatedHooks[deprecatedHooks.length - 1];
+		}
+		return <DeprecatedHook el={el} attributes={attributes} />;
+	}
+	return el;
+};
+addFilter('blocks.getSaveElement', 'vk-blocks/card', VKCardInlineCss, 11);