Is it possible to print the output of a Gunteberg block with no classes?

Question

The following code comes from one of the Gutenberg blocks official examples. The block is pretty simple and just create an editable field that outputs a p element.

registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
    title: __( 'Example: Editable (ESNext)', 'gutenberg-examples' ),
    icon: 'universal-access-alt',
    category: 'layout',
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },
    edit: ( props ) => {
        const { attributes: { content }, setAttributes, className } = props;
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },
    save: ( props ) => {
        return <RichText.Content tagName="p" value={ props.attributes.content } />;
    },
} );

If used, this block produces a p element with a class like this:

<p class="wp-block-gutenberg-examples-example-03-editable-esnext"></p>

which I'm assuming is built upon the registerBlockType parameter.

My question is: is it possible to print the output of a custom block without any class specification?

edit: Wordpress docs say there is a filter to change the default class name, which is this:

wp.hooks.addFilter(
  'blocks.getBlockDefaultClassName',
  'my-plugin/set-block-custom-class-name',
  setBlockCustomClassName
);

Now, where exactly does this code go? Can't find it in the docs.

Answer 1

The code from the docs is JavaScript. You have to set up Webpack and build this type of JS. So, you could use something like Create-Guten-Block to set up that build process, and then replace the contents of "block.js" with that JS from the docs. (I sure wish they would improve the docs to make things like this clearer.)

Or, you could choose to filter with PHP, which instead of preventing the class from being added in the first place, processes the data saved in the database and could strip out the CSS class. (Then if you ever wanted to include the Core classes, you'd just remove your filter and they would all appear - because they're all still saved in the database.) You would do something like

<?php
add_filter('render_block', function($block_content, $block) {
    // Only affect this specific block
    if('gutenberg-examples/example-03-editable-esnext' === $block['blockName']) {
        $block_content = str_replace('class="wp-block-gutenberg-examples-example-03-editable-esnext"', '', $block_content);
    }
    // Always return the content
    return $block_content;
}, 10, 2);
?>

inside a custom plugin or your custom/child theme's functions.php file.

Or - you could always go back and edit the block itself, in which case again you would need to set up the build process. I'm a little confused that the save() function doesn't actually refer to any className, but it looks like if you changed the edit() function so that it no longer had a className, that would likely remove the class.

Answer 2

Since @WebElaine didn't specify the js way, I'll add it myself. The full code to add is this:

function setBlockCustomClassName( className, blockName ) {
    return blockName === 'gutenberg-examples/example-03-editable-esnext' ? //this is the block identifier, taken from the registerBlockType
        'new class name' :  //this is class name we want to associate by default to the block, in my case it's an empty string since I don't want any class 
        className;
}

wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'gutenberg-examples/example-03-editable-esnext', //this is again the block identifier, taken from the registerBlockType
    setBlockCustomClassName
);

Putting it all togheter, the full code is:

registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
    title: __( 'Example: Editable (ESNext)', 'gutenberg-examples' ),
    icon: 'universal-access-alt',
    category: 'layout',
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },
    edit: ( props ) => {
        const { attributes: { content }, setAttributes, className } = props;
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },
    save: ( props ) => {
        return <RichText.Content tagName="p" value={ props.attributes.content } />;
    },
});
//Old code ended here
function setBlockCustomClassName( className, blockName ) {
    return blockName === 'gutenberg-examples/example-03-editable-esnext' ? //this is the block identifier, taken from the registerBlockType
        'new class name' :  //this is class name we want to associate by default to the block, in my case it's an empty string since I don't want any class 
        className;
}
wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'gutenberg-examples/example-03-editable-esnext', //this is again the block identifier, taken from the registerBlockType
    setBlockCustomClassName
);

In the case of a simple block, all this stuff goes into the main js file (usually index.js) associated with the plugin.