Skip to content

Instantly share code, notes, and snippets.

@technote-space
Last active January 20, 2019 03:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save technote-space/0fa781400bd143cae75eaff3acafb24c to your computer and use it in GitHub Desktop.
Save technote-space/0fa781400bd143cae75eaff3acafb24c to your computer and use it in GitHub Desktop.
子テーマへの追加例
(function (richText, element, editor) {
const name = 'my-theme/my-theme';
const title = 'test-title';
const className = 'test-class';
richText.registerFormatType(name, {
title: title,
tagName: 'span',
className: className,
edit: function ({isActive, value, onChange}) {
return element.createElement(editor.RichTextToolbarButton, {
icon: 'admin-customizer',
title: title,
onClick: function () {
onChange(richText.toggleFormat(value, {
type: name
}));
},
isActive: isActive,
className: 'test-button-class'
});
},
});
}(
window.wp.richText,
window.wp.element,
window.wp.editor
));
<?php
/* ... 省略 ... */
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script( 'my-theme-editor-js', get_theme_file_uri( 'editor.js' ), [
'wp-element',
'wp-rich-text',
'wp-editor',
] );
} );
/*
Theme Name: ....
*/
/* ... 省略 ... */
.test-class {
display: inline;
background-position: left -100% center;
background-repeat: repeat-x;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ff6 50%);
background-size: 200% .6em;
font-weight: bold;
padding-bottom: .6em;
}
.test-button-class {
/* background: ... */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment