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
useEffect
oruseCallback
- 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
- 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
- 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?
- Correctly handling WordPress core data retrieval in Gutenberg
- Is there a client side API for handling transients or options?
- Gutenberg Modify core taxonomy panel element via wp.hooks.addFilter
- What is “open()” in MediaUpload?
- Adding a text element in between title and blocks container
- Setting HTML properties in a Gutenberg plugin using WordPress settings
- 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 to get value of selected page template in Gutenberg editor?
- How do I access site and block editor state data and use `useSelect()` or `withSelect()` to bind it to my components?
- @wordpress/components Button variants not styled
- Block Editor: How to get title and post content within the WordPress admin UI in Javascript?
- Custom block SelectControl works but equivalent ComboboxControl gives errors – where’s my mistake?
- How can I add Block Style support to the core HTML block in Gutenberg?
- Gutenberg add extra attributes to custom format
- event/callback on block update?
- can a buttongroup have a label?
- How to remove p / br elements from gutenbergs editor
- How to disable inline css styles generated by Gutenberg editor?
- Gutenberg getMedia() in post query doesn’t return all featured images
- InnerBlocks restricting does not work on nested blocks
- How to transform a legacy widget into a block
- Gutenberg: Block validation Failed Richtext undefined
- Add A Tag To A Post Through JavaScript In Gutenberg UI?
- Gutenberg select categories
- Add custom HTML markup to Gutenberg RichText
- Listening change event of taxonomy term checkboxes in Gutenberg editor
- How to return div with custom attributes(Coding a Gutenberg Block)
- What is the correct way to import the blocks-editor?
- Open MediaUpload from external component in Gutenberg
- Get Block Attributes in JSON REST API
- Open Featured Image Modal in WordPress Gutenberg onClick of a button
- Gutenberg extend blocks add new class name
- 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?
- what is the purpose of the namespace argument when customizing blocks?
- Gutenberg consume wp-json data and reflect in frontend the content
- Trigger wp-embed via JavaScript to refresh iframe preview?
- How can I import one custom block into another?
- 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
- Gutenberg richtext block vaildation failed
- 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
- find out reason of “Updating failed” in Post-editor
- 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
- Gutenberg – useEffect manipulate DOM after block re-renders DOM
- 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
- Update block once an API request returns with a value
- Custom block update rendering when reused
- 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 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
- Working with a non-React external library in a custom block