itmar-block-packages 1.3.9 → 1.3.10

package/README.md

@@ -14,6 +14,10 @@ import {関数名又はコンポーネント名} from "itmar-block-packages"
 npm i @wordpress/scripts@^27.6.0 --save-dev
 
 ## 更新履歴
+= 1.3.10 =  
+- useDuplicateBlockRemoveの不具合を修正。
+- ブロックの幅、高さを設定するためのコンポーネントとしてBlockWidth、BlockHeightを追加
+
 = 1.3.9 =  
 - カスタムフックとしてuseDuplicateBlockRemoveを追加。このフックはインナーブロックが挿入されたとき、指定されたブロック名が存在れば、挿入されたブロックを削除する。
 
@@ -652,6 +656,75 @@ WordPressのブロックエディタのサイドバーにブロックの配置
 
 <img src="./img/blockplace.png" alt="BlockPlaceのスクリーンショット" width="100" height="300">
 
+### BlockWidth
+ブロックコンポーネントの幅を設定する
+#### 引数
+- `attributes` object  
+ブロックの属性オブジェクト
+- `isMobile` boolean  
+スクリーン幅が767px以下かどうかのフラグ
+- `isSubmenu` boolean  
+trueの場合はmax-widthを合わせて設定する
+- `onWidthChange` function
+widthの種別を設定するためのコールバック関数。返ってくる引数はfit,full,wideSize,contentSize,free
+- `onFreeWidthChange` function
+widthの種別がfreeのとき幅を設定するためのコールバック関数。返ってくる引数は数字
+
+```
+<BlockWidth
+	attributes={attributes}
+	isMobile={isMobile}
+	isSubmenu={isFront}
+	onWidthChange={(value) => {
+		setAttributes(
+			!isMobile
+				? { default_val: { ...default_val, width_val: value } }
+				: { mobile_val: { ...mobile_val, width_val: value } },
+		);
+	}}
+	onFreeWidthChange={(value) => {
+		setAttributes(
+			!isMobile
+				? { default_val: { ...default_val, free_width: value } }
+				: { mobile_val: { ...mobile_val, free_width: value } },
+		);
+	}}
+/>
+```
+
+### BlockHeight
+ブロックコンポーネントの高さを設定する
+#### 引数
+- `attributes` object  
+ブロックの属性オブジェクト
+- `isMobile` boolean  
+スクリーン幅が767px以下かどうかのフラグ
+- `onHeightChange` function
+heightの種別を設定するためのコールバック関数。返ってくる引数はfit,full,free
+- `onFreeHeightChange` function
+heightの種別がfreeのとき幅を設定するためのコールバック関数。返ってくる引数は数字
+
+```
+<BlockHeight
+	attributes={attributes}
+	isMobile={isMobile}
+	onHeightChange={(value) => {
+		setAttributes(
+			!isMobile
+				? { default_val: { ...default_val, height_val: value } }
+				: { mobile_val: { ...mobile_val, height_val: value } },
+		);
+	}}
+	onFreeHeightChange={(value) => {
+		setAttributes(
+			!isMobile
+				? { default_val: { ...default_val, free_height: value } }
+				: { mobile_val: { ...mobile_val, free_height: value } },
+		);
+	}}
+/>
+```
+
 ## 色コードを変換する関数
 ### hslToRgb16
 Hslオブジェクトの値を与えると#000000型のRGB表記に変換するためのユーティリティ関数です。

package/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '6e3f73ce618d3c7c0f86');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '606c1f3cb2a77ddeacc5');