WordPress 6.6 で導入されるセクションスタイル機能を試す
WordPress 6.6 で導入されるセクションスタイル機能を試しました。
セクションスタイルは従来のブロックスタイル（ブロックスタイルバリエーション）機能を強化するもので、対象のブロックだけでなくそこに含まれるブロックや要素に対してもスタイルを付与できるものです。
また、セクションスタイルの導入に合わせて、テーマの styles/ 以下の JSON ファイルでセクションスタイル（通常のブロックスタイルも可）を追加できるようになりました。
動画の参考記事と動画内で仕様したコードをこちらに載せておきます。 再現してみたい方はご利用ください。
参考記事
コード
functions.php:
add_action( 'init', 'themeslug_register_block_styles' );
function themeslug_register_block_styles() {
// Add calls to register_block_style() here.
register_block_style( 'core/pullquote', [
'name' => 'boxed',
'label' => __( 'Boxed', 'themeslug' )
] );
register_block_style( 'core/post-terms', [
'name' => 'buttons',
'label' => __( 'Buttons', 'themeslug' )
] );
}
theme.json にマージする core/pullquote のスタイル:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"styles": {
"blocks": {
"core/pullquote": {
"variations": {
"boxed": {
"border": {
"color": "currentColor",
"style": "solid",
"width": "6px"
},
"spacing": {
"padding": {
"top": "var:preset|spacing|60",
"bottom": "var:preset|spacing|60",
"left": "var:preset|spacing|60",
"right": "var:preset|spacing|60"
}
}
}
}
}
}
}
}
theme.json にマージする core/pullquote のスタイル:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"styles": {
"blocks": {
"core/post-terms": {
"variations": {
"buttons": {
"elements": {
"link": {
"color": {
"background": "var:preset|color|contrast",
"text": "var:preset|color|base"
},
"spacing": {
"padding": {
"top": "var:preset|spacing|20",
"bottom": "var:preset|spacing|20",
"left": "var:preset|spacing|40",
"right": "var:preset|spacing|40"
}
},
"typography": {
"textDecoration": "none"
}
}
},
"css": "& .wp-block-post-terms__separator { display: none; }"
}
}
}
}
}
}
テーマディレクトリ/styles/block/section-1.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"slug": "section-1",
"title": "Section 1",
"blockTypes": [ "core/group", "core/columns" ],
"styles": {
"color": {
"background": "var:preset|color|contrast",
"text": "var:preset|color|base"
}
}
}
テーマディレクトリ/styles/block/section-2.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"slug": "section-2",
"title": "Section 2",
"blockTypes": [ "core/group", "core/columns" ],
"styles": {
"color": {
"background": "#cbd5e1",
"text": "var:preset|color|contrast"
}
}
}
テーマディレクトリ/styles/block/post-byline.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Post Byline",
"blockTypes": [ "core/group" ],
"styles": {
"elements": {
"link": {
"typography": {
"textDecoration": "none"
},
":focus": {
"typography": {
"textDecoration": "underline"
}
},
":hover": {
"typography": {
"textDecoration": "underline"
}
}
}
},
"blocks": {
"core/post-author-name": {
"typography": {
"fontFamily": "var:preset|font-family|primary",
"fontStyle": "italic"
}
}
}
}
}