0

First time diving in to custom blocks - so I've managed to create a block, pretty simple just using RichText and attributes. Everything works fine when I initially add the block, I can change the content - then update, change, click update etc. Everything works as expected.

But if I update, close the editor and then come back to "edit" the page, the block loads up - I then select the RichText field, type a change and the Update button on the editor stays disabled.

The only way I can get the update button to work, is to add a paragraph then remove it, or change the title of the page, or do anything else to the page.

On update for the RichText field is simple, setAttribute.

But I'm lost as to what to do to make the Editor see that there are changes and to let me save them.

Edited to show example of RichText and the update function.

  attributes: {
    updated: {
      type: 'boolean',
      default: 0,
    },
    tabsTitles: {
      type: "array",
      source: "query",
      selector: "li.tab-item",
      default: [
        { title: "Tab 1" },
        { title: "Tab 2" },
        { title: "Tab 3"},
      ],
      query: {
        title: {
          type: "string",
          source: "html",
          selector: "a.tab-title",
        },
      },
    },
   }
<>

<div { ...blockProps }>
 <ul className="tab-list">
{attributes.tabsTitles.map( (data, i) => (
<li
 className = { state.selected === i ? 'tab-item active' : 'tab-item' }
>
<RichText
 key={i}
 tagName="a"
 href="#"
 className="tab-title"
 onChange={(value) => updateTabTitle(i, value)}
 onClick={ (e) => toggleTab(e, i) }
 allowedFormats={ [ 'core/bold', 'core/italic' ] }
 value={ data.title }
/>
</li>
) ) }
 </ul>
</div>
</>

update title function:

function updateTabTitle(i, value) {
  /** Make a copy before editing */
  const titles = attributes.tabsTitles;
  /** Do Change */
  titles[i].title = value;
  /** Set Att from copy */
  setAttributes({tabsTitles: titles});
  /** Tell silly WP we have changed an attr.. again */
  setAttributes({ updated: 1});
}
6
  • 1
    Can you share the code for the block? Jul 6, 2022 at 13:44
  • it's not possible to answer this without seeing the code. I suspect you're trying to use local state useState/withState to store the value rather than directly using a block attribute, or you may be doing something else. Without seeing code it's not possible to answer the question
    – Tom J Nowell
    Jul 6, 2022 at 13:48
  • Nope, attributes. attributes.attr - to get setAttributes({ attr: value } - to set
    – ScOrPiOn37
    Jul 6, 2022 at 13:49
  • 1
    ah, it's not a simple value, you're trying to store multiple values/an object/array as an attribute, you're going to need to include significantly more code than that, including the attributes definition, though I would also argue that each individual tab should have been a child block, each with their own title attribute in a larger tabs block. What you're doing is likely an anti-pattern
    – Tom J Nowell
    Jul 6, 2022 at 13:55
  • 1
    it's related to it being a complex value not a string/integer/boolean, you'll need to update your question with more code, but stuffing everything in an array of objects is going to cause this kind of issue, it doesn't see a difference between the old and new attribute values, so there is nothing to update. There are things that might help but without seeing more of your code it's extremely difficult to tell, especially without seeing your block registration code
    – Tom J Nowell
    Jul 6, 2022 at 14:23

1 Answer 1

0

Added a new Boolean Attribute - called Updated.

call

setAttributes({ updated: 1 });

In any content editing update function.

Changing that attribute, makes the Update page button remove it's disabled tag, and can be clicked on and saves the changes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.