概要

WordPressのカスタムブロックを作成するためのプラグインで活用するパッケージです。複数のプラグインで共通に使用する機能をパッケージにまとめました。

使用方法

import {関数名又はコンポーネント名} from "itmar-block-packages"

名前付きインポートでお願いします。

必要条件

このパッケージは@wordpress/scriptsによるWebPackのトランスパイル環境でトランスパイルされています。そして、このパッケージを使用するには、@wordpress/scriptsのバージョン^27.6.0以上が必要です。以下のコマンドを実行して、@wordpress/scriptsを更新してください：

npm i @wordpress/scripts@^27.6.0 --save-dev

更新履歴

= 1.3.4 =

• BlockPlaceコンポーネントの高さにフリーサイズを追加し、デスクトップとモバイルでそれぞれ設定を可能うにした。それに伴ってcssPropertesのheight_prmのシグニチャーを変更。

= 1.3.2 =

• BlockPlaceコンポーネントのインナーブロックの方向で縦方向又は横方向を選択したとき反転の設定ができるようにした。

= 1.3.1 =

• edit.scssおよびstyle.scssの共通スタイルについては機能しないことが判明したので削除した。

= 1.3.0 =

• WordPressのデータをRest APIを通して取得する関数等に、次の関数とReactコンポーネントを追加した
• restTaxonomies
• TermChoiceControl
• edit.scssおよびstyle.scssを配置し、これをトランスパイルして、複数のプラグインから共通のスタイルとして使用できるようにした

各コンポーネント・関数の機能

カスタムフック

useIsIframeMobile

WordPressのエディタ（ブロックエディタ、サイトエディタ）の大きさを監視し、幅が767ピクセル以下であればtrueを返します。

const is_mobile=useIsIframeMobile();

useElementBackgroundColor

ブロックの背景色を返します。ユーザー設定で指定されていれば、その色を返し、指定されていないか、カスタムプロパティ（--wpで始まるプロパティ）であれば、getComputedStyleで実際にレンダリングされた色を取得します。

引数

• blockRef
  ブロックへの参照。useRefで取得
• style
  ブロックに設定されているスタイル。useBlockPropsで取得

//ブロックの参照
const blockRef = useRef(null);
//blockPropsの参照
const blockProps = useBlockProps({
	ref: blockRef, // ここで参照を blockProps に渡しています
});

//背景色の取得
const baseColor = useElementBackgroundColor(blockRef, blockProps.style);

useElementWidth

useIsMobile

ViewPortの大きさの大きさを監視し、幅が767ピクセル以下であればtrueを返します。

const is_mobile=useIsMobile();

useDeepCompareEffect

たくさんの要素をもつオブジェクトや配列の内容の変化で発火するuseEffect

引数

• callback func
  発火させたい関数
• dependencies array
  依存変数にしたい配列

