itmar-block-packages 3.0.3 → 3.1.0

package/README.md

@@ -17,6 +17,14 @@ TypeScript で利用する場合、以下のバージョン以上を推奨しま
 typescript: ^5.0.0 以上
 
 ## 更新履歴
+= 3.1.0 =
+useStyleIframeとstyleComponentApplyを新設
+
+= 3.0.4 =
+ShadowStyleで発生していた無限ループを解消
+ShadowStateをインターフェースとしてエクスポート
+FieldChoiceControlの不具合を修正
+
 = 3.0.3 =
 ブロック間の通信をおこなうインターフェースを付加
 
@@ -1583,3 +1591,138 @@ pickups.forEach((el) => {
 
 ---
 
+### `useStyleIframe(StyleComp, attributes)`
+
+#### 説明
+
+WordPressブロックエディタの編集画面（iframe内）に対して、`styled-components` のスタイルを安全に注入するためのカスタムフック兼コンポーネントです。
+`createPortal` と `StyleSheetManager` を組み合わせることで、エディタの canvas（iframe）の `head` 内に直接スタイル定義を飛ばし、エディタ上での正確なプレビューを実現します。
+
+#### 引数
+
+| 名前 | 型 | 説明 |
+|------|----|------|
+| `StyleComp` | `React.ComponentType` | スタイル定義のみを含むReactコンポーネント |
+| `attributes` | `T` (Generic) | ブロックの属性オブジェクト（`StyleComp` に渡されます） |
+
+#### 戻り値
+
+React Portal要素（`React.ReactPortal | null`）
+※エディタのiframeが見つからない場合は `null` を返します。
+
+---
+
+### 使用例
+
+#### 1. スタイル定義用コンポーネントの作成
+まず、`styled-components` を使って、スタイルだけを定義するコンポーネントを用意します。
+
+```tsx
+import styled from 'styled-components';
+
+// 外部に書き出したいスタイル定義
+const StyleComp = ({ attributes }) => (
+    <style>
+        {`
+            .my-custom-block {
+                color: ${attributes.color};
+                font-size: ${attributes.fontSize}px;
+            }
+        `}
+    </style>
+);
+
+#### 2. Editコンポーネントでの使用例
+ブロックの `Edit` 関数内で呼び出します。戻り値をJSX内に配置するだけで、スタイルがiframeに注入されます。
+
+```tsx
+import { useStyleIframe } from 'itmar-block-packages';
+
+export default function Edit({ attributes }) {
+    // スタイルをiframeのheadに注入するポータルを取得
+    const stylePortal = useStyleIframe(StyleComp, attributes);
+
+    return (
+        <>
+            {/* これを配置するだけでiframeのheadにスタイルが飛びます */}
+            {stylePortal}
+
+            <div className="my-custom-block">
+                エディタ上でのプレビュー表示
+            </div>
+        </>
+    );
+}
+
+### 注意事項・ルール
+
+✅ **iframeの自動検知**
+- Gutenbergの標準的なiframe名である `"editor-canvas"` を自動で検索し、その `head` 要素をターゲットにします。
+
+✅ **DOMを汚さない設計**
+- `createPortal` を使用して `document.head` に描画するため、ブロックのコンテンツエリア（`div` 等の中）に不要なスタイルタグや空の `div` が残ることはありません。
+
+✅ **動的なスタイル更新**
+- `attributes` が更新されるたびに `useMemo` と React の再レンダリングが連動し、エディタ上のスタイルもリアルタイムに反映されます。
+
+✅ **安全なフォールバック**
+- サイトエディタや古いWordPress環境など、iframeが存在しないケースでは何も描画（`null` を返却）しないため、エラーでエディタ全体が白くなる心配がありません。
+
+### `styleComponentApply(StyleComp, blockSelector)`
+
+#### 説明
+
+WordPressのフロントエンド表示時において、`styled-components` で定義されたスタイルを動的に生成し、該当するブロックに適用します。
+ブロックの `save` 関数で出力された特定のセレクター（`.itmar-wrap` 等）を自動で探し出し、生成されたユニークなクラス名とスタイルタグを注入します。
+
+#### 引数
+
+| 名前 | 型 | 説明 |
+|------|----|------|
+| `StyleComp` | `React.ComponentType` | スタイル定義のみを含むReactコンポーネント |
+| `blockSelector` | `string` | 対象となるブロックを特定するためのCSSセレクター |
+
+### 使用例
+
+#### 1. ブロックの `save.tsx` での準備
+この関数は `data-attributes` 属性からデータを読み取るため、`save` 関数で属性をJSONとして出力しておく必要があります。
+
+```tsx
+export default function save({ attributes }) {
+    return (
+        <div 
+            className="wp-block-my-custom-block" 
+            data-attributes={JSON.stringify(attributes)}
+        >
+            <div className="itmar-wrap">
+                {/* ここにスタイルが適用されます */}
+                コンテンツ
+            </div>
+        </div>
+    );
+}
+#### 2. フロントエンド（front.ts 等）での実行
+ブロックが表示されるフロントエンドのスクリプトで、この関数を呼び出します。
+```tsx
+import { styleComponentApply } from 'itmar-block-packages';
+import { StyleComp } from './edit'; // スタイル定義コンポーネント
+
+// DOMの読み込み完了後に実行
+window.addEventListener('load', () => {
+    styleComponentApply(StyleComp, '.wp-block-my-custom-block');
+});
+```
+
+### 注意事項・ルール
+
+✅ **ハイドレーション不要のスタイル注入**
+- `styled-components` の `ServerStyleSheet` をブラウザ上でエミュレートすることで、Reactのフルハイドレーションを行わずに、軽量にスタイルだけを適用します。
+
+✅ **ユニークなクラス名の継承**
+- `styled-components` が生成する `sc-xxxx` のようなユニークなクラス名を自動で抽出し、対象要素（`.itmar-wrap` またはルート要素）の `classList` に追加します。
+
+✅ **data-attributes への依存**
+- 実行には要素に `data-attributes` 属性が付与されている必要があります。属性が存在しない要素は自動的にスキップされます。
+
+✅ **安全なスタイル注入**
+- 生成されたスタイルタグは `document.head` に集約して追加されるため、DOM構造を壊すことなくページ全体のスタイルを管理できます。

package/build/cjs/AnimationBlock.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var i18n = require('@wordpress/i18n');
 var styledComponents = require('styled-components');
-var element = require('@wordpress/element');
 var components = require('@wordpress/components');
 
 const anime_comp = (attributes) => {
@@ -23,52 +23,43 @@ const anime_comp = (attributes) => {
 };
 function AnimationBlock(props) {
     const { is_anime, anime_prm } = props.attributes;
-    return (element.createElement(element.Fragment, null,
-        element.createElement(components.PanelBody, { title: i18n.__("Animation Setting", "block-collections"), initialOpen: true },
-            element.createElement(components.ToggleControl, { label: i18n.__("Is Animation", "block-collections"), checked: is_anime, onChange: (newVal) => {
-                    props.onChange({ is_anime: newVal });
-                } }),
-            is_anime && (element.createElement(element.Fragment, null,
-                element.createElement("div", { className: "itmar_link_type" },
-                    element.createElement(components.RadioControl, { label: i18n.__("Animation Pattern", "block-collections"), selected: anime_prm.pattern, options: [
-                            { label: "flipDown", value: "flipDown" },
-                            { label: "fadeUp", value: "fadeUp" },
-                            { label: "fadeLeft", value: "fadeLeft" },
-                            { label: "fadeRight", value: "fadeRight" },
-                        ], onChange: (changeOption) => {
-                            props.onChange({
-                                anime_prm: { ...anime_prm, pattern: changeOption },
-                            });
-                        } })),
-                element.createElement(components.RangeControl, { value: anime_prm.duration, label: i18n.__("Animation duration time", "block-collections"), max: 5, min: 0, onChange: (val) => {
-                        // val が undefined の場合は 0（または適切なデフォルト値）を採用する
-                        const safeValue = val ?? 0;
-                        props.onChange({
-                            anime_prm: { ...anime_prm, duration: safeValue },
-                        });
-                    }, step: 0.1, withInputField: true }),
-                element.createElement(components.RangeControl, { value: anime_prm.delay, label: i18n.__("Animation delay time", "block-collections"), max: 3, min: 0, onChange: (val) => {
-                        // val が undefined の場合は 0（または適切なデフォルト値）を採用する
-                        const safeValue = val ?? 0;
-                        props.onChange({
-                            anime_prm: { ...anime_prm, delay: safeValue },
-                        });
-                    }, step: 0.1, withInputField: true }),
-                element.createElement("div", { className: "itmar_link_type" },
-                    element.createElement(components.RadioControl, { label: i18n.__("Animation Trigger", "block-collections"), selected: anime_prm.trigger, options: [
-                            {
-                                label: i18n.__("Page Opend", "block-collections"),
-                                value: "opend",
-                            },
-                            {
-                                label: i18n.__("Enter Visible", "block-collections"),
-                                value: "visible",
-                            },
-                        ], onChange: (changeOption) => {
-                            props.onChange({
-                                anime_prm: { ...anime_prm, trigger: changeOption },
-                            });
-                        } })))))));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(components.PanelBody, { title: i18n.__("Animation Setting", "block-collections"), initialOpen: true, children: [jsxRuntime.jsx(components.ToggleControl, { label: i18n.__("Is Animation", "block-collections"), checked: is_anime, onChange: (newVal) => {
+                        props.onChange({ is_anime: newVal });
+                    } }), is_anime && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "itmar_link_type", children: jsxRuntime.jsx(components.RadioControl, { label: i18n.__("Animation Pattern", "block-collections"), selected: anime_prm.pattern, options: [
+                                    { label: "flipDown", value: "flipDown" },
+                                    { label: "fadeUp", value: "fadeUp" },
+                                    { label: "fadeLeft", value: "fadeLeft" },
+                                    { label: "fadeRight", value: "fadeRight" },
+                                ], onChange: (changeOption) => {
+                                    props.onChange({
+                                        anime_prm: { ...anime_prm, pattern: changeOption },
+                                    });
+                                } }) }), jsxRuntime.jsx(components.RangeControl, { value: anime_prm.duration, label: i18n.__("Animation duration time", "block-collections"), max: 5, min: 0, onChange: (val) => {
+                                // val が undefined の場合は 0（または適切なデフォルト値）を採用する
+                                const safeValue = val ?? 0;
+                                props.onChange({
+                                    anime_prm: { ...anime_prm, duration: safeValue },
+                                });
+                            }, step: 0.1, withInputField: true }), jsxRuntime.jsx(components.RangeControl, { value: anime_prm.delay, label: i18n.__("Animation delay time", "block-collections"), max: 3, min: 0, onChange: (val) => {
+                                // val が undefined の場合は 0（または適切なデフォルト値）を採用する
+                                const safeValue = val ?? 0;
+                                props.onChange({
+                                    anime_prm: { ...anime_prm, delay: safeValue },
+                                });
+                            }, step: 0.1, withInputField: true }), jsxRuntime.jsx("div", { className: "itmar_link_type", children: jsxRuntime.jsx(components.RadioControl, { label: i18n.__("Animation Trigger", "block-collections"), selected: anime_prm.trigger, options: [
+                                    {
+                                        label: i18n.__("Page Opend", "block-collections"),
+                                        value: "opend",
+                                    },
+                                    {
+                                        label: i18n.__("Enter Visible", "block-collections"),
+                                        value: "visible",
+                                    },
+                                ], onChange: (changeOption) => {
+                                    props.onChange({
+                                        anime_prm: { ...anime_prm, trigger: changeOption },
+                                    });
+                                } }) })] }))] }) }));
 }
 
 exports.anime_comp = anime_comp;

package/build/cjs/AnimationBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationBlock.js","sources":["../../src/AnimationBlock.tsx"],"sourcesContent":[null],"names":["css","createElement","Fragment","PanelBody","__","ToggleControl","RadioControl","RangeControl"],"mappings":"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"}
+{"version":3,"file":"AnimationBlock.js","sources":["../../src/AnimationBlock.tsx"],"sourcesContent":[null],"names":["css","_jsx","_Fragment","_jsxs","PanelBody","__","ToggleControl","RadioControl","RangeControl"],"mappings":"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"}

package/build/cjs/BlockEditWrapper.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var element = require('@wordpress/element');
 
 function BlockEditWrapper({ lazyComponent: LazyComponent, ...props }) {
-    return (element.createElement(element.Suspense, { fallback: element.createElement("div", null, "Loading...") },
-        element.createElement(LazyComponent, { ...props })));
+    return (jsxRuntime.jsx(element.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading..." }), children: jsxRuntime.jsx(LazyComponent, { ...props }) }));
 }
 
 exports.default = BlockEditWrapper;

package/build/cjs/BlockEditWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockEditWrapper.js","sources":["../../src/BlockEditWrapper.tsx"],"sourcesContent":[null],"names":["createElement","Suspense"],"mappings":";;;;;;AAUA,SAAS,gBAAgB,CAAC,EACxB,aAAa,EAAE,aAAa,EAC5B,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,QACEA,qBAAA,CAACC,gBAAQ,EAAA,EAAC,QAAQ,EAAED,qBAAA,CAAA,KAAA,EAAA,IAAA,EAAA,YAAA,CAAqB,EAAA;AACvC,QAAAA,qBAAA,CAAC,aAAa,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,CACnB;AAEf;;;;"}
+{"version":3,"file":"BlockEditWrapper.js","sources":["../../src/BlockEditWrapper.tsx"],"sourcesContent":[null],"names":["_jsx","Suspense"],"mappings":";;;;;;;AAUA,SAAS,gBAAgB,CAAC,EACxB,aAAa,EAAE,aAAa,EAC5B,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,QACEA,cAAA,CAACC,gBAAQ,EAAA,EAAC,QAAQ,EAAED,cAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,YAAA,EAAA,CAAqB,EAAA,QAAA,EACvCA,cAAA,CAAC,aAAa,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,EAAA,CACnB;AAEf;;;;"}