オプトイン機能

デフォルトのブロックスタイル

コアブロックにはデフォルトの構造スタイルが含まれています。これらはデフォルトでエディターとフロントエンドの両方に読み込まれます。これらのスタイルの例は、カラムブロックを支えるCSSです。これらのルールがなければ、ブロックは全くカラムを含まない壊れたレイアウトになります。

意見を反映したブロックスタイル

ブロックエディターは、テーマがフロントエンド用にやや意見を反映したスタイルをオプトインできるようにします。これらのスタイルの例は、引用ブロックの左側にあるデフォルトのカラーバーです。クラシックテーマでこれらの意見を反映したスタイルを使用したい場合は、wp-block-stylesのテーマサポートを追加してください: 

  1. add_theme_support( 'wp-block-styles' );

ブロックライブラリテーマファイルに含まれるCSSは、ブロックライブラリテーマファイルで確認できます。

ブロックテーマやtheme.jsonファイルを提供するテーマでは、このテーマサポートを使用することは推奨されません。代わりに、グローバルスタイルルールとブロックスタイルの間にスタイリングの競合がないことを確認するために、希望するブロックスタイルをテーマのtheme.jsonファイルに追加してください。

ワイドアラインメント:

画像ブロックなどの一部のブロックは、対応するクラス名をブロックのラッパーに追加することで「ワイド」または「フル」アラインメントを定義する可能性があります（alignwideまたはalignfull）。テーマは、次のようにしてこの機能をオプトインできます: 

  1. add_theme_support( 'align-wide' );

この機能に関する詳細は、add_theme_support()に関する開発者ドキュメントを参照してください。

ワイドアラインメントとフロート

ワイド画像、サイドバー、中央のカラム、およびその中央のカラム内に留まるフロート要素を考慮したレスポンシブレイアウトを作成するのは難しい場合があります。

ブロックエディターは、フロート画像に追加のマークアップを追加して、スタイリングを容易にします。

キャプション付きのImageのマークアップは次のとおりです: 

  1. <figure class="wp-block-image">
  2.    <img src="..." alt="" width="200px" />
  3.    <figcaption>Short image caption.</figcaption>
  4. </figure>

左にフロートした画像のマークアップは次のとおりです: 

  1. <div class="wp-block-image">
  2.    <figure class="alignleft">
  3.    <img src="..." alt="" width="200px" />
  4.    <figcaption>Short image caption.</figcaption>
  5.    </figure>
  6. </div>

上記のマークアップを使用して、サイドバー、ワイド画像、および制約されたキャプションを持つフロート要素を特徴とするレスポンシブレイアウトを実現する例は、codepenで確認できます。

ブロックカラーパレット

