WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 8 months ago

#46435 new defect (bug)

Injected editor-styles invalidate :root declarations thus breaking custom properties

Reported by: mor10 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.1
Component: Editor Keywords:
Focuses: Cc:
PR Number:

Description

Duplicate of Gutenberg issue 14297 (https://github.com/WordPress/gutenberg/issues/14297) and closely related to closed (unresolved) Gutenberg issue 11955 (https://github.com/WordPress/gutenberg/issues/11955)

When a theme uses CSS custom properties (https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (aka "CSS variables") and declare those properties using the :root pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:root) in its editor styles, the injection script invalidates those declarations by outputting .editor-styles-wrapper :root.

The :root pseudo-class is a core feature of CSS and heavily used with CSS custom properties. The block editor rewriting this rule is effectively going against how CSS is meant to operate. CSS custom properties will see significantly increased use as browsers now provide wide-spread support (https://caniuse.com/#feat=css-variables).

To Reproduce

  1. In editor styles document, declare CSS custom properties with :root pseudo-class.
  2. Use above custom properties in another rule.
  3. Add editor style using add_editor_style().
  4. Run in browser.
  5. Observe the declared custom properties not kicking in.
  6. Inspect code and find the :root pseudo-class has the .editor-styles-wrapper class prepended.

Expected behavior

:root pseudo-class should be preserved without alterations.

Additional context

See WP Rig PR 332 (https://github.com/wprig/wprig/pull/332) and issue 361 (https://github.com/wprig/wprig/issues/361) for further discussion and original discovery of the issue by @benoitchantre.

Change History (2)

#1 @joyously
8 months ago

Ha! I knew there was a reason I didn't use the provided editor style function.
My theme uses CSS custom properties, but I load my editor style sheet myself.

#2 @mor10
8 months ago

Looks like this has been fixed in a patch in Gutenberg and will land in WP 5.2: https://github.com/WordPress/gutenberg/pull/13325

Note: See TracTickets for help on using tickets.