CSS 変数を使用して Puck で動的なテーマを作成する

Puck は React 用のオープンソース ビジュアル エディターであり、次世代のページ ビルダーとノーコード製品を強化します。 GitHub でスターを付けてください! ⭐️

---

Puck をページ構築製品に統合する場合、共通の要件は、ユーザーがすべてのコンポーネントを調整することなくページのテーマを一元管理できるようにすることです。

例: ユーザーは、ページに既に追加されているコンポーネントであっても、フォント スタイルをグローバルに管理する方法を必要としています。実際の動作は次のとおりです:

Puck は単なる React コンポーネントであるため、この問題を解決する方法はたくさんあります (他のより複雑な状態を管理するだけでなく)。この記事では、最もシンプルでありながら最も強力なアプローチの 1 つである CSS プロパティに焦点を当てます。飛び込んでみましょう!

このチュートリアルでは、Puck とその機能について基本的に理解していることを前提とします。 Puck を初めて使用する場合でも、心配しないでください。引き続きフォローしていただけます。ただし、基礎を理解するためにスタート ガイドを確認することをお勧めします。

Vite を使用したプロジェクトのセットアップ

Vite のスキャフォールディング スクリプトを使用してプロジェクトをセットアップすることから始めます。 Puck を使用したプロジェクトがすでにある場合は、このセクションを読み進めても、スキップしても構いません。

Next.js または Remix を使用している場合は、プロジェクトのセットアップに公式 Puck レシピの 1 つを使用することもできます。

プロジェクトの作成

始めるには、ターミナルを開き、次のコマンドを実行して新しい Vite プロジェクトを作成します。

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

パックのインストール

次に、Puck パッケージをインストールします。

npm i @measured/puck --save

競合するスタイルの削除

Vite で新しいプロジェクトを開始すると、Puck のスタイルと衝突するいくつかのデフォルト スタイルが付属します。これを修正するには、src/index.css と src/App.css を削除してから、src/main.jsx と src/App.jsx からそれらのインポートを削除します:

// main.jsx
import "./index.css"; // Remove this line

// App.jsx
import "./App.css"; // Remove this line

Puck エディタのレンダリング

基本的なプロジェクト構造が準備できたら、src/App.jsx ファイルに移動し、その内容を以下のコードに置き換えます。これにより、見出しコンポーネントと段落コンポーネントをドラッグ アンド ドロップするための基本的な構成を使用して Puck がセットアップされます。

