admin管理员组文章数量:1325522
I have created a gutenberg block and a select control that has some class names.
The select control is in its own panel in the sidebar.
My issue is when I try to call the select controls value/size. All I get is undefined.
Where am I going wrong how do I get the MySelectControls value and have that value stored when editing/saving the block?
// Import CSS.
import './style.scss';
import './editor.scss';
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const { Panel, PanelBody, PanelRow, SelectControl } = wpponents;
const { createHigherOrderComponent, withState } = wppose;
const { createHooks, addFilter, removeFilter, applyFilters } = wp.hooks;
// Create my select control
const MySelectControl = withState( {
size: 'display-2',
} )( ( { size, setState } ) => (
<SelectControl
label="Size"
value={ size }
options={ [
{ label: 'Display-1', value: 'display-1' },
{ label: 'Display-2', value: 'display-2' },
{ label: 'Display-3', value: 'display-3' },
{ label: 'Display-4', value: 'display-4' },
] }
onChange={ ( size ) => { setState( { size } ) } }
/>
) );
//Block Options - Render it in a panel
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
return (props) => {
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title="My Block Settings"
icon="welcome-widgets-menus"
initialOpen={ true }
>
<PanelRow>
<MySelectControl /> // get this value
</PanelRow>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, "withInspectorControl" );
wp.hooks.addFilter( 'editor.BlockEdit', 'cgb/block-display-heading', withInspectorControls );
function handleSize(){
return MySelectControl.size; // get the value
}
const sizeH = handleSize(); // store the value
registerBlockType( 'cgb/block-display-heading', {
title: __( 'display-heading - CGB Block' ),
icon: 'shield',
category: 'common',
keywords: [
__( 'Display Heading' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'h1',
}
},
edit: function( props ) {
console.log(sizeH);
const { attributes: { content }, setAttributes, className, size } = props;
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } );
};
return (
<div class="display_wrapper">
<RichText
tagName="h1"
className={ className + ' ' + sizeH } // display the value here
onChange={ onChangeContent }
value={ content }
placeholder="Enter text..."
/>
</div>
);
},
save: function( props ) {
return (
<div class="display_wrapper">
<RichText.Content tagName="h1" className={`testing ` + sizeH } value={ props.attributes.content } /> // and here!
</div>
);
},
} );
I have created a gutenberg block and a select control that has some class names.
The select control is in its own panel in the sidebar.
My issue is when I try to call the select controls value/size. All I get is undefined.
Where am I going wrong how do I get the MySelectControls value and have that value stored when editing/saving the block?
// Import CSS.
import './style.scss';
import './editor.scss';
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const { Panel, PanelBody, PanelRow, SelectControl } = wpponents;
const { createHigherOrderComponent, withState } = wppose;
const { createHooks, addFilter, removeFilter, applyFilters } = wp.hooks;
// Create my select control
const MySelectControl = withState( {
size: 'display-2',
} )( ( { size, setState } ) => (
<SelectControl
label="Size"
value={ size }
options={ [
{ label: 'Display-1', value: 'display-1' },
{ label: 'Display-2', value: 'display-2' },
{ label: 'Display-3', value: 'display-3' },
{ label: 'Display-4', value: 'display-4' },
] }
onChange={ ( size ) => { setState( { size } ) } }
/>
) );
//Block Options - Render it in a panel
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
return (props) => {
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title="My Block Settings"
icon="welcome-widgets-menus"
initialOpen={ true }
>
<PanelRow>
<MySelectControl /> // get this value
</PanelRow>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, "withInspectorControl" );
wp.hooks.addFilter( 'editor.BlockEdit', 'cgb/block-display-heading', withInspectorControls );
function handleSize(){
return MySelectControl.size; // get the value
}
const sizeH = handleSize(); // store the value
registerBlockType( 'cgb/block-display-heading', {
title: __( 'display-heading - CGB Block' ),
icon: 'shield',
category: 'common',
keywords: [
__( 'Display Heading' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'h1',
}
},
edit: function( props ) {
console.log(sizeH);
const { attributes: { content }, setAttributes, className, size } = props;
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } );
};
return (
<div class="display_wrapper">
<RichText
tagName="h1"
className={ className + ' ' + sizeH } // display the value here
onChange={ onChangeContent }
value={ content }
placeholder="Enter text..."
/>
</div>
);
},
save: function( props ) {
return (
<div class="display_wrapper">
<RichText.Content tagName="h1" className={`testing ` + sizeH } value={ props.attributes.content } /> // and here!
</div>
);
},
} );
Share
Improve this question
edited May 3, 2019 at 15:08
Astrid
asked May 3, 2019 at 13:14
AstridAstrid
1231 silver badge12 bronze badges
1 Answer
Reset to default 1I managed to solve this by doing this: -
- Create a select control in the edit function.
{
<SelectControl
label="Size"
value={ size }
options={ [
{ label: 'Display 1', value: 'display-1' },
{ label: 'Display 2', value: 'display-2' },
{ label: 'Display 3', value: 'display-3' },
{ label: 'Display 4', value: 'display-4' },
] }
onChange={ ( size ) => props.setAttributes( { size: size } ) }
/>
}
- Create an attribute (size)
- Change the select control to change the size attribute
- Pass the props to the save function props.attributes.size
本文标签: pluginsPassing select control value to block
版权声明:本文标题:plugins - Passing select control value to block 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742195743a2431047.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论