Support » Developing with WordPress » Gutenberg classname is not applying on Edit function

  • Resolved asphaltthemes

    (@asphaltthemes)


    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)
  • The code you have looks right, though I’m assuming the extra <code> tags included in the style portion were due to pasting in the forum.

    Simplified down setting the className would look like:

    
    const edit = ( props ) => {
        const { className } = props;
    
        return (
            <section className={ className }>
            </section>
        );
    }
    
Viewing 1 replies (of 1 total)
  • The topic ‘Gutenberg classname is not applying on Edit function’ is closed to new replies.