Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 3 months ago

#57504 closed enhancement (fixed)

Add position CSS properties in safe_style_css filter

Reported by: andrewserong's profile andrewserong Owned by: hellofromtonya's profile hellofromTonya
Milestone: 6.2 Priority: normal
Severity: normal Version:
Component: Formatting Keywords: has-patch has-unit-tests gutenberg-merge commit needs-dev-note
Focuses: Cc:

Description

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.

Change History (12)

This ticket was mentioned in PR #3865 on WordPress/wordpress-develop by @andrewserong.


4 months ago
#1

  • Keywords has-patch has-unit-tests added

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

@mukesh27 commented on PR #3865:


4 months ago
#2

@andrewserong Left one feedback

#3 @Mamaduka
4 months ago

  • Milestone changed from Awaiting Review to 6.2

#4 @hellofromTonya
4 months ago

  • Keywords gutenberg-merge added
  • Version trunk deleted

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

@hellofromTonya commented on PR #3865:


4 months ago
#5

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.

#6 @hellofromTonya
4 months ago

  • Keywords commit added
  • Owner set to hellofromTonya
  • Status changed from new to reviewing

PR 3865 is ready for commit.

Self-assigning for commit.

#7 @hellofromTonya
4 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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:

Follow-up to [54117].

Props andrewserong, mukesh27.
Fixes #57504.

@andrewserong commented on PR #3865:


4 months ago
#9

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

#10 @audrasjb
4 months ago

  • Keywords needs-dev-note added

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

#11 @andrewserong
4 months ago

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

#12 @milana_cap
3 months ago

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

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

Note: See TracTickets for help on using tickets.