Я пытаюсь создать параметр в InspectorControls части блока Гутенберга. У меня есть поле для заполнения и поле для мобильного заполнения. Естественно, я могу применить 1 заполнение без проблем, однако, когда дело доходит до применения заполнения с указанным c размером экрана, я немного застрял, поскольку вы не можете сделать это при редактировании или сохранении действий.
Смотрите мой блок js ниже:
( function( blocks, editor, element, components ) {
var el = element.createElement,
RichText = editor.RichText,
Fragment = element.Fragment,
InspectorControls = editor.InspectorControls,
CheckboxControl = components.CheckboxControl,
RadioControl = components.RadioControl,
TextControl = components.TextControl,
ToggleControl = components.ToggleControl,
SelectControl = components.SelectControl,
RangeControl = components.RangeControl,
PanelBody = components.PanelBody,
PanelRow = components.PanelRow;
blocks.registerBlockType( 'gobuilder/gw-button', {
title: 'Feature Box',
icon: 'universal-access-alt',
category: 'layout',
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'p'
},
padding: {
type: 'number',
default: 30
},
mobilePadding: {
type: 'number',
default: 10
},
backgroundColor: {
type: 'string',
default: ''
},
textColor: {
type: 'string',
default: ''
}
},
edit: function( props ) {
var content = props.attributes.content,
padding = props.attributes.padding,
mobilePadding = props.attributes.mobilePadding,
textColor = props.attributes.textColor,
backgroundColor = props.attributes.backgroundColor;
function onChangeContent( newContent ) { props.setAttributes( { content: newContent } ) }
function onChangePadding (newPadding) { props.setAttributes( { padding: newPadding } ) }
function onChangeMobilePadding (newMobilePadding) { props.setAttributes( { mobilePadding: newMobilePadding } ) }
function onChangeBackgroundColor (newBackgroundColor) { props.setAttributes( { backgroundColor: newBackgroundColor } ) }
function onChangeTextColor (newTextColor) { props.setAttributes( { textColor: newTextColor } ) }
return (
el(
Fragment,
null,
el(
InspectorControls,
null,
el(
PanelBody,
{
title: 'Desktop Settings',
initialOpen: false
},
el(
PanelRow,
null,
el(
RangeControl,
{
heading: 'Padding',
label: 'Set the padding for desktop.',
help: 'This is in pixels.',
min: 0,
max: 200,
value: padding,
onChange: onChangePadding
}
)
),
el(
PanelRow,
null,
el(
TextControl,
{
heading: 'Background Colour',
label: 'Set the background colour.',
help: 'Ensure you enter a hex, rgb or standard name for the colour.',
value: backgroundColor,
onChange: onChangeBackgroundColor
}
)
),
el(
PanelRow,
null,
el(
TextControl,
{
heading: 'Text Colour',
label: 'Set the text colour.',
help: 'Ensure you enter a hex, rgb or standard name for the colour.',
value: textColor,
onChange: onChangeTextColor
}
)
)
),
el(
PanelBody,
{
title: 'Mobile Settings',
initialOpen: false
},
el(
PanelRow,
null,
el(
RangeControl,
{
heading: 'Mobile Padding',
label: 'Set the padding for mobile.',
help: 'This is in pixels.',
min: 0,
max: 100,
value: mobilePadding,
onChange: onChangeMobilePadding
}
)
),
),
),
el(
RichText,
{
tagName: 'p',
className: props.className,
onChange: onChangeContent,
value: content,
}
)
)
);
},
save: function( props ) {
var content = props.attributes.content,
padding = props.attributes.padding,
mobilePadding = props.attributes.mobilePadding,
backgroundColor = props.attributes.backgroundColor,
textColor = props.attributes.textColor,
if (isMobile) {
padding = mobilePadding
}
blockStyle = {
padding: padding,
backgroundColor: backgroundColor,
color: textColor
};
return el(
'div',
{ style: blockStyle },
el(
RichText.Content, {
tagName: 'p',
value: content,
}
),
el(
'h2',
null,
'Inspector Control Fields'
),
el(
'ul',
null,
el(
'li',
null,
'Padding Field: ',
padding + 'px'
),
el(
'li',
null,
'Padding Field: ',
mobilePadding + 'px'
)
),
);
}
});
}(
window.wp.blocks,
window.wp.editor,
window.wp.element,
window.wp.components
));