I’d recommend looking at how the existing Button component works to get a sense of how Gutenberg does things. Specifically it uses a <RichText/> component (instead of a native <input>) which allows you to specify the tag name while also supporting user input.
Generally I’d advice against using <input> elements whenever possible. WordPress makes available a ton of components that can dramatically simplify your work.
For block styles, you may want to look at the styles attribute you can add to a block’s definition. It will automatically create the UI necessary for a user to switch styles and output CSS classes to the block for styling. It may not match exactly what you have (e.g. btn btn-primary), but it will line up with the “proper” way of doing things in Gutenberg (e.g. is-style-primary).
Related Posts:
- Proper, exhaustive documentation for wp.editor etc
- Edit srcset and sizes attributes in Gutenberg image, cover and gallery – blocks
- Add colors to existing color palette without replacing it
- Can you filter posts by meta key with the getEntitityRecords selector?
- WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback
- create blocks programmtically on theme activation
- Can I customize any WordPress parent block-based theme template files by child theme like a parent classic theme?
- How to support Lazy Loading Assets in a WordPress Theme?
- WordPress Gutenberg Theme: Structure, Hierarchy and Custom Templates
- Gutenberg Reusable Block as part of WordPress Theme page
- How to float an image in Gutenberg
- Gutenberg – editor-font-sizes in functions not working
- Can’t select my block by clicking on it
- Which file handles the block latest posts, I want to examine excerpt handling
- create-guten-block in wordpress theme?
- What VSCode extensions are there for working with block themes? [closed]
- What is the “correct” way to add hooks or similar PHP behavior to a blocktheme?
- Not able to select width of blocks inside of cover block
- How to check if a WordPress core block is active in sidebar
- gutenberg add classes to list items
- How do you replace content generated by custom fields with custom blocks in Block Editor?
- Custom Blocks as part of a theme
- How to wrap all titles generated by Gutenberg “Heading” block with tag
- How to add InnerBlock multiple times in the same block
- Moving post title down the page / Removing a block from a post
- HTML block gutenberg templates
- Gutenberg theme development: how to add “headers” option under styles > colors > elements?
- Change default rel attributes for Image Block & Button Block
- How to update mark-up of a gallery block in a custom theme?
- Auto focus RichText field
- How to create nested array attribute
- Show popover with url and option to open in new window
- How to Modify WP_Includes/blocks/latest_posts.php
- How to render block editor in wp-admin custom pages programmatically
- Social-Link block not loading html on page with custom theme
- How to diagnose wp-env environment problem
- Attribute form NumberControl doesn’t update when I update page before it lose its focus
- WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback
- Posts Page shows Classic Editor interface not Gutenberg
- How can I include custom Gutenberg Blocks in a theme?
- Block validation failed for `core/pullquote` after adding theme support for editor-color-palette
- Is there a way to add classes to a page when using a Gutenberg reusable block as page layout?
- Correct way to make a custom block theme responsive
- Multiple content areas with Gutenberg – Transparent areas mid content
- Insert gutenberg blocks into template
- Template for posts of category in block theme?
- Can’t select my block by clicking on it on apiVersion – but using blockProps
- How can I use pre declared blocks in a php file?
- Is there any filter or action hook to remove layout classes from appearing in my templates?
- Full site editing templates folder vs block-templates
- How to set the margin on an innerBlock in a block variation?
- Align images to the left of the content
- Image and font support missing in editor when deploying theme remotely
- Why is my Toggle field not showing in Gutenberg?
- When trying to run build script with gutenberg (with SVG import) – Error: Plugin name should be specified
- Remove Gutenberg Buttons Block
- Block to show posts from same category
- Unwanted spacing for cover block
- Activate Gutenberg group block for theme
- How can a theme define which settings for blocks are available in the block editor?
- How to add multiple custom blocks in custom WordPress theme using create-block?
- How to create a template for a post in Query Loop block?
- WordPress 6.4.2 – can’t load editor style css using ‘after_setup_theme’ or ‘admin_init’ actions
- How to add group-row to InnerBlock template?
- Disable interactivity for core navigation
- Full Site Editing, Block Theme, Gutenberg, Site Editor
- FSE Change Post Template to Something Other Than a List
- What is the difference between wp_register_sidebar_widget and register_widget?
- Get 10 posts from a WP_Query. If less than 10, get the remainder from elsewhere
- How Do I Programmatically Force Custom Permalinks with My Theme?
- Best practice (forward compatibility) for theme options
- How to use Plupload in themes
- How to handle thumbnails
- In theme development, are there functions which write HTML in a standard fashion to reduce “spaghetti code”?
- Checking if there is an Image inserted – if not don’t display anything
- Retrieve data using wpdb to use for customizer controls
- Creating directory and file using native wordpress file system
- Don’t understand why theming is so strange and twisted [closed]
- I want edit_post_link() to open in a new window/tab (target=”_blank”)
- How to store functions in… functions.php?
- Is it possible to use Twitter intents with the post’s image in WordPress?
- Category specific themes?
- WordPress Unite Theme: Footer isn’t sticking [closed]
- How to set a correct $content_width when there are two content widths on one page?
- Best way to develop a new theme on a live site, with new content? [closed]
- Tag Page Not Listing All Posts With Tag
- Pagination not working on page template
- How can I prevent posts with no title showing up in my query?
- Issue when posting updates/changes to wordress
- WordPress Load Only Page Text
- Bootstrap grid system is not working in my WordPress theme
- Tiny MCE custom styles, and preview in the backend
- How can I get dynamic content on my static home page
- Custom Static Page to Display Blog Posts in Excerpt Non-Singular Form (is_singular not working?)
- What is difference between add_theme_support and Theme Customization API?
- Why does the theme of secondary site load the primary one in WordPress Multisite? [closed]
- Creating a Sub Category Template
- Not the typical order by posts by date question
- Loop inside page template not working
- WordPress Block Theme: Customize meta viewport