Glad that you managed to fix the 3rd issue (block validation failed), and as for the first and second issues, you can fix them by using useBlockProps in your block’s edit callback:
// In src/index.js
import { TextControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
export default function Edit( { attributes, className, setAttributes } ) {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
... your code.
</div>
);
}
See Developer Documentation → Block API Reference → Edit and Save in the block editor handbook for more details on that useBlockProps (hook). 🙂
Related Posts:
- Custom action button in Gutenberg editor (post_submitbox_misc_actions – equivalent)
- Adding pre-publish checks with Gutenberg
- Managing two editable fields in gutenberg
- How to make repeated component/block in Gutenberg
- Using Primary Color in Plugin Block
- How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?
- lodash dependency in a Gutenberg plugin
- Plugin Sidebar is not Saving Meta Attribute to Post/Page after “Update”
- What’s the Right Way to get and save remote data for a Gutenberg block?
- WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
- Looking for callback function after Gutenberg is rendered?
- Error : “Updating failed: The response is not a valid JSON response” with custom shortcode
- How to disable “Transform to” option in Gutenberg custom blocks
- Is there a better way to implement responsive images than what WordPress uses by default?
- Gutenberg registerFormatType with Multiple Classes
- Gutenberg: useDispatch is not a function – @wordpress/data included
- Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list
- Make a list with header and subtext in Gutenberg blocks
- How do you render_callback for register_block_type to a method in another class?
- How insert negative values in Gutenberg box-control
- Are block templates incompatible with serialize_blocks?
- How do I dynamically render an InnerBlock inside a dynamic block?
- ServerSideRender and Media Object: attributes passing image data object to php renderer even though it’s not set
- WordPress Block Development – trouble importing from @wordpress/icons
- Gutenberg blocks not getting styled on back end
- How to access noticeOperations from withNotices
- Run code once when block is created
- Best way to save custom css for an block
- How to insert text at the current cursor position in Gutenberg?
- How can I listen to events in Gutenberg block?
- It’s possible to passing a ref to FormTokenField from parent component using forwardRef?
- Do I have to worry about useState causing a re-render?
- WP Gutenberg Blocks – How to limit first/root blocks
- How to get boolean value from register_meta properly?
- JSX in WordPress Plugin Development
- ResizableBox with RangeControl not working
- jQuery selectors for editor elements safe to use?
- There is a problem in the gutenberg block I developed. Problem is with withInstanceId
- Gutenberg: import dependency or assign from global variable?
- Gutenberg table block with Bootstrap .table class
- How to add a gradient component to a custom block
- Catching Gutenberg sidebar switch event
- Use npm and wp-env to make production bundle
- How to add template colors to custom block options in WordPress Gutenberg editor sidebar?
- How to use apiFetch to get author information in Gutenberg properly?
- Gutenberg blocks error: Each child in a list should have a unique “key” prop
- How to properly package a block plugin
- Setting global block attribute value
- Gutenberg – is it ok to load dependencies multiple times?
- Preventing double loading JS scripts (like React) when developing for Gutenberg
- Modify custom block plugin without losing content
- Custom Block Not Shown in Block Inserter
- How to override supports of innerBlocks?
- var(–text-color) in style.scss works once but not twitch
- When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
- extraprops override existing props
- Gutenberg block breaks when showing new data
- What happens/fires when you select a block in the editor?
- How to re-render inspector controls?
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Get value of custom checkbox from Gutenberg sidebar in plugin
- Where to save Gutenberg plugin data?
- Gutenberg component in a plugin admin
- How to integrate plugins into block editor
- Add custom html classes to gutenberg wrapper
- How to create save function for custom Gutenberg style block?
- Gutenberg and custom blocks messed up pagespeed score. What did I wrong?
- Gutenberg text field validation
- Custom plugin not appearing
- Gutenberg’s Popover component position relative to the focused element
- Undo operation not working in Rich text [Gutenberg]
- Gutenberg: – Call a function after Server Side Component is rendered
- Accept only PDF file for upload
- get the queried_object of an url
- Help interpreting @wordpress/create-block-tutorial-template usage error
- Call API on post save/update and show the result in admin area
- How can I add a custom button to the post editor?
- How to get custom user meta by id in custom Gutenberg block
- Block Development: hamburger module throwing error in save function
- Adding a navigation with wp_nav_menu() to a custom block in the site editor
- Why isn’t custom sidebar panel not showing up in the Gutenberg Editor?
- REST API error in block editor for custom templates
- Reinitiate Gutenburg’s blocks using javascript
- How can I include React useState in a custom gutenberg block plugin?
- Set srcset on a block image
- Translations not making it into Block UI but work in the rest of the plugin
- Javascript function defined in view.js not reachable from save.js
- How to move custom gutenberg block controls from settings to styles tab?
- How can I obtain an option (get_option) inside a block viewScript?
- How to use useSelect to retrieve the currently default fontFamily?
- move useState variable from edit.js to save.js. How do I do that?
- Access DOM Element in Gutenberg Block on WP Admin Post Edit Screen
- Custom Gutenberg Block ‘Stylized List’ – Incorrect Rendering and Looping of List Items
- useBlockProps() nests wrapper with class name inside block wrapper in the editor
- Output HTML Tags In Gutenberg Block
- Can you nest columns/column in a gutenberg custom template?
- Attributes array not saving values
- WordPress Block with Interactivity API e Preact Component
- Insert Button in to the Block Editor (Header) Toolbar
- render_block_context filter and block context inheritance