WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 weeks ago

#46435 closed defect (bug) (reported-upstream)

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

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

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 (3)

#1 @joyously
2 years 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
2 years 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

#3 @sabernhardt
2 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Closing as reported-upstream with PR 13325, though resolving as fixed should be appropriate here, too.

Note: See TracTickets for help on using tickets.