- Block Filters are used to customize the class that wordpress already adds using following format
wp-block-[plugin_name]-[block-name]
. You can access that usingthis.props.className
. - You can also add the additional classes using Advanced Panel which is present on right sidebar.
- In the end you can use React.js component state to define custom classes (pseudo code is given below).
(Create separate file for this and pass into edit method inside registerBlockType for better structuring else you can write this whole code)
class Testing extends Component {
constructor() {
this.state = {
customClasses: null
}
}
render() {
<InspectorControls>
<TextControl
label="Custom CSS Classes"
value={ this.state.customClasses }
onChange={ ( content ) => setState( { customClasses: content } ) }
/>
</InspectorControls>
}
}
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
- Create Element From Dynamic HTML String [closed]
- 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?
- How to Parse an Array of Elements in Gutenberg Block
- 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
- Gutenberg – What is the best way to save/update post meta?
- How do you render_callback for register_block_type to a method in another class?
- How to create multiple Gutenberg blocks in one plugin
- How to get color name in PanelColorSettings in custom Gutenberg block?
- How insert negative values in Gutenberg box-control
- Initial help with official “create a block” tutorial
- Are block templates incompatible with serialize_blocks?
- 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
- Is there an additional block.json property to set to get an InnerBlocks child to respect the “supports” property?
- How to setAttributes in Gutenberg block?
- How to access noticeOperations from withNotices
- Run code once when block is created
- How to prevent UNDO on guternberg block editor
- How to insert text at the current cursor position in Gutenberg?
- How to override gutenberg paragraph block edit property
- Do I have to worry about useState causing a re-render?
- What’s the right way to instantiate new blocks and/or the plugin itself in toto when using wppb architecture?
- Creating a custom Gutenberg block with columns
- How to get boolean value from register_meta properly?
- JSX in WordPress Plugin Development
- How can I get the selected string when using a toolbar button in Gutenberg?
- jQuery selectors for editor elements safe to use?
- There is a problem in the gutenberg block I developed. Problem is with withInstanceId
- How to control an elements classes from multiple Gutenberg sidebar controls?
- How to only load css for used blocks on frontend
- Additional classes `undefined` after saving post in Gutenberg
- How do you submit a Gutenberg plugin?
- Catching Gutenberg sidebar switch event
- Invalid hook call on save, not edit when using swiper slider
- Proper way to use useSelect
- Use npm and wp-env to make production bundle
- How to save post meta as an array in Gutenberg?
- 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
- Setting global block attribute value
- Developing the save function in Gutenberg blocks
- WordPress Gutenberg InnerBlocks renderAppender not showing with template
- Gutenberg – is it ok to load dependencies multiple times?
- Preventing double loading JS scripts (like React) when developing for Gutenberg
- Console errors in 6.0-RC1 Widget screen
- Custom Block Not Shown in Block Inserter
- How to override supports of innerBlocks?
- How to use attributes in competent of Gutenberg
- var(–text-color) in style.scss works once but not twitch
- wordpress full site editing problem when extending core blocks
- Pass custom props to
- Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
- extraprops override existing props
- Trigger function on Remove block or add new block in Gutenberg JavaScript
- WPGut – Updating failed and shortcode?
- Rerender core Templates with with ToggleControl but it doesnt recognize block type
- Gutenberg – Call google map render function in save after DOM has been rendered
- HTMLCollection not counting right in editor? / for loop not working on elements in DOM
- What happens/fires when you select a block in the editor?
- Is “document loaded” different on admin side than public side?
- How to use setAttributes outside of the edit function return
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Where do I hook to have the server do something in PHP on block attribute change?
- Reading plugin settings in esnext wordpress block
- Get value of custom checkbox from Gutenberg sidebar in plugin
- How to integrate plugins into block editor
- How to get access the ID of all posts of custom post type in Gutenberg editor
- Custom plugin not appearing
- Gutenberg’s Popover component position relative to the focused element
- How can i add insertion point between inner blocks in my custom block like core blocks
- Render raw html in Gutenberg block
- Build a dynamic block using the default attributes
- Help interpreting @wordpress/create-block-tutorial-template usage error
- Add custom data-attribute to core Gutenberg block within an template
- How can I add a custom button to the post editor?
- How to replace content of a block in and re-render on change?
- extending a core block doesn’t work inside the editor
- 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
- Remove Gutenberg Buttons Block
- Set srcset on a block image