You are getting this error because your edit and save function output doesn’t match.
save({attributes}) {
return (
<button class="usa-button">
{ attributes.text }
</button>
);
}
precisely, { attributes.text } is the save function is not being called or used in edit function. Either add attributes.text in edit function or remove that from save function. Something like this should work –
<button class="usa-button">
<PlainText
onChange={ content => setAttributes({ text: content }) }
value={ attributes.text }
placeholder="Your button text"
className="button-text"
/> { attributes.text }
</button>
Notice attributes.text is also outputting same text in the edit function just like save function.
Related Posts:
- Trigger Javascript on Gutenberg (Block Editor) Save
- Gutenberg – remove / add blocks with custom script
- What are all the query parameters for getEntityRecords?
- How to use wp.hooks.addAction() in React JS/Gutenberg?
- How to only enqueue block javascript on the frontend when its needed [duplicate]
- Extend core block in Gutenberg
- Show control conditionally in Gutenberg
- Gutenberg custom block plugin with custom image sizes
- Get loading state of wp data selector
- How to get the ToggleControl Gutenberg component working for a PHP Block
- Hooking a callback into the code within a Gutenberg block
- conditional layout based on if Innerblocks is not empty
- Gutenberg extend blocks add new class name
- initial open/toggle PluginDocumentSettingPanel panel in document setting block editor gutenberg
- Correctly handling WordPress core data retrieval in Gutenberg
- Is there a client side API for handling transients or options?
- What do the args for Gutenberg subpackage “hooks” function “doAction” mean?
- How do I fire a snackbar notice in admin?
- Adding a text element in between title and blocks container
- Gutenberg RichText
- Use useSelect/useDispatch instead of withSelect/withDispatch
- How to handle Gutenberg wp.data async errors?
- Set current tab on a Gutenberg TabPanel component from outside that component
- How to use wp.hooks.addAction() in React JS/Gutenberg?
- Load script after block is inserted
- How do I access site and block editor state data and use `useSelect()` or `withSelect()` to bind it to my components?
- Gutenberg passing block attributes to component in ES6/ESNext
- Can the index.asset.php file be used with the enqueue_block_editor_assets action?
- var is undefined in a Gutenberg block
- Gutenberg add extra attributes to custom format
- Using wp.data.select get actual tags (not id’s) used in post
- event/callback on block update?
- How to remove p / br elements from gutenbergs editor
- How to disable inline css styles generated by Gutenberg editor?
- Programatically update posts in database from one block to another using transform
- Gutenberg getMedia() in post query doesn’t return all featured images
- How to transform a legacy widget into a block
- Gutenberg select categories
- Listening change event of taxonomy term checkboxes in Gutenberg editor
- Gutenberg get core data – search
- What is the correct way to import the blocks-editor?
- Open MediaUpload from external component in Gutenberg
- Gutenberg extend blocks add new class name
- How to add classes and events to image in javascript using Gutenberg?
- Checks when fetching data from multiple REST API endpoints in Gutenberg
- Search for a keyword across post types in a Gutenberg component
- Using apiFetch for retrieving post data in Gutenberg
- Add custom classes for blocks in editor based on custom attributes
- Looping over wordpress meta to create “ ‘s?
- How to display post content in the block editor
- How to load an additional script for a block in the block editor?
- Gutenberg consume wp-json data and reflect in frontend the content
- Trigger wp-embed via JavaScript to refresh iframe preview?
- Gutenberg getBlockIndex in save() function
- Widgets and Post/Page edit/new blank, console errors only, no server errors
- Trying to turn the Edit function into a class to be able to use React lifecycle methods
- Gutenberg richtext block vaildation failed
- Conditional save return on Gutenberg Block
- Can I alter the block editor’s paste text behavior?
- Custom Gutenberg-Block esnext pass variables
- How to read inline-CSS from Gutenberg block?
- Gutenberg RangeControl
- Custom Gutenberg block: access dom element via JavaScript
- Custom Block – save.js function not saving attributes
- Add a Page Screen is Visually Blank
- Including dependencies using @wordpress/dependency-extraction-webpack-plugin
- Gutenberg sidebar show input field on toggle
- Get the ID of a page in Parent combobox in editor
- Uncaught TypeError: r is not a function
- WordPress Gutenberg Ajax request
- WP Gutenberg – custom block with two content fields
- How do I make a savable preview like Youtube Gutenberg block?
- iFrame onLoad in custom Gutenberg block
- Block pattern conflict with custom block
- WordPress Gutenberg: Attribute overwritten by block duplicate
- Table block variation with header section activated
- Filtering Gutenberg Components, not Blocks
- How to delete child block for associated parent block
- Passing object to FormTokenField suggestions
- How to add a new attribute to core wp block editor without npm?
- How do i get an Inline style in Gutenberg Block show up in front end?
- WordPress adds and tags into HTML blocks after saving
- Gutenberg core/file add style support in js/ json
- Working with a non-React external library in a custom block
- Create Youtube embed block with createBlock
- How to add a css class to postTitleWrapper in Gutenberg?
- Masonry gallery block is working in the block editor but not the template editor
- How to import the imagesLoaded and Masonry libs that come with WP in a Gutenberg block?
- Additional CSS classes not being added in Gutenberg editor
- How do I filter/modify the updated content on save using javascript?
- How to execute some javascript code in the editor when a block pattern is added?
- How to build BOTH non-block components and blocks present in the /src directory using @wordpress/scripts
- How to add an additional dependency to a block index.asset.php file
- Why is the Gutenberg editor not recognizing my updates?
- How to transform a shortcode into a block
- How to re-render Gutenberg component when object instance is available
- useSelect() plus resolver result is serving cached data incorrectly
- Gutenberg DatePicker component with time set to zero
- How to render HTML content using the Interactivity API?
- How to render initial posts on page load in a Gutenberg block using the Interactivity API?