Skip to content

Problem in radio controls of heading-with-icon custom block component #67

@marcosmanto

Description

@marcosmanto

Hi Inran,
I am following your excellent tutorial on YT and the code present in:
aquila-master\assets\src\js\gutenberg\blocks\heading-with-icon\edit.js

didn't work for me. When I clicked in radio buttons the option didn't change.
I apply this change in edit.js and it worked for me:

  <RadioControl
      label={ __( 'Select the icon', 'aquila' ) }
      help={ __( 'Controls icon selection', 'aquila' ) }
      selected={ option }
      options={ [
	      { label: 'Dos', value: 'dos' },
	      { label: "Dont's", value: 'donts' },
      ] }
      onChange={ ( optionVal ) => {
	      setAttributes( { option: optionVal } );
      } }
  />

Instead of using setAttributes( { optionVal } ) I changed to setAttributes( { option: optionVal } )

Same for change the content on typing (setAttributes( { content: contentVal } ):

<RichText
  tagName="h4" // The tag here is the element output and editable in the admin
  className={ className }
  value={ content } // Any existing content, either from the database or an attribute default
  onChange={ ( contentVal ) => setAttributes( { content: contentVal } ) } // Store updated content as a block attribute
  placeholder={ __( 'Heading…', 'aquila' ) } // Display this text before any content has been added by the user
/>

Thanks for your great work

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions