Skip to content

Instantly share code, notes, and snippets.

@phpbits
Last active April 7, 2021 15:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phpbits/1e649ba3982fd5d29943ca21f5f68450 to your computer and use it in GitHub Desktop.
Save phpbits/1e649ba3982fd5d29943ca21f5f68450 to your computer and use it in GitHub Desktop.
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
);
@anoopd
Copy link

anoopd commented Apr 7, 2021

is it possible to add extraclass to core blocks ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment