Block Vertical Alignment Controls

Recently I was developing vertical alignment controls for my carousel block and decided to share the process with you. Especially since there is not a lot of information about vertical alignment, but tons of tutorials about wide and fullwidth alignment.

Here is how it looks:

vertical alignment controls in Gutenberg
Vertical alignment controls in Simple Carousel Block.

block.json

I am going to open you a secret guys, vertical alignment is no more but just a block attribute. In order to make it work, first of all we have to register it in block.json file.

"attributes":{
	"verticalAlign" : {
		"type": "string"
	}
}

Don’t forget, that you are able to provide the default values here, the possible ones are – top, center and bottom.

edit() function

Don’t forget to import the required components – BlockControls, BlockVerticalAlignmentToolbar and useBlockProps from @wordpress/block-editor.

edit: ( { attributes, setAttributes } ) => {
	
	const blockProps = useBlockProps( {
		className: `are-vertically-aligned-${ attributes.verticalAlign }`
	} )

	return (
		<div { ...blockProps }>
			<BlockControls>
				<BlockVerticalAlignmentToolbar
					value={ attributes.verticalAlign }
					onChange={ ( value ) => {
						setAttributes( { verticalAlign: value } )
					} }
				/>
			</BlockControls>
			Block code is here
		</div>
	)
	
},

save() function

The last but not the least – save() function. Everything is kind of similar here.

save: ( { attributes } ) => {

	const blockProps = useBlockProps.save( {
		className: `are-vertically-aligned-${ attributes.verticalAlign }`
	} )
			
	return (
		<div { ...blockProps }>
			Block code is here
		</div>
	)

}
Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X