異なるブロックは色をカスタマイズする可能性があります。ブロックエディターはデフォルトのパレットを提供しますが、テーマはそれを上書きして独自のものを提供できます: 

  1. add_theme_support( 'editor-color-palette', array(
  2.    array(
  3.    'name'  => esc_attr__( 'strong magenta', 'themeLangDomain' ),
  4.    'slug'  => 'strong-magenta',
  5.    'color' => '#a156b4',
  6.    ),
  7.    array(
  8.    'name'  => esc_attr__( 'light grayish magenta', 'themeLangDomain' ),
  9.    'slug'  => 'light-grayish-magenta',
  10.    'color' => '#d0a5db',
  11.    ),
  12.    array(
  13.    'name'  => esc_attr__( 'very light gray', 'themeLangDomain' ),
  14.    'slug'  => 'very-light-gray',
  15.    'color' => '#eee',
  16.    ),
  17.    array(
  18.    'name'  => esc_attr__( 'very dark gray', 'themeLangDomain' ),
  19.    'slug'  => 'very-dark-gray',
  20.    'color' => '#444',
  21.    ),
  22. ) );
  2. 一部の色は動的に変化します—「プライマリ」および「セカンダリ」色のように—たとえば、Twenty Nineteenテーマのように、プログラム的に説明することはできません。それにもかかわらず、適用可能な場合は、少なくともデフォルト値に対して意味のある`````name`````を提供することをお勧めします。  
  4. 色はパレット上に順番に表示され、指定できる数に制限はありません。  
  6. テーマは、異なるコンテキストで色を適用するクラスを作成する責任があります。コアブロックは「color」、「background-color」、および「border-color」コンテキストを使用します。したがって、「強いマゼンタ」をコアブロックのすべてのコンテキストに正しく適用するには、テーマがクラスを実装する必要があります。クラス名は「has-」を追加し、その後にケバブケースを使用したクラス名を追加し、コンテキスト名で終了します。  
  9. ``````bash
  10. .has-strong-magenta-color {
  11.    color: #a156b4;
  12. }
  14. .has-strong-magenta-background-color {
  15.    background-color: #a156b4;
  16. }
  18. .has-strong-magenta-border-color {
  19.    border-color: #a156b4;
  20. }
  21. `

WordPress 5.9以降、コアによって定義された色の値を上書きするには、theme.jsonを持たないテーマは、クラスを提供するのではなく、CSSカスタムプロパティを介して値を設定する必要があります。CSSカスタムプロパティは、次の命名--wp--preset--color--<slug>を使用します。詳細はこの開発ノートを参照してください。たとえば: 

  1. :root {
  2.    --wp--preset--color--cyan-bluish-gray: <new_value>;
  3.    --wp--preset--color--pale-pink: <new_value>;
  4. }

ブロックグラデーションプリセット

異なるブロックは、事前定義されたグラデーションのリストから選択する可能性があります。ブロックエディターはデフォルトのグラデーションプリセットを提供しますが、テーマはそれを上書きして独自のものを提供できます: 

  1. add_theme_support(
  2.    'editor-gradient-presets',
  3.    array(
  4.    array(
  5.    'name'     => esc_attr__( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
  6.    'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
  7.    'slug'     => 'vivid-cyan-blue-to-vivid-purple'
  8.    ),
  9.    array(
  10.    'name'     => esc_attr__( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
  11.    'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
  12.    'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
  13.    ),
  14.    array(
  15.    'name'     => esc_attr__( 'Light green cyan to vivid green cyan', 'themeLangDomain' ),
  16.    'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
  17.    'slug'     => 'light-green-cyan-to-vivid-green-cyan',
  18.    ),
  19.    array(
  20.    'name'     => esc_attr__( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ),
  21.    'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
  22.    'slug'     => 'luminous-vivid-amber-to-luminous-vivid-orange',
  23.    ),
  24.    array(
  25.    'name'     => esc_attr__( 'Luminous vivid orange to vivid red', 'themeLangDomain' ),
  26.    'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
  27.    'slug'     => 'luminous-vivid-orange-to-vivid-red',
  28.    ),
  29.    )
  30. );
  2. テーマは、グラデーションを適用するクラスを作成する責任があります。したがって、「鮮やかなシアンブルーから鮮やかな紫」を正しく適用するには、テーマは次のクラスを実装する必要があります:  
  5. ``````bash
  6. .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
  7.    background: linear-gradient(
  8.    135deg,
  9.    rgba( 6, 147, 227, 1 ) 0%,
  10.    rgb( 155, 81, 224 ) 100%
  11.    );
  12. }
  13. `

WordPress 5.9以降、コアによって定義されたグラデーションの値を上書きするには、theme.jsonを持たないテーマは、クラスを提供するのではなく、CSSカスタムプロパティを介して値を設定する必要があります。CSSカスタムプロパティは、次の命名--wp--preset--gradient--<slug>を使用します。詳細はこの開発ノートを参照してください。たとえば: 

  1. :root {
  2.    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: <new_value>;
  3.    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: <new_value>;
  4. }

ブロックフォントサイズ

ブロックは、ユーザーが使用するフォントサイズを設定できるようにする場合があります。たとえば、段落ブロックです。ブロックはデフォルトのフォントサイズのセットを提供しますが、テーマはそれを上書きして独自のものを提供できます: 

  1. add_theme_support( 'editor-font-sizes', array(
  2.    array(
  3.    'name' => esc_attr__( 'Small', 'themeLangDomain' ),
  4.    'size' => 12,
  5.    'slug' => 'small'
  6.    ),
  7.    array(
  8.    'name' => esc_attr__( 'Regular', 'themeLangDomain' ),
  9.    'size' => 16,
  10.    'slug' => 'regular'
  11.    ),
  12.    array(
  13.    'name' => esc_attr__( 'Large', 'themeLangDomain' ),
  14.    'size' => 36,
  15.    'slug' => 'large'
  16.    ),
  17.    array(
  18.    'name' => esc_attr__( 'Huge', 'themeLangDomain' ),
  19.    'size' => 50,
  20.    'slug' => 'huge'
  21.    )
  22. ) );

フォントサイズは、テーマが提供する順序でフォントサイズピッカーにレンダリングされます。

テーマは、正しいフォントサイズスタイルを適用するクラスを作成する責任があります。

クラス名は「has-」を追加し、その後にフォントサイズ名をケバブケースで使用し、-font-sizeで終了します。

通常のフォントサイズの例として、テーマは次のクラスを提供することができます。 

  1. .has-regular-font-size {
  2.    font-size: 16px;
  3. }

注意: スラグ「default」と「custom」は予約されており、テーマで使用することはできません。

