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

[jobthomas]

Disclaimer: Most of the PR is written by Claude Code. I've reviewed it afterwards and focused mostly on testing that the code does what it suggests it does.

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.

[jobthomas]

Remaining CI failure: Core backport changelog check

The check fails because this PR modifies files in lib/ and packages/**/*.php that are monitored for Core sync. To pass it, a Gutenberg contributor with write access needs to add the "No Core Sync Required" label to this PR (bypasses the check until a wordpress-develop PR is ready).

Once a Core PR is created, the label can be removed and replaced with a backport-changelog/7.1/<core-pr-number>.md file in the format documented in backport-changelog/readme.md.

All other checks are now passing.