Title: WordPress Custom Widget Save Multiple Attributes?
Last modified: February 10, 2023

---

# WordPress Custom Widget Save Multiple Attributes?

 *  Resolved [red5](https://wordpress.org/support/users/red5/)
 * (@red5)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/wordpress-custom-widget-save-multiple-attributes/)
 * I am using the _[@wordpress](https://wordpress.org/support/users/wordpress/)/
   create-block_ package to build a simple widget. I do not understand how to make
   the save.js save more than one attribute.
 * I have 2 attributes defined in the block.json: _theNotes_ and _theContact_.
 *     ```wp-block-code
       "attributes": {
           "theNotes": {
               "type": "string",
               "source": "text",
               "selector": "div",
               "default": ""
           },
           "theContact": {
               "type": "string",
               "source": "text",
               "selector": "div",
               "default": ""
           }
       }
       ```
   
 * My edit.js looks like this:
 *     ```wp-block-code
       export default function Edit( { attributes, setAttributes } ) {
       return (
           <div { ...useBlockProps() }>
                   <div>
                       <TextControl
                           label={ __( 'The Notes', 'editor-notes' ) }
                           value={ attributes.theNotes }
                           onChange={ ( val ) => setAttributes( { theNotes: val } ) }
                       />
                   </div>
                   <div>
                       <TextControl
                           label={ __( 'The Contact', 'editor-notes' ) }
                           value={ attributes.theContact }
                           onChange={ ( val ) => setAttributes( { theContact: val } ) }
                       />
                   </div>
           </div>
       );
       }
       ```
   
 * For the save.js file, I cannot find instructions on how to save both of those
   attributes using this default scaffolding. I thought something like this would
   work, but I get a block validation error. It says that both the attributes were
   saved twice to both attribute values.
 *     ```wp-block-code
       export default function save( { attributes } ) {
       const blockProps = useBlockProps.save();
       return (
           <div { ...blockProps }>
               <div>{ attributes.theNotes }</div>
               <div>{ attributes.theContact }</div>
           </div>
       );
       }
       ```
   
 * The error says:
 *     ```wp-block-code
       Content generated by save function:
   
       <div class="wp-block-create-block-editor-notes"><div>notesTestcontactTest</div><div>notesTestcontactTest</div></div>
   
       Content retrieved from post body:
   
       <div class="wp-block-create-block-editor-notes"><div>notesTest</div><div>contactTest</div></div>
       ```
   
 * [The Getting Started Guide](https://developer.wordpress.org/block-editor/getting-started/create-block/attributes/)
   shows how to save one attribute called “message” like this. Apparently, I do 
   not know what to do when I have multiple attributes to update:
 *     ```wp-block-code
       import { useBlockProps } from '@wordpress/block-editor';
   
       export default function save( { attributes } ) {
       const blockProps = useBlockProps.save();
       return <div { ...blockProps }>{ attributes.message }</div>;
       }
       ```
   
 * Note: I asked this on [stackOverflow](https://stackoverflow.com/questions/75405190/wordpress-custom-widget-save-multiple-attributes)
   and then realized that I should have reached out to this community.

Viewing 1 replies (of 1 total)

 *  Thread Starter [red5](https://wordpress.org/support/users/red5/)
 * (@red5)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/wordpress-custom-widget-save-multiple-attributes/#post-16459618)
 * [S.Walsh answered this on stackOverflow](https://stackoverflow.com/questions/75405190/wordpress-custom-widget-save-multiple-attributes/75411109).
   When defining my attributes in block.json, I had duplicate selectors (they were
   both <div>). They need to be unique. Do this by giving them a class like this:
 *     ```wp-block-code
       "attributes": {
           "theNotes": {
               "type": "string",
               "source": "text", 
               "selector": "div.the-notes", // a div with the className "the-notes"
               "default": ""
           },
           "theContact": {
               "type": "string",
               "source": "text", 
               "selector": "div.the-contact", // a div with the className "the-contact"
               "default": ""
           }
       }
       ```
   
 * See S.Walsh’s explanation. The unique classes also need to be referenced in the
   edit.js and save.js.

Viewing 1 replies (of 1 total)

The topic ‘WordPress Custom Widget Save Multiple Attributes?’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 1 reply
 * 1 participant
 * Last reply from: [red5](https://wordpress.org/support/users/red5/)
 * Last activity: [3 years, 3 months ago](https://wordpress.org/support/topic/wordpress-custom-widget-save-multiple-attributes/#post-16459618)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics