Block element background colour affects whole page, not just specific element

[thatisrich]

Expected Behavior

When editing an element's styling, the changes should be scoped to that specific element only.

Actual Behavior

When selecting a background colour on an element, the admin Styles Editor page also inherits the colour change.

Issue may be linked to the collapse menu issue.

Step-by-step reproduction instructions

1. Go to 'Appearance > Styles Editor'
2. Click on 'Blocks > List'
3. Under the 'Color' heading, select a background colour
4. The background of the entire page will now use that colour
5. NOTE - At some screen sizes the elements on the page will hide the background colour change

Screenshots, screen recordings, code snippets

A screen recording of this can be found here.

It looks like the page injected CSS is not scoped to the editor panel, but to the entire page (which is to be expected as it's how it would work on the front end). An example of this can be seen here, where the ol, ul styling change is being applied to the layout's structural elements.

System Information

• Device: iMac
• Operating System: Sonoma 14.5
• Browser: Arc 1.47.1
• WordPress version: 6.5.4
• PHP version: 8.0.30

[g-elwell]

Thanks for the report! I can confirm this is related to #55, both issues will be avoided when we implement #62 but will need to be addressed in future when we re-add the visual preview