You cannot use wp.select in your save component, a save component can only use the block attributes. If you generate markup from using data from other sources then it will fail block validation.
If you want data such as the index of the block, you need to store it in the attributes in the edit component, or render the block in PHP.
The same goes for other “effects”, you should not do these things in a save component:
- use state
- make HTTP requests
- retrieve data that didn’t come from block attributes
- interactive components
- query the data store
- react hooks e.g
useEffectoruseCallback - prompt the user for data
- extract data from DOM nodes or global variables
The job of a save component is to take the blocks attributes and turn them into static HTML that gets saved in the database. Any interactivity or effects that do work need to go in the edit component or elsewhere, and their results stored in attributes.
Related Posts:
- Trigger Javascript on Gutenberg (Block Editor) Save
- Gutenberg – remove / add blocks with custom script
- How to use wp.hooks.addAction() in React JS/Gutenberg?
- Show control conditionally in Gutenberg
- Gutenberg custom block plugin with custom image sizes
- How to get the ToggleControl Gutenberg component working for a PHP Block
- Is there a core Sortable component in Gutenberg?
- 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
- Is there an equivalent of the PHP function sanitize_key in Gutenberg?
- What do the args for Gutenberg subpackage “hooks” function “doAction” mean?
- How do I fire a snackbar notice in admin?
- Gutenberg Modify core taxonomy panel element via wp.hooks.addFilter
- What is “open()” in MediaUpload?
- Why is this gutenberg custom format button only available from the toolbar as a dropdown?
- Setting HTML properties in a Gutenberg plugin using WordPress settings
- Provide specific example for block variation
- 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
- Block editor: How to check if block editor has initialized and populated the data store?
- Load script after block is inserted
- Gutenberg block “This block appears to have been modified externally” on save
- 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?
- How can I add Block Style support to the core HTML block in Gutenberg?
- 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
- How to remove p / br elements from gutenbergs 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: Block validation Failed Richtext undefined
- Gutenberg select categories
- Add custom HTML markup to Gutenberg RichText
- 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?
- 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
- How to load an additional script for a block in the block editor?
- useSelect second parameter
- How can I allow HTML in Gutenberg UI elements help text?
- what is the purpose of the namespace argument when customizing blocks?
- Trigger wp-embed via JavaScript to refresh iframe preview?
- Gutenberg Blocks: how to determine an index of the current inner block?
- 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
- Get terms of a taxonomy using useSelect
- Gutenberg richtext block vaildation failed
- UnitControl – Block has encountered an error
- Conditional save return on Gutenberg Block
- Gutenberg select excerpt, use generated excerpt or use more block excerpt
- Can I alter the block editor’s paste text behavior?
- Custom Gutenberg-Block esnext pass variables
- Building a Featured Gallery component for Gutenberg
- Gutenberg dependencies in package.json
- find out reason of “Updating failed” in Post-editor
- How to read inline-CSS from Gutenberg block?
- Custom Block – save.js function not saving attributes
- Gutenberg – useEffect manipulate DOM after block re-renders DOM
- Problem extending a core block
- Cannot read properties of undefined (reading ‘show_ui’) Error on WordPress Post Editor
- Issue migrating a checkbox-type meta field to the block editor
- Update block once an API request returns with a value
- Gutenberg – dynamically created element: how to set onChange?
- Custom block update rendering when reused
- WordPress Gutenberg Ajax request
- WP Gutenberg – custom block with two content fields
- Gutenberg Edit Block Inspector Controls and save
- Spans in gutenberg
- Block pattern conflict with custom block
- Table block variation with header section activated
- How to delete child block for associated parent block
- Passing object to FormTokenField suggestions
- How to detect if we are in the Site Editor part of the Block Editor (as opposed to editing a Page/Post) in JavaScript?
- How can I show a Slot/Fill in the block editor
- How to add more elements to an already existing section in Gutenberg
- 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
- How to add a css class to postTitleWrapper in Gutenberg?
- Additional CSS classes not being added in Gutenberg editor
- How do I filter/modify the updated content on save using javascript?
- Jest Unit tests for High order component containing Block Editor
- How to execute some javascript code in the editor when a block pattern is added?
- How to add an additional dependency to a block index.asset.php file
- Why is the Gutenberg editor not recognizing my updates?
- Metabox conditionals depending on post format and template in Gutenberg
- useSelect() plus resolver result is serving cached data incorrectly
- How to get selected category objects in the block editor?
- How to include block style variations for blocks in posts dynamically rendered via the Interactivity API