CSS 変数を使用して Puck で動的なテーマを作成する-jsチュートリアル-php.cn

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

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

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

Using CSS variables to create dynamic themes in Puck

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

Using CSS variables to create dynamic themes in Puck

このチュートリアルでは、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>{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

ログイン後にコピー

Using CSS variables to create dynamic themes in Puck

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

テーマの追加

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

設定

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

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

Using CSS variables to create dynamic themes in 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="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg" 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="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg" alt="Using CSS variables to create dynamic themes in Puck"></p>

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

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

<p>✅長所:</p>

ログイン後にコピー

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

❌短所:

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

さらに進化する

特定の使用例に応じて、エディターのテーマをさらに進化させる方法がたくさんあります。

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