Block supports: add backdrop-filter with theme.json presets

[jobthomas]

What does this PR do?

Introduces backdrop-filter as a new block support, following the established pattern of the shadow support. Themes can now define backdrop-filter presets in theme.json and blocks can apply them via the style system.

Addresses @jasmussen's suggestion in #64989 to first focus on theme compatibility in #64989 (comment)

Addresses this

Why is this needed?

backdrop-filter is widely used for frosted-glass and blur effects in modern UI design, and is the only major CSS visual property not yet exposed through the block supports / theme.json preset system. Without this, theme authors have no standard way to register or apply backdrop-filter values across blocks.

Changes

PHP

• lib/block-supports/backdrop-filter.php (new): registers the backdropFilter block attribute and applies it as inline CSS on the frontend. Emits both backdrop-filter and -webkit-backdrop-filter for Safari ≤ 17.3 compatibility. Adds both properties to the safe_style_css allowlist so WordPress's CSS sanitiser doesn't strip them.
• lib/class-wp-theme-json-gutenberg.php: adds backdropFilter to PRESET_METADATA (generates --wp--preset--backdrop-filter--{slug} CSS custom properties), PROPERTIES_METADATA (maps backdrop-filter CSS property to the backdropFilter theme.json path), and VALID_SETTINGS (recognises presets and defaultPresets).
• lib/load.php: loads the new block support file.
• lib/theme.json: four default presets — light (blur(6px)), frost (blur(12px) saturate(150%)), heavy (blur(24px)), vibrancy (blur(16px) saturate(180%) brightness(1.05)).

Style engine (PHP)

• packages/style-engine/src/class-wp-style-engine.php: adds a backdropFilter style definition. The css_vars key uses the kebab-case string 'backdrop-filter' to correctly resolve var:preset|backdrop-filter|{slug} references.

Style engine (TypeScript)

• packages/style-engine/src/styles/backdrop-filter/index.ts (new): TypeScript style handler using generateRule.
• packages/style-engine/src/styles/index.ts: exports the new handler.

Schema & docs

• schemas/json/theme.json: settingsBackdropFilterProperties definition, added to settingsProperties allOf, settingsPropertyNames enum, styles backdropFilter property, stylesPropertyNames enum.
• docs/reference-guides/theme-json-reference/theme-json-living.md: auto-generated via npm run docs:build.

How to test

1. CSS custom properties are generated — open any frontend page and run in the browser console:

   getComputedStyle(document.documentElement).getPropertyValue('--wp--preset--backdrop-filter--frost')
   // expected: " blur(12px) saturate(150%)"

   Repeat for slugs light, heavy, and vibrancy.

2. Preset reference resolves — on a block with backdropFilter support, set style.backdropFilter to var:preset|backdrop-filter|frost and confirm the rendered inline style contains backdrop-filter:var(--wp--preset--backdrop-filter--frost).

3. Raw value passthrough — set style.backdropFilter to blur(8px) and confirm the rendered inline style is -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);.

4. safe_style_css allowlist — confirm neither backdrop-filter nor -webkit-backdrop-filter is stripped by WordPress's CSS sanitiser.

5. defaultPresets: false suppresses presets — add "settings": { "backdropFilter": { "defaultPresets": false } } to a child theme's theme.json and confirm the four default --wp--preset--backdrop-filter--* variables no longer appear in the page <style> block.

Notes

• Block-level support (adding "backdropFilter": true to individual block.json files and the JS editor panel for the preset picker) is a follow-up. This PR establishes the infrastructure: CSS vars, style engine resolution, and the PHP block support handler.
• The -webkit-backdrop-filter prefix is emitted for Safari ≤ 17.3 compatibility, matching the approach used by other properties in this codebase.

Follows

This follows the pattern established by the shadow block support (lib/block-supports/shadow.php).

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Style Engine.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[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: jobthomas <jobthomas@git.wordpress.org>

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