Contrib.social

Improve CSS injection into editor

Open on Drupal.org →
Created on 4 November 2023, about 1 year ago
Updated 15 June 2024, 7 months ago

Currently adding frontend styles to the editor can be a bit challenging. The usual techniques is, for example, add a client library holding some frontend style (usually duplicated) and then add that library to the configuration file through libraries-edit section at the [theme].gutenberg.yml configuration file.
Another option would be adding all css content to the styles section.

Ideally it should possible to just add css files to the styles section like this:

theme-support:
  styles:
    - css:
        css/base/variables.css: {}
        css/base/font.css: {}
        css/base/base.css: {}
    - css: |-
        .class {
          /* Add extra small style tweaks*/
        }

Paths used on the css section are relative to the active theme folder.

Also, it would be good to add extra class names to the editor's root container. For example, Olivero sets a lot of UI component classes beneath the .text-content class but this class is not available on the editor.
So it should be possible to add the extra class names like this:

theme-support:
  extraRootContainerClassNames: 'text-content some-extra-class'

By the way, WordPress does the CSS injection using a function but I guess we can do it via configuration file like described above.

✨ Feature request
Status

Fixed

Version

2.0

Component

Code

Created by

🇵🇹Portugal marcofernandes

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024