
目次
スニペットに登録
// === ブロックエディター用カスタムマーカーボタン ===
function enqueue_custom_marker_buttons() {
wp_enqueue_script(
'custom-marker-buttons',
get_template_directory_uri() . '/new-js/marker-buttons.js',
array('wp-blocks', 'wp-dom-ready', 'wp-rich-text', 'wp-edit-post', 'wp-components', 'wp-element'),
null,
true
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_marker_buttons');
marker-buttons.js
テーマにアップロード
(function (wp) {
const { registerFormatType, toggleFormat } = wp.richText;
const { RichTextToolbarButton } = wp.blockEditor || wp.editor;
const markers = [
{
name: 'marker-blue',
title: '青マーカー',
className: 'marker_blue',
icon: 'edit',
},
{
name: 'marker-pink',
title: 'ピンクマーカー',
className: 'marker_pink',
icon: 'edit',
},
{
name: 'marker-yellow',
title: '黄マーカー',
className: 'marker_yel',
icon: 'edit',
},
];
markers.forEach((marker) => {
registerFormatType(`custom/${marker.name}`, {
title: marker.title,
tagName: 'span',
className: marker.className,
edit({ isActive, value, onChange }) {
return wp.element.createElement(RichTextToolbarButton, {
icon: marker.icon,
title: marker.title,
onClick: () => {
onChange(toggleFormat(value, { type: `custom/${marker.name}` }));
},
isActive,
});
},
});
});
})(window.wp);
