WordPress 6.2 adds a new position blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. support feature, beginning with support for sticky positioning, with the Group block opted-in by default. For themes using the appearanceTools feature in theme.json, the Group block will now be able to be set to “sticky”. The sticky positioning feature follows the CSS behavior for position: sticky which sets an element to stick to its immediate parent (in this case, the block’s immediate parent) when the user scrolls down the page.

Because it can be a potentially confusing feature to work with, for WordPress 6.2, the positioning controls will only be displayed for Group blocks at the root of the document. To create a sticky headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. in a site template, people building themes or sites can wrap a Header template part in a Group block and set that Group block to “sticky”.

This is just the beginning of the position block support feature, and there are ideas for future enhancements, including rolling out sticky to non-root blocks, and improving the UXUX User experience surrounding building sticky site headers. There is an open issue in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ repo to track progress beyond 6.2.

How to add sticky position support to a theme

There are two ways to add support for sticky position to a blocks theme. The simplest is to opt in to the appearanceTools setting, which automatically enables several design tools (read more in the developer handbook).

For themes that wish to have more granular control over which UIUI User interface tools are enabled, the sticky position support can be opted into by setting settings.position.sticky to true in theme.json. For example:

{
	"settings": {
		"position": {
			"sticky": true

How does it work?

When a user sets a block to the sticky position via the drop-down list in the inspector controls, styling rules are output for position: sticky, a top position of 0px (with an offset to account for the logged in adminadmin (and super admin) bar), and a hard-coded z-index value of 10 to ensure that the sticky block sits above other content, while still working correctly in the admin UI. There is not yet support for controlling custom z-index values.

To support the output of these position properties, the safe_style_css filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. has been updated in core to support the position, top, right, bottom, left, and z-index properties.

The styling rules are output when the block is rendered, and a class name is-position-sticky is injected into the block markup. For themes wishing to add custom CSSCSS Cascading Style Sheets. that targets sticky positioned group blocks, this could be achieved by using a selector like .wp-block-group.is-position-sticky.

Why was support for non-root sticky blocks removed in Gutenberg?

While the feature was being developed in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party., sticky positioning was initially enabled in all hierarchies of blocks. However, in manual testing, feedback indicated that without additional UI or UX work, it could be confusing for users attempting to create sticky headers if they accidentally set a non-root block to sticky, or for example, a block within a header template part to sticky. The decision was to scale back the feature to just the root blocks for 6.2 to allow more time to explore a suitable solution for nested blocks. See the discussion in this Gutenberg issue for more context.

Why is positioning not available in global styles?

The position block support has been designed to be set within individual block attributes, as positioning is typically set for an individual block, rather than globally for a particular block type. Therefore, within theme.json the position setting can be used to opt in to using the position support, however a block’s position styles cannot be set within global styles. It should instead be set at the individual Group block level, either within a site template, or a page or post.

Further reading

• Tracking issue: Fixed / Sticky position follow up tasks #47043
• Initial PR that introduced the block support: Design Tools: Add a Position block support (including sticky), decoupled from layout #46142
• Discussion on why sticky position is only available for root blocks for now: Position “sticky” – Gutenberg 15.1.0 killed sidebar option #47892 (comment)
• MDN article for position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
• Trac ticket for adding properties to safe_style_css filter

Props to @bph and @webcommsat for review

#6-2, #dev-notes, #dev-notes-6-2

In WordPress 6.2, a new minimum height blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. support feature has been added, with the Group and Post Content blocks opted-in by default. For themes using the appearanceTools feature in theme.json, the control will be available in the inspector controls, under Dimensions. It is not exposed by default, and users can access the control via the Dimensions panel’s menu. (#45300)

The feature allows users to set a Group or Post Content block to have a minimum height, similar to the control that exists for the Cover block. An example use case is to ensure that a post content area has a minimum height, forcing a footer area to render lower on the page, even if a page has little content. For this reason, it can be quite useful to use viewport relative units when setting minimum height, e.g. 100vh for a block that takes up the entire height of the viewport.

Setting the minimum height for the Stack variation of the Group block is also useful when combined with the new vertical alignment tools added in 6.2 introduced in this Gutenberg PR, as it allows users to align the blocks within the minimum height of the Stack to be at the top, center, bottom positions within the block, or for the blocks to be aligned via space-between.

How to add minHeight support to a theme

There are two ways to add support for the minHeight setting to a block theme. The simplest is to opt in to the appearanceTools setting, which automatically enables several design tools (read more in the Developer Handbook).

For themes that wish to have more granular control over which UIUI User interface tools are enabled, the minHeight dimensions support can be opted into by setting settings.dimensions.minHeight to true in theme.json. For example:

{
	"settings": {
		"dimensions": {
			"minHeight": true

For styling blocks globally, minHeight can also be set either within the global styles interface, or within theme.json. For example, the Post Content block can be set to have a minimum height of 70vh by setting styles.blocks.core/post-content.dimensions.minHeight to 70vh in theme.json:

{
	"styles": {
		"blocks": {
			"core/post-content": {
				"dimensions": {
					"minHeight": "70vh"
				}

How to add minHeight support to a custom block

In the block’s block.json file, add the supports.dimensions.minHeight property, and set it to true to enable the minimum height control. For static blocks, the min-height CSSCSS Cascading Style Sheets. rule will be saved as an inline style to post content. For dynamic blocks, the min-height rule will be injected into the style attribute returned as part of a call to get_block_wrapper_attributes. For more information on outputting block supports in dynamic blocks, read the entry in the Developer Handbook.

Further reading

• The minimum height feature is one part of providing tools to allow sites to align footers to the bottom of the page when the page has no/little content (Gutenberg issue #45117)
• Tracking issue for follow-up tasks beyond 6.2
• Block Supports in Dynamic Blocks
• MDN article on relative units

Props to @bph and @webcommsat for review.

#6-2, #dev-notes, #dev-notes-6-2