【WP】ブロックバリエーションサンプル
例）ボタングループ
registerBlockVariation( 'core/buttons', [
{
name: 'my-block-pagenav',
title: 'ページナビ',
description: 'ページ内リンク用のブロック',
category: 'my-blocks',
icon: 'button',
attributes: {
layout: {
type: 'flex',
justifyContent: 'center',
},
style: {
spacing: {
margin: {
bottom: 'var:preset|spacing|70',
},
blockGap: 'var:preset|spacing|20',
},
},
},
innerBlocks: [
[ 'core/button',
{
backgroundColor: 'my-dark-accent',
style: {
border: {
radius: '0px'
},
},
fontSize: 'x-large',
},
],
[ 'core/button',
{
backgroundColor: 'my-dark-accent',
style: {
border: {
radius: '0px'
},
},
fontSize: 'x-large',
},
],
[ 'core/button',
{
backgroundColor: 'my-dark-accent',
style: {
border: {
radius: '0px'
},
},
fontSize: 'x-large',
},
],
[ 'core/button',
{
backgroundColor: 'my-dark-accent',
style: {
border: {
radius: '0px'
},
},
fontSize: 'x-large',
},
],
],
scope: [ 'inserter' ],
},
]); 例）GoogleMap
HTMLブロック
js
registerBlockVariation('core/html', [
{
name: 'my-block-googlemap',
title: 'Googleマップ',
description: 'レスポンシブに対応したGoogleマップ用のブロック',
category: 'my-blocks',
icon: 'location',
attributes: {
content: '<div class="googlemap"><iframe></iframe></div>',
},
scope: ['inserter'],
},
]);例）背景色付ボックス
js
registerBlockVariation('core/group', [
{
name: 'my-block-bg-box',
title: '背景色ボックス',
description: '背景色が付きのボックス',
category: 'my-blocks',
icon: 'text-page',
attributes: {
backgroundColor:'my-light-blue',
layout:{
type:'constrained',
},
},
innerBlocks: [
['core/paragraph',
{
content: 'テキストを入力…',
},
],
],
scope: ['inserter'],
},
]);例）見出し付画像1つ
グループブロックの中にいれてblockGapで見出しと画像の間を小さくしている。
js
registerBlockVariation('core/group', [
{
name: 'my-block-1img',
title: '画像1つ',
description: '見出しの付いた画像',
category: 'my-blocks',
icon: 'format-image',
attributes: {
style:{
spacing:{blockGap:'var:preset|spacing|20'},
},
layout:{
type:'constrained',
},
},
innerBlocks: [
['core/heading',
{
textAlign:'center',
fontSize:'x-large',
content: 'テキストを入力…',
},
],
['core/image',
{
align:'center',
id: 769,
width:450,
height:300,
sizeSlug:'full',
linkDestination:'none',
url: 'http://localhost:10016/wp-content/uploads/2023/04/no-img-1.png',
caption: 'キャプションを入力…',
},
],
],
scope: ['inserter'],
},
]);例）見出し付画像2つ
カラムブロックの中にいれてblockGapで見出しと画像の間を小さくしている。
カラム間のGapもデフォルトより大きく（60）にしている。
js
registerBlockVariation('core/columns', [
{
name: 'my-block-2img',
title: '画像2つ',
description: '見出しの付いた画像',
category: 'my-blocks',
icon: 'format-gallery',
attributes: {
style:{
spacing:{
blockGap:{
top:"var:preset|spacing|60",
left:"var:preset|spacing|60",
},
},
},
},
innerBlocks: [
['core/column',
{
style:{
spacing:{
blockGap:'var:preset|spacing|20',
}
},
},
[
['core/heading',
{
textAlign:'center',
fontSize:'large',
content: 'テキストを入力…',
},
],
['core/image',
{
align:'center',
id: 763,
sizeSlug:'full',
linkDestination:'none',
url: 'https://resco-f.com/wp/wp-content/uploads/2023/04/no-img.png',
caption: 'キャプションを入力…',
},
],
],
],
['core/column',
{
style:{
spacing:{
blockGap:'var:preset|spacing|20',
}
},
},
[
['core/heading',
{
textAlign:'center',
fontSize:'large',
content: 'テキストを入力…',
},
],
['core/image',
{
align:'center',
id: 763,
sizeSlug:'full',
linkDestination:'none',
url: 'https://resco-f.com/wp/wp-content/uploads/2023/04/no-img.png',
caption: 'キャプションを入力…',
},
],
],
],
],
scope: ['inserter'],
},
]); 例）カラムブロックで
画像左＆テキスト右 / テキスト左＆画像右
画像左＆テキスト右
js
registerBlockVariation('core/columns', [
{
name: 'my-block-img-text',
title: '画像 テキスト',
description: '左に画像、右にテキストを配置したカラム',
category: 'my-blocks',
icon: 'align-pull-left',
innerBlocks: [
['core/column',
{},
[
['core/image',
{
align: 'center',
id: 769,
sizeSlug: 'full',
linkDestination: 'none',
url: 'http://localhost:10016/wp-content/uploads/2023/04/no-img-1.png',
caption: "キャプションを入力…",
}
],
],
],
['core/column',
{},
[
['core/paragraph',
{
content: 'テキストを入力…',
}
],
]
],
],
scope: ['inserter'],
},
]);テキスト左&画像右
スマートフォンではテキストを画像の下にする必要があるため、classNameを追加。
js
registerBlockVariation('core/columns', [
{
name: 'my-block-text-img',
title: 'テキスト 画像',
description: '左にテキスト、右に画像を配置したカラム',
category: 'my-blocks',
icon: 'align-pull-right',
attributes: {
className: 'my-block-text-img',
},
innerBlocks: [
['core/column',
{},
[
['core/paragraph',
{
content: 'テキストを入力…',
}
],
]
],
['core/column',
{},
[
['core/image',
{
align: 'center',
id: 769,
sizeSlug: 'full',
linkDestination: 'none',
url: 'http://localhost:10016/wp-content/uploads/2023/04/no-img-1.png',
caption: 'キャプションを入力…',
},
],
],
],
],
scope: ['inserter'],
},
]);CSS
// テキスト左、画像右ブロック
.wp-block-columns.my-block-text-img {
.wp-block-column:first-child {
@media (max-width: 781px) {
order: 2;
}
}
}例）下線見出し
js
registerBlockVariation('core/heading', [
{
name: 'my-block-heading-underbar',
title: '下線見出し',
description: '下線の付いた見出し',
category: 'my-blocks',
icon: 'edit',
attributes: {
className: 'is-style-heading-underbar',
content: '見出しを入力…'
},
scope: ['inserter'],
},
]);例）リード文
少し大きいフォントサイズの太字テキスト
※theme.jsonでtypography.fontWeightをtrueにする
js
registerBlockVariation('core/paragraph', [
{
name: 'my-block-lead',
title: 'リード文',
description: '少し大きいフォントサイズの太字テキスト',
category: 'my-blocks',
icon: 'edit',
attributes: {
style: {
typography: {
fontWeight: '700',
},
},
fontSize: 'large',
content: 'テキストを入力…',
},
scope: ['inserter'],
},
]);例）FAQ用のブロックバリエーション
構成
core/group
├ core/group //【質問】インナーブロック
└ core/group //【答え】インナーブロックjs
registerBlockVariation( 'core/group', [
{
name: 'my-block-faq',
title: 'FAQ',
description: '質問と答えのブロック',
category: 'my-blocks',
icon: 'editor-help',
attributes: {
className: 'my-block-faq',
},
innerBlocks: [
[ 'core/group',
{
className: 'my-block-faq__q',
style: {
spacing: {
blockGap: '10px',
}
}
},
[
[ 'core/paragraph',
{
placeholder: '質問をここに入力…',
lock: {
move: true,
remove: true,
},
},
],
],
],
[ 'core/group',
{
className: 'my-block-faq__a',
style: {
spacing: {
blockGap: '10px',
},
},
},
[
[ 'core/paragraph',
{
placeholder: '回答をここに入力…',
lock: {
move: true,
remove: true,
},
},
],
],
],
],
scope: [ 'inserter' ],
},
] ); 例）ボタンにテキストとURLをセットしておくバリエーション
上部マージンやテキストサイズも
js
registerBlockVariation( 'core/buttons', [
{
name: 'my-block-present-button',
title: '応募するボタン',
description: 'プレゼントフォームへ誘導するボタン',
category: 'my-blocks',
icon: 'button',
example: undefined,
attributes: {
className: 'my-block-present-button',
layout : {
type: 'flex',
justifyContent: 'center',
},
style: {
layout: {
type: 'flex',
justifyContent: 'center',
},
spacing: {
margin: {
top: 'var:preset|spacing|70"',
},
},
},
},
innerBlocks: [
[ 'core/button',
{
fontSize: "xx-large",
text: 'このプレゼントに応募する',
url: '/recruit/entry/?company=XXX&job=XXX',
}
],
],
scope: [ 'inserter' ],
},
] );例）お買い物リスト用のブロックバリエーション
js
registerBlockVariation( 'core/group', [
{
name: 'my-block-shopping-box',
title: '買い物リスト例',
description: '買い物リスト例ボックス',
category: 'my-block',
icon: 'clipboard',
attributes: {
className: 'my-block-consultation-box',
style:{
border:{
radius:'4px',
width:'1px',
},
spacing:{
padding:{
right:'var:preset|spacing|70',
left:'var:preset|spacing|70',
top:'var:preset|spacing|50',
bottom:'var:preset|spacing|50'
},
margin:{
top:'var:preset|spacing|80'
},
},
},
borderColor: 'my/border-gray',
backgroundColor: 'my/background-gray',
layout:{
type: 'constrained',
},
},
innerBlocks: [
[ 'core/heading',
{
textAlign: 'center',
textColor: 'my/accent',
className: 'is-style-heading-plain',
content: '買い物リスト',
}
],
[
'core/list',
{},
[
['core/list-item',
{ placeholder: 'テキストを入力…' },
],
['core/list-item',
{ placeholder: 'テキストを入力…' },
],
['core/list-item',
{ placeholder: 'テキストを入力…' },
],
],
],
[
'core/buttons',
{
layout: {
type: 'flex',
justifyContent: 'right',
orientation: 'horizontal',
},
},
[
['core/button',
{
className: 'is-style-fill',
text: '右寄せボタン',
},
],
],
],
],
scope: [ 'inserter' ],
},
] );例）ボタンアイコンブロックバリエーション
js
registerBlockVariation( 'core/button', [
{
name: 'button-default',
isDefault: true,
title: '通常ボタン',
attributes: {
className: 'has-icon-default',
},
scope: [ 'transform' ],
},
{
name: 'button-no-icon',
title: 'アイコン無し',
attributes: {
className: 'has-icon-none',
},
scope: [ 'transform' ],
},
{
name: 'button-external',
title: '別ウィンドウアイコン',
attributes: {
className: 'has-icon-external',
},
scope: [ 'transform' ],
},
{
name: 'button-pdf',
title: 'PDFアイコン',
attributes: {
className: 'has-icon-pdf',
},
scope: [ 'transform' ],
},
] );