Gutenberg: Group: custom styling

_group.scss

.wp-block-group {

	margin-top: 0;
	margin-bottom: 0;

	&.is-style-padding {
		.wp-block-group__inner-container {
			padding-top: var(--unit);
			padding-bottom: var(--unit);
		}
	}

	&.is-style-padding--medium {
		.wp-block-group__inner-container {
			padding-top: var(--unit-medium);
			padding-bottom: var(--unit-medium);
		}
	}

	&.is-style-padding--large {
		.wp-block-group__inner-container {
			padding-top: var(--unit-large);
			padding-bottom: var(--unit-large);
		}
	}

	&.is-style-padding--xlarge {
		.wp-block-group__inner-container {
			padding-top: var(--unit-xlarge);
			padding-bottom: var(--unit-xlarge);
		}
	}

	.wp-block-columns {
		margin: 0 auto;
		max-width: var(--constraint-narrow);
		&.alignwide {
			max-width: var(--constraint-wide);
		}
		&.alignfull {
			max-width: 100%;
		}
	}
}

blocks.js

import domReady from '@wordpress/dom-ready';

domReady(() => {
	wp.blocks.registerBlockStyle("core/group", {
		name: "padding",
		label: "Vertical padding",
	});

	wp.blocks.registerBlockStyle("core/group", {
		name: "padding--medium",
		label: "Vertical padding (medium)",
	});

	wp.blocks.registerBlockStyle("core/group", {
		name: "padding--large",
		label: "Vertical padding (large)",
	});

	wp.blocks.registerBlockStyle("core/group", {
		name: "padding--xlarge",
		label: "Vertical padding (xlarge)",
	});
});