Display div If toggleControl attribute set to true conditional

[Granite5]

Hello,

I’ve created a richtext block with a toggle control that can either set the block to hide or shows on the front end. If set to true, a div is displayed when editing the block (working great)

I’m having a little trouble on how to get this working on the front end. I’m not sure of how to wrap the div (.message-body) in a conditional statement that allows the div to display if set to true.

e.g.

if (toggle == true) { 
 <div class="message-body" style={ styles }>
   {message}
 </div>
}

Here is my current edit block of code:

  edit: props => {
     const { attributes: { message, colorPaletteControl, fontColorPaletteControl, toggleControl }, attributes, className, setAttributes } = props;
     const onChangeMessage = message => { setAttributes( { message } ) };
      const styles = {
         backgroundColor: colorPaletteControl,
         color: fontColorPaletteControl,
         padding: '1rem',
      	};
         return [
           <Inspector { ...{ setAttributes, ...props} } />,
           <Controls { ...{ setAttributes, ...props } }/>,
           <div className={ classnames(
              props.className,
               { 'hidden-block': toggleControl },
                ) } >
                  <RichText
                    tagName="div"
                    multiline="p"
                    placeholder={ __( 'Add your content here', 'rickyblocks' ) }
                    onChange={ onChangeMessage }
                    value={ message }
                    style={ styles }
                  />
                  <div class="hidden-block-message"><p>Block hidden</p></div>
                </div>
              ]
        },

Save block of code

     save: props => {
       const { attributes: { message, colorPaletteControl, fontColorPaletteControl, toggleControl }, attributes } = props;
        const styles = {
          backgroundColor: colorPaletteControl,
          color: fontColorPaletteControl,
          padding: '1rem'
        };
        return(
              <div class="message-body" style={ styles }>
                { message }
              </div>
            );
        },

Any help much appreciated.

Thanks

[Zac Gordon]

Okay so if you want to control what is displayed on the frontend that is controlled in the save setting since that is what is saved in the database and displayed on the frontend.

You can either use classnames to control display via CSS or use a conditional to not even load the component if toggle is enabled.

Here is some help with JSX conditionals if you need 🙂

https://reactjs.org/docs/conditional-rendering.html

Hopefully that should solve the problem! Let me know if not 🙂

[Author]

Posts