humanmade / humanmade/altis-cms

Admin colour scheme stylesheet overrides block editor styles

Open
#869 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
46
Forks
4
Avg merge
14h 31m
Merged PRs (30d)
13

Description

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**

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

- [ ] ...

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.