You don’t need block attributes to do that! Core has an alternative that provides a superior experience, block variants.
Block variants let you reuse an existing block, but declare a variant which has predefined block attributes that match your use case.
For example, all embeds are variants of the embed block, even though they have different names titles icons and descriptions.
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/
For example with this:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'bracketed-heading',
title: 'Bracketed Heading',
attributes: { className: 'heading-with-brackets' },
} );
I got this:
I can add new descriptions, titles, icons, previews, and HTML classes to style the heading differently ( with brackets ). No PHP needed.
The only difference between this and a normal heading, what makes it a bracketed heading is this:
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
- Gutenberg block “This block appears to have been modified externally” on save
- 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?
- Can the index.asset.php file be used with the enqueue_block_editor_assets action?
- 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?
- 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?
- Programatically update posts in database from one block to another using transform
- 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
- Add A Tag To A Post Through JavaScript In Gutenberg UI?
- Gutenberg select categories
- Listening change event of taxonomy term checkboxes in Gutenberg editor
- How to return div with custom attributes(Coding a Gutenberg Block)
- Gutenberg get core data – search
- 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
- 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?
- useSelect second parameter
- How can I allow HTML in Gutenberg UI elements help text?
- 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 getBlockIndex in save() function
- 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
- 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
- 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
- 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
- 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
- Where to include JS library in gutenberg blocks
- 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
- Is it possible to add javascript to template parts
- How to add more elements to an already existing section in Gutenberg
- Working with a non-React external library in a custom block