useDeepCompareEffect(() => {
・・・
},
[attributes]

useFontawesomeIframe

iframeにfontawesomeを読み込むカスタムフック

styled-componet用のcssプロパティ生成関数

styled-componetのcssヘルパー関数内で使用するcssのパラメーターやプロパティを返します。

radius_prm

border-radiusに設定するプロパティを文字列で返します。

引数

• radius object
  topLeft,topRight,bottomRight,bottomLeftをキーとしてもつオブジェクト

space_prm

marginやpaddingに設定するプロパティを文字列で返します。

引数

• space object
  top,right,bottom,leftをキーとしてもつオブジェクト

max_width_prm

最大幅を設定するためのCSSを返します。

引数

• width string
  wideSize,contentSize,free,fullの文字列
• free_val number
  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;
• fullのときwidth: 100%; max-width: 100%;
• その他の文字列width: fit-content;

width_prm

widthのCSSを返します。

引数

• width string
  wideSize,contentSize,freeの文字列
• free_val number
  px値

戻り値

• wideSizeのときwidth: var(--wp--style--global--wide-size);
• contentSizeのときwidth: var(--wp--style--global--content-size);
• freeのときwidth: ${free_val}px;
• その他の文字列width: fit-content;

height_prm

heightのCSSを返します。

引数

• height string fit, full, freeの文字列
• free_val number
  px値

戻り値

• fitのときheight: fit-content;
• freeのときheight: ${free_val}px;
• その他の文字列height: 100%;

align_prm

marginによる横方向の配置のためのCSSを返します。

引数

• align string
  center,rightの文字列

戻り値

• centerのときmargin-left: auto; margin-right: auto;
• rightのときmargin-left: auto; margin-right: 0
• その他の文字列margin-right: auto; margin-left: 0

convertToScss

キャメルケースで与えられたstyleオブジェクトをscssの文字列に変換します。

引数

• styleObject object
  ブロックに設定されたスタイルオブジェクト

const str_scss = convertToScss(styleObject)

borderProperty

WordPressのBorderBoxControlコンポーネントが返すオブジェクトをキャメルケースのCSSに変換して返します。

引数

• borderObj object
  WordPressのBorderBoxControlコンポーネントが返すオブジェクト

const css_obj = borderProperty(borderObj)

radiusProperty

WordPressのBorderRadiusControlコンポーネントが返すオブジェクトをキャメルケースのCSSに変換して返します。

引数

• radiusObj object
  WordPressのBorderRadiusControlコンポーネントが返すオブジェクト

const css_obj = radiusProperty(radiusObj)

marginProperty

marginのcssを返します。

引数

• marginObj object
  top,right,bottom,leftをキーとしてもつオブジェクト。オブジェクトの値は単位（px,em,%等）付きにしてください。

paddingProperty

paddingのcssを返します。

引数

• paddingObj object
  top,right,bottom,leftをキーとしてもつオブジェクト。オブジェクトの値は単位（px,em,%等）付きにしてください。

ボックスシャドーを設定するコントロール

ShadowStyle

WordPressのブロックエディタのサイドバーにbox-shadowを設定するためのコントロールを表示させるReactコンポーネント。

<ShadowStyle
	shadowStyle={{ ...shadow_element }}
	onChange={(newStyle, newState) => {
		setAttributes({ shadow_result: newStyle.style });
		setAttributes({ shadow_element: newState });
	}}
/>

ShadowElm

設定されたbox-shadowをスタイルオブジェクトとして返します。

引数

• shadowState object
  ShadowStyleコンポーネントで生成され、ブロックの属性としてセットされるオブジェクト

疑似要素を設定するコントロール

PseudoElm

WordPressのブロックエディタのサイドバーに疑似要素を設定するためのコントロールを表示させるReactコンポーネント。現時点のバージョンでは上下左右の矢印表示の設定のみが可能です。

<PseudoElm
	element="Arrow"
	direction={pseudoInfo.option}
	onChange={(direction) => {
		setAttributes({
			pseudoInfo: { ...pseudoInfo, option: direction },
		});
	}}
/>

Arrow

矢印を表示させる疑似要素を生成してscssの文字列で返します。

const arrow = Arrow(direction);

引数

• direction object
  キーをdirection、値をupper,left,right,underのいずれかとするオブジェクト

メディアライブラリから画像を選択するコントロール

SingleImageSelect

メディアライブラリ選択画面を開き、ブロックの属性にmediaとmedia.idをセットします。

<SingleImageSelect
	attributes={attributes}
	onSelectChange={(media) => {
		setAttributes({ media: media, mediaID: media.id });
	}}
/>

MultiImageSelect

メディアライブラリ選択画面を開き、複数の画像を選択して、ブロックの属性にmediaとmedia.idをセットします。

<MultiImageSelect
	attributes={attributes}
	label=__("Selected Images", "text-domain")
	onSelectChange={(media) => {
		// media から map で id プロパティの配列を生成
		const media_ID = media.map((image) => image.id);
		setAttributes({
			mobile_val: { ...mobile_val, mediaID: media_ID, media: media },
		});
		
	}}
	onAllDelete={() => {
		setAttributes({
			mobile_val: { ...mobile_val, mediaID: [], media: [] },
		});
	}}
/>

ブロックのドラッガブルを設定するコントロール

DraggableBox

ブロックを移動させる移動量を設定するコントロールをサイドバーに表示させます。

<DraggableBox
	attributes={position}
	onPositionChange={(position) =>
		setAttributes({ position: position })
	}
/>

useDraggingMove

参照したブロックを可能とするためのカスタムフックを設定します。

useDraggingMove(
  isMovable,
  blockRef,
  position,
  onPositionChange
)

引数

• isMovable boolean 移動を可とするかどうかのフラグ
• blockRef useRef
  移動させるブロックへの参照
• position object
  移動量を決定するためのx,yのキーをもつオブジェクト
• onPositionChange function 移動量が変化したときに属性値を記録するためのコールバック関数

ブロックをlazy Loadさせるためのラッパーモジュール

BlockEditWrapper

registerBlockTypeの第２引数内にあるeditオブジェクトに、以下の使用例で生成したBlockEditを渡してやることで、ブロックの読み込みをレンダリングの時まで遅らせます。

const LazyEditComponent = React.lazy(() => import("./edit"));
const BlockEdit = (props) => {
	return <BlockEditWrapper lazyComponent={LazyEditComponent} {...props} />;
};

ブロックにアニメーション効果をあたえるためのコントロール

AnimationBlock

WordPressのブロックエディタのサイドバーにアニメーションを設定するためのコントロールを表示させるReactコンポーネント。現時点のバージョンではflipDown,fadeUp,fadeLeft,fadeRightのアニメーション設定が可能です

<AnimationBlock
	attributes={attributes}
	onChange={(newValue) => setAttributes(newValue)}
/>

anime_comp

設定されたアニメーションのパラメータをオブジェクトとして渡すことで、SCSSの文字列に変換して返します。

引数

• anime_prm object
  AnimationBlockコンポーネントで生成され、ブロックの属性としてセットされるオブジェクト

Typographyを設定するコントロール

TypographyControls

WordPressのブロックエディタのサイドバーにTypographyを設定するためのコントロールを表示させるReactコンポーネント。

<TypographyControls
	title={__("Typography", "text-domain")}
	fontStyle=	
	{
		default_fontSize: "16px",
		mobile_fontSize: "12px",
		fontFamily: "Arial, sans-serif",
		fontWeight: "500",
		isItalic: false,
	}
	initialOpen={false}
	isMobile={isMobile}
	onChange={(newStyle) => {
		setAttributes({ font_style_input: newStyle });
	}}
/>

WordPressのデータをRest APIを通して取得する関数等

fetchPagesOptions

固定ページの情報を取得して配列で返します。

引数

• homeUrl string
  サイトのホームURL

戻り値

次のようなキーを持つオブジェクトの配列を返します。
value 固定ページのid。ただし、サイトのホームについては-1をかえす。
slug 固定ページのスラッグ
link 固定ページのURL label 固定ページの名称

fetchArchiveOptions

カスタム投稿タイプ（ビルトインを含む）の情報を取得して配列で返します。

引数

• homeUrl string
  サイトのホームURL

戻り値

次のようなキーを持つオブジェクトの配列を返します。
value 0から始まる通し番号
slug ポストタイプのスラッグ
link アーカイブページのURL label ポストタイプの名称

restTaxonomies

投稿タイプに登録されているタクソノミー（カテゴリ、タグを含む）の情報およびそのタームの情報をを取得して配列で返します。

引数

• post_type string
  投稿タイプのスラッグ

戻り値

次のようなキーを持つオブジェクトの配列を返します。
slug タクソノミーのスラッグ name タクソノミーの名称
rest_base タクソノミーのREST_APIの名称 terms ターム情報オブジェクトの配列

PageSelectControl

固定ページを選択できるコンボボックス表示し、固定ページの情報を返します。

プロプス

• selectedSlug string
  選択済みの固定ページのスラッグ
• label string コンボボックスのラベル
• homeUrl string
  サイトのホームURL
• onChange func コンボボックスの内容が変化したとき発生するコールバック関数。引数にはfetchPagesOptionsの戻り値が入る。

<PageSelectControl
	selectedSlug={selectedSlug}
	label={__("Select Post Type", "post-blocks")}
	homeUrl={post_blocks.home_url}
	onChange={(postInfo) => {
		setAttributes({ selectedSlug: postInfo.slug });
	}}
/>

ArchiveSelectControl

投稿タイプ名を選択できるコンボボックス表示し、投稿タイプの情報を返します。

プロプス

• selectedSlug string
  選択済みの投稿タイプのスラッグ
• label string コンボボックスのラベル
• homeUrl string
  サイトのホームURL
• onChange func コンボボックスの内容が変化したとき発生するコールバック関数。引数にはfetchArchiveOptionsの戻り値が入る。

<ArchiveSelectControl
	selectedSlug={selectedSlug}
	label={__("Select Post Type", "post-blocks")}
	homeUrl={post_blocks.home_url}
	onChange={(postInfo) => {
		setAttributes({ selectedSlug: postInfo.slug });
	}}
/>

TermChoiceControl

投稿タイプに紐づけられている全てのタクソノミー（カテゴリ、タグを含む。）に登録されたタームを選択できるチェックボックス表示し、コールバック関数に選択されたタームの情報を返します。

プロプス

• selectedSlug string
  選択済みの投稿タイプのスラッグ

• choiceTerms array
  選択済みのタームの情報。配列の要素は次の形式のオブジェクトであること。
  { taxonomy: タクソノミーのスラッグ, term: タームのスラッグ }

• type string 選択するデータのタイプ。将来の拡張のためにセットしている。現時点では"taxonomy"とセットすること。

• label string

• onChange func チェックボックスの内容が変化したとき発生するコールバック関数。引数には{ taxonomy: タクソノミーのスラッグ, term: タームのスラッグ }という形式のオブジェクトを要素とする配列が入る。

<TermChoiceControl
	selectedSlug={selectedSlug}
	choiceTerms={choiceTerms}
	type="taxonomy"
	label={__("Choice Taxsonomy", "post-blocks")}
	onChange={(newChoiceTerms) =>
		setAttributes({ choiceTerms: newChoiceTerms })
	}
/>

Font awesom のアイコンを選択するためのコントロール

IconSelectControl

WordPressのブロックエディタのサイドバーにFont awesomのアイコンを選択するためのコントロールを表示させるReactコンポーネント。

<IconSelectControl
	iconStyle={
		icon_name: "f030",
		icon_pos: "left",
		icon_size: "24px",
		icon_color: "var(--wp--preset--color--content)",
		icon_space: "5px",
	}
	onChange={(newValue) => {
		setAttributes({icon_style: newValue})
	}}
/>

DOM要素をラップしてレンダリングを変化させるReactコンポーネント

ToggleElement

DOM要素をdiv要素でラップし、flgの値によって、その要素にopenというクラス名を付加します。呼び出し側でflgの値を変更することで、DOM要素の表示・非表示を操作するときに使用します。

<ToggleElement
	onToggle={handleHambergerToggle}
	className="itmar_hamberger_btn"
	openFlg={flg}
>
	<span></span>
	<span></span>
	<span></span>
</ToggleElement>

グリッドスタイルの各種設定を行うためのコントロール

GridControls

CSSでdisplay : grid が設定されたブロックに対し、gridの各種設定を行うため、モーダルウインドウを表示させるReactコンポーネント。

<GridControls
	attributes={props.grid_info}
	clientId={clientId}
	onChange={(newValue) => {
		props.onGridChange(newValue)
	}}
/>

ブロックの配置に関する各種設定を行うためのコントロール

BlockPlace

WordPressのブロックエディタのサイドバーにブロックの配置に関する設定のためのコントロールを表示させるReactコンポーネント。

<BlockPlace
	attributes={attributes}
	clientId={clientId}
	blockRef={blockRef}
	isMobile={isMobile}
	isSubmenu={is_submenu}
	onDirectionChange={(position) => {
		setAttributes({direction: position });
	}}
	onReverseChange={(checked) => {
		setAttributes({reverse: checked });	
	}}
	onFlexChange={(position) => {
		setAttributes({inner_align: position });
	}}
	onAlignChange={(position) => {
		setAttributes({outer_align: position });
	}}
	onVerticalChange={(position) => {
		setAttributes({outer_vertical: position });
	}}
	onWidthChange={(position) => {
		setAttributes({width_val: position });
	}}
	onHeightChange={(value) => {
		setAttributes({ height_val: value });
	}}
	onFreeWidthChange={(value) => {
		setAttributes({free_width: position });
	}}
	onFreeHeightChange={(value) => {
		setAttributes({free_height: position });
	}}
	onGridChange={(value) => {
		setAttributes({grid_info: position });
	}}
	onPositionChange={(value) => {
		setAttributes({ positionType: value });
	}}
	onPosValueChange={(value) => {
		setAttributes({posValue: position });
	}}
/>

色コードを変換する関数

hslToRgb16

Hslオブジェクトの値を与えると#000000型のRGB表記に変換するためのユーティリティ関数です。

引数

• hue number
  Hslオブジェクトのhueの値
• saturation number
  Hslオブジェクトのsaturationの値
• lightness number
  Hslオブジェクトのlightnessの値

rgb16ToHsl

16進数のRGB表記を受け取り、それをHslオブジェクトに変換するためのユーティリティ関数です。

引数

• strRgb16 string
  #000000形式の１６進数の文字列又はrgb(0,0,0) 形式の文字列 　　

HexToRGB

16進数のRGB表記を受け取り、それを10進数のRGBオブジェクトに変換するためのユーティリティ関数です。

引数

• strRgb16 string
  #000000形式の１６進数の文字列又はrgb(0,0,0) 形式の文字列