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:

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>
	)
	
},

• Please note the symbol ` – it allows to use variables inside a CSS class.
• Also the approach above may not work great if your block doesn’t have any alignment at all, so I recommend to use classnames.
• I used are-vertically-aligned-... classes because they are used in native WordPress blocks. Don’t forget to add block CSS as well 🙂

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>
	)

}

# Gutenberg, Gutenberg Blocks

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 Twitter