WordPress 5.9以降、コアによって定義されたフォントサイズの値を上書きするには、theme.jsonを持たないテーマは、クラスを提供するのではなく、CSSカスタムプロパティを介して値を設定する必要があります。CSSカスタムプロパティは、次の命名--wp--preset--font-size--<slug>を使用します。詳細はこの開発ノートを参照してください。たとえば: 

  1. :root {
  2.    --wp--preset--font-size--small: <new_value>;
  3.    --wp--preset--font-size--large: <new_value>;
  4. }

カスタムフォントサイズの無効化

テーマは、次のコードを使用してカスタムフォントサイズの設定を無効にできます: 

  1. add_theme_support( 'disable-custom-font-sizes' );

設定されると、ユーザーはブロックエディターで提供されるデフォルトサイズまたはeditor-font-sizesテーマサポート設定を介して提供されるサイズに制限されます。

ブロックカラーパレットでのカスタムカラーの無効化

デフォルトでは、ブロックに提供されるカラーパレットは、ユーザーがエディターまたはテーマのデフォルトカラーとは異なるカスタムカラーを選択できるようにします。

テーマは、次のようにしてこの機能を無効にできます: 

  1. add_theme_support( 'disable-custom-colors' );

このフラグは、ユーザーがテーマが提供したeditor-color-paletteからの色、またはテーマが提供しなかった場合はエディターのデフォルトカラーからのみ色を選択できるようにします。

カスタムグラデーションの無効化

テーマは、次のコードを使用してカスタムグラデーションの設定を無効にできます: 

  1. add_theme_support( 'disable-custom-gradients' );

設定されると、ユーザーはブロックエディターで提供されるデフォルトのグラデーションまたはeditor-gradient-presetsテーマサポート設定を介して提供されるグラデーションに制限されます。

ベースレイアウトスタイルの無効化

*注意: WordPress 6.1以降.*

