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

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