CSS class is erased

[manake]

Describe the bug
This is really annoying that every time I enter the editor page and specify some-class--something for a block then it's saved like this (I see this in revisions) <!-- wp:slug/my-block {"className":"some-class\u002d\u002dsomething"} /--> and the className is completely erased after the reload of the page and the next save... (it persists during one save though).

Solution
It should save class like some-class--something and never erase this without me knowing that.

[designsimply]

You should not be adding classes to the comment delimiters directly via the code editor.

className is added when registering a block. See https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#block-style-variations

To add CSS while using the editor, you can use the HTML block where you can paste any random HTML and it will be kept as is.

[tofumatt]

As mentioned, you should be able to add a class via the HTML class="" attribute on a block's HTML. If you just want to add a CSS class you can also use the "Advanced" section in the inspector controls for the block:

[manake]

No, something is not right:

function x() {
	wp_register_script( 'x-script', plugins_url( 'editor.js', __FILE__ ), array( 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-editor' ) );

	register_block_type( 'x/y', array(
		'editor_script' => 'x-script',
	) );
}
add_action( 'init', 'x' );

(function(){
	var el = wp.element.createElement;
	var InspectorControls = wp.editor.InspectorControls;
	var __ = wp.i18n.__;

	wp.blocks.registerBlockType('x/y', {
		title: __('X'),
		icon: 'some-icon',
		category: 'layout',
		attributes: {
			content: { type: 'string' },
			x: { type: 'string', default: 'on' },
			y: { type: 'string', default: 'on' },
		},
		edit: function(props){
			var focusedEditable = props.focus ? props.focus.editable || 'title' : null;
			var attributes = props.attributes;
			var isSelected = props.isSelected;
			var setAttributes = props.setAttributes;

			var inspectorControls = isSelected && el(
				InspectorControls,
				{ key: 'inspector' },
				el(wp.components.SelectControl, {
					multiple: false,
					label: __('X'),
					value: attributes.x || '',
					onChange: function onChange(value) {
						return setAttributes({ x: value });
					},
					options: [
						{ value: 'on', label: 'On' },
						{ value: 'off', label: 'Off' },
					],
				}),
				el(wp.components.SelectControl, {
					multiple: false,
					label: __('Y'),
					value: attributes.y || '',
					onChange: function onChange(value) {
						return setAttributes({ y: value });
					},
					options: [
						{ value: 'on', label: 'On' },
						{ value: 'off', label: 'Off' },
					],
				}),
			);

			return [inspectorControls, (
				el( 'div',
					{
						className: props.className,
						style: {
							'color': 'red',
						}
					},
					el( 'div', {},
						el( 'div', {}, 'Text.' ),
					),
				)
			)];
		},
		save: function(props){
			return null;
		},
	});
})();

This is what I'm doing:

1. Create a block.
2. Add some-class--something via "Advanced" tab.
3. Save. The class is there.
4. Reload the admin page.
5. Edit some other blocks.
6. Save.
7. The class is not there.

[tofumatt]

Oh, this is for a custom block, I see! Sorry about he confusion.

It looks like your code has an issue; the issue you’re describing can’t be replicated with built-in blocks. You may want to check out the Gutenberg handbook and the block api; it looks like you aren’t saving your block of the class attribute.

Unfortunately we can’t provide detailed support here as we use this issue tracker to monitor Gutenberg’s code, but it’s possibly the Make WP support forums or Make WP Slack would be good places to get some help with the code.

Hope that helps!

[manake]

className

This property returns the class name for the wrapper element. This is automatically added in the save method, but not on edit, as the root element may not correspond to what is visually the main element of the block. You can request it to add it to the correct element in your function.

Thanks, it looks like a bug to me. The above is from the handbook and it doesn't contain any information on how to save className. It contains information that it's saved automatically. It indeed is... once.

1. Why it's saved once but erased on page reload and subsequent save?
2. The block automatically gets "Advanced" tab with CSS class input but it doesn't automatically handle that correctly on save().