テーマは、グループ、カラム、ボタン、ソーシャルアイコンを含むコアブロックのデフォルトの構造スタイルを提供する生成されたブロックレイアウトスタイルをオプトアウトできます。次のコードを使用することで、これらのテーマは独自の構造スタイリングを提供することを約束します。この機能を使用すると、コアブロックがエディターとサイトのフロントエンドの両方で正しく表示されなくなります: 

  1. add_theme_support( 'disable-layout-styles' );
  1.  <a name="supporting-custom-line-heights"></a>
  4. ### カスタム行の高さのサポート
  6. 段落や見出しのような一部のブロックは、行の高さをカスタマイズすることをサポートしています。テーマは、次のコードを使用してこの機能のサポートを有効にできます:  
  9. ``````bash
  10. add_theme_support( 'custom-line-height' );
  11. `

カスタム単位のサポート

ピクセルに加えて、ユーザーはサイズ、パディングを定義するために他の単位を使用できます。利用可能な単位は次のとおりです: px、em、rem、vh、vw。テーマは、次のコードを使用してこの機能のサポートを無効にできます: 

  1. add_theme_support( 'custom-units', array() );

テーマは、利用可能なカスタム単位をフィルタリングすることもできます。 

  1. add_theme_support( 'custom-units', 'rem', 'em' );

デフォルトのブロックパターンの無効化。

WordPressには、いくつかの組み込みのブロックパターンが付属しています。テーマは、次のコードを使用してバンドルされたパターンをオプトアウトし、独自のセットを提供できます: 

  1. remove_theme_support( 'core-block-patterns' );

エディタースタイル

ブロックエディターはテーマのエディタースタイルをサポートしていますが、クラシックエディターとは少し異なります。

クラシックエディターでは、エディタースタイルシートはWYSIWYGエディターのiframeに直接読み込まれ、変更はありません。ブロックエディターは、しかし、iframeを使用しません。スタイルがエディターのコンテンツにのみ適用されるようにするために、特定のCSSセレクタを選択的に書き換えたり調整したりすることで、エディタースタイルを自動的に変換します。これにより、ブロックエディターはブロックバリエーションのプレビューでエディタースタイルを活用できます。

たとえば、エディタースタイルにbody { ... }と書くと、これは.editor-styles-wrapper { ... }に書き換えられます。これは、エディタークラス名を直接ターゲットにしないべきことを意味します。

少し異なるため、テーマに追加のスニペットを追加することでオプトインする必要があります。add_editor_style関数に加えて: 

  1. add_theme_support( 'editor-styles' );

エディタースタイルをあまり変更する必要はありません。ほとんどのテーマは、上記のスニペットを追加し、クラシックエディターとブロックエディター内で同様の結果を得ることができます。

エディタースタイルのエンキュー

add_editor_style関数を使用して、エディタースクリーンでCSSをエンキューして読み込みます。クラシックエディターでは、これはエディターにスタイルを追加するために必要な唯一の関数でした。新しいブロックエディターでは、最初にadd_theme_support( 'editor-styles');を上記のようにする必要があります。 

  1. add_editor_style( 'style-editor.css' );

それをfunctions.phpファイルに追加すると、スタイルシートstyle-editor.cssがエディターで読み込まれるスタイルシートのキューに追加されます。

基本色

エディターを他のウェブページのようにスタイリングできます。背景色とフォント色を青に変更する方法は次のとおりです: 

  1. /* Add this to your `style-editor.css` file */
  2. body {
  3.    background-color: #d3ebf3;
  4.    color: #00005d;
  5. }

エディターの幅を変更する

エディターのメインカラムの幅を変更するには、次のCSSをstyle-editor.cssに追加します: 

  1. /* Main column width */
  2. .wp-block {
  3.    max-width: 720px;
  4. }
  6. /* Width of "wide" blocks */
  7. .wp-block[data-align='wide'] {
  8.    max-width: 1080px;
  9. }
  11. /* Width of "full-wide" blocks */
  12. .wp-block[data-align='full'] {
  13.    max-width: none;
  14. }

これらのエディター幅をテーマの幅に合わせることができます。%やpxなど、任意のCSS幅単位を使用できます。

さらに読む: スタイルシートでのスタイルの適用。

レスポンシブ埋め込みコンテンツ

埋め込みブロックは、埋め込まれたコンテンツのアスペクト比を反映するために、埋め込まれたコンテンツに自動的にスタイルを適用します。アスペクト比レスポンシブスタイルでスタイリングされたブロックは次のようになります: 

  1. <figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio">...</figure>

コンテンツがサイズ変更され、アスペクト比を維持するには、<body>要素にwp-embed-responsiveクラスが必要です。これはデフォルトでは設定されておらず、テーマがresponsive-embeds機能にオプトインする必要があります: 

  1. add_theme_support( 'responsive-embeds' );

間隔の制御

一部のブロックにはパディングコントロールがあります。これはデフォルトでオフになっており、テーマがサポートを宣言することでオプトインする必要があります: 

  1. add_theme_support( 'custom-spacing' );

リンクカラーコントロール

リンクサポートは、WordPress 5.8の一部として安定しました。デフォルトではfalseであり、テーマはtheme.jsonファイルを介してそれを有効にできます: 

  1. {
  2.    "settings": {
  3.    "color": {
  4.    "link": true
  5.    }
  6.    }
  7. }

代わりに、Gutenbergプラグインがアクティブな場合、古いレガシーサポートadd_theme_support( 'experimental-link-color' )も機能します。このフォールバックは、GutenbergプラグインがWordPress 5.9を最小バージョンとして要求する場合に削除されます。
ユーザーがブロックのリンクカラーを設定すると、新しいスタイルが次の形式で追加されます: 

  1. .wp-elements-<uuid> a {
  2.    color: <link-color> !important;
  3. }

ここで

  • <uuid>はランダムな数です
  • <link-color>は、ユーザーがプリセット値を選択した場合はvar(--wp--preset--color--slug)、カスタム値を選択した場合は生の色値です

ブロックにはクラス.wp-elements-<uuid>が付与されます。

外観ツール

この設定を使用して、次のグローバルスタイル設定を有効にします:

  • ボーダー: 色、半径、スタイル、幅
  • 色: リンク
  • スペーシング: blockGap、マージン、パディング
  • タイポグラフィ: 行の高さ
  • 寸法: アスペクト比、最小高さ
  • 位置: スティッキー
  1. add_theme_support( 'appearance-tools' );

ボーダー

これを使用して、すべてのボーダー設定を有効にします: 

  1. add_theme_support( 'border' );

リンクカラー

これを使用して、リンクカラー設定を有効にします: 

  1. add_theme_support( 'link-color' );

ブロックベースのテンプレートパーツ

ブロックベースのテンプレートパーツは、管理者がブロックを使用してサイトの一部を編集できるようにします。これはデフォルトでオフになっており、テーマがサポートを宣言することでオプトインする必要があります: 

  1. add_theme_support( 'block-template-parts' );

この機能は、ブロックベースのテーマには関連しません。ブロックベースのテーマは、すでにサイトエディターの一部としてブロックベースのテンプレートパーツをサポートしています。

スタンドアロンのテンプレートパートエディターでは、エディターが新しいテンプレートパーツを作成したり、既存のテンプレートパーツを削除したりすることはできません。これは、テーマが手動でPHPテンプレートにテンプレートパートを含める必要があるためです。

ブロックベースのテンプレートパーツについての詳細は、テーマハンドブックのブロックテンプレートとテンプレートパーツセクションで確認できます。