カスタムブロック

WYSIWYG部分にカスタムレイアウトを実装する必要がある場合がありますが、WordPressのカスタムブロック機能を使用して、これらの要件を実装できます。

基本的には、以下のプラグインを使用してカスタムブロックを実装していますので、プラグインページを確認してください。

• Lazy Blocks

テンプレート構造

Lazy Blocksプラグインを使用する場合は、ブロックのスラッグとHTMLクラス、SCSSファイルを一致させてください。

• ブロックテンプレートのPHPファイル
  • blocks/lazyblock-{slug}/block.php
• ブロックテンプレートのHTMLクラス
  • .c-block-{slug}
• ブロックテンプレートのSCSSファイル
  • data/scss/object/component/_block-{slug}.scss

例

LazyBlocksを使用してfooカスタムブロックを準備する場合。

// blocks/lazyblock-foo/block.php
<div class="c-block-foo">
    <div class="c-block-foo__child">
        <?php /** Something actions */ ?>
    </div>
</div>

// data/scss/object/component/_block-foo.scss
.c-block-foo {
    &__child {
        // Something styles
    }
}