Gutenberg カスタム ブロックを作成しました。私のGutenbergカスタムブロック
このブロックでは、背景色 (緑) とテキストの色を変更する必要があります。デフォルトの Gutenberg 段落やその他のブロックをクリックすると表示される、組み込みの Gutenberg カラー パレットを有効にする方法はありますか。
これが私の Gutenberg ブロックのコードです。
( function( blocks, components, i18n, element ) {
var el = element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var RichText = wp.blocks.RichText;
var BlockControls = wp.blocks.BlockControls;
var AlignmentToolbar = wp.blocks.AlignmentToolbar;
var MediaUpload = wp.blocks.MediaUpload;
var InspectorControls = wp.blocks.InspectorControls;
var TextControl = wp.components.TextControl;
registerBlockType( 'futurelab/color-block', { // The name of our block. Must be a string with prefix. Example: my-plugin/my-custom-block.
title: i18n.__( 'Color Block' ), // The title of our block.
description: i18n.__( 'A custom block for displaying color blocks.' ), // The description of our block.
icon: 'media-document', // Dashicon icon for our block. Custom icons can be added using inline SVGs.
category: 'common', // The category of the block.
attributes: {
title: {
type: 'array',
source: 'children',
selector: 'h3',
},
content: {
type: 'array',
source: 'children',
selector: 'p',
},
buttonText: {
type: 'array',
source: 'children',
selector: 'span',
},
buttonURL: {
type: 'url',
selector:'div'
},
},
// The "edit" property must be a valid function.
edit: function( props ) {
var title = props.attributes.title; // Content in our block.
var content = props.attributes.content; // Content in our block.
var buttonText = props.attributes.buttonText; // Content in our block.
var buttonURL = props.attributes.buttonURL;
/**
* Update title on change.
*/
function onChangeTitle( newTitle ) {
props.setAttributes( { title: newTitle } );
}
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}
function onChangeButtonText( newButtonText ) {
props.setAttributes( { buttonText: newButtonText } );
}
// The editable title.
return [
el( InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel.
el( components.PanelBody, {
title: i18n.__( 'Color Block Settings' ),
className: 'block-social-links',
initialOpen: true,
},
el( 'p', {}, i18n.__( 'Enter the button url here to navigate button when click.' ) ),
el( TextControl, {
type: 'url',
label: i18n.__( 'Button URL' ),
value: buttonURL,
onChange: function( newButton ) {
props.setAttributes( { buttonURL: newButton } );
},
} ),
),
),
el(
'div',
{className: props.className + ' color-content-block'},
el(RichText, // Editable React component.
{
tagName: 'h3', // <p></p>.
className: props.className, // The class="wp-editor-gb-03-block-editable".
value: title, // Content in our block. i.e. props.attributes.title;
placeholder: 'Block Title...',
keepPlaceholderOnFocus: true,
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus,
onChange: onChangeTitle
}
),
el(RichText, // Editable React component.
{
tagName: 'p', // <p></p>.
className: props.className + ' block-content', // The class="wp-editor-gb-03-block-editable".
onChange: onChangeContent, // Run the onChangeContent() function onChange of title.
placeholder: 'Block Content...',
value: content, // Content in our block. i.e. props.attributes.title;
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus
}
),
el (
'span',
{ className: props.className + ' btn' },
el(RichText, // Editable React component.
{
tagName: 'span', // <p></p>.
className: props.className, // The class="wp-editor-gb-03-block-editable".
placeholder: 'Button Title...',
onChange: onChangeButtonText, // Run the onChangeContent() function onChange of title.
value: buttonText, // Content in our block. i.e. props.attributes.title;
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus,
}
),
),
el (
'div',
{ className: props.className + ' display-none' },
buttonURL,
),
)
]
},
// The "save" property must be specified and must be a valid function.
save: function( props ) {
var title = props.attributes.title; // Content in our block.
var content = props.attributes.content; // Content in our block.
var buttonText = props.attributes.buttonText; // Content in our block.
var buttonURL = props.attributes.buttonURL;
// The frontend title.
return el(
'div',
{className: 'color-title-block'},
el( 'h3', { // <p></p>.
className:'', // The class="wp-block-gb-block-editable-03".
},
title,
),
el( 'p', { // <p></p>.
className:'block-content', // The class="wp-block-gb-block-editable-03".
},
content,
),
el('span', {
className: 'btn'
},
buttonText,
),
el( 'div', {
className: ''
},
buttonURL
),
);
},
} );
} )(
window.wp.blocks,
window.wp.components,
window.wp.i18n,
window.wp.element,
);
それを手伝ってください。