Add position CSS properties in safe_style_css filter

[andrewserong]

In the Gutenberg repo, a feature has been merged that allows container blocks (Group) to set a Position in order to support sticky/fixed blocks. The longer-term goal is also to allow relative/absolute positioning for creative layouts and designs.

In order to support this, this ticket proposes updating the safe_style_css filter to allow the following CSS properties related to position:

• position
• top
• right
• bottom
• left
• z-index (to ensure sticky / fixed blocks can sit above other blocks)

For further context, the Gutenberg PR that introduced the Position feature is: ​https://github.com/WordPress/gutenberg/pull/46142 — there will be a separate trac ticket for proposing backporting that feature to core.

This PR adds the following CSS properties to safe_style_css to support positioning:

• position
• top
• right
• bottom
• left
• z-index

This is a prerequisite for rolling out a feature from Gutenberg that allows container blocks (e.g. Group) to be set to a particular position (e.g. sticky or fixed). For more context, see the Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/46142

The goal with adding these CSS properties is to be able to support (especially in the longer term) sticky/fixed/relative/absolute positioning of blocks, a position offset (top/right/bottom/left) and which block sits ontop of another block (so that sticky/fixed blocks can sit above site or post content).

To test, ensure the tests pass, or if you're using the Docker environment for wordpress-develop, run the following locally: npm run test:php /var/www/tests/phpunit/tests/kses.php

Trac ticket: https://core.trac.wordpress.org/ticket/57504

@andrewserong Left one feedback

[hellofromTonya]

Adding the experimental gutenberg-merge keyword for tracking of code being copied from Gutenberg into Core.

Sorry the delay in reviewing this. It didn't have the things I'm tracking in Trac query for finding backports. Added the gutenberg-merge keyword.

[hellofromTonya]

​PR 3865 is ready for commit.

Self-assigning for commit.

[hellofromTonya]

In 55184:

KSES: Allow position-related CSS properties.

Adds support for the following CSS properties considered safe for inline CSS:

• position
• top
• right
• bottom
• left
• z-index

References:

• ​Gutenberg PR 46142.

Follow-up to [54117].

Props andrewserong, mukesh27.
Fixes #57504.

Committed via https://core.trac.wordpress.org/changeset/55184.

Wonderful, thank you! Now that this has landed, I'll put together the follow up changes for the rest of the position block support 👍

[audrasjb]

This would deserve a quick mention in the Misc change dev note.

[andrewserong]

This would deserve a quick mention in the Misc change dev note.

I've just been drafting a dev note for the new sticky position block support, so I've added a note about the change to safe_style_css in case that helps. The draft is here: ​https://github.com/WordPress/gutenberg/pull/46142#issuecomment-1429110220

[milana_cap]

Added to misc dev note which will link to editor dev note.

Draft: ​https://make.wordpress.org/core/?p=103089&preview=1&_ppp=36765ffd5f