humanmade / altis-cms

CMS Module for Altis
https://www.altis-dxp.com/resources/docs/core/
46 stars 5 forks source link

Admin colour scheme stylesheet overrides block editor styles #869

Open Sephsekla opened 1 week ago

Sephsekla commented 1 week ago

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 :thinking:

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

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:

Sephsekla commented 1 week ago

@joehoyle FYI as discussed earlier. Aware it's a little niche as bugs go.