Layout Paragraphs
DrupalのLayout APIを使用して、Paragraphsで柔軟なレイアウトを構築するための直感的なドラッグ＆ドロップインターフェースを提供します。
layout_paragraphs
インストール
composer require 'drupal/layout_paragraphs:^2.1'
概要
Layout Paragraphsは、Paragraphsで柔軟なレイアウトを構築するための直感的なドラッグ＆ドロップ体験を提供します。このモジュールはParagraphsを念頭に置いてゼロから設計されており、既存のParagraph参照フィールドとシームレスに連携します。
主な機能には、直感的なドラッグ＆ドロップインターフェース、サイト管理者が「レイアウトセクション」として使用するParagraphと各セクションで利用可能なレイアウトを選択できる柔軟な設定、Drupal 10および11との互換性があります。
このモジュールはレイアウト構築にDrupalのLayout APIを活用し、レイアウトデータの保存にParagraphs Behaviors APIを使用します。DrupalコアのLayout Builderとは異なり、Layout Paragraphsはサイト構築ツールではなく、コンテンツ作成者向けに特別に設計されたオーサリングツールです。
Layout Paragraphsはネストされたレイアウト、コンテンツを削除せずにセクション内の異なるレイアウト間を素早く切り替える機能をサポートし、「Layout Paragraphs Builder」フィールドフォーマッターを使用するように設定すると、見たままのオーサリング体験を提供します。
Features
- レイアウト内でParagraphを配置するための直感的なドラッグ＆ドロップインターフェース
- 移行なしで既存のParagraph参照フィールドと連携
- レイアウト定義にDrupalのLayout APIとLayout Discoveryを活用
- レイアウトデータ保存のためのParagraph Behaviors API統合
- 設定可能なネスト深度でのネストレイアウトのサポート
- コンテンツを削除せずにレイアウトを素早く切り替え
- Layout Paragraphs Builderフォーマッターによる見たままのオーサリング体験
- コンポーネントの複製サポート
- 非対称翻訳を含む翻訳サポート
- 設定可能なサイズのモーダルベースのコンポーネント編集
- サムネイルプレビュー付きのビジュアルレイアウト選択
- フィールドカーディナリティのサポート
- 未保存の変更のためのTempstoreベースの編集
Use Cases
ランディングページビルダー
Layout Paragraphsビヘイビアを有効にした「セクション」Paragraphタイプを定義して、柔軟なランディングページを作成します。2カラム、3カラム、全幅などのレイアウトを選択します。コンテンツエディターは、開発者の支援なしに視覚的に豊かなページを構築するために、他のParagraphタイプ（ヒーロー、CTA、カード、テキストブロック）をレイアウトリージョンにドラッグ＆ドロップできます。
リッチコンテンツ付きの記事
著者が本文内にレイアウトセクションを挿入できるようにして、記事コンテンツを強化します。例えば、著者は記事の途中に画像と関連テキストを並べて表示する2カラムセクションを追加し、その下に通常のコンテンツを続けることができます。これにより、標準コンテンツ内で雑誌スタイルのレイアウト機能を提供します。
製品ショーケースページ
複数のセクションで製品ページを構築：製品画像とタイトルのヒーローセクション、機能ハイライト用の3カラムレイアウトの機能セクション、全幅のビデオセクション、2カラムの比較チャート。各セクションは一貫したページ構造を維持しながら異なるレイアウトを使用できます。
再利用可能なコンテンツコンポーネント
Layout Paragraphs Libraryサブモジュールと組み合わせて、標準化されたCTA、フッターセクション、プロモーションバナーなどの再利用可能なコンテンツブロックを作成します。コンテンツエディターは一度コンポーネントを構築してライブラリに追加し、複数のページで再利用できます。個別のインスタンスをリンク解除してカスタマイズするオプションもあります。
多言語コンテンツサイト
複数言語のコンテンツを持つサイトでは、Paragraph参照フィールドを翻訳可能として設定し、非対称翻訳を有効にします。各言語バージョンは同じ基本構造を共有しながら、異なるParagraphの配置とコンテンツを持つことができます。
制限されたエディターワークフロー
Layout Paragraphs Permissionsサブモジュールを使用して、階層的な編集権限を作成します。基本的なエディターには既存のレイアウト内でコンテンツを追加・編集することを許可し、レイアウトの並べ替えと複製は上級エディターまたは管理者に制限します。
Tips
- 「プレビュー表示モード」ウィジェット設定を使用して、編集を遅くする可能性のある複雑なフィールドフォーマットを非表示にした、ビルダーインターフェース専用の簡略化された表示を作成してください。
- 「最大ネスト深度」を最初は0に設定し、ネストされたレイアウトが特に必要な場合にのみ増やしてください。これにより、コンテンツエディターにとってインターフェースがシンプルになります。
- レイアウトセクション専用のParagraphタイプ（例：「セクション」、「コンテナ」）を作成し、コンテンツParagraphタイプとは別に管理することで、より明確な構成を維持できます。
- 一貫したページ構造を強制したい場合は、「レイアウト内にParagraphを追加することを要求」オプションを使用してください。
- ビルダー用に異なるフォーム表示モード（form_display_mode設定）を使用して、インライン編集中に必要なフィールドのみを表示することを検討してください。
- Layout Paragraphs Builderフォーマッター（実験的）は、編集フォームに移動せずにビューページで直接編集できるため、最高のオーサリング体験を提供します。
Technical Details
Admin Pages 3
/admin/config/content/layout_paragraphs/labels
ラベルの表示やビヘイビアフィールドセットの位置など、Layout Paragraphsフィールドウィジェットのサイト全体の設定を構成します。
/admin/config/content/layout_paragraphs/sections
レイアウトセクションとして使用できるParagraphタイプと、各タイプで利用可能なレイアウトを設定します。
/admin/config/content/layout_paragraphs/modal-settings
Paragraphの編集に使用されるモーダルダイアログのサイズと動作を設定します。
Hooks 4
hook_form_layout_paragraphs_component_form_alter
Layout Paragraphコンポーネントフォーム（ビルダー内のParagraph編集フォーム）を変更します。
hook_preprocess_layout_paragraphs_builder
Layout Paragraphs Builder要素の前処理。ビルダーインターフェースを変更します。
hook_preprocess_layout_paragraphs_builder_controls
コンポーネントコントロールUI（上に移動、下に移動、編集、削除、複製ボタン）を変更します。
hook_entity_view_alter
$build['#layout_paragraphs_component']と共に使用して、Layout Paragraphs内のParagraphレンダリングを変更します。UI要素は$build['drupalSettings']['lpBuilder']['uiElements']を介して変更できます。
Troubleshooting 6
Dragulaライブラリが正しくインストールされていることを確認してください。以下のいずれかを確認：(1) /libraries/dragula/dist/dragula.min.jsにライブラリが存在する、(2) Asset PackagistでComposerを使用してインストールされた、(3) CDNフォールバックがCSPによってブロックされていない。ライブラリをインストールした後、Drupalキャッシュをクリアしてください。
構造 > Paragraphタイプ > [タイプ] > 編集 > ビヘイビアで、Paragraphタイプに「Layout Paragraphs」ビヘイビアが有効になっていることを確認してください。そのビヘイビアの「利用可能なレイアウト」設定で少なくとも1つのレイアウトが選択されていることを確認してください。
Paragraph参照フィールドが翻訳可能としてマークされていない場合、データの不整合を防ぐために翻訳モードでParagraphの追加/削除が無効になります。非対称翻訳（言語ごとに異なるParagraph）を有効にするには、フィールド設定レベルで参照フィールドを翻訳可能にしてください。
管理 > 設定 > コンテンツオーサリング > Layout Paragraphs設定 > モーダル設定でモーダルのサイズを調整してください。最良の結果を得るには、幅を「90%」、高さを「auto」に設定し、自動リサイズを有効にしてください。
これは設計通りです。レイアウトセクションとして機能するParagraphタイプ（Layout Paragraphsビヘイビアが有効なもの）は、正しく転送されない可能性のある構造情報を含んでいるため、ライブラリに追加できません。
Layout Paragraphsは編集中の変更を保持するためにTempstoreを使用します。ただし、親エンティティを保存せずにページを離れると、変更は失われます。レイアウト変更後は常にNode/エンティティを保存してください。
Security Notes 4
- Layout Paragraphs操作へのアクセスは、標準のDrupalエンティティアクセス（Paragraphとホストエンティティに対する作成、更新、削除権限）によって制御されます。
- ビルダーアクセスサービスは、操作を許可する前にフィールドレベルアクセスとエンティティレベルアクセスの両方をチェックします。
- ビルダーが別のフォーム内でレンダリングされる際のフォームハイジャックを防ぐため、レンダリングされたParagraphプレビューからフォームタグ、name属性、required属性が削除されます。
- Layout Paragraphs Permissionsサブモジュールは、並べ替えや複製などの特定の操作に対する追加のきめ細かい権限を提供します。