itmar-block-packages 1.3.9 → 1.3.11

package/README.md

@@ -14,6 +14,14 @@ import {関数名又はコンポーネント名} from "itmar-block-packages"
 npm i @wordpress/scripts@^27.6.0 --save-dev
 
 ## 更新履歴
+= 1.3.11 =  
+- BlockPlace、BlockWidth、BlockHeightのfreeサイズにpx以外の単位を設定できるように修正
+- freeサイズにpx以外の単位を設定できるようにしたことから、max_width_prm、width_prm、height_prmがそれに対応できるように修正
+
+= 1.3.10 =  
+- useDuplicateBlockRemoveの不具合を修正。
+- ブロックの幅、高さを設定するためのコンポーネントとしてBlockWidth、BlockHeightを追加
+
 = 1.3.9 =  
 - カスタムフックとしてuseDuplicateBlockRemoveを追加。このフックはインナーブロックが挿入されたとき、指定されたブロック名が存在れば、挿入されたブロックを削除する。
 
@@ -158,12 +166,12 @@ top,right,bottom,leftをキーとしてもつオブジェクト
 #### 引数
 - `width` string  
 wideSize,contentSize,free,fullの文字列
-- `free_val` number  
+- `free_val` string  
 px値
 #### 戻り値
 - wideSizeのとき`width: 100%; max-width: var(--wp--style--global--wide-size);`  
 - contentSizeのとき`width: 100%; max-width: var(--wp--style--global--content-size);`  
-- freeのとき`width: 100%; max-width: ${free_val}px;`  
+- freeのとき`width: 100%; max-width: ${free_val};`  
 - fullのとき`width: 100%; max-width: 100%;`  
 - その他の文字列`width: fit-content;`  
   
@@ -173,12 +181,12 @@ widthのCSSを返します。
 #### 引数
 - `width` string  
 wideSize,contentSize,freeの文字列
-- `free_val` number  
+- `free_val` string  
 px値
 #### 戻り値
 - wideSizeのとき`width: var(--wp--style--global--wide-size);`
 - contentSizeのとき`width: var(--wp--style--global--content-size);`
-- freeのとき`width: ${free_val}px;`
+- freeのとき`width: ${free_val};`
 - その他の文字列`width: fit-content;`
   
 
@@ -187,11 +195,11 @@ heightのCSSを返します。
 #### 引数
 - `height` string
 fit, full, freeの文字列
-- `free_val` number  
+- `free_val` string  
 px値  
 #### 戻り値
 - fitのとき`height: fit-content;`
-- freeのとき`height: ${free_val}px;`
+- freeのとき`height: ${free_val};`
 - その他の文字列`height: 100%;`
   
 
@@ -652,6 +660,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' => '19f8215aa02dd432f1d5');