Automattic / Automattic/jetpack

Widgets: `Stylesheet widget-conditions-css was not properly added` errors

Open
#21,434 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Extra Sidebar Widgets [Feature] Widget Visibility [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Steps to Reproduce

1. Open your local (docker) Jetpack development site
2. Navigate to Design → Appearance → Widgets
3. Add any block (e.g. Heading) to any widget area
4. Click on the block icon as if you were to transform the block into a different block
5. Hover over one of the blocks that will appear in the drop-down menu
6. Review the browser console for errors

Video with steps:
https://user-images.githubusercontent.com/25105483/137498756-d0b9852c-04c1-46b9-92f4-616f09398d9b.mp4

It is not clear where exactly the issue is coming from. We have tried to isolate the issue to my development environment, but it looks like it may be related to something else.

@jeherve: We may have to update the way we enqueue that file when in the widget block editor.

Discussion with additional troubleshooting details we tried: p1634296241055300-slack-CBG1CP4EN

### A clear and concise description of what you expected to happen.

There should be no errors displayed in the console.

### What actually happened

The following console errors were displayed:

```
Stylesheet widget-conditions-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).
```

```
Stylesheet milestone-admin-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).
```

### Other information

- related discussion where we tried to get to the root cause: p1634296241055300-slack-CBG1CP4EN
- related PR that made changes to the CSS file referred in the console error: https://github.com/Automattic/jetpack/pull/21302

### Operating System

MacOS; doesn't seem to be OS-related

### OS Version

doesn't seem to be OS-related

### Browser

Chrome/Chromium, Firefox, Other / Not applicable

### Browser Version(s)

doesn't seem to be browser-related

Contributor guide

Open the contributing guide

Research direction

Reproduce the error in the Jetpack widget block editor, then inspect the enqueue paths for modules/widget-visibility/widget-conditions/widget-conditions.min.css and modules/widgets/milestone/style-admin.css. Start by comparing how these styles are loaded in the widget editor, and verify completion when adding or transforming a widget block no longer produces either console error.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.