WordPress 6.2 adds a new position block 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 header 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 UX User experience surrounding building sticky site headers. There is an open issue in the Gutenberg 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 UI 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 admin (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 filter 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 CSS 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 plugin 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
Props to @bph and @webcommsat for review
#6-2, #dev-notes, #dev-notes-6-2
