Fixed Position: adjust top position while logged

[shimotmk]

What?

Related #47665

Why?

If an admin bar exists when in Fixed Position, elements will overlap with the admin bar, so adjust it in the same way as for sticky.

How?

Add the same style as sticky.

Testing Instructions

1. Add the following code to gutenberg.php etc. to support fixed.

function add_fixed_theme_json_data( $theme_json ) {
	$get_data          = $theme_json->get_data();
	$add_position      = array(
		'fixed' => true,
	);
	$existing_position = isset( $get_data['settings']['position'] ) ? $get_data['settings']['position'] : array();
	$add_data          = array_merge(
		$existing_position,
		$add_position
	);
	$new_data          = array(
		'version'  => 3,
		'settings' => array(
			'position' => $add_data,
		),
	);
	return $theme_json->update_with( $new_data );
}
add_filter( 'wp_theme_json_data_theme',  'add_fixed_theme_json_data' );

2. Open a post or page.
3. Place a group block and set the style>position>type attribute to fixed.
   Or paste the following code into your code editor.

<!-- wp:group {"style":{"position":{"type":"fixed","top":"0px"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"accent-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-accent-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>Fixed Group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

4.If you look at the front end, you can see that the top position is adjusted depending on whether or not the admin bar is present.

Screenshots or screencast

Before

fixed-before.mp4

After

fixed-after.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shimotmk <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

Hi @shimotmk is there a related issue to this this pr, and can you please provide more context?
As far as I am aware there is no support or control for the fixed position, and it is not clear what this change solves. The majority of WordPress users are not going to manually filter theme.json to add custom supports.

[shimotmk]

@carolinan
Thanks for your comment.
Here's the relevant context.
#46142 #48660

It seems like it was intentionally left out in the open.

[carolinan]

If it has been intentionally left out, why is it being changed? What is being fixed?
Please created a new and complete issue with all the context including a motivation about why it is needed, where it can be discussed.

[shimotmk]

@carolinan

Could you please show a video or code?

What does a complete issue look like?

It puts me under pressure.

[carolinan]

@shimotmk When you create a new issue in the Gutenberg repository, you can choose between different prefilled formats.
For example, you click the "New Issue" button and you can choose between Bug report or feature request.
Then a modal opens where there are different fields to fill in. Including a description of the bug and step by step instructions.

If it has been intentionally left out, why is it being changed?

If there was a decision in 2023 to not support fixed, only sticky, what has changed?
What were the blockers preventing fixed? Have all the blockers been removed?

A missing context that can be included in an issue can be for example:

"As a plugin or theme developer, I have a feature and design that needs to use fixed positioning.
I read that this was discussed in 2023 in (link to issue number), but it was not completed.
If I use this custom code, (code example) I can enable fixed positioning, but there are some bugs:
(description of bugs) I suggest solving this by... (solution)"

Reading the text in this PR, I don't understand what you mean by fixed position, because I did not know or remember that it was already partially implemented. And that type of information makes it easier to understand the pull request.

[carolinan]

@shimotmk I was not suggesting that you need to close the PR. I was trying to explain that for me to be able to determine if this is a fix that needs to be made, there needs to be more context and information.

[carolinan]

I am not trying to put pressure on you, I am trying to encourage you to include why something needs to be changed, not only that it needs to be changed.

A decision made in the past, like the one about the fixed positioning, may need to be revisited, but it is easier to do that if there is a summary.

[t-hamano]

If there was a decision in 2023 to not support fixed, only sticky, what has changed?
What were the blockers preventing fixed? Have all the blockers been removed?

This is the only reason I could find: #48948

Note that while fixed is treated as a valid value in code, it is not yet in use by any core blocks. To avoid folks thinking they can start using it by switching fixed to true, I've left it off this change for now.

It's hard to say for sure since the people working on this feature are not currently active, but it might still be experimental.