Gutenberg classname is not applying on Edit function
-
My custom gutenberg block is not adding the classname for the wrapper element on edit function.
Here’s my full block code –
/** * BLOCK: Tar Text Block One * * Registering a basic block with Gutenberg. * Simple block, renders and saves the same content without any interactivity. */ // Import CSS. import './style.scss'; import './editor.scss'; // let's us call registerBlockType() directly from the wp.blocks library const { registerBlockType } = wp.blocks; // let's us use the withAPIData() function from the wp.components library to access the Rest API const { PanelBody, RangeControl, SelectControl, Button } = wp.components; // let's us use the __() function from the wp.i18n library to translate strings const { __ } = wp.i18n; const { RichText, BlockControls, InspectorControls, AlignmentToolbar, MediaUpload, ColorPalette, PanelColor, BlockAlignmentToolbar, PanelColorSettings, } = wp.blockEditor; const textBlockOneEdit = ( props ) => { const { isSelected, className, setAttributes } = props; const { text, imgID, imgURL, textColor, textSize, textSizeP, bgColor, textP, alignment, elOrder, titleColor, sectionHeight } = props.attributes; //Handle Image changes const onSelectImage = ( media ) => { setAttributes( { imgURL: media.url, imgID: media.id, } ); }; function onChangeContent( newContent ) { setAttributes( { text: newContent } ); } function onChangeContentP( newContent ) { setAttributes( { textP: newContent } ); } function onChangeAlignment( newAlignment ) { setAttributes( { alignment: newAlignment } ); } const position = [ { value: 'left', label: __( 'Left' ) }, { value: 'center', label: __( 'Center' ) }, { value: 'right', label: __( 'Right' ) }, ]; const Order = [ { value: 'one', label: __( 'Image -> Text' ) }, { value: 'two', label: __( 'Text -> Image' ) }, ]; return [ isSelected && ( <InspectorControls key= { 'inspector' } > <PanelBody title={ 'Text Block Settings' }> <SelectControl label={ __( 'Content Order' ) } value={ elOrder } options={ Order.map( ({ value, label }) => ( { value: value, label: label, } ) ) } onChange={ ( newVal ) => { setAttributes( { elOrder: newVal } ) } } /> <RangeControl label= { __('Section Height', 'tar') } value= { sectionHeight } min= '40' max= '100' onChange={ (val) => setAttributes({ sectionHeight : val }) } /> <RangeControl label= { __('Title Size', 'tar') } value= { textSize } min= '25' max= '50' onChange={ (set) => setAttributes({ textSize : set }) } /> <RangeControl label= { __('Text Size', 'tar') } value= { textSizeP } min= '12' max= '20' onChange={ (sizeSetting) => setAttributes({ textSizeP : sizeSetting }) } /> <SelectControl label={ __( 'Text Alignment' ) } value={ alignment } options={ position.map( ({ value, label }) => ( { value: value, label: label, } ) ) } onChange={ ( newVal ) => { setAttributes( { alignment: newVal } ) } } /> <PanelColorSettings title={ __( 'Color Settings', 'tar' ) } colorSettings={ [ { value: titleColor, onChange: ( val ) => setAttributes( { titleColor: val } ), label: __( 'Title Color', 'tar' ), }, { value: textColor, onChange: ( val ) => setAttributes( { textColor: val } ), label: __( 'Text Color', 'tar' ), }, { value: bgColor, onChange: ( val ) => setAttributes( { bgColor: val } ), label: __( 'Background Color', 'tar' ), }, ] } > </PanelColorSettings> </PanelBody> </InspectorControls> ), <section className= { className } style={{ backgroundColor: <code>${bgColor}</code>}} > <div className={<code>wrapper order-${elOrder} wrapper-${sectionHeight}</code>}> <MediaUpload onSelect={ onSelectImage } type="image" value={ imgID } render={ ( { open } ) => ( <Button className={ imgID ? 'image-button' : 'button button-large' } onClick={ open }> { ! imgID ? __( 'Upload Image', 'tar' ) : <img src={ imgURL } alt={ __( 'text-section-one-image', 'tar' ) } /> } </Button> ) } /> </div> <div className={<code>textDiv text-${alignment}</code>}> <RichText tagName="h3" placeholder={ __( 'Geo Discovery', 'tar' ) } value={ text } onChange={onChangeContent} className={<code>title title-size-${textSize}</code>} style={{ color: titleColor }} /> <RichText tagName="p" placeholder={ __( 'Aenean vel justo nulla, at gravida elit. In hac habitasse platea dictumst. Quisque gravida commodo volutpat. Vivamus blandit risus in urna venenatis accumsan', 'tar' ) } value={ textP } className={<code>text text-size-${textSizeP}</code>} onChange={onChangeContentP} style={{ color: textColor }} /> </div> </section> ] } const textBlockOneSave = ( props ) => { const { text, imgID, imgURL, textColor, textSize, textSizeP, bgColor, textP, alignment, elOrder, titleColor, sectionHeight } = props.attributes; return ( <section className={<code>text-section-one</code>} style={{ backgroundColor: <code>${bgColor}</code>}}> <div className={<code>wrapper order-${elOrder} wrapper-${sectionHeight}</code>} style={{backgroundImage: <code>url('${imgURL}')</code>}}> </div> <div className={<code>textDiv text-${alignment}</code>}> <RichText.Content tagName="h3" value={ text } className={<code>title title-size-${textSize}</code>} style={{ color: titleColor }} /> <RichText.Content tagName="p" value={ textP } className={<code>text text-size-${textSizeP}</code>} style={{ color: textColor }} /> </div> </section> ) } registerBlockType('tar-theme/tar-text-block-one',{ title: __( 'Text Block One', 'tar' ), icon: <svg class="svg-icon" viewBox="0 0 20 20"> <path fill="#2196F3" d="M14.999,8.543c0,0.229-0.188,0.417-0.416,0.417H5.417C5.187,8.959,5,8.772,5,8.543s0.188-0.417,0.417-0.417h9.167C14.812,8.126,14.999,8.314,14.999,8.543 M12.037,10.213H5.417C5.187,10.213,5,10.4,5,10.63c0,0.229,0.188,0.416,0.417,0.416h6.621c0.229,0,0.416-0.188,0.416-0.416C12.453,10.4,12.266,10.213,12.037,10.213 M14.583,6.046H5.417C5.187,6.046,5,6.233,5,6.463c0,0.229,0.188,0.417,0.417,0.417h9.167c0.229,0,0.416-0.188,0.416-0.417C14.999,6.233,14.812,6.046,14.583,6.046 M17.916,3.542v10c0,0.229-0.188,0.417-0.417,0.417H9.373l-2.829,2.796c-0.117,0.116-0.71,0.297-0.71-0.296v-2.5H2.5c-0.229,0-0.417-0.188-0.417-0.417v-10c0-0.229,0.188-0.417,0.417-0.417h15C17.729,3.126,17.916,3.313,17.916,3.542 M17.083,3.959H2.917v9.167H6.25c0.229,0,0.417,0.187,0.417,0.416v1.919l2.242-2.215c0.079-0.077,0.184-0.12,0.294-0.12h7.881V3.959z"></path></svg>, description: __('Text block one for Tar Theme', 'tar'), category: __('tar-blocks', 'tar'), align: true, anchor: true, keywords: [ __( 'Text Block One', 'tar'), __( 'Tar Theme', 'tar' ), ], styles: [ { name: "default", label: __("default"), isDefault: true, }, { name: "option2", label: __("Layout 2") }, { name: "option3", label: __("Layout 3") }, ], attributes: { // Hero image attributes imgID: { type: 'number', }, imgURL: { type: 'string', }, textP: { type: 'string', selector: 'p', default: __('Aenean vel justo nulla, at gravida elit. In hac habitasse platea dictumst. Quisque gravida commodo volutpat. Vivamus blandit risus in urna venenatis accumsan', 'tar'), }, text: { type: 'string', selector: 'h3', default: __('Geo Discovery', 'tar'), }, bgColor: { type: 'string', default: '#fff', }, textColor: { type: 'string', default: '#555', }, titleColor: { type: 'string', default: '#000', }, textSize: { type: 'number', default: 32, }, textSizeP: { type: 'number', default: 14, }, sectionHeight: { type: 'number', default: 80, }, alignment: { type: 'string', default: 'left', }, elOrder: { type: 'string', default: 'one', }, }, edit: textBlockOneEdit, save: textBlockOneSave, })
Any help would be appreciated
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘Gutenberg classname is not applying on Edit function’ is closed to new replies.