Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Apply custom class to Gutenberg block element. View full tutorials at https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/
/**
* External Dependencies
*/
import classnames from 'classnames';
/**
* Add custom element class in save element.
*
* @param {Object} extraProps Block element.
* @param {Object} blockType Blocks object.
* @param {Object} attributes Blocks attributes.
*
* @return {Object} extraProps Modified block element.
*/
function applyExtraClass( extraProps, blockType, attributes ) {
const { visibleOnMobile } = attributes;
//check if attribute exists for old Gutenberg version compatibility
//add class only when visibleOnMobile = false
if ( typeof visibleOnMobile !== 'undefined' && !visibleOnMobile ) {
extraProps.className = classnames( extraProps.className, 'mobile-hidden' );
}
return extraProps;
}
addFilter(
'blocks.getSaveContent.extraProps',
'editorskit/applyExtraClass',
applyExtraClass
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.