Merge pull request #1017 from vektor-inc/develop

[ Change version ] 1.24.5

inc/vk-blocks/languages/vk-blocks.pot

@@ -2,14 +2,14 @@
 # This file is distributed under the same license as the VK Blocks Pro plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: VK Blocks Pro 1.24.3\n"
+"Project-Id-Version: VK Blocks Pro 1.24.5\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2022-02-07T16:11:44+00:00\n"
+"POT-Creation-Date: 2022-02-09T19:08:37+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0-alpha-3f4c34b\n"
 "X-Domain: vk-blocks\n"

readme.txt

@@ -4,7 +4,7 @@ Donate link:
 Tags: Gutenberg,FAQ,alert
 Requires at least: 5.8
 Tested up to: 5.9.0
-Stable tag: 1.24.4
+Stable tag: 1.24.5
 Requires PHP: 7.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -63,6 +63,10 @@ e.g.
 
 == Changelog ==
 
+= 1.24.5 =
+[ fix ][ Button ] Fix button alignment
+[ 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);

src/blocks/button/style.scss

@@ -61,7 +61,10 @@ $vk-color-dark:#343a40;
 .vk_button,
 .editor-styles-wrapper .vk_button {
 	box-sizing: border-box;
-	margin: 0 auto 5px; /* 他テーマで0だと左寄せになる場合があるのでautoに変更 */
+	 /* 他テーマで0だと左寄せになる場合があるのでautoに変更 */
+	 /* → いやいや、vk_button が100% div じゃない時にそれでは右寄せなど効かなくなるので margin 左右は指定ナシに戻し */
+	margin-top:0;
+	margin-bottom:5px;
 	text-align: center; /* テキストのみの時のセンター揃え */
 	&-color-custom {
 		a:hover {