我创建了一个Gutenberg自定义块。 My Gutenberg custom block
在这个块中，我需要更改背景颜色（绿色）和文本颜色。有没有办法让我启用内置的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,
);
请帮帮我。
您需要添加一个属性来存储颜色，然后将编辑函数包装在名为withColors的高阶组件中，并在InspectorControls中包含PanelColorSettings，两者都在wp.editor中。
var PanelColorSettings = wp.editor.ColorPanelSettings;
var withColors = wp.editor.withColors
var compose = wp.compose.compose
...
attributes: {
myColorAttributeName: {
type: 'string'
}
}
...
edit: compose([withColors('myColorAttributeName')])(myRegularEditFunction)
这会暴露一个新的prop函数，它自动被称为setMyColorAttributeName（如setAttributes()），您可以在PanelColorSettings元素onChange函数中使用它。
使用更完整的示例更新响应
// get these from the wp object.
const { withColors, PanelColorSettings, getColorClassName } = wp.editor;
const { compose } = wp.compose;
const { Fragment } = wp.element;
...
/** extract your edit component into a function like this.
* this will give you a settings panel on the sidebar with
* the color swatches and handle the onChange function
*/
const EditComponent = ({colorScheme, setColorScheme} /* and your other props */) => (
<Fragment>
<InspectorControls>
<PanelColorSettings
title={ 'Color Options' }
colorSettings={ [
{
value: colorScheme.color,
label: 'Block Color Scheme',
onChange: setColorScheme,
},
] }
/>
</InspectorControls>
<YOUR-ACTUAL-BLOCK-MARKUP />
<Fragment>
);
...
registerBlockType( 'namespace/blockslug', {
...
edit: compose( [withColors('colorScheme')] )(EditComponent)
});
添加此标记后，您可以在渲染功能中访问getColorClassName( 'background-color', attributes.colorScheme)。在这个例子中它返回类似has-purple-background-color的东西。编写一些应该更容易的东西是很多代码，但它可以工作。
自从WP 5正式发布以来，WP和Gutenberg团队可能已经改变了这一点，但它仍然在WP 5.1.1上为我工作，所以，我正在提交它。