Skip to content

Admin colour scheme stylesheet overrides block editor styles #869

@Sephsekla

Description

@Sephsekla

Elements in the block editor are being affected by Altis colour scheme stylesheet, which leads to inconsistencies with frontend display. This most obviously affects heading tags within custom blocks, as the core heading block has its own default styles applied.

E.g. H1, H2 tags within custom blocks have their colour set to the --altis-dark-blue custom property unless explicitly styled otherwise.

This looks to be happening because admin-color-scheme.css is loaded after common.css and reset.css from Core. Not sure if this is by design or a WP bug 🤔

Steps to reproduce:

  1. Set up a site using Altis 19 (note that this issue doesn't occur on Altis 16, our previous version)
  2. Ensure that at least some blocks are loaded using the block API v2 (so the editor is not loaded in an iframe)
  3. Load the block editor
  4. Test custom blocks with heading tags (e.g. h1, h2)
  5. Elements will be affected by Altis colour scheme styles

Expected results

  • Element styles (e.g. headings, inputs) should be reset by reset.css from WP core
  • Colours of elements within the block editor blocklist should not be affected by the admin colour scheme

It may be that the best option here is to tweak some of these styles to be more specific, in order to exclude elements within the block list https://github.com/humanmade/altis-cms/blob/master/assets/admin-color-scheme.css#L719, alternatively we could look at trying to reorder the enqueueing of these stylesheets.

Acceptance criteria:

  • ...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions