- 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:
- check if Gutenberg is currently in use
- How to use PanelColorSettings in custom Gutenberg block?
- Adding pre-publish checks with Gutenberg
- Managing two editable fields in gutenberg
- How to make repeated component/block in Gutenberg
- How to save block attributes when the output doesn’t change
- How to remove unwanted panels inside InspectorControls from core blocks in Gutenberg
- Gutenberg ServerSideRender is deprecated, how to work with new wp.serverSideRender component?
- How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?
- lodash dependency in a Gutenberg plugin
- creating elements/innerblocks via rangecontrol
- What’s the Right Way to get and save remote data for a Gutenberg block?
- How to Parse an Array of Elements in Gutenberg Block
- Error : “Updating failed: The response is not a valid JSON response” with custom shortcode
- Using the component outside the editor. select(‘core’) is null
- Gutenberg is there a way to know if the current block is reusable?
- How to disable “Transform to” option in Gutenberg custom blocks
- How to allow core Gutenberg blocks selection only when you are inside a custom inner block
- Saving data from block editor to the database
- Make a list with header and subtext in Gutenberg blocks
- Gutenberg – What is the best way to save/update post meta?
- 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?
- 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
- Gutenberg Block showing invalid content on edit
- Gutenberg blocks not getting styled on back end
- Run code once when block is created
- Best way to save custom css for an block
- How can I listen to events in Gutenberg block?
- It’s possible to passing a ref to FormTokenField from parent component using forwardRef?
- What’s the right way to instantiate new blocks and/or the plugin itself in toto when using wppb architecture?
- WP Gutenberg Blocks – How to limit first/root blocks
- Creating a custom Gutenberg block with columns
- JSX in WordPress Plugin Development
- ResizableBox with RangeControl not working
- Gutenberg: import dependency or assign from global variable?
- Gutenberg table block with Bootstrap .table class
- How to control an elements classes from multiple Gutenberg sidebar controls?
- How to add a gradient component to a custom block
- 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?
- Invalid hook call on save, not edit when using swiper slider
- 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
- Developing the save function in Gutenberg blocks
- Modify custom block plugin without losing content
- Custom Block Not Shown in Block Inserter
- How to override supports of innerBlocks?
- When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
- Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
- extraprops override existing props
- WPGut – Updating failed and shortcode?
- Gutenberg – Call google map render function in save after DOM has been rendered
- Gutenberg block breaks when showing new data
- HTMLCollection not counting right in editor? / for loop not working on elements in DOM
- Is “document loaded” different on admin side than public side?
- 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
- How to get access the ID of all posts of custom post type in Gutenberg editor
- 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
- Undo operation not working in Rich text [Gutenberg]
- 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
- Add custom data-attribute to core Gutenberg block within an template
- How to replace content of a block in and re-render on change?
- extending a core block doesn’t work inside the 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
- Insert text programmatically in WordPress Gutenberg Editor
- Javascript function defined in view.js not reachable from save.js
- WordPress 6.6.1 – Trying to make a block but receive error, “! Cannot read property ‘then’ of undefined”
- Event when Modal is opened/visible
- Template locked block does not show appender
- Multiple php files in dynamic gutenberg block
- Access DOM Element in Gutenberg Block on WP Admin Post Edit Screen
- Custom Gutenberg Block ‘Stylized List’ – Incorrect Rendering and Looping of List Items
- How to detect when the user clicks the publish/update button in Gutenberg Editor
- Gutenberg Static blocks: viewScript doesn’t import css for frontend?
- Custom Gutenberg block with nested InnerBlocks renderAppender not displaying add button
- Is It Possible to Use the Block Editor’s Notification Feature to Send Another Notification After the Post Is Saved?
- Attributes array not saving values
- how to include an image in the build of a multi block plugin
- Insert Button in to the Block Editor (Header) Toolbar