簡単にするために、この例ではインライン スタイルを使用していることに注意してください

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1 id="title">{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main>



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

すごい！構築する基盤ができたので、ユーザー向けのテーマを追加しましょう。

テーマの追加

前に述べたように、CSS カスタム プロパティは、エディターにインタラクティブなテーマを追加するための優れた選択肢です。なぜこれが素晴らしいアプローチなのでしょうか?これは軽量で、外部依存関係を必要とせず、(ほとんどの場合) ブラウザーによってネイティブに処理されるためです。

設定

CSS プロパティを使用して動的なテーマを追加するには、テーマ変数を必要とするコンポーネントの親でテーマ変数をプロパティとして定義する必要があります。これは、Puck のルート コンポーネントでも、エディター階層内の他の親コンポーネントでも構いません。それらを定義し、var CSS 関数を使用して必要な場所で読み取る限り、それは実際には問題ではありません。

このチュートリアルでは、ユーザーがエディターの最上位の 1 か所で見出しと段落のフォント サイズと色を設定できるように、Puck のルート コンポーネントの使用に焦点を当てます。

ステップ 1: 変数を定義する

まず、すべての CSS 変数名を一元化するオブジェクトを定義します。これにより、一貫性が向上し、CSS のプロパティ名の入力ミスによって引き起こされるデバッグの問題というウサギの穴から解放されます。

プロのヒント: TypeScript を使用している場合は、オブジェクトの代わりに列挙型を使用して、タイプ セーフティをさらに強化できます

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

ステップ 2: 親コンポーネントに変数を追加する

次に、ルート設定を更新して、テーマ変数の小道具とフィールドを含めます。これにより、ユーザーはエディターのルート フィールド内からカスタム プロパティを直接更新できるようになります。

これを行うには、新しいルート プロパティのフィールドとそのデフォルト値を定義する必要があります。

npm i @measured/puck --save

その後、ルートの render 関数で、props からカスタム プロパティを読み取り、CSS 変数としてルート要素に渡します。

// Puck 構成オブジェクト
const 構成 = {
  コンポーネント: {
    //... 既存のコンポーネント
  }、
  根： {
    //... ルートフィールドの設定

    render: ({ Children, fontColor,HeadingFontSize, ParagraphFontSize}) => {
      戻る （
        



<p>エディターに移動すると、各プロパティのルート レベルに新しいフィールドが表示されるはずです。まだ視覚的なフィードバックはありませんが、エディターのルートのスタイルを調べると、フィールドに変更を加えるたびに変数が設定されていることがわかります。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p><h3>
  
  
  ステップ 3: 子コンポーネントのシェア変数にアクセスする
</h3>

<p>最後に、スタイルで var CSS 関数を使用して、必要なコンポーネントのテーマ変数にアクセスします。</p>

<p>この例では、HeadingConfig と ParagraphConfig に追加します。<br>
</p>

<pre class="brush:php;toolbar:false">constHeadingConfig = {
  //... 見出しフィールドの設定

  レンダリング: ({ タイトル }) => {
    戻る （
      <div>
        <h1>



</h1>
<p>エディターに戻り、いくつかの見出しと段落をドラッグ アンド ドロップし、ルート レベルでフィールドを変更すると、すべての見出しと段落が更新されてそれらの変更が反映されていることがわかります。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p>?それで終わりです！ユーザーは、ページ内のさまざまなコンポーネントにシームレスに適用されるテーマを定義できるようになりました。</p>

<h3>
  
  
  CSS プロパティを使用することの長所と短所
</h3>

<p>✅長所:</p>

<ul>
<li>シンプルで直感的なセットアップ</li>
<li>ページ階層にカスケード機能とオーバーライド機能が組み込まれており、共有スタイルの管理が容易になり、個々のコンポーネントをカスタマイズできます</li>
<li>外部依存関係がなく、フットプリントが軽量 — CSS カスタム プロパティはブラウザーでネイティブにサポートされています</li>
<li>他のオプションよりもボイラープレートとメンテナンスの複雑さが軽減されます</li>
</ul>

<p>❌短所:</p>

<ul>
<li>単純なスタイル設定にのみ適しています。複雑なデータやロジックは処理できません</li>
<li>複数レベルの CSS プロパティ オーバーライドをネストすると、デバッグが困難になる可能性があります</li>
</ul>

<h2>
  
  
  さらに進化する
</h2>

<p>特定の使用例に応じて、エディターのテーマをさらに進化させる方法がたくさんあります。</p>
<ul>
<li>
<strong>事前定義されたテーマを使用する</strong> - 一部のアプリケーションでは、ダーク、ライト、最小限などのデフォルトのテーマ オプションを提供する必要がある場合があります。このために、複数のテーマ オブジェクトを持つ選択フィールドを使用できます。 
これらのオブジェクトは、すべての CSS プロパティを 1 つのユニットとしてグループ化できるため、ユーザーは 1 つのフィールドに入力することなく、ページの異なるテーマを簡単に切り替えることができます。</li>
<li>
<strong>スタイル ライブラリの統合</strong> – 大規模なエディタの場合、事前に構築されたスタイルを活用し、定義を合理化し、定型文を減らすために、スタイル ライブラリを使用する方が良い場合があります。 Tailwind や Emotion などのライブラリは Puck と簡単に統合できるため、洗練された外観を維持しながら柔軟性と効率性を実現できます。実際、Puck は統合プロセスを簡素化する Emotion プラグインも提供しています!</li>
<li>
<strong>コンポーネント レベルのテーマのオーバーライドを追加する</strong> – 場合によっては、ユーザーがページ内の個々のコンポーネントをテーマの他の部分から目立たせるようにカスタマイズする必要がある場合があります。 CSS プロパティを使用しているため、これは親レベルのテーマ変数をコンポーネント レベルでオーバーライドすることで簡単に実現できます。たとえば、オプションのフォント カラー フィールドを Heading コンポーネント内に追加できます。これが指定されている場合、その h1 要素専用の CSS プロパティを再定義します。</li>
</ul>

<h2>
  
  
  接続を維持して構築を続けますか?
</h2>

<p>このチュートリアルを読んで、Puck を利用したページ ビルダーで CSS 変数を動的テーマに活用できるようになったら幸いです。オープンソースの開発者コミュニティは Puck の進化の中心であり、皆さんが作成する革新的なアプリを見るのが待ちきれません!</p>

<p>私たちは、まもなくリリースされる複雑なグリッドとレイアウト用の革新的なドラッグ アンド ドロップ エンジンや、間もなくリリースされる新しいプラグイン スイートなど、新しい機能を継続的に提供することで、Puck の機能をさらに推し進めることに専念しています。</p>

<p>Puck にインスピレーションを受けた場合、または最新の機能を常に最新の状態に保ちたい場合は、次の方法で参加できます。</p>

<ul>
<li>
<strong>⭐ GitHub でスターを付けてください</strong>。プロジェクトをサポートし、他の人がその可能性を探求するよう促します。</li>
<li>
<strong>? Discord コミュニティ</strong>に参加して、プロジェクトを共有し、質問し、共同作業を行ってください。</li>
<li>
<strong>?最新のアップデート、スニークピーク、機能のお知らせについては、X と Bluesky</strong> をフォローしてください。</li>
<li>
<strong>?公式ドキュメント</strong>をさらに深く掘り下げて、ノーコード ワークフローを次のレベルに引き上げることができる高度なテクニックと洞察を確認してください。</li>
</ul>